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

前端自學路線圖以下，前端自學須要耗費的時間和精力不比其餘編程的少，近些年企業對前端人才的需求在不斷增長，怎麼還會有人說自學前端找不到工做？這是出於這樣的緣由，黑馬程序員給想要自學前端的小夥伴整理一整套自學路線圖，從自學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項目優化、部署。