優秀的Web前端工程師具備編寫任何一個網際網路系統的前端頁面、交互代碼的能力。根據對100家網際網路名企對Web開發工程師的招聘要求分析，企業要求主要有兩部分，一個是核心要求，一個是輔助要求，核心要求包括：語言技術：JS基礎和核心/HTML5/CSS3、框架技術：JQuery、AJAX、Bootstrap、AngularJS、通訊協議技術：HTTP協議、服務端開發技術、交互技術：UI互動設計、客戶端技術：微信開發技術、html5、JS、SDK開發、Android、iOS、Web App開發技術。輔助要求有1-3年Web工作經驗(近80%的企業)、學歷及相關專業、文檔規範寫作能力、團隊合作能力、責任心。如果你想成長為月薪50K的Web前端技術專家，一下這些技能你必須掌握，下面和千鋒廣州小編一起來看看吧！
Web前端的學習路線：
第一階段——HTML的學習
超文本標記語言(HyperText Mark-up Language 簡稱HTML)是一個網頁的骨架，無論是靜態網頁還是動態網頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染後呈現給用戶。因 此，我們必須掌握HTML的基本結構和常用標記及屬性。
HTML 的學習是一個記憶和理解的過程，在學習過程中可以藉助Dreamweaver的「拆分」視圖輔助學習。在「設計」視圖中看效果，在「代碼」視圖中學本質， 將各種視圖的優勢發揮到極致，這種對照學習的方法彌補了單純識記HTML標籤和屬性的枯燥乏味，想必對各位初學的小盆友們來說必定是極好的!
在學習了HTML之後，我們只是掌握了各種「原材料」的製作方法，要想蓋一幢樓房就還需要把這些「原材料」按照我們設計的方案組合布局在一起並進行一些樣式的美化。
於是進入第二個階段——CSS的學習
CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言其樣式是可以復用的，這樣就極大地提高了我們開發的速度，降低了維護的成本。
同時CSS中的盒子模型、相對布局、絕對布局等能夠實現對網頁中各對象的位置排版進行像素級的精確控制。通過此階段的學習，我們就可以順利完成「一幢樓房」的建設。
「樓房」建設完成之後，我們可以交給用戶使用，但是如果想讓用戶獲得更佳的體驗，我們還可以對「樓房」進行更深一步的「裝修」，讓它看起來更「豪華」一些。
為了完成這個任務，我們進入第三個階段——JavaScript的學習
JavaScript是一種在客戶端廣泛使用的腳步語言，在JavaScript當中為我們提供了一些內置函數、對象和DOM操作，藉助這些內容我們可以來實現一些客戶端的特效、驗證、交互等，使我們的頁面看起來不那麼呆板，屌絲瞬間逆襲高富帥!有麼有?
此時，也許你還沉浸在JavaScript給你帶來的驚喜之中，但你的項目經理卻突然對你大吼道
「這個效果在××瀏覽器下不兼容，重新搞……」
「不兼容?」瞬間石化了有木有?
「那可是花了我一個晚上寫了幾百行代碼搞定的啊，吐血了都!」
JavaScript的兼容性和複雜性有時候的確讓我們頭疼，還好有「大神」幫我們做了封裝。
接下來我們進入第四個階段——jQUery的學習
jQuery 是一個免費、開源的輕量級的JavaScript庫，並且兼容各種瀏覽器(jQuery2.0及後續版本放棄了對IE6/7/8瀏覽器的支持)，同時現在有很多基於jQuery的插件可供選擇，這樣在我們實現一些豐富的動態效果時更方便快捷，大大節省了我們開發的時間，提高了開發速度，這也充分體現了其 write less,do more的核心宗旨。這個Feel倍兒爽!有麼有?
「豪華大樓」至此拔地而起，但是每天這樣日復一日，年復一年的蓋樓，好繁瑣!能不能將大樓裡面每一個單獨部件模塊化，當需要蓋樓時就像堆積木一樣組合在一起，這樣豈不是爽歪歪?可以實現嗎?答案是肯定的。
這種思想在Web前端開發中也是適合的，於是乎就出現了各種前端框架，在這裡推薦給大家的是Bootstrap。
Bootstrap是Twitter推出的一個開源的用於前端開發的工具包，是一個CSS/HTML框架，並且支持響應式布局。一經推出後頗受歡迎，一直是GitHub上的熱門開源項目。
在項目開發過程中，我們可以藉助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁面布局和樣式設置，然後再有針對性的微調樣式，這樣基於框架進行開發大大縮短了開發周期。站在巨人的肩膀上就是爽!
Web前端的學習建議
最後給大家聊聊在學習Web前端中的一些建議和方法。零基礎對於代碼的學習記憶量很重要，正所謂讀書破萬卷，下筆如有神。寫代碼也是一樣，多寫、多練、多憶，好過再多的理論。知道了學習的方法，等於掌握了成功的秘訣，但這還不足以萬事具備，新手學習，最重要的還需要制定一條完整的學習線路。這樣學習起來效率是大大地好。
學習前端開發HTML5新手大致要分為6大階段：
第一階段 前端頁面重構
第二階段 JavaScript高級程序設計
第三階段 PC端全棧項目開發
第四階段 移動端項目開發
第五階段 混合（Hybrid,ReactNative）開發
第六階段 WebApp後端系統開發
懶人目錄：
第一個階段：HTML5+CSS3
第二個階段：Web網頁開發
第三個階段：JavaScript 網頁編程
第四個階段：Node.js 與 AJAX
第一個階段：HTML5+CSS3：最新版Html5+Css3由淺入深教程
HTML5：瀏覽器與瀏覽器內核、語法及使用、常用標籤、語義化、表單元素、HTML5 新增標籤
CSS3：基本語法規範、常用的基本選擇器用法與技巧、複合選擇器使用、數值與單位、文字文本樣式、CSS盒子模型、CSS背景技巧、圓角、陰影、過渡等新屬性、定位和浮動、偽類和偽元素、chrome調試工具、CSS高級技巧（精靈圖、滑動門、CSS三角等）、CSS常見布局技巧大全、網頁開發規範以及流程、CSS企業級網頁開發、網頁開發常見問題以及解決方案、CSS常見兼容性問題以及解決方案
電商項目：Photoshop 切圖、cutterman插件一鍵切圖、代碼組織原則、項目開發實戰流程、電商類複雜頁面布局規範、CSS初始化技術選擇、CSS字體圖標使用、布局技巧大全、完整的多頁面開發、網頁語義化設計、CSS頁面模塊化開發、複合選擇器的應用、複雜網頁結構排版、基本變換特效、電商類常見布局問題解決方案
本階段學習關鍵詞：
HTML5、CSS3、語義化標籤、CSS3新屬性、盒子模型、定位與浮動、CSS 調試技巧、PS 切圖、網頁特效、靜態頁面開發、PSD文件還原網頁文件。
本階段需要掌握的能力：
了解常用瀏覽器和瀏覽器內核；
了解語義化的概念；
掌握 HTML 語法及使用技巧；
掌握 CSS 語法及使用技巧；
掌握 DIV+CSS 布局方式；
掌握常見網頁布局模式；
掌握 HTML5 常用標籤；
掌握 Photoshop 切圖以及插件切圖；
能夠熟練使用開發人員工具進行頁面調試；
能夠完成基本的動畫效果；
能夠根據PSD文件獨立完成靜態頁面的開發工作；
能夠使用CSS3新屬性美化修飾網頁。
第二階段：移動web網頁開發：移動web開發6天完整
H5C3進階：新布局標籤、多媒體標籤、新增表單標籤、新增表單屬性、2D、3D 變換、animation 動畫、炫酷頁面開發
Felx伸縮布局：傳統布局的局限性、Flex布局優勢、盒子父級常見屬性設置、盒子子級常見屬性設置、攜程網 Flex 移動端頁面開發
移動端開發：移動端螢幕介紹、移動端瀏覽器介紹、移動端作業系統介紹、真機調試、viewport 視口、rem 單位使用、移動端主流適配解決方案、常見移動端樣式兼容方案、預處理器 less、媒體查詢
本階段學習關鍵詞：
HTML5 標籤、CSS3 動畫、移動端適配、真機調試、rem、flex 布局、媒體查詢、Bootstrap、Viewport、移動端調試
本階段需要掌握的能力如下：
掌握 HTML5 新布局標籤、多媒體標籤；
掌握 CSS3 2D、3D 變換、動畫效果；
了解移動端螢幕、移動端瀏覽器、作業系統的不同；
掌握常用移動端調試方法；
掌握常用移動端適配方法；
掌握 CSS 預處理器 less 的使用；
掌握常用移動端框架使用方法；
掌握常見移動端頁面開發；
掌握響應式布局開發；
掌握 Bootstrap 開發響應式頁面；
掌握適配不同終端的網頁開發技術選型。
第三個階段：JavaScript網頁編程：前端-Javascript基礎視頻教程-video
JavaScript 基礎：基本語法、常用數據結構、編碼規範約定、內置對象常用方法、常見 JavaScript 算法大全、對象的創建方式和 this 講解、構造函數
Web APIs編程：BOM 操作大全、DOM 操作大全、網頁特效大全、事件處理流程、瀏覽器兼容性解決方案、封裝動畫函數
JavaScript高級：面向對象思想、JavaScript 中的對象深入理解、JSON 使用、閉包原理以及使用場景、原型以及原型鏈深入剖析、作用域鏈深入分析、函數的調用方式及 this 指向總結、正則表達式、面向對象理論與實踐、ECMAScript 2015 (ES6) 新語法
jQuery快速開發：jQuery 的優勢、jQuery 選擇器、jQuery 中的動畫、鏈式編程和隱式疊代、插件使用和製作、常見網頁特效製作大全、團隊協作開發流程
本階段關鍵詞如下：
網頁編程、JavaScript 高級、面向對象、閉包、原型、原型鏈、ES6、正則表達式、DOM、BOM、動畫函數、jQuery、jQuery 插件
本階段所需掌握能力如下：
– 能夠掌握 JavaScript 基本語法；
– 掌握常見 JavaScript 算法；
– 掌握 DOM 的各種操作；
– 熟練使用面向對象思想進行 DOM 編程；
– 掌握 JavaScript 的高級語法；
– 熟練使用 jQuery 操作 DOM；
– 熟練使用和編寫 jQuery 插件；
– 獨立完成電商網站的頁面搭建（包括 HTML 結構、CSS 樣式、JavaScript 特效）；
– 掌握應對業務編程的能力；
– 掌握 JavaScript 常見兼容性方案；
– 掌握團隊合作開發流程。
第四個階段：Node.js 與 AJAX：Nodejs教程精講
Node.js基礎：環境安裝、REPL 運行環境、Node 中的 JavaScript、模塊系統、模塊加載機制、模塊與包、NPM 常用命令、文件操作
異步編程：環境安裝、REPL 運行環境、Node 中的 JavaScript、模塊系統、模塊加載機制、模塊與包、NPM 常用命令、文件操作
Web開發：回調函數、Promise 對象、Generator 生成器函數、Async 函數、常用異步流程控制庫
Express：靜態網站與動態網站、使用 http 模塊創建 Web 服務、請求響應原理、HTTP 協議、處理頁面請求、處理表單提交、Cookie 與 Session、MySQL 資料庫、常用 SQL 語句、使用 Node 操作 MySQL 資料庫、博客項目
接口開發：安裝與初始化、路由系統、靜態資源處理、中間件使用及原理、常用第三方中間件、模板引擎、錯誤處理、調試 Express 應用、常用 API
前端模塊化：前後端分離架構模式、RESTFul API 設計、接口測試工具
AJAX編程：模塊化開發基本概念、模塊化演變過程分析、設計規範、Require.js、同步與異步概念、原生 AJAX、jQuery 的 AJAX 相關 API 使用、底層原理分析、緩存問題及解決方案、跨域請求及解決方案、前端模板引擎
本階段學習關鍵詞：
Node.js、CommonJS、JavaScript 模塊化、異步編程、服務端、MySQL、HTTP 協議、Express、Koa、Cookie、Session、中間件、分頁、註冊登錄、模塊化、CMS 系統開發、RESTful、Ajax、SQL
本階段所需掌握技能：
– 能夠建立客戶端伺服器交互模型，熟悉網絡通信相關概念；
– 能夠使用 Node.js 進行 Web 服務端開發；
– 能夠掌握 JavaScript 異步編程模型；
– 能夠掌握 JavaScript 模塊化編程方式；
– 能夠使用 Node.js 操作 MySQL 資料庫；
– 能夠理解 HTTP 協議；
– 熟悉原生 Ajax 請求流程與細節，並掌握常見跨域技巧；
– 能夠基於 jQuery 的 Ajax 相關 API 熟練開發常見的前端功能；
– 能夠獨立開發基於後台接口的動態網站、Ajax 數據交互的項目；
– 能夠獨立完成企業網站從前台到後台的基本開發工作。