2021前端开发学习路径，一张图让你轻松自学

秒速五厘米 2022-10-04 13:58 159阅读 0赞

想自学前端？却不知道学习路径。报个班吧，又怕被坑。这期视频和文章一定可以帮助到你。

在2017年以前，想给出一张学习前端路径是非常困难的，因为那时候前端技术疯狂涌现，争斗不断，每个公司所用的东西也各不相同。但最近两年，前端技术和三大框架地位趋于稳定，所以我才敢给出这个前端开发学习路径。

本期文章我缩短了文字长度，目的是减少废话，增加内容含金量。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
新手自学前端开发的六个阶段

我这里讲解的是面向新手的学习路径，如果你有基础，可以利用这个路径图查缺补漏。废话不多说，直接开始。

第一阶段

想成为一名前端开发人员，第一步就是网页布局和效果实现。也就是我们常说的切图仔，这时候你需要学习HTML+CSS。此部分的学习目的是把UI设计师给你的设计稿用HTML+CSS还原成网页。这部分的难点是有大量的标签需要你记忆。但是不要紧，刚开始你只要了解这种标签的形式，以后在工作中用的多了就熟练了。做个比喻就是你只要记住心法，以后实战多了，招式自然精通了。

再简单点，就是你不需要记住所有的标签，你只要知道都能实现什么，然后不会就去百度或者查文档。

这部分视频在网上有大把的免费视频，建议找一个全一点的，新一点 。直接一边看，一边写，这个在1-2周内拿下。

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

第二阶段

HTML+CSS学完后，你就可以做出任何漂亮的网页了，只是可能交互效果还实现不了。这时候你就要学习第二阶段，JavaScript了。这个阶段是比较难的一部分，因为这部分学的好与坏，直接关系到你后边的学习进度。我到现在，每年还在翻看《JavaScript权威指南》。

但是如果你是初学者，学这部分也不要太执着，非要达到精通的程度，才往下学习。你可以先大体过一遍所有语法，然后直接进入下一个阶段学习。因为以后学习阶段，还会不断的使用这些JS语法。

这个可能要在一个月左右才能拿下，注意我说的不是精通，我作了这么多年前端，也不敢说自己精通JavaScript。

第三阶段

有的老旧过时的路径会推荐你学习JQuery，这个是完全不正确的。在2021年完全没有必要再学习JQuery，因为正经公司已经不再使用这个东西。其实这个部分你可以学习一下ES6、ES7、ES8甚至是ES9的最新JavaScript语法，这部分内容再你学习JavaScript基础知识时，一般都不会包括。而在工作中中这部分的知识确实最常用的。

第四阶段

当你走过了前三个阶段，你就可以做出任何你想要的界面了，这时候你可以找到前端实习生的工作了，也就是在公司里布局页面和作交互效果了。这个阶段不仅要学习PC端网页的布局，更应该多些经历研究移动端和多端布局。

多端就是随着终端的转换，你布局的页面会有不同的呈现方式，而代码只有一套。这个阶段的难点就是要进行大量的实战操作和练习。推荐在工作中不断精进。

第五阶段

学一点Node的知识，这里是学一点，你不需要全会，也不需要作后端程序，你只需要会用基本操作和npm包管理就可以了。因为无论是Vue还是React框架，都需要使用Node来进行构建和管理。

这部分建议一周内完成学习，不要太纠结，因为后期等你找到工作了，还可以继续学习。

第六阶段

学习Vue框架，因为前边这些内容虽然可以做出任何WEB界面了，但还不能让你找到一份心仪的工作。所以你需要学一个流行框架。这里首推的就是Vue.js，因为在国内，这是使用最多的框架，而且上手要比React容易一些，所以建议先学习Vue.js。

学完这个后，你会知道什么是数据驱动开发，什么是SPA应用，也能轻松的实现前后端分离和服务端渲染。

学完后，建议开始试着去找一份实习工作，因为达到了初级工程师的水平，这个时候你可以开始你的前端工程师之旅。

第七阶段

当你进入工作后，你会发现你还要学习很多相关的前端技能，比如Node.js、TypeScript、Webpack、小程序开发、React.js、ReactNative、Flutter框架、Liunx运维、自动化测试。如何学和重要的知识点，在路径图中都有详细的介绍。我这里就不过多废话了，此时你应该有了自学能力。

为什么我建议这些东西在工作后学习那，因为这些东西有的是选学（也就是根据公司的需求），比如小程序、React.js、Flutter框架、Liunx运维，而有些用的比较少，比如Webpack和自动化测试。

如果你要走完这16个阶段，那学习时间会拉的很长，你也会因为缺少练习而学完后边，忘记前边的知识。所以建议你工作后，根据情况继续精进。

由于时间的原因，我不能把每一个学习阶段扩展来讲，但图中已经有了详细的介绍，自行下载就好。

总结

如果你觉的这个视频对你有些帮助，请点赞，如果你再能点击一下关注，这就是对技术胖最大的支持了。

好了，这期文章就到这里了。下期视频带大家看看2021年最火的Github前端开源项目。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: /images/20221004/e093fa91db034f08867dfb286063d6a7.png