知乎上有一个问题: 零基础的前端开发初学者应如何系统地学习？. 根据这个问题的一些答案了解到了一些前端学习的重点和学习方法, 现在想记录一下自己的学习路线, 在知乎上也做出了回答, 下面的内容和回答内容几乎是一样的, 这里做个备份.

正文

从下定决心开始自学前端到现在半年多，感觉已经入了门，分享一些自己在学习过程遇到的好的资源以及自己的学习心得，希望可以给与自己同样喜欢计算机的初学者一些参考，然而毕竟还没有进入这个行业，知识结构一定会有所欠缺，所以也希望大家能够给我提出一些意见和建议。

先简单介绍一下自己的情况，16年7月大学本科毕业，英语专业，大学里没有选修过计算机相关课程，属于 完全零基础 。不过一直觉得计算机是自己的兴趣，大学里也曾经试过自学，不过当时没有下定决心也没有确切的目标，于是学习计划也被无限期搁置。直到大四下学期经历了半年英语相关的实习之后，就下定决心追求梦想，又偶然知道了前端这个方向，于是开始自学前端。

开始学习之前在知乎上做了一些功课，主要参考了两个回答。一个是如何教会非计算机专业的女友写代码并且找到工作?中@朱佳顺的回答，这个回答的学习路线偏 编程入门 方向。还有一个是零基础的前端开发初学者应如何系统地学习？中@张帅的回答 ，这个回答偏 前端 方向，于是结合了这两个回答的内容进行学习。按照相关的学习路线大约学习了一段时间之后，自己就大概有了方向，也开始寻找其他的资源。

下面是我对这段时间学习过的内容及其他相关资源的总结(大部分是免费资源，付费资源会注明)，其中YouTube上的视频资源会相对较多(请自备梯子)，因为相比看书，更喜欢通过视频学习。不过从开始学习到现在间隔时间会比较久，所以没办法把所有学习过的资源一一列出，不够完整请见谅。

整体内容大概是这几部分:

  1. HTML和CSS
  2. 编程入门
  3. JavaScript
  4. React
  5. Node
  6. 其他

HTML 和 CSS

  1. 《深入浅出HTML和CSS》： 概念浅显易懂，对初学者十分友好

  2. w3school：很多人推荐，刚开始就是看的这个教程，但是个人觉得并不适合当作教程一气呵成地看，更适合遇到疑问时查询。不过后来发现一个更好的资源查询网站:MDN。

  3. MDN: 可以查询到很多web相关的资源:

  4. 《精通css》：虽然书名是精通xxx，但实际上对初学者很友好，前三章介绍了CSS中的相关概念以及一些写代码时的好习惯和规范，这部分看得比较详细。后几章是实际上手的章节，这几章并没有全部看完，个人觉得css的学习更多靠项目的积累，所以打算是在遇到实际问题之后再回头来参考这本书中的内容。

  5. 《css权威指南》：对于一些基础的概念解释得比较详细，有一点缺陷就是中文翻译得一般，有些内容看起来比较费解，所以有能力的同学可以选择看英文版。

  6. PS切图技巧

  7. PSD转HTML教程:

  8. CodeSchool的html和css教程(付费): CodeSchool上的前端相关课程内容十分完备，而且课程质量大都很高。付费计划是每月29.9刀，包年是19.9刀每月，我当时是买了一个月的会员然后下载了一些自己需要的课程便于以后学习，只不过不是会员就无法进行课程配套的实战练习，这些练习的质量也都很高，大家可以根据自己的实际需求选择包月或包年计划。如果担心课程质量可以先选择一部分免费的课程进行学习，觉得不错再去购买会员。

  9. 学习html和css更重要的是练手，练手项目可以在以下网站中找

（HTML和CSS的篇幅比较少，因为个人觉得JavaScript相对来说更重要一些，而且自己也比较喜欢JavaScript。）

