这几年前端发展迅速，即便今年很多公司裁员，但市场对前端的需求量依旧很大，因为裁员裁掉的都是技术不好的，真正技术好的前端还是缺，为什么会说技术不好呢？根本原因在于对前端的学习上只在表面上。这些年我看到很多前端受开发环境影响大量的使用框架，对前端核心原理javascript、算法等几乎没有深入了解过，也就是我们常说的只会使用轮子，缺乏造轮子实力的码农。显著特点就是能快速使用框架开发项目，但遇到问题经常傻眼，各种查资料搜寻到的答案也不理解，只能把答案一个个套进去试，即便最后试对了答案也不能说出个所以然来，如果运气不好没有搜到对的答案，那就真的是头疼，更别谈深入核心原理了，这就是典型的基础不扎实的表现。所谓基础不牢地动山摇，企业裁员通常裁掉的就是这类人群，尤其在前端行业发展就得做好 一生都要不断学习探索的准备，所以我今天就给大家总结一下前端的学习路线以及学习方法，如果你符合上面几点那么你一定要看完这篇文章，如果你是0基础想从事前端，那真是太棒了，这篇文章教你如何从一开始就打扎实基础。
如果还在IT编程的世界里迷茫，不知道自己的未来规划，学习没有动力，东也学一下，西也学习一下，那你可以加入web前端学习交流群：539738200, 里面有大神一起交流并走出迷茫。新手可进群免费领取学习资料，分享一些学习的方法和需要注意的小细节，每晚八点也会准时的讲一些前端的小案例项目。
初入门学习时，非常容易陷入理论派，经常一看就懂，一动手就懵，且还不知道到底如何系统的学习，遇上问题不仅无法解决，搜索到的答案也看不懂，经常是学一两个月就感到迷茫怀疑自己是不是不适合学习编程，这是自学的常态了，如果你没有这种感觉，要么你就是天才，要么就是你学习的东西只是皮毛没有深入了解。下面是我总结的前端学习路线规划和方法：
入门
- 首先前端的入门是从最基础的网页制作开始，也就是说你需要掌握基础的网页布局能力，得使用html + css达到能实现任意静态网页布局的程度。html + css 这部分技能优先推荐在MDN上学习(链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML) ， 如果打不开MDN那么推荐看菜鸟教程(链接： http://www.runoob.com/html/html-tutorial.html)，这个网站里每个知识点都会有个知识点练习。需要注意的是这些学习网站都是文字描述，只有知识点的解释，更多的还是需要自己去写小案例去实践，找不到合适的案例可以在网上任意网页挑一区块进行布局练习。如果更喜欢视频讲解的方式像慕课网(链接：https://www.imooc.com/)、codecasts(链接：https://www.codecasts.com/)都可以，这类网站挑选课程注意看时间和好评度，经过这些学习后实现一般的静态网页布局几乎没问题，到这里就可以开始尝试去写常见的网页来巩固了（例如：天猫、京东这样的）。注意：学习中一定要注意标签的语义化、性能、规范，这是硬性要求，不仅要能实现布局网页，更要做到能规范布局出好的网页，这才能帮助你理解原理，而不是只会做，不会做的好。
- 下一步是开始学习js（ javascript的简称），js里的坑多，光它就够学一辈子的，所以前期的学习只要求先学个js的基础，依旧是建议在MDN或者菜鸟教程上学习，将js基础知识都学过一遍。需要注意的是在学习js时段里，容易陷入抓狂的困境，因为只学了基础概念没有自己的编程思路，那么在写js案例时，尽量独立解决案例，建议把大问题进行拆分，画辅助图来拆分成小问题，分析整体实现步骤，根据每个步骤去想哪些知识可以实现该步骤，不管写的有多烂，最终能实现出来就是你自己的一种思路。写完后再思考下如果换种思路能不能做出来，如果做得出来就尽量做，实在做不出来就放弃，去看答案或者别人的代码，去分析别人的代码实现思路是怎样的，这对你自己来说就是得了一种新的思路。学习编程一定要多看别人的代码去借鉴学习提升自己的思路，但一定得是先思考动手过，不要盲目看别人代码，不然容易产生依赖，独立思考能力得不到提升。
为了帮助大家更好的理解前端布局规范：
初级
做到这一步已经有一点基础了，但要实现复杂的页面还是有难度，所以下面就是对所学技能深入学习。
- css部分：强烈推荐看张鑫旭的《CSS世界》学习，这本书里对css的原理十分深入，文本描述生动有趣，小白也看的懂，看完这本书后会打开你对css新的认知，各类css复杂概念也能够理解了。
- js部分：前面学习的那些实际上只是js的一些基础，进一步学习建议看书。前端必看的书单目录按顺序如下：
- 《javascript语言精粹》先从这本书开始看起，帮助你快速区分js语言中的精华和糟粕，抓重点学习
- 《JavaScript高级程序设计》，一般叫红皮书，深入讲解了js里各类组成部分，长这样
《你不知道的JavaScript》，这书分上中下三本，深入理解js语言内部的机制，打扎实原生js基础，下面我就放一本的封面图片（另两本封面几乎一致就不放了，图大）
- 这阶段是开始学习前端开发的主流框架，一定得有扎实的原生js基础再来学习框架哦，因为我以前看过太多能使用框架开发却对原理不甚了解的前端工作者了，实际上这对未来的前端发展之路是极为不利的。需要知道框架都是用来解决复杂问题、提升效率的，而大部分前端框架本身都是建立在js的基础上得来的，js原理不理解的后果就是上面说的框架开发中一旦遇到点问题就傻眼很难发现问题原因，解决问题就更难了，如果一直保持这样的状态下去前端开发路就算是看到头了，所以一定得学扎实js。
- 以上是很多公司要求使用的主流框架（包括但不限），至于学习顺序不一定要按照上面的来，因为现在你可以开始找工作了─=≡Σ((( つ•̀ω•́)つ，可以根据工作要求来决定先后顺序。学习中一定要掌握git、svn、webpack工具的使用，以及多去看别人的好项目源码，拓宽视野，推荐去Github （ https://github.com/），这里有很多好的项目，研读源码对你帮助会很大。
- vue：vue的学习推荐看官方文档https://cn.vuejs.org/v2/guide/，建议将其中的示例都自己练习一遍，加深记忆和理解。
- node.js：node.js让js能在服务器端运行，node官方文档有点晦涩难理解，推荐看《了不起的node.js》书入门。后续深入学习node推荐《深入浅出Node.js》
- react、reactnative、angular建议直接看官方文档学习，深入学习使用的书籍去图灵社区搜一下，口碑好评度高的几本都很不错，这里我就不放出来了。
最后，想学习前端的小伙伴们！
如果还在IT编程的世界里迷茫，不知道自己的未来规划，学习没有动力，东也学一下，西也学习一下，那你可以加入web前端学习交流群：539738200, 里面有大神一起交流并走出迷茫。新手可进群免费领取学习资料，分享一些学习的方法和需要注意的小细节，每晚八点也会准时的讲一些前端的小案例项目。
点击：加入群
如果想看到更加系统的文章和学习方法经验可以关注的微信号：‘web前端技术圈’或者‘webxh6’关注后回复‘2019’可以领取一套完整的学习视频