前端學習路線

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。轉載請註明出處：https://blog.csdn.net/weixin_44222492/article/details/95676818 。

前端綜合體系

鏈接按ctrl打開可使用新窗口打開
若鏈接無法打開，則可以通過右鍵選擇在新標籤頁中打開

1. 知識技能類

• 前端技能彙總

2. 學習路線類

• 前端學習路線1 —（阿里雲大學）

• 前端學習路線2 —（黑馬程序員）

• 前端學習路線3 —（尚硅谷） —課程大綱

• 前端學習路線4 —（尚學堂） —課程大綱

• 前端學習路線5 —（千峯）—（學習路線圖）

• 前端學習路線6 —（極客學院）

• 前端學習路線7 —（穀粒學院）

• 前端學習路線8 —（珠峯培訓）

3. 系列教程

3.1 黑馬程序員系列

Step 01 初級階段

• No. 1. 開發工具介紹及HTML+CSS入門

• No. 2. HTML+CSS+BootsStrap基礎教程 +項目實戰

（1）HTML基礎

HTML基礎	課程網址
HTML基礎1	https://www.bilibili.com/video/av7916583
HTML基礎2	https://www.bilibili.com/video/av7916588
HTML基礎3	https://www.bilibili.com/video/av7916589

（2）CSS基礎

CSS基礎	課程網址
CSS基礎基礎1	https://www.bilibili.com/video/av7916591
CSS基礎基礎2	https://www.bilibili.com/video/av7917203
CSS基礎基礎3	https://www.bilibili.com/video/av7917614

（3）HTML5介紹
（4）bootstrap基礎
（5）HTML+CSS項目實戰之梅蘭商城
（6）HTML+CSS項目實戰之黑馬程序員移動web開發

• No. 3. HTML5+CSS3教程

（1）最全面的Html5+css3教程
（2）HTML5+CSS3教程
（2）HTML5+CSS3+京東項目實戰

HTML5+CSS3+京東項目實戰	課程地址
黑馬程序員官網視頻下載	https://yun.itheima.com/course/267.html
從零開始玩轉前端與移動開發（第一階段HTML5）	https://www.bilibili.com/video/av15241731
從零開始玩轉前端與移動開發（第二階段CSS3）	https://www.bilibili.com/video/av15269197
從零開始玩轉前端與移動開發（第三階段京東項目實戰）	https://www.bilibili.com/video/av15349705

• No. 4. Javascript教程

（1）JavaScript從零基礎入門到精通
（2）Javascript基礎加強
（3）JavaScript核心 DOM BOM操作
（3）JavaScript DOM+BOM（知識精講+貪吃蛇等項目案例）
（4）Javascript高級系列教程

Javascript高級系列教程	課程地址
JS高級系列視頻教程1	https://www.bilibili.com/video/av8029730
JS高級系列視頻教程2	https://www.bilibili.com/video/av8030536
JS高級系列視頻教程3	https://www.bilibili.com/video/av8030827
JS高級系列視頻教程4	https://www.bilibili.com/video/av8045992
JS高級系列視頻教程5	https://www.bilibili.com/video/av8046034

Step 02 中級課程

• No. 5. Jquery教程

（1）從Javascript DOM到Jquery

• WEB APIs由淺入深掌握WEB特效開發—（黑馬官網視頻下載）
• WEB APIs由淺入深掌握WEB特效開發

（2）JQuery基礎教程
（3）JQuery進階實用教程

• jquery進階實用教程 —（黑馬官網下載）
• jquery進階實用教程

（4）jQuery網頁開發案例精講+bootstrap

• jQuery網頁開發案例精講—（黑馬官網視頻下載）
• jQuery網頁開發案例精講

（5）利用jQuery+Ajax+HighCharts打造項目圖表

• No. 6. 移動WEB開發

（1）移動web基礎教程
（2）移動web進階教程
（3）Web前端移動開發項目實戰之樂淘移動商城項目

• No. 7.版本控制工具

（1）玩轉Github開發
（2）SVN視頻教程

• No. 8.後臺管理技術

（1）Nodejs教程精講
（2）NodeJS精講課
（3）4天精通NodeJS教程
（4）2018全新php教程PHP零基礎通關寶典
（5）PHP後臺開發教程
（6）php進階教程之數據庫編程

• No. 9. 前後端交互

（1）Ajax從零入門到精通

Ajax從零入門到精通	課程地址
黑馬程序員官網視頻下載	https://yun.itheima.com/course/283.html
Ajax從零入門到精通（part1）	https://www.bilibili.com/video/av15657082
Ajax從零入門到精通（part 2 完結	https://www.bilibili.com/video/av15866060

（3）2018版Ajax教程精講

Step 03 高級課程

• No. 10. ReactJs精品教程

• No. 11. Vue

（1）2018年Vue.js深入淺出教程
（2）2小時玩轉Vue單元測試
（3）0基礎5天成爲微信小程序運營大咖

• 0基礎5天成爲微信小程序運營大咖 —（黑馬官方視頻下載）
• 0基礎5天成爲微信小程序運營大咖
  （4）一天教你打造企業級微信小程序
• 一天教你打造企業級微信小程序 —（黑馬官方視頻下載）
• 28節課快速玩轉微信小程序

3.2 尚硅谷

Step 01 前端核心基礎

• No. 1. HTML +CSS核心知識

（1）HTML & CSS 核心基礎教程
（2）css2.1
（3）IDEA視頻教程

• No. 2. JavaScript基礎

（1）JavaScript從入門到精通
（2）JavaScript DOM編程視頻教程

Step02. 前端高級階段

• No. 3. HTML5+CSS3

（1）HTML5核心技術
（2）HTML5實戰
（3）HTML5視頻_CSS3
（4）前端_Less

• No. 4. JQuery

（1）JQuery視頻教程
（2）鋒利的jQuery—配套書籍《鋒利的JQuery》
（3）BootStrap
（4）移動端類JQuery庫Zepto

• No. 5. 版本控制工具

（1）尚硅谷_Git&GitHub視頻
（2）工程師第1步，2小時玩轉SVN
（3）SVN高級視頻教程

Step03. 後臺技術階段

• No. 6. 服務器端

（1）NodeJS核心技術視頻

• No. 7. 數據庫

（1）MongoDB夯實基礎視頻
（2）MySQL核心技術
（3）MySQL高級視頻
（4）ORACLE、SQL、PLSQL 視頻教程

Step04. 前後端交互階段

• No. 8. Ajax

（1）Ajax視頻教程

Step05. JavaScript高級階段

• No. 9. JavaScript高級

（1）JavaScript高級視頻教程

• No. 10. 模塊化

（1）JS模塊化說明視頻

• No. 11. ECMAScript

（1）ECMAScript視頻

• No. 12. 構建工具

（1）自動化構建工具Grunt
（2）自動化構建工具Gulp
（3）自動化構建工具webpack

Step06. 前端新型Web框架階段

• No. 13. AngularJS

（1）AngularJS視頻

• No. 14. React

（1）React視頻

• No. 15. Vue

（1）Vue核心技術

• 官網視頻下載

Step07. 跨平臺開發階段

• No. 16. 微信小程序及公衆號

（1）微信小程序項目實戰
（2）mpVue視頻教程

• 官網視頻下載

（2）微信公衆號視頻

Step08. 項目實例

（1）硅谷外賣

• 官網資料下載
• 在線視頻播放

（2）穀粒音樂
（3）硅谷直聘

• 官網資料下載
• 在線視頻播放

（4）微信小程序
（5）微信公衆號
（6）穀粒後臺

3.3 尚學堂系列

1. 網頁開發和設計教程全解

2. 前端全套課程

3. 全套IDEA視頻教程

4. UI設計

5. 數據庫開發全套精講視頻課程

6. PHP基礎與Ajax網絡請求

7. 微信小程序快速開發

3.4 千峯教育系列

前端900集

前端基礎階段

• No. 1. HTML+CSS核心知識

（1） Web前端小白入門必看預習視頻
（2）2019千鋒Web前端入門教程+學習資料
（3） 2019Web前端從入門到精通（HTML+CSS全套）
（4）Html和CSS基礎教程
（5） 頁面佈局經典案例視頻

• No. 2. JavaScript基礎

（1）JavaScript基礎教程
（2）JavaScript全套視頻~全套資料
（3）JavaScript從入門到精通（小白必看！）
（4）JavaScript經典案例視頻

Step02. 前端高級階段

• No. 3. HTML5+CSS3

（1）html5第一階段教程：課程體系解讀
（2）h5教程第二階段：微案例講解

• No. 4. JQuery

（1）jQuery全套實戰教程
（2）數據可視化

• No. 5. 版本控制工具

（1）一天學會SVN視頻教程
（2）一天學會Git視頻教程

Step03. 後臺技術階段

• No. 6. 服務器端

（1）2019最新nodeJS從入門到大神
（2）node.js從入門到精通
（3） 2019GraphQL入門到精通

• No. 7. PHP

（1）PHP從入門到精通（小白必看）
（2）史上最經典最易入門的php基礎視頻教程
（3）PHP語法與數據庫全套視頻
（4）PHP高級實戰教程全集

Step04. 前後端交互階段

• No. 8. 接口

（1）2019接口測試技術精講

Step05. JavaScript高級階段

• No. 8. 模塊化

（1）模塊化requireJS

• No. 9. 構建工具

（1）2019最新Webpack4.0教程

Step06. 前端新型Web框架階段

Web前端框架課程視頻

• No. 10. AngularJS

（1）Angular4從入門到實戰

• No. 11. React

（1）React框架從入門到實戰
（2）最全的react視頻
（3）2019React教程+實戰全集
（4）2019React服務器端渲染-NextJS實戰

• No. 12. Vue

（1）最全的vue.js視頻
（2）2019最新Vue從入門到大神
（3）2019VUE服務器端渲染-NUXT實戰視頻

Step07. 跨平臺開發階段

• No. 13. 微信小程序開發

（1）零基礎快速入門開發小程序

• No. 14. 微信公衆號開發

（1）詳解微信公衆號視頻教程

• No. 15. 移動端開發

（1）PC及移動端頁面佈局_1階段課程體系
（2）PC及移動端頁面佈局_2知識點講解
（3）PC及移動端頁面佈局_3HTML5微案例講解
（4）頁面佈局與設備適配教程
（5）Touch從基礎應用到實戰
（6）2019最新Flutter全套視頻~全套資料
（7）2019移動端測試技術

---

我的前端路線

1. 我的前端路線圖

2. 前端課程體系大綱

3. 我的前端學習路線

Step 01 整體學習web前端

視頻資源：

1. 【尚學堂】前端全套課程
2. 【千峯教育】web前端 900集