编程入门

  1. Udacity的CS101: 相比MIT的CS101，对初学者更友好一些，而且个人比较喜欢这样的教学方式，短视频+小练习，完全零基础可以先看这个教程。这个教程中的许多小练习都很有价值，包括了一些初级的算法,递归、迭代等，而且几乎每个小练习都有解析。个人认为是一个很棒的入门教程，强烈推荐。（编程语言为Python）

  2. Programming JavaScript: Udacity的CS101是用Python作为教学语言来教授编程入门，这个教程是用JavaScript作为作为教学语言，和前端的学习路线更贴近，看过一部分，觉得也是一门不错的课程。不过Udacity的教程会更加完整一些，可以两个结合起来看，如果对编程语言的基础(变量，分支，循环等)已经有所了解，可以跳过前面的几个部分。这个playlist的来源应该是Foundations of Programming: Fundamentals，这里面各个视频的标题包含每个视频的主要内容，可以通过标题内容选择一些需要的视频进行学习。

  3. MIT-CS101(2008-有中文字幕):很多学习编程的回答中都会有这门课程，是一门口碑特别好的编程入门课程，在刚开始学习时也看过一部分，但是由于对计算机完全零基础，所以对某些概念的理解困难比较大，于是看过一部分之后就暂时没有再学习。

  4. MIT-CS101(2011-无中文字幕):和上面的课程实际上是同一门课，只是版本不同，是最近开始看的，但这次再学习，和第一次时的感受完全不一样，对其中的大部分概念理解起来更加容易了，学习起来也相对轻松很多，全部都是干货，学得十分开心。通过课程内容标题大概能了解lecture具体的内容，根据自己在学习前端时遇到的问题，暂时只学习了 lecture1-lecture11 的内容。这里再推荐一个用JavaScript来描述排序算法的资源CS-JavaScript

  5. 哈佛大学-CS50(2011-有中文字幕):在网易云课堂里偶然发现的另一门入门教程，相对MIT的课程推荐的人会少一点。当时觉得可以通过看这些视频理解一些基本的概念，于是把一整个系列下载到了手机上，基本上是在碎片时间看的，所以也不算是很认真地看过。不过看了之后发现也是一门很好的课程，比如说在视频中提到了栈,变量的拷贝,引用等，知道了这些概念之后在JavaScript的学习过程中就特别注意到了这几点，也算是有点收获。

  6. 哈佛大学-CS50(2016-无中文字幕): 也是隔了一段时间后的第二次学习，同样也是看得更认真，对其中大部分内容比最初学习时理解更加轻松。

尽管3-6是四门课程，但实际上是两门课程的不同版本，推荐每门选择一个版本认真学习，不理解的内容可以暂时放一放迟一点再学习。虽然都是编程入门课程，但是两者的侧重点不同，所以不用怕内容会有重复，即使有小部分重复也可以帮助自己加深对一些概念的理解。如果刚开始学习时就能看懂大部分内容就在刚开始时认真看下来。如果和我一样最初阶段在理解上困难比较大，推荐学习了Udacity的CS101和一段时间的JavaScript之后再进行认真学习。

在学习MIT-CS101时的一点感悟 :

  • 两次学习时的侧重点有所不同，第一次学习时把侧重点都放在了理解Python的语法以及代码的逻辑而不是编程的基础概念上
  • 印象最深刻是第一次学习对实现Hanoi的代码几乎没有一行是理解的，觉得把实际问题转化成代码实在太难了，但是最近再去学习，理解上竟然一点困难都没有了。所以大家在学习时千万不要因为一时看不懂就放弃了！
  • 分享偶然看到的一句话: If you can’t solve a problem, then there is an easier problem you can’t solve: Find It. 所以学习应该是循序渐进的过程，现在不懂不代表以后不懂，把不懂的问题先放着，先去学习自己现在能够理解的知识，随着学习的深入，很可能你当时遇到的问题就不再是问题了。因此个人认为学习的材料应该在自己所掌握的知识之外，理解范围之内，在学习这样的材料时，既能学到知识，学习的热情和信心也会更高。因为在学习某些课程时，有些内容就算特别认真地看，很多概念也还是无法理解，所以可以将这些内容暂时放在一边，先学习自己理解能力范围之内的内容，等以后对不理解内容有过接触和了解之后再去学习相关内容。

JavaScript

我学习JavaScript的方式是先学习一些相关的系列教程，然后总结出自己在学习过程中遇到的问题，和在一些知乎回答中总结出的JavaSript里比较难理解的概念进行深入学习。深入学习一般是先在一些权威书籍中找到这些概念进行学习，看了书之后还是无法理解就会在YouTube上找相关的内容，如果还是不够清楚就会在Google或者Stackoverflow上寻找相关答案。

下面推荐一些自己认为不错的JavaSript的系列教程，书籍以及YouTube频道。

书籍

  1. 《JavaScript编程精解(第二版）》: Eloquent JavaScript的中文译本，强烈建议购买，最好的入门书，没有之一。把很多概念讲的很明白，对初学者友好的同时又有一定的深度。把这本书称作入门书其实有点不恰当，因为这是一本在学习JavaScript过程中一直可以翻阅的书，覆盖的范围很广，从JavaScript的基础语法，函数式编程，面向对象编程，DOM，HTTP到Node.js….

  2. 《JavaScript DOM编程艺术》: 也是一门很适合初学者的书，读完之后大概可以了解JavaScript的基础语法和DOM的相关知识。

  3. 《JavaScript面向对象编程指南(第2版)》

  4. 《你不知道的JavaScript(上卷)》: (中文版还有一本中卷，但是翻译得一般，所以不建议买中文版中卷, 这里是英文原版的github地址：You Don’t Know JS)

  5. 《JavaScript权威指南(第6版)》

  6. 《JavaScript语言精粹》

在看这些书时并不是一节一节看下来的，所以并没有把列举的这些书全部看完，不过这几本书翻得挺多的，在遇到难以理解的概念时先到这些书里找相关的内容。因为每本书对不同的概念的解释方式都有所不同，结合起来学习的效果会更好一些。而且这些都是比较权威的书籍，多看看这些书在学习时也能少花费一些精力。如果书里有代码可以自己一边敲一边学习，也能加深理解。

视频教程

  1. Codecademy的JavaScript课程: 由于对基础概念一点都不了解，虽然当时刷完了，但从中收获不大，因为在利用这些交互式教程学习时，思维会很容易转换成为了完成任务而学习，而不是为了理解概念而学习。个人觉得在了解了一点基础知识之后再开始学习这种交互式的教程效果会更好一点，用来巩固知识和加深理解一些概念。当然这个教程本身是很好，只是学习时应该注意方法。

  2. Code School的JavaScript课程: Code School的课程质量就不再细说了，个人觉得是自己在学习过程中看过的最完整的一个教程。

  3. Udacity的JavaScript基础

  4. Wesbos的JavaScript30: Wesbos的教程质量都很高，而且讲课很有趣，这个教程是通过30个实际项目来教授一些HTML5,CSS3,JavaScript相关的知识，是2016年末刚出的教程，所以我自己是最近才开始学习这个教程，不是在初学阶段学习。

  5. JavaScript: Understanding the Weird Parts(付费) - Udemy: 个人觉得这套课程非常好，对JavaScript语言的介绍深入浅出，是自己很喜欢的一门课程，YouTube上有前3.5小时的课程内容，可以先看完再决定是否要购买。前3.5h链接

YouTube频道推荐

这里选了几个学习时看得比较多的频道，大家有问题的时候可以直接在YouTube上搜索相关关键词，然后选择订阅量较多的频道和浏览量多的视频进行学习。

JavaScript以及web开发中需要重点学习的知识点

这部分的重点是列出知识点，因为都是比较零散的内容，所以下面的推荐学习内容只列出一部分，具体的学习还是需要根据自己的理解程度来安排，仅仅只学习推荐的学习内容是不够的，还是需要自己另外看书看教程直到真正理解。

  1. 闭包，this，作用域，原型链

当时学习过程中对这些概念的理解遇到比较大困难，花了挺长一段时间去消化，有些书反反复复翻了很多遍，相关视频也看了好几遍。不过虽然难理解，但花一些时间和精力下去还是可以掌握的，初次遇到觉得很难也不要害怕。看书很重要。

  1. AJAX

  2. JSON

  3. Git

  4. jQuery

    • Try jQuery - CodeSchool:试过刚开始学习时就去看，可是一点都看不懂，所以不适合刚开始学习时看。建议学习一段时间的JavaScript之后再开始学习jQuery。
    • 《锋利的jQuery》
    • Intro to JQuery - Udacity
    • 之前推荐的YouTube Channel里有好几个都有jQuery教程，可以根据自己喜好在其中选择。

  5. Event

    • Event : 这个视频及其所在playlist接下来的4个视频都是Event的相关内容，整个playlist是一套JavaScript教程，由于自己是在对JavaScript有一些了解之后才发现的这套教程，所以并没有把全部教程看完，只看了自己有疑问的部分内容。个人觉得讲解得比较详细，全套教程应该也值得一看。

  6. Internet相关知识:

  7. ES6

    视频教程:

    文字教程(在学习过程中发现，自己暂时还没有全部学习过):

React

选框架:

选择学习的框架之前也做了一些功课，找了一些网上的一些框架比较，初定是在React, Vue2中选择一个进行学习，最终选择了React。主要有两个原因，一是React的学习路线虽然相比Vue2更陡峭，但学到的知识会更多; 二是React的学习资源相比Vue2会更多。

教程:

  • React-thenewboston
  • React-CodeSchool(付费)
  • React-The Net Ninja
  • React-egghead.io

  • The Ultimate Introduction to ReactJS:
    这个教程与其他教程有所不同,视频内容刚开始是用原生写一个Tic Tac Toe游戏，写完之后po主分析了用原生JS的弊端:用户的操作直接和DOM进行交互，很容易产生bug，比如点了游戏网格外的界面之后，整个页面就会被重写，因为这个点击直接修改了body的innerHTML。
    然后他分析了应该怎么做才能避免这些bug，整体思路就是一步一步把你往React的逻辑里带。

  • The Complete React Web App Developer Course(付费) - Udemy:覆盖的内容很多，老师讲课讲得很好，用的是React旧版的API讲解，所以没有完全跟着敲，自己在学习时是用新的API，遇到挺多问题，不过也学到更多，除了学习到ES6，对this的理解也有所加深。Udemy有一个好处就是在遇到问题时可以直接在网站上提问，老师一般在第二天就会解答。

  • Modern React with Redux(付费) - Udemy: 与前一位老师的讲课风格有差异，课程的侧重点也不同，所以两门课都值得购买。这门课程的老师还开了几门React相关的课程，有兴趣的同学可以自己在Udemy上找一下。

  • 学习React时遇到的最大困难就是 生命周期函数 ，后来理解了之后想了想应该是自己对DOM的渲染没有深刻的理解。当时也看了挺多视频和文章，但是没有记下网址，不过大部分视频是在YouTube上找到的，大家可以直接在YouTube上搜索，根据浏览量和自己的喜好进行学习。

Node

学习Node的方法和React很相似，都是先从YouTube上找相关的系列教程进行学习，但学习了一段时间之后，发现仅仅靠学习YouTube的教程只能达到入门水平，对很多抽象概念的理解(比如说stream, middleware, buffer,websocket等等)有比较大的困难，深入学习还是需要找另外的资源。于是开始找相关的书籍资源，国内Node的书不多，口碑最好的是朴灵老师的《深入浅出Node》。但是看了一部分之后发现自己暂时还没达到看懂这本书的水平。因此开始找其他的资源，在知乎上发现了一个比较不错的回答如何系统地学习Node.js？via @itlr.
后来无意中又发现了Udemy这个视频网站，抱着试试看的心态买了两门课程，后来就入了Udemy的坑，也在上面发现很多好课程。
上面回答中包含的资源这里就不再列举，下面列一些自己找到的资源。

(对Node的学习并没有特别深入，因为考虑到自己的时间问题，当下应该先专注前端的学习，所以学习了一段时间之后就暂时放着了，不过在学习Node的同时对JavaScript以及后端的一些知识也有了更深入的了解，收获很大。而且因为是JavaScript, 所以也学习得十分开心，准备等工作之后有时间再深入学习。）

其他

  1. webpack

  2. 命令行:

  3. Markdown:

  4. 正则表达式

  5. 工具推荐:

    • Dev Docs: 查API，包括很多编程语言和框架，可以离线缓存，十分方便。
    • Duet Display: 在电脑和iPad上分别下载这个app，能够将iPad作为电脑的扩展屏，iPad上是付费版本，个人认为挺值的。
    • JSBin: 直接在网站上运行HTML,CSS,JS代码，需要运行一些简单代码时会比较方便，还能自己扩展library运行React或Vue等项目。
      同类型的网站还有jsfiddle和codepen。

The End