前端学习之路

前言

之所以会写这篇文章是因为在一年的前端学习过程，我走了很多弯路，也思考了很多，最近又正好拿到了某厂的offer，希望以我之拙见能给初学者一些帮助。

我的学习之路

我是一个计算机相关专业的大三学生，不过实际上我的专业跟计算机并没有太大的关系，不过重要的几门计算机课程《数据结构》、《C语言》、《操作系统》、《计算机网络》我们专业都还是上了。不过前端的方向，主要还是自学。

我刚开始学习主要是在网站上看视频，包括慕课网、极客学院、Codecademy。不久之后，我的一些师兄啊，网上的一些大牛啊，叫我要看书，好好打实基础，于是我抄起《JS高级程序设计》《css权威指南》就开始猛看，可是发现自己完全不懂啊，而且看的过程也非常痛苦，然后也很自然地——我没有看完。

再后来，我又回到了原来的学习之路，我开始看一些稍微高级些的教程，我开始看一些大牛的博客，开始学会看一些文档，遇到事件代理的问题，我就去查原理；遇到CSS FLOAT的问题，我就去查原理；遇到一些框架／工程化等等的一些高端词汇，我就去查原理；遇到个东西，我就去查原理。有时我学会了一个新工具Gulp，开心一阵；有时我学会用canvas做一个小demo，又开心了一阵。我总觉得学习变得不如以前那么踏实了。有一阵没一阵的，让我跟别人说我做前端到底学了些什么，我还真说不上来，我感觉我学的东西都好浅，不是行业大牛说的那种浅，是浅到一般人花个一两天就能学会的浅。所以我开始怀疑这样学习的可靠性。

再后来，我有开始读书。继续翻开《JS高级程序设计》，我猛然发现！哇，闭包，我看过诶！哇！继承，我看过耶！！好棒，原来我之前串不上的知识，在这里都串上了！！赞啊！这次，我只花了4天的时间，就把这本厚实的巨作给看完了。我读的时候感觉很轻松，因为很多东西都看过；我读完之后觉得收获很大，因为我把很多东西的串起来了。喔～原来存储对象的时候用的是指针啊；喔～原来Array，Object这些叫引用类型数据啊；喔～喔～喔～

我突然好失落，我发现我学的东西怎么在四天之内就刷刷刷看完了？
这是为什么？？？我当时怎么那么蠢没去听学长的？？？
那我这前半年在干嘛？？？

如何正确学习

咱们需要预先知道两个前提
一、校园教育，其实说的就是现在大学里上课的模式

• 上课前预习

• 上课中老师给你讲课

• 上课后复习写作业

二、我自学前端的过程:

• 上课前预习——————懵懂的时候看书

• 上课中老师给你讲课——————看视频教程

• 上课后复习写作业——————学完后看书&做项目

其实起中最大的区别有两点

1. 校园教育有老师来辅导

2. 网络式教育有更有趣的视频教程

于是我总结出了一种最高效的学习方式:

（不仅是入门，学习任何一门新的前端技术都可以走如下流程）

前期——开阔视野，了解前端

前端是个很容易让人看的见的东西，它天生就很有趣，没必要像电磁波那样一开始就搞的那么高深吓跑许多人，我们可以通过很有亲和力的方式，即视频教程，好的视频教程会用很生动的例子（关于好的视频教程，我后文再推荐）和展示来弥补校园教育的先天不足——师资力量匮乏，无法做的生动。

除了视频，还务必要做 demo，做小练习才能巩固自己学到的东西。练习过程中最后能抱到大腿，有问题迅速问，多加点前端技术群，多抱几个大腿，有问题不太方便查就多问问。这样很快，你的应用技术就会达到一定的水平。

中期——夯实基础，认识前端

我打了这么多遍看书，原因很简单，请问你身边的几个大牛比《JS高级程序设计》的作者Nicholas C. Zakas 还牛掰？就算有，他们能在短短几分钟之内就把Nicholas C. Zakas花了几年时间总结出来的那么六七百页的内容告诉你吗？

学习的中期最重要的是完善你的整个知识聊天，在前期你东拼西凑过来好多内容，但你不知道其间的内在联系，这个时候即使大牛能告知你一二，你还是不能全面了解，你总不能指望着大牛全天候的守在你身边吧？

后期——沉心实践，深入前端

这一部分很重要！！好，我们继续拿《JS高级程序设计》举例子，你看完了红宝书，你就会用所有的API了吗？那现在考你一个，你能默写出多少Array的api吗？如果没写出几个，那就说明你还要继续潜心修炼哦！～

这里我非常推荐百度前端技术学院，他们给初学者准备了非常多的CSS、JS练习。我担心他们把网站下线，特地把所有网页爬下来，侵权可删。点此进入

总结与推荐

每个阶段有每个的目标：

• 前期：你需要的是尽快地搞懂大部分的东西，也就是预习，但是为什么不选择视频这种快捷又简单的方式呢？

• 中期：你需要的是夯实基础，网上的那些大牛在世界顶级高手看来还是些小牛，很多小小牛，就像我，也经常写一些自己的学习心得，你为什么看我的不看世界顶级高手的？更何况看一些著作能把知识给连贯起来。

• 后期：后期最重要的是把知识投入实践并查缺补漏。所以做项目必不可少！

推荐：

视频入门类：慕课网（非常感谢慕课，让我爱上了前端）；
练习入门类：Codecademy（虽然是英文网站，经过我的对比，它的内容质量比国内很多网站做的好太多！）
书籍类：天猫大师的精品回答，这里我不必多说。
练习类：禅意花园，[百度前端技术学院[4]

后话

当然，学好前端，你还需要关注一个公众号！——每日前端
各位兄弟姐妹，共勉！