前端学习路线

版权声明：本文为博主原创文章，未经博主允许不得转载。转载请注明出处：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集