3年想要成為月薪30K的Web前端技術專家，你必須掌握這些技能

優秀的Web前端工程師具備編寫任何一個網際網路系統的前端頁面、互動程式碼的能力。根據對100家網際網路名企對Web開發工程師的招聘要求分。

企業要求主要有兩部分，一個是核心要求，一個是輔助要求，核心要求包括：語言技術：JS基礎和核心/HTML5/CSS3、框架技術：JQuery、AJAX、Bootstrap、AngularJS、通訊協議技術：HTTP協議、服務端開發技術、互動技術：UI互動設計、客戶端技術：微信開發技術、html5、JS、SDK開發、Android、iOS、Web App開發技術。輔助要求有1-3年Web工作經驗(近80%的企業)、學歷及相關專業、文件規範寫作能力、團隊合作能力、責任心。

從事IT工作 6年，為你分享，如果你想成長為月薪30K的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前端中的一些建議和方法。零基礎對於程式碼的學習記憶量很重要，正所謂讀書破萬卷，下筆如有神。寫程式碼也是一樣，多寫、多練、多憶，好過再多的理論。知道了學習的方法，等於掌握了成功的秘訣，但這還不足以萬事具備，新手學習，最重要的還需要制定一條完整的學習線路。這樣學習起來效率是大大地好。

對web前端這門技術感興趣的小夥伴可以加入到我們的學習圈來，程式設計工作第六個年頭了，與大家分享一些學習方法，實戰開發需要注意的細節。784783012 扣扣裙。從零基礎開始怎麼樣學好前端。看看前輩們是如何在程式設計的世界裡傲然前行！不停更新最新的教程和學習方法（web前端系統學習路線，詳細的前端專案實戰教學影片，PDF），有想學習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 資料互動的專案；

– 能夠獨立完成企業網站從前臺到後臺的基本開發工作。