2021 前端开发学习路径

Posted by 彭楷淳 on 2021-07-14
Estimated Reading Time 4 Minutes
Words 1.4k In Total
Viewed Times

想自学前端?却不知道学习路径。报个班吧,又怕被坑。这篇文章一定可以帮助到你。

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

前端学习路径图

第一阶段


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

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

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

第二阶段


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和自动化测试。

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

原文链接:技术胖-2021前端开发学习路径 一张图让你轻松自学


If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !