零基础如何自学前端？

编辑：011 时间：2021-12-31

这几年由于前端领域的需求量越来越大，知乎上问这样的问题人也很多。小白初入门学习时，容易陷入理论派，一看就懂，一动手就懵，且还不知道到底如何系统的学习，遇上问题不仅无法解决，搜索到的答案也看不懂，经常是学一两个月就感到迷茫怀疑自己是不是不适合学习编程，这是自学的常态了。不用怀疑，我初学时也是，现在回过头无比庆幸当年有师傅帮了一把最后坚持学下去了，不然现在可能就不是个前端工程师了，说不定连对象都早找到了(︶.̮︶✽)（哈哈，调侃一下不要当真，对象会有的！(^_−)☆）。造成这种现象的原因主要就是学习路线没有规划清楚，就给大家推荐下我总结的学习路径和方法吧！

入门

首先前端的入门是从最基础的网页制作开始，也就是说你需要掌握基础的网页布局能力，得使用html + css达到能实现任意静态网页布局的程度。html + css 这部分技能优先推荐在MDN上学习，如果打不开那么推荐看菜鸟教程，这个网站里每个知识点都会有个知识点练习。需要注意的是这些学习网站都是文字描述，只有知识点的解释，更多的还是需要自己去写小案例去实践，找不到合适的案例可以在网上任意网页挑一区块进行布局练习。如果更喜欢视频讲解的方式像慕课、codecasts都可以，这类网站挑选课程注意看时间和好评度，经过这些学习后实现一般的静态网页布局几乎没问题，到这里就可以开始尝试去写常见的网页来巩固了（例如：天猫、京东这样的）。
下一步是开始学习js（ javascript的简称），js里的坑多，光它就够学一辈子的，所以前期的学习只要求先学个js的基础，依旧是建议在MDN或者菜鸟教程上学习，将js基础知识都学过一遍。需要注意的是在学习js时段里，容易陷入抓狂的困境，因为只学了基础概念没有自己的编程思路，那么在写js案例时，尽量独立解决案例，建议把大问题进行拆分，画辅助图来拆分成小问题，分析整体实现步骤，根据每个步骤去想哪些知识可以实现该步骤，不管写的有多烂，最终能实现出来就是你自己的一种思路。写完后再思考下如果换种思路能不能做出来，如果做得出来就尽量做，实在做不出来就放弃，去看答案或者别人的代码，去分析别人的代码实现思路是怎样的，这对你自己来说就是得了一种新的思路。学习编程一定要多看别人的代码去借鉴学习提升自己的思路，但一定得是先思考动手过，不要盲目看别人代码，不然容易产生依赖，独立思考能力得不到提升。

初级

做到这一步已经有一点基础了，但要实现复杂的页面还是有难度，所以下面就是对所学技能深入学习。

css部分：强烈推荐看张鑫旭的《css世界》学习，这本书里对css的原理十分深入，文本描述生动有趣，小白也看的懂，看完这本书后会打开你对css新的认知，各类css复杂概念也能够理解了。

2. js部分：前面学习的那些实际上只是js的一些基础，进一步学习建议看书。前端必看的书单目录按顺序如下：
《javascript语言精粹》先从这本书开始看起，帮助你快速区分js语言中的精华和糟粕，抓重点学习

《JavaScript高级程序设计》，一般叫红皮书，深入讲解了js里各类组成部分，长这样

《你不知道的JavaScript》，这书分上中下三本，深入理解js语言内部的机制，打扎实原生js基础，下面我就放一本的封面图片（另两本封面几乎一致就不放了，图大）

3. 这阶段是开始学习前端开发的主流框架，一定得有扎实的原生js基础再来学习框架哦，因为我以前看过太多能使用框架开发却对原理不甚了解的前端工作者了，实际上这对未来的前端发展之路是极为不利的。需要知道框架都是用来解决复杂问题、提升效率的，而大部分前端框架本身都是建立在js的基础上得来的，js原理不理解的后果就是框架开发中一旦遇到点问题就傻眼很难发现问题原因，解决问题就更难了，如果一直保持这样的状态下去前端开发路就算是看到头了，所以一定得学扎实js。

vue ：vue的学习推荐看vue官方文档，建议将其中的示例都自己练习一遍，加深记忆和理解。

node.js：node.js让js能在服务器端运行，node官方文档有点晦涩难理解，推荐看《了不起的node.js》书入门。后续深入学习node推荐《深入浅出Node.js》

react、reactnative、angular建议直接看官方文档学习，深入学习使用的书籍去图灵社区搜一下，口碑好评度高的几本都很不错，这里我就不放出来了。

以上是很多公司要求使用的主流框架（包括但不限），至于学习顺序不一定要按照上面的来，因为现在你可以开始找工作了─=≡Σ((( つ•̀ω•́)つ，可以根据工作要求来决定先后顺序。学习中一定要掌握git、svn、webpack工具的使用，以及多去看别人的好项目源码，拓宽视野，推荐去github，这里有很多好的项目，研读源码对你帮助会很大。

中级

到这阶段更加注重编写高质量的代码，主要四个方面：高性能、易维护、可读性强、代码规范。此时估计你已经工作一段时间了，基本上也能应对工作的一些需求了，但前端学习之路没有尽头，要成为更专业的前端程序员还得继续努力哦（用爱发电加油ᕦ(･ㅂ･)ᕤ）！推荐看书：《高性能JavaScript》、《数据结构与算法JavaScript描述》、《同构JavaScript应用开发》、《图解HTTP》。建议学一门后端语言，不为别的，语言到一定程度不同的更多就是语法特性了，掌握一门后端语言拓展你的视野，对开发中前后端分离等了解会更深。说了这么些，更多的还是需要运用到实际项目中。