2023年，入门学习前端学习路线，系统学习方向，该路线仅做参考，后续如有不足，请及时指出。

一、HTML

HTML主要学习各个标签的特性，主要学习的理念是块级元素与行内元素的区别，以及各个标签内置的属性方法，在前期学习HTML的过程中，会学习到很多无用的HTML内置标签，到后续学习深入以后，前端开发者基本上只用一下标签进行开发：div，span,input,button,option+select,table至于其他的标签，基本上用不到，但用不到并不表示不用学习，还是要有稍微的了解，在后续使用UI框架的时候，前端开发就不再自己手写HTML，主要使用UI框架的组件进行开发，HTML可以快速过一遍，总的来说，入门前端开发，并不需要在HTML上面花费太多的时间，后续可以一边做项目一边学习，主要是要理解块级元素的特性与行内元素的特性，理解元素特性，才能够快速完成页面布局效果（就像盖房子一样），萌新推荐由外向内布局。

二、CSS

CSS主要学习margin、padding、border等边距效果，以及font/color/background等渲染效果，主要将常用的css参数记住，有能力的可以把常用的样式效果背下来，前期学习的时候，可以多试试各种css搭配的效果，css可以花更多的时间去学习，这是前端开发的基本功，要做到UI图什么样，css的搭配就怎么样的效果，前端开发基本上需要一比一还原UI图的效果。这里不推荐萌新使用大量的float去完成页面的布局，除非万不得已，不要去使用float。可以多看看各个机构的免费教学视频去深入学习css，基础很重要。

三、HTML5新特性

HTML主要学习多媒体标签以及canvas，canvas可以留到后面学习完JavaScript再学习，新特性其实需要学习的东西并不多，这里可以快速过一遍就可以了，开发用到的时候再去学习也可以。

四、CSS3、scss、Flex布局、css动画效果、iconfont

CSS3新增了很多样式效果，主要为动画效果以及flex布局，学习css3是有趣的，这里可以很放松的去学习完css3的内容，前提是css的基础足够的好，css功底不好的可以再去学习一边css。把css3学习完，可以在后续编写页面的时候更加轻松高效。页面效果也更加美观。  学习到这里的时候，可以去尝试一比一复刻淘宝首页、京东首页、B站首页等页面，如果很吃力的话，建议多做几次各个网站的首页效果，当页面渲染感觉到没有难度的时候，可以再开始去学习JavaScript，如果html+css的学习程度不深的话，其实学JavaScript也是一种痛苦，建议是先打好HTML+CSS的基础再进行后续的学习。

五、JavaScript 

JavaScript也俗称js，是前端开发的核心语言，这里需要学习到大量的编程知识，跟以往的html/css不一样，建议深入学习Js，之余能学多少完全看个人能力，js主要学习的核心主要有：函数、定时器、面向对象、事件、DOM操作这部分，之余其他的部分可以看个人能力去深入学习，如果想要成为一个合格的前端开发，熟悉js的各个功能也是必不可少。

六、ES6 

ES6是js在某个版本时期大量新增的特性与功能，方便开发者更好的开发，这里面主要是一个异步编程（async/await）与ajax是ES6的核心，学习至此，前端的三大马车（HTML/CSS/JS）已全部学习完毕，这里如果觉得哪里没有学习好的话，可以再回去复习，加深印象，如果没有难度，各种页面也能开发出来，那后续的学习部分就是一马平川，没有什么难度了。个人认为这些基础都是很重要的，好的基础是快速开发的基石（磨刀不误砍柴工），为了后续的开发，尽量把自己的短板补齐，如果有什么不懂的，可以晚上或者周日到我直播间提问（B站搜索前端），我可以为各位入门的朋友无偿教学。

七、JQuery

JQuery也称jq，是前端的一个框架，是早期前端开发的首选框架，虽然在2023年看来，已经是完全过时，但是想要成为一个好的前端开发者，jq的学习也是必不可少，如果前面的学习已经完全打好基础，那么学习jq将毫无压力，可以快速过一遍jq就可以了。

八、bootstrap UI组件库

bootstrap 的栅格布局是前端开发需要掌握的，虽然不一定用到，但是仍推荐大家去了解学习，UI组件库的学习成本也不高，这里推荐先学习如果使用UI组件库，没有好的推荐，本人常用的是elementUI ，其他各个组件库也基本上大同小异，学会一个组件库，其他的也是能够快速上手，学习至此，基本上前端开发就变得简单起来，很多页面效果也能实现，基本上你此刻就已经迈入了前端开发的大门了。

九、npm/Git

npm是一个包管理工具，为项目引入各种第三方 包，方便项目快速开发，不难学。

Git是一个项目管理工具，本质上并不复杂，在大公司可能git会用起来条条框框比较多，但是基本上的一些add commit push pull 命令学会就可以，还有git软件协助，不难学。

十、Vue-cli / vite / webpack

vue-cli是搭建VUE项目的手脚架，可以快速搭建一个配置好的vue集成环境，过两年可能会逐渐被vite替代掉，但目前而言，学习vue2还是用vue-cli方便一些。

vite与webpack的本质都是一样的，自是webpack看起来比较的复杂，比较劝退大部分人，所以现阶段可以直接拥抱vite，如果后续进入公司研发，用的是webpack，也基本上是搭建好的前端项目环境，webpack简单学一遍就可以了，不难学

学会这些以后，就可以进入到前端目前主流的项目开发流程中，基本上到后续的开发都是看文档看实例去学习了，总的来说都不难。

十一、VUE全家桶

vue可以先学习vue2，不推荐直接上手vue3，这样会相对来说比较的吃力，vue2也不难学，都是一些很简单的语法糖、生命周期之类的，这里主要是学习数据跨组件发送与接收，这个是vue当中比较难学的一点，但也是套模板开发，总体来说不难。至于vuex这个全局状态管理组件，UP自认为是不喜欢，如果没有良好的设计，vuex用起来反而会觉得很麻烦。看项目决定吧。Vue是目前国内主流的开发框架，很多中小型公司都是用vue的多，至于为什么不推荐react的原因是，react在中小型项目中并没有比vue更好的优势，react主要是在大型的项目上面会比vue更好一点，所以react推荐用到再学，本质上来说，react跟vue都是一门框架，只要前端的基础好，学习这两个框架都是不难的。

十二、H5开发/小程序开发/uniapp多端开发·

H5开发也俗称移动段开发，主要面对的是移动段的网页，这里主要是处理好页面的响应式问与设备的适配问题，本质上来说，跟PC端开发网页也是一样的，没有太多的难点。

小程序开发就是看文档，各种小程序API跟PC端大同小异，没有太多的难度。

uniapp是基于vue开发的，是一套代码，多端适配（报错），跟vue没有多少区别。

十三、Canvas/WebGL/ThreeJS  网页高级渲染

这是前端开发的重难点问题，精通此类技术的前端开发者并不多，着急找工作的可以先不学习，对找工作没有太大的影响。可以一边工作一边学习，学习这些技术可以让你的简历加分。不懂也没有关系，大家都不会（dog）

十四、NodeJS

NodeJs说实话并没有太多的应用场景，因为单线程等问题，还有NodeJS的生态问题，目前来说，主要了解NodeJs是什么，能做什么就可以了，不会有那家公司说用NodeJs去做主流的服务端应用，基本上是一个辅助型技术。懂一懂就行了，真没有太大的必要去深入学习。

• 计算机网络
• 数据结构与算法
• 计算机系统 
• 浏览器基本常识
• Javascript中的this指向
• Javascript中的闭包
• Javascript中的原型链
• 设计模式
• TypeScript
• 面试题 
• 框架源码解析

基本上来说，这些技术点再B站都有相对应的视频去学习，有的人可能赶时间去开倍速去学习，其实真的不会快多少，反而是开倍速学习以后，还没有正常学习的快，学习得有效果，这里并不推荐学习HTML/CSS/JS的时候去开倍速去学习，后续的学习可以开倍速去学习，总的来说，学习3-5个月基本上就能学完前端目前的主流技术与开发方案，至于能不能找到工作，这里就因人而异了，推荐大家多背面试题，面试题可以有效的解决自身的短板，让自己更高效的通过面试，拿到offer。

平时学习有不懂的地方，可以晚上到我的直播间提问，一般来说我都会直播帮助各位解决一些常见的问题，太难的我也可能没有遇到过，也不懂，这里希望大家见谅。祝各位学有所成，早日拿到心仪的offer。

在这里说句题外话：我不卖课，也暂时不考虑出教学视频，我能力有限，大家可以多看别人优秀的视频跟着学就可以了，不懂的地方可以来问我（无偿），thanks。

本文章不引战、不做辨析，只是本人对前端目前行业的分析，如有不对的地方请指出。 

B站：无我code