从零开始学习前端开发：完整的前端自学指南

作为一个曾经的前端RD和TL，现在的教育工作者，我觉得我能回答这个问题。

前端是一个看似入门门槛不高，但要学好很难的领域。前端的知识体系庞杂又松散，技术演进快，如果摸不清脉络的话很容易陷入盲人摸象的困境甚至跑偏。

其实只要掌握了正确的方法，学习前端和学好前端就只是个时间问题，希望下面的回答对你有所帮助。

一、梳理清楚知识体系框架

学习前端，不管是入门还是进阶，一定都要有知识体系建设的想法。就算是刚开始学，也一定要有这样的意识。前面说过，因为前端知识点多而分散，所以如果不能构建起自己对于前端的知识体系框架的认识，很容易就会不知所措，没了方向。

现在网上关于前端知识体系的脑图很多，但是往往过于复杂，不适合初学者。作为一个初学者，每个人都应该自己做一份自己的 前端知识体系脑图 ，先有一个最基本的框架，然后在学习的过程中慢慢完善。

这样通过和别人脑图的对比，你也很容易知道还有那方面的知识是需要补充完善的。

这里我给出一个简单的模版，其实作为一个刚入门的前端新人，有这样的大框架已经完全够用了，不用追求大而全，学习的畏惧心理也会小很多，随着你学习的深入，这个脑图也会慢慢丰满起来。

二、前期准备和基础的学习

要开始的时候做一些基础工作还是必要的，比如选一个自己喜欢的编辑器啊，比如科学上网啊，比如怎么高效的使用搜索引擎啊，比如git啊，比markdon语法啊，这些东西都可以大幅度提升你的学习效率或编程的幸福感，所谓磨刀不误砍柴功，你也可以把这些东西记在你的脑图里。

接下来你就可以开始学习基础知识啦。 HTML，CSS，Javascript 这三样真的很重要，刚开始的时候你压根不用去管那些花里胡哨的框架，一定要把基础打好。框架再怎么更新迭代，最基础的东西还是这三样，只要你能掌握好基础，就等于拿到了打开前端世界的钥匙。

不管你的前端学习到了哪个阶段，对基础知识的好奇心一定不能断，这里面有太多细碎的知识点，每一份spec都又臭又长，就算你已经工作两三年，这里面肯定都还有你不知道的东西。

到这个时候你的知识体系脑图差不多应该长成这个样子了：

进行到这里的时候其实又有一个坑，很多人到这儿的时候就一头扎进去去看里面的具体内容了，比如去看各种标签的属性用法啊，去看选择器啊，这就是比较典型的没重视知识体系框架建设导致的盲目做法。

推荐的做法是什么样的呢？其实很简单，就是再去细化这些知识点的层级，理清各个知识点的脉络，从宏观上先对这些知识的体系和框架有一个比较清楚的认识。

就拿HTML来简单的举例一下：

这样把知识点的层级关系抽象清楚，对每个小的知识点合理分类，才能让前端知识里那些庞杂的知识点形成体系。

现在你就可以去往里面补充些细节的东西了，你可以在脑图上用不同的颜色标出不同的优先级，以便划分学习的优先级并方便以后review。

三、把学的东西用起来

 每次学过一些小的知识点，都要想办法把它们用起来 ，想清楚这些知识点有哪些使用的场景，等到基础知识学到一定程度了也可以反过来，先预先想好场景和要实现的功能，再去思考在这些场景下面该用哪些知识。如果遇到了解决不了的问题和没有学过的知识，去你的脑图里把它的位置搞清楚，写出来。列入后续的学习计划。

一定不要一直看，一直学，却不在具体的场景里去用，你应该养成拿自己学到的东西做些东西解决些问题的习惯。不断的做出东西，解决问题，不断给自己正向的激励，不断的完善自己的知识体系，一定要让自己有成就感。

四、多体验新工具

近几年，在技术领域低代码是比较热门的话题，通过低代码工具，自动代码生成和可视化编程，只需要少量代码，即可快速搭建各种应用。我现在在体验的一款低代码是JNPF快速开发平台（www.jnpfsoft.com?csdn），感兴趣的可以自行体验！除了低代码工具，我在以往的文章中都有提到其他工具，你可以自己看看。

今天就先说到这儿，以后如果有机会看需要再更新。