七周从前端入门到前端开发工程师

作为一名大三开始学习前端，如今已经工作三年的前端狗，跟大家谈谈我的前端自学之路，以及自己的学习方法，和前端学习资源推荐。本篇为前端入门指导文，各位大神请避让。

前端行业这几年发展飞速，各种框架层出不穷，很多开发者都戏谑说自己学不动了。确实，我们应该充分利用自己的有限时间，好的学习方法和资源非常重要。以下所有方法都是自己踩过坑的总结，保证能让各位在前端学习之路上事半功倍。

写在前面：尽信书不如无书，人工撰写定有纰漏，争议之处可留言讨论。

第一阶段的学习：html+css+javascript入门

我知道很多人前端入门都是w3school上学习，我个人是不推荐的。上面的知识点太多，平时工作中根本用不到。如果你在w3School上从头开始看知识点，你只会边看边忘，效率太低了。记住我们是逼格很高的前端工程师，不要去做死记硬背的工作，用的多了自然就记住了，实在记不住的还有度娘。（入门学习者最爱犯的错误就是纠结，总纠结自己今天学习的某个标签、某个css语法没有记住。我只想说这不是高中考试，还要默写。大概了解就可以，等以后项目做多了，复制黏贴的次数多了，也就记住了）

重点来了，说了这么多，入门我们应该在哪学呢。经过自己的不断采坑发现一个优秀到无法形容的网站，特别是对于前端萌新。它就是绿叶学习网，里面对基础知识的讲解--结构清晰、主次分明。并且网站上都是一些常用功能，其他冷门的知识点作者都过滤了。对于没有任何基础的前端萌新来说，简直是再合适不过了。

里面所有的知识点，作者都进行了归类，特别方便记忆。学习的过程中，你脑中的所有知识点都会条理清晰。自学最难受的就是自己脑中的知识点混乱，又没有人指点。那种无力感，自学过的都知道。并且作者对内容的讲解精确独到，没有故作深奥。每章的总结以及题目也是恰到好处。

所以对于基础篇，你只需要将网站中的HTML+css+javascript看完就可以，练习题跟着敲一敲就ok，对于w3school和菜鸟驿站这类网站只适合当作字典去查询。两周时间也就ok

当你看到这篇文章，发现这个网站，你已经比我节约了一个月的时间。网上其它前端基础类 的讲解网站，真的像老太太的裹脚布又臭又长。。。

二、html5+css3+javascript高级

过了第一关新手村，有点难度的东西来了，并且这块知识点也是面试问的最多的。（入门学者最爱犯的错误就是在学习框架之后，就把这块给扔掉。一定要记住，这块知识点才是初级前端面试的重点。也是一面必考的知识点）

这一趴，我不推荐看文章学习。因为知识点稍微有点复杂，看文字的学习效率没有看视频高，慕课网上有很多视频，讲解也很透彻，会比看文字学习效率高很多。但是价格都不便宜，当初我自学的时候，也是投入了很多钱的。当然网上也有很多免费的视频课程，不过都是过时了的，或者不够系统的。贪这个便宜就是在浪费自己的时间，最后什么都没有学到，得不偿失。需要资源的，可在文末获取。

这一趴，两周时间也是ok。对于没有计算机基础的人，时间可能有点紧张，但还是应该逼自己一把。

三、es6+sass

这块的内容属于扩展的内容，es6是JavaScript的扩展，sass是css的扩展。对于入门学者来说可能会觉得这块内容比较陌生，看上去高大上很难学的样子，其实它比第二趴的内容简单多了。（前端学习者最爱犯的错误就是把这块想的过于高深）

es6现在还是用的比较普遍的，随着浏览器的兼容性越来越高，公司的项目大部分都是用es6的语法，如果完全不了解，看前辈的代码可能比较吃力。es6网上的学习资源很多，但我比较推荐阮一峰的es6教程。es6没有萌新想象的复杂，都是一些语法糖，平时工作中用到的也就是promise、module、async等一些功能，不必过于纠结，了解即可。

sass、less等css扩展性语言，了解一个即可。绿叶学习网上就有sass入门教程，过一遍即可。看完这两个教程，一周足够。。。

当然，如果你觉得这些内容看文字学习比较吃力，也可以通过观看视频进行学习。资源可在文末获取

四、vue+VueRouter+vuex+axios

说了这么多，大家最关心的前端框架来了。现在比较火的mvvm框架vue和react。对于萌新来说，我比较推荐vue。入手快、学习成本低、资料全、所有的坑前辈都帮你们踩了，公司的使用率也很高，学完不愁找不到工作。

对于这块的学习，一开始我不推荐看官方文档，特别是对于萌新来说看官方文档学习，效率会比较低下。官方文档比较全面，涉及的知识点也比较多，很多是刚开始工作用不到的。我还是比较推荐视频学习，高效吸收快。等你入门了，再看文档重新梳理一遍。我的学习方法是从全面再到局部，这样学习的过程中就不会困惑与纠结

网上关于vue及其全家桶的视频很多，但都不太适入门学习者。要不就是一直讲项目，涉及的业务逻辑比较多，知识点较少。要不就是完全讲api的使用,没有实际操作，枯燥也没有整体项目的思维。我之前看过一个vue及其全家桶的视频，是用一个简单的项目，将vue的所有知识点串起来，特别适合萌新。

---

至此，你算已经是跨入前端这个行业了。但不幸的告诉你这才是万里长征的第一步。想升职、想加薪、想成为大牛，你要学的知识还有太多。

扩展

接下来的内容前端入门可以不用学，等找到工作再学也不迟

webpack + git+node

webpack、git、node属于高级的前端的知识点了，也是前端的分水岭。本来我是不想在入门学习中提及的，但还是希望各位了解下，学习除了深度我们也需要广度。所以作为萌新的你只要会简单的使用就行了，不用去深究。上网看一些入门的博客就好或者入门的视频，我也有一些自己的学习笔记，有需要的可以发给你。

开发工具---vscode

工欲善其事，必先利其器。想要优雅且高效的编写代码，必须熟练使用一款前端开发工具，我个人首推vscode。

如果你想要学好WEB前端，在学习过程中，身边没有一个能够指导你学习的人，可以到这个WEB前端裙：484，757，760，里面有根据目前市场需求，录制的最新的系统教程，不管是计算机专业想要往WEB前端方向发展，还是零基础想转行，都可以跟着教程学，有什么不懂的可以在里面问。