曾经本人通信工程专业大一在读学生，在了解了很多方向的程序员后结合自身情况决定在2021年下半年开始学习前端技术。
不含广告或者推广，纯粹是结合自身经历和踩过的坑总结出来的，放心食用！ ，且不同于网上其它的各种死板的学习路线（就列了一大堆技术叫你去学），本文的路线是结合了知识学习和保证兴趣的前提下学习，让我们有更多的动力学下去，并且越学越起劲。学习的技术也是目前最实用最热门的技术。最最最重要的是，这里附带了每个技术学习的视频！且所有视频均在b站，都是我个人学习认为每个技术中较均衡的教学视频！而且都是我自身深入学习了的。大家可以提前将所有视频收藏，学的时候就翻出来学！不用自己费劲去找！（网络上优质的教学视频很多，不存在哪个最好，本文是保姆级教程所以直接推荐教学视频）
准备篇：
无论学习任何的编程语言，自己一定要有明确的方向，一个面对未来实际的岗位或者应用的方向。我见过很多很多的人，喊着我要当码农，然后网上一搜什么编程好学，推荐c语言，然后跑去c语言一顿学，推荐python就跑去python一顿学，完全没有自己的方向，一问你以后想进什么岗位，就只能回答程序员岗位。殊不知单单python一个语言其实也是有很多的方向的，比如算法岗位，深度学习，甚至作为后端业务的语言。
再加上现在大学课程里面所谓的通识教育，其实就是有用的不学，没用的深究一大堆。所以这种情况下。我们一定要明确，我们以后想要去到哪个方向的岗位。
前端学习路线
这个图大家可以先保存或收藏，具体的流程和步骤我会在下面细说。这个学习路线可能会和平常看到的学习路线不大一样，我会在下面解释其原因，这也是我这个学习路线比较特别的原因。
笔记
在学习过程中记笔记绝对绝对！非常重要！一定要记！因为前端的技术非常多，然后语法也非常多！学到后面肯定会忘记的，如果此时没记笔记又得回去翻视频，效率会非常低。我的建议是跟着学习视频里老师的笔记去记笔记，直接在代码里写注释当作笔记，在我看来这样的效率是最高的。很多人推荐用Markdown记，但是个人认为并不好，因为Markdown里面的代码没办法直接执行看到结果。Markdown的好处是兼容很多笔记软件和网站适合分享。但毕竟是记给自己看的，怎么方便怎么来。可以给大家看看我整理笔记的例子：
这样无论学习任何技术突然忘了前面的某一个知识点都可以立刻在vscode里点开之前的笔记然后复习。
然后开始学习每一个视频时，先翻评论区去找各位热心网友分享的老师上课的源码和素材资源等，可以提高自己学习的效率。
然后还有一点，如果遇到看不懂的地方或者代码一样但是报错什么的，打开弹幕或许对你有帮助。因为有时候软件或者语言的版本不一样，一样的代码可能会报错，这时候弹幕就非常重要了。
开发工具
如果你一旦纠结于用什么开发工具了，都2022年了那就直接用vscode吧，轻量高效还免费，并且大量的教学视频也是使用vscode的。
HTML5+CSS3
学习视频：b站尚硅谷HTML5+CSS3基础教程
李立超老师绝对是前端技术讲的最好的老师之一，他或许不是技术最好的，但绝对是讲得最明白最好的老师。这部分学习会比较漫长，但是h5和c3比较简单然后也不会很枯燥，跟着超哥慢慢学，把它学完。不建议走马观花刷完。里面的练习尽量都跟着做，多体会这两个语言。特别是里面有些大练习，比如写小米官网，对于初学者一般都要写很久，不过不要急一点一点写，然后看视频自己哪里还能优化。
跟着这个视频学完h5和c3后，基本上页面的静态效果和布局就都可以掌握了。此时可以网上多搜一搜好看实用的前端布局，多学习一下别人是怎么写h5和c3的。也可以自己做一做一些有趣的效果和页面来练手。
Javascript
学习视频：继续李立超老师的js视频
这个视频是比较老的版本，但是因为是js基础的学习所以没有关系，因为后面还会学习ES6+，js的基础对于前端的学习和理解后面各种框架的底层原理非常重要。这部分可能很多时候稍有点无聊和冗长，但是要沉住气，慢慢学完。
实践！
这时候，相必学完html，css，和js基础，你已经相当疲惫，甚至开始觉得无聊，有点学不下去了。很多小白也是在这之前放弃了的。所以接下来我们要做一点有意思的事情！将所学转化为实际！真正做出来一个东西。
你可以自己规划一个自己想要做的项目，比如个人博客网站之类的（但是博客网站不用模版的话工程量对于这个时候的我们有点大），我这里推荐一个简单实用且容易分享的项目：搜索起始页 这里可以给大家参考一下我当时的案例https://www.chenzs.com/startPage/startPage.html
推荐一个别人优秀的起始页：青柠起始页
利用知识适配移动端和pc端
因为我们要能分享出去所以，我们需要开始提前学习服务器的知识！别担心，我们虽然没有足够的知识储备，但是上线一个静态网站对我们来说不难。而且完成这个项目后我们一定会对服务器等知识有更好的了解，也绝对会帮助我们后面的学习。所以接下来我们直接学习nginx
Nginx
学习视频：up主：程序员鱼皮
跟着视频我们会发现很容易就将我们一个做好的网页上线了！建议也使用视频中所提到的腾讯云作为服务器，因为阿里云有所不同（当时我就踩坑了）。但是里面提到的宝塔网页托管咱们不要使用，一是起不到学习作用，二是宝塔会安装各种奇奇怪怪的环境不利于我们后续的学习。这样我们就可以把我们精心制作的的网站分享出去了！其中你可能会遇到各种各样的问题，但是不要怕！百度！或者来问我我肯定会帮助大家解决的。
如果在基础上还想稍微深入一点，或者说将网站做的完美一点，就去学习如何买域名绑定域名然后网站的备案和公安网的备案都自己尝试走一遍。并学习如何配置https
视频:up主：飞哥-学相伴
前面安装nginx的部分可以直接跳过（因为我们之前已经跟着鱼皮站长安装好了），或者你一开始就按照这个教程来安装，然后我们需要学习的是其中如何配置https的内容
选学视频：up主：前端根据地
cookie这个技术可以帮助我们在页面中实现记住用户选择的搜索引擎等等，而且这个视频是后面一些技术的底层原理，可以帮助我们以后更好地理解一些复杂的技术。
我们的项目完成之后，整理心情继续学习！
Node.js
趁热打铁直接学习服务器后端技术
视频：黑马程序员node.js最新教程
node.js是一项后端技术，使我们可以通过js代码来实现服务器后端的业务处理！虽然属于后端但是非常重要！前端程序员必学的技术！网上很多人推荐先学ajax再学node.js，但是我总结之后发现先学node.js会让初学者更好的了解整个前后端结合的逻辑，而且在学习ajax的过程中中，已经学习了node.js的我们会更容易理解AJAX中的知识点。
在这个教程里面会涉及一些ES6的新js语法，但是我们无需深究，因为我们以后会学到的，js基础代码也是完全可以实现里面的所有内容的。然后也会涉及jquery的内容，我们也无需深究。
其中我们会学习express，npm，mysql数据库的相关知识，跟着视频学习跟着操作就好了。后面有一个叫做大事件的项目，我们可以不用看，感兴趣的同学可以去浅看一下，比如里面是如何管理上传的文章，怎么实现换头像之类的。
这个教程一定要打开弹幕，一是不懂的时候从弹幕可以知道这是什么知识，二是弹幕会帮我避开一些坑。
AJAX
视频：up主：尚硅谷
3小时Ajax入门到精通
这里我们只需要学习原生的Ajax，后面教我们在jquery里使用ajax的我们不需要学。学完这些之后可以在我们之前实践的项目中尝试在真正的服务器上实现一个前后端结合的业务，比如注册和登陆，再次巩固我们所学的知识。
JS高级
相信学完了那么多技术的我们，感觉自己已经很强了。但这时候我们需要再次沉下心来。
视频：尚硅谷JS高级
这个视频里的内容稍微有点难度，比如闭包什么的，老师讲的很好，不过需要我们慢慢学慢慢体会。主要是这里面的东西以后应聘面试容易考。
ES6+
视频：尚硅谷ES6-11教程
ES6～11是js的新语法，包含了很多新特性，这部分大家不用害怕，更多的时候es6是简化了我们的代码，但是里面promise这个知识点对于很多初学者有点难，但是！这就是为什么我们要先学node.js再来学es6，node.js中express的中间件和promise非常非常类似，node.js中不少东西都有助于我们es6的学习。因为node.js出现的时间是比es6要早es6也是借鉴了node.js一点所以先学习node.js是更符合逻辑的。（就问你细不细节 ）后面的ES7-11新特性建议最好都学习一下，这样面试的时候更有竞争力一点。
Vue2-3
视频：尚硅谷Vue2.0+Vue3.0全套教程
这个老师也是讲前端框架非常出名，讲的也非常好的一个老师。他讲react框架的视频也很好。
我们直接不学Jquery框架，因为目前已经比较落后了，我们已经没有必要学了。有兴趣的同学可以去研究一下它的源代码，有利于js的学习。
因为目前市面上跑的项目有绝大部分还是vue2的，所以我们需要学习vue2和3。因为我们之前已经积累了足够的知识储备和足够透彻的理解。我们会发现vue里面很多人觉得难的点我相信我们也能搞定！（这就是为什么不推崇跳过h5 c3 js上来就学vue）至于学vue还是react，网上有很多的争论，但是这里我建议如果你纠结的话那就先学vue，后续再根据自己的发展方向选择性学还是不学。
学到vue这里的时候我们已经对于前端的各种业务和逻辑比较清楚了，里面一些难的知识点我不提我相信我们自己也是有了能力解决不懂的知识点！
webpack
视频：尚硅谷webpack5入门到精通
webpack是一个项目的打包工具，本质只是一个打包工具，而且我们这个阶段大部分知识都已经具备了所以基础的使用学习起来也很简单。因为网上的视频都差不多，而且到这个阶段了，大家也应该找到了学习的方法和节奏了。
十字路口
学完上面这些后，基本上可以说是把前端的知识面覆盖了（精通程度就看个人造化了），此时摆在我们面前的就是两条路
1.继续深造前端
比如学习另一种框架react，移动端的布局框架Bootstrap，深入webpack（webpack其实深入也很多学问），越来越火的mongoDB数据库，nginx负载均衡，反向代理还有现在非常热门的小程序的开发，以及在GitHub上研究各种优秀的前端项目等等，总之前端也是无底洞，也有着无数的知识去学。还可以继续学习安卓开发，iOS开发等。
2.往全栈工程师发展
就是指同时掌握前后端的开发，这就涉及到java等后端知识的深入学习。当然这就超出了本文前端学习路线的范畴了。
总之，人各有道，要看清自己想要去的方向便可行天下！
最后，码字不易，希望能帮助的各位小伙伴们。
tips：本文章的学习路线在有些方面和很多网上现有的大部分学习路线不大一样，特别是将一些服务器和后端的知识往前提。这个考量是结合我所推荐的视频的侧重内容总结出来的，个人认为在许多方面能够帮助零基础的小白更好理解其中一些难点和知识。特别是在于js模块化的内容，因为node.js和commonJS等的模块化的出现是比es6要更早的，es6其实也是借鉴了node.js等模块化的js的思路而设计出来的。所以个人认为先学node.js会帮助es6相关内容的学习。
而且本路线密切结合实践，提前nginx的学习如何搭建web服务框架能够保证初学者随时使自己的学习成果得以实现，比如学了怎么写api就可以立刻在服务器上实践。并且也能让初学者保持持续学习的兴趣。
