前言
在Github2022的 Octoverse
年度报告
上，稳居最多使用榜首的语言可以看到是JavaScript，作为前端中最为关键的一部分，这说明即使现在，前端这一块仍然是大量的人涌进来，依然是火热，但是，一门语言的火热并不能证明其所适用的行业一定是非常吃香的行业，现在前端的境地就是找工作困难，市场的整体就业并不乐观，于我个人而言，如果你不是真的喜欢，并不是很推荐你入行，话以至此，如果你还有决心继续学习，可以继续往下看，下面是我整理的前端的学习路线供参考，希望对想继续学习的小伙伴们提供一些帮助~
先放上前端学习的思维导图 ：
学习前准备：编译器
编译器方面的选择推荐HBuilder X或者Vscode，运行环境在浏览器，推荐是chrome浏览器，当然H-builderX或者Vscode可以安装内置浏览器的插件
【下载地址】
vscode官网：
https://code.visualstudio.com
HBuilder X官网：
https://www.dcloud.io/hbuilderx.html
【必备插件】
vscode：
https://www.php.cn/tool/vscode/475531.html
HBuilder X（由于网上没有看到特别满意的插件推荐，所以分享一下我自己安装的插件）：
根据下列插件在“安装新插件”即可
第一阶段：前端
三件套
（HTML、CSS、Javascript）
文档教程
【
HTML
】w3school教程 :
https://www.w3school.com.cn/html/index.asp
【
CSS
】w3school教程：
https://www.w3school.com.cn/css/index.asp
【
JavaScript
】w3school教程：
https://www.w3school.com.cn/js/index.asp
视频教程
【
siki学院
】HTML:
https://www.sikiedu.com/my/course/206
【
siki学院
】CSS:
https://www.sikiedu.com/course/207
【
siki学院
】JavaScript：
https://www.sikiedu.com/course/212
【
黑马程序员
】JavaScript入门到精通：
https://www.bilibili.com/video/BV1Kq4y1e7d2/
【
黑马程序员
】JS进阶webAPIs：
https://www.bilibili.com/video/BV1AT4y1v75t/
【
黑马程序员
】JS高级：
https://www.bilibili.com/video/BV1DY41177dM/
！注意
：
原生JS的学习非常重要，在你的原生JS没有达到一定造诣 （比如对原生Js有一个全面的理解，能靠自己独自完成对于一个页面功能的交互等）的时候，不要去盲目的学习其他Js库，不可否认J一些
s库
是非常优秀的，但它们也是建立于原生Js写出来的，原生Js在面试当中也是占了大头，所以一定要对原生Js有深层的认识后再去拓展。
一些优秀的Js库：
有哪些必看的 JS 库？ – 知乎
第二阶段：移动端开发&Ajax编程
文档教程
【AJAX】w3school教程：[
https://www.w3school.com.cn/js/js_ajax_intro.asp
(w3school的网页当中能直接输入代码练习，可以直接显示页面效果，挺不错的)
视频教程
【
黑马程序员
】移动端前端：
https://www.bilibili.com/video/BV14J4114768/
【
黑马程序员
】Ajax+Git零基础到精通：
https://www.bilibili.com/video/BV1ZS4y1w7Yz/
第三阶段：前端主流框架
文档教程
【
Vue
】菜鸟教程：
https://www.runoob.com/vue2/vue-tutorial.html
【React】菜鸟教程：
https://www.runoob.com/react/react-tutorial.html
【Angular】菜鸟教程：
https://www.runoob.com/angularjs/angularjs-tutorial.html
【Bootstrap】菜鸟教程：
https://www.runoob.com/bootstrap/bootstrap-tutorial.html
（三大框架一般至少掌握一种，国内用得多的是Vue和React，根据自己的需求学习，如果有时间可以都学一下）
视频教程
【
尚硅谷
】Vue：
https://www.bilibili.com/video/BV1Zy4y1K7SH
【
尚硅谷
】React：
https://www.bilibili.com/video/BV1wy4y1D7JT
【
尚硅谷
】Angular：
https://www.bilibili.com/video/BV1ts411E7qg
【
尚硅谷
】Bootstrap：
https://www.bilibili.com/video/BV1YW411T7yy
第四阶段：
node.js
全栈开发
文档教程
【
node.js
】菜鸟教程：
https://www.runoob.com/nodejs/nodejs-tutorial.html
视频教程
【
黑马教程
】node.js:
https://www.bilibili.com/video/BV1a34y167AZ
第五阶段：就业面试相关
HTML高频面试题:
https://juejin.cn/post/6905294475539513352
CSS高频面试题:
https://juejin.cn/post/6905539198107942919
JavaScript高频面试题（上篇）：
https://juejin.cn/post/6940945178899251230
JavaScript高频面试题（下篇）：
https://juejin.cn/post/6941194115392634888
Vue高频面试题：
https://cloud.tencent.com/developer/article/1675622
React高频面试题：
https://blog.csdn.net/sinat_17775997/article/details/82994810
第六阶段：
项目实战
小米商城
：
https://www.bilibili.com/video/BV1gs411c7AC/
网易云音乐
：
https://www.bilibili.com/video/BV1c44y1g7ac/
哔哩哔哩移动端
：
https://www.bilibili.com/video/BV1kS4y1b7du
超简单的
微信小程序
：
https://www.bilibili.com/video/BV13L4y1w729/
头条新闻vue
客户端
开发实战
：
https://www.bilibili.com/video/BV1t3411N7aP/