前端自學路線圖之前端自學大綱

前端自學路線圖如下，前端自學需要耗費的時間和精力不比其他編程的少，近些年企業對前端人才的需求在不斷增加，怎麼還會有人說自學前端找不到工作？這是出於這樣的原因，黑馬程序員給想要自學前端的小夥伴整理一整套自學路線圖，從自學HTML5到React.Js的項目實戰自學只需要看這套前端自學路線圖足矣！

在網上看到有很多的前端自學路線圖，但大部分的前端自學路線圖是很零碎的，沒有系統的前端自學目標和重點知識，也不知道自學到什麼程度可以找工作。黑馬程序員最新版的前端自學路線圖是根據主流企業的前端要求不斷更新的，黑馬程序員視頻庫能爲你提供各個階段的自學教程。

目前，企業對於前端人才最核心的需求並不是對單純掌握某種應用型技術，而是希望前端開發者能夠通過自己的經驗幫助企業解決項目中隨時出現的問題。這套自學路線圖的出現正是爲了解決這樣的困局，給自學一份出路。

前端自學路線圖

第一階段：前端自學–HTML5 + CSS3

此階段的學習目標：

能夠獨立把美工提供的PSD效果圖還原成PC端靜態代碼頁面。

此階段的市場價值：

具備PC端靜態網頁開發的能力，還達不到企業用人標準。爲後面學習網頁編程階段打下堅實基礎。

此階段的重點知識：

• 掌握 HTML5 常用標籤；
• 掌握 CSS 語法及使用技巧；
• 掌握CSS3新增選擇器；
• 掌握CSS3新增樣式屬性；
• 掌握 DIV+CSS 佈局方式；
• 掌握常見網頁佈局技巧；
• 掌握企業級、電商級網頁開發基本的流程、規範；
• 掌握語義化、模塊化、兼容性的PC端網頁開發；
• 掌握 Photoshop 切圖以及插件切圖；
• 熟練使用調試工具進行頁面調試；
• 掌握基本的動畫效果。

第二階段：前端自學–移動Web網頁開發

此階段的學習目標：

能夠獨立開發移動端頁面，並適配不同移動端終端。

此階段的市場價值：

具備移動端頁面開發，但是還不能達到企業的用人標準。爲後面學習網頁編程階段打下堅實基礎。

此階段的重點知識：

• 掌握CSS32D、3D變換、動畫效果；
• 瞭解移動端屏幕、移動端瀏覽器、操作系統的不同；
• 掌握主流移動端調試方法；
• 掌握常用移動端適配方案（流式佈局、flex佈局、rem適配）；
• 掌握主流移動端頁面開發技術選型與解決方案；
• 掌握CSS預處理器less的使用；
• 掌握常用移動端框架使用方法；
• 掌握常見移動端頁面開發流程與規範；
• 掌握響應式佈局開發；
• 掌握Bootstrap開發響應式頁面；
• 掌握適配不同終端的移動端頁面開發。

第三階段：前端自學–JavaScript網頁編程

此階段的學習目標：

能夠使用JavaScript/jQuery開發網頁特效/網頁應用。

此階段的市場價值：

具備網頁開發的基礎能力(網頁佈局和網頁應用開發)，但是無法和服務器交互，還達不到企業用人的標準。

此階段的重點知識：

• 掌握JavaScript基本語法；
• 掌握常見JavaScript算法；
• 掌握DOM的各種操作；
• 熟練使用面向對象思想進行DOM編程；
• 掌握JavaScript的高級語法；
• 熟練使用jQuery操作DOM；
• 熟練使用和編寫jQuery插件；
• 獨立完成電商網站的頁面搭建（包括HTML結構、CSS樣式、JavaScript特效）；
• 掌握應對業務編程的能力；
• 掌握JavaScript常見兼容性方案；
• 掌握團隊合作開發流程。

第四階段：前端自學–Node.js與AJAX

此階段的學習目標：

能夠具備開發具有簡單交互能力的網站，能夠使用源代碼管理工具。

此階段的市場價值：

具備基本的網站開發能力，滿足企業對初級前端開發的要求。

此階段的重點知識：

• 能夠建立客戶端服務器交互模型，熟悉網絡通信相關概念；
• 能夠使用Node.js進行Web服務端開發；
• 能夠掌握JavaScript異步編程模型；
• 能夠掌握JavaScript模塊化編程方式；
• 能夠使用Node.js操作MySQL數據庫；
• 能夠理解HTTP協議；
• 熟悉原生Ajax請求流程與細節，並掌握常見跨域技巧；
• 能夠基於jQuery的Ajax相關API熟練開發常見的前端功能；
• 能夠獨立開發基於後臺接口的動態網站、Ajax數據交互的項目；
• 能夠獨立完成企業網站從前臺到後臺的基本開發工作。

第五階段：前端自學–Vue.js項目實戰

此階段的學習目標：

• 使用Vue技術棧開發企業級項目
• 掌握前後端分離的開發方式
• 掌握項目的打包和發佈

此階段的市場價值：

理解Vue的開發理念、內部運行原理，梳理使用Vue組件開發常見功能。滿足前端開發行業中的常見需求。

此階段的重點知識：

• 掌握使用Vue技術棧進行項目開發；
• 掌握源代碼管理工具的使用；
• 熟練掌握前後端分離開發模式；
• 掌握使用主流框架開發門戶網站、管理系統、移動Web等客戶端；
• 掌握Webpack項目構建配置流程；
• 掌握Web項目的部署與發佈模式；
• 掌握常見網站業務模塊開發。
• 掌握使用echarts/d3.js進行大數據可視化交互開發；

第六階段：前端自學–微信小程序

此階段的學習目標：

• 掌握整個小程序開發和傳統web開發的區別；
• 掌握企業小程序開發、發佈和上線的整體流程；
• 擁有解決和實現市場上主流小程序的功能需求。

此階段的市場價值：

掌握前端行業的小程序發展趨勢，熟悉小程序項目的整體運作流程，並且具備獨立開發企業級小程序的能力，既可以使用原生小程序也可以使用小程序框架來完成項目。

此階段的重點知識：

• 掌握小程序的開發基礎；
• 能夠獨立開發小程序項目；
• 掌握小程序的部署與發佈；
• 掌握微信支付的使用；
• 掌握小程序開發框架的使用；
• 掌握第三方AI平臺的使用。

第七階段：前端自學–React.js項目實戰

此階段的學習目標：

具備使用React開發能力，配合React內部原理，增強解決項目中複雜業務問題的能力，從項目搭建到項目開發再到項目部署上線，讓學員可以完成常見企業級項目的開發。

此階段的市場價值：

理解React的開發理念、內部運行原理，熟練運用React組件完成項目常見功能開發，配合常用組件庫解決項目中的一些共性問題，滿足前端開發行業中的常見需求。

此階段的重點知識：

• 理解React的開發理念；
• 掌握React的基本使用；
• 理解React的內部原理；
• 使用React及其常用組件庫進行項目開發；
• 使用React封裝項目中用到組件實現複用；
• 掌握React項目中常見問題的解決方案；
• 掌握React-Redux進行狀態管理；
• 掌握聲明式編程的思想；
• 掌握組件化開發的思想；
• 掌握React項目優化、部署。

前端自學經典資源

不可錯過的自學前端經典資源（點擊進入）