共计 2528 个字符，预计需要花费 7 分钟才能阅读完成。
作为一名大三开始学习前端，现在曾经工作三年的前端狗，跟大家谈谈我的前端自学之路，以及本人的学习办法，和前端学习资源举荐。本篇为前端入门领导文，各位大神请避让。
前端行业这几年倒退飞速，各种框架层出不穷，很多开发者都戏谑说本人学不动了。的确，咱们应该充分利用本人的无限工夫，好的学习办法和资源十分重要。 以下所有办法都是本人踩过坑的总结，保障能让各位在前端学习之路上事倍功半。
写在后面：尽信书不如无书，人工撰写定有纰漏，争议之处可留言探讨。
第一阶段的学习：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 前端方向倒退，还是零根底想转行，都能够跟着教程学，有什么不懂的能够在外面问。