针对如何自学编程从入门到无压

　　直接进入正题。我比作编程入门是一个螺旋上升的过程，既要反复看书，也必须抓紧时间实践。入门的话三个月肯定是足够了。

 

　　IFE（百度前端技术学院）是一个绝佳的练习平台，题目都是开源的。15年的学习资料比较多，而16年的题目题量较大，难度也稍大。所以我个人建议先刷点 15 年的基础题，不会做也可以参考别人的代码。

 

　　这个是官网。

 

　　自己想搞点其他项目也是可以的，本质上就是要给自己找点事情做，绝对不能单看书。

 

　　我把这三个月大致分为三个阶段。

 

　　1. HTML + CSS

 

　　前端的入门门槛极低，体现在 HTML 和 CSS 上。运行环境就是浏览器，推荐 Chrome。你需要的只是一个编辑器，直接用 VSCode 吧，或者sublime

 

　　HTML 和 CSS 不是编程语言，前者只是结构标签，后者则是样式配置，入门是非常简单的。网上资料也有很多，可以参考

 

　　我当时是看了一本书。

 

　　Head First HTML and CSS，比较无脑，虽然浅显易懂但价格比较感人，粗略翻一遍就可以了，不用买。

 

　　迅速刷一遍 MDN 上介绍 HTML 和 CSS 的部分，对两者有个大致印象就好，不用死记硬背，短时间记不住的。刷慕课网勉强还行，但以后查资料还是要看 MDN 的，建议一步到位，最好看英文原版的。

 

　　接下来就是学习 CSS 了，CSS 要学深入非常难，入门的话会切图就行了。推荐：

 

　　《CSS 权威指南（第四版）》。第四版包含了 CSS3 的内容，不需要再看别的了。这书非常枯燥，花几天硬啃下来就好了。属性细节不必记忆，以后用到肯定要再查的。着重点放在大局上，抓住重点快速过一遍，比如盒模型、定位、弹性盒布局等。

 

　　以上内容用时 5 天左右，主要是啃《CSS 权威指南（第四版）》。下面是实践。

 

　　学了几天 HTML 和 CSS 了，应该也有点成果了。打开 IFE2015 task1，写个静态页面吧。

 

　　写不出来是正常的。可以去看下别人的代码吧，看一小部分就开窍了。忘掉的属性就查书或者查 MDN，多尝试，不断踩坑才有进步。

 

　　切完一张图后，别着急往下写。新手的代码通常会有胡乱的代码缩进、毫无章法的属性顺序等问题。

 

　　这时候应该重写。重写之前先找一份代码规范，比如 。当然代码规范不是唯一的，只要合理及风格统一即可。

 

　　再去看一下别人提交的代码，多看几份。当然自己也要判断，不能听风就是雨啊，人家写得不好你再去重写一次，等于你也有责任对不对。

 

　　开始重写了，会发现写代码速度也快了很多。切几张页面后，应该比较熟练了。如果看到页面布局就大概知道应该怎么写了，那就可以进入 JavaScript 的学习了。

 

　　以上内容用时 10 天左右。

 

　　进阶部分可以回头再看：

 

　　掌握预处理工具 Sass 或 Less，语法都差不多，不用死记硬背，一通百通。

 

　　阅读 Bootstrap 源码。其实用得很少了，主要是看下大量的 CSS 代码是如何组织的，以及关注栅格布局等关键实现。

 

　　《CSS 揭秘》，奇技淫巧合集，增长一下见识，献上膝盖就行。

 

　　2. JavaScript

 

　　这是至关重要的阶段。广义的 JavaScript 可以大致分为语言特性（ECMAScript）和 Web API（DOM、BOM 等）。

 

　　强烈推荐《JavaScript 高级程序设计（第3版）》，俗称红宝书。前七章大致讲语言特性，是重中之重，必须反复阅读，直至完全理解，有 C/C++ 基础的同学应该没什么问题。DOM、事件流、表单、JSON、Ajax 与最后几章也相当重要，是一些常用的 Web API。其余章节可以略读或直接跳过，比如像 XML 这种已经没用的东西就不用看了，还有那些列举大量 API 的章节，用到再查

 

　　推荐《JavaScript 语言精粹》，俗称蝴蝶书。超薄的一本，半天就可以看完。JavaScript是一门有很多坑的语言，去掉坑就是“精粹”了，过一遍就好，不理解的以后回头再看。

 

　　ECMAScript（简称 ES） 规范在 2015 年后每年都有新特性加入，而红宝书成书时间较早，很多知识点已经跟不上了。ES6（又称 ES2015） 及以后的语言特性也是必学内容，推荐阮一峰老师的《ES6 标准入门》，但这本书以 API 居多，所以还是留个大致印象，以后写到类似的地方，查一查在新的语言特性下，有没有更简洁的写法就好，不必死记硬背。

 

　　强烈推荐

 

　　原版是英文的，有需要的同学可以自行搜索中文版。非常精彩的书，将 JavaScript 的细节一网打尽。前几本书里搞不懂的东西，比如 this 的指向等问题，通常都能在这里找到答案。

 

　　不太推荐《JavaScript权威指南》，也就是犀牛书，那就是像一本字典。我就翻过一下，没有细读，不好进一步评论。

 

　　部分知乎用户评论里有提到 jQuery，我觉得完全不用看，写祖传项目的时候再学也很简单的。还是要以原生的 API 为主。

 

　　以上内容用时 1 个月左右，如果有一些编程经验的话，应该没什么压力。 这些书全部刷完后，差不多就入门了，可以跟人谈笑风生了。 开始实践，IFE2016 阶段二的题基本随便刷。

 

　　进阶：

 

　　TypeScript。对于有静态语言经验的同学，可以直接上手，基本没有难度。

 

　　学会使用包管理工具 npm，学会在社区上找想要的包，如 尝试使用 webpack 构建项目，并通过 Babel 编译 ES 新特性的代码兼容旧版浏览器。配置 webpack 令人痛苦，先能跑起来就行，精细的优化可以以后慢慢调，多查点资料

 

　　配置 ESLint 规范代码格式，养成良好编码习惯

 

　　看一下 lodash，尝试自己用简洁的代码实现。不希望读过我回答的人还遇到下面这种情况，因为这个问题里的面试官我认识（逃

 

　　Web Fundamentals 宝藏网站，Web 开发进阶必读

 

　　3. JavaScript 框架

 

　　这部分就比较自由了，每个人点的技能树都不一样的。前端的发展是爆炸式的，换工具比翻书还快，所以还是以看文档为主了。

 

　　目前主流框架经常被提及的是 React，Angular，Vue。知乎搜一搜就有相当多的优秀答案了。

 

　　熟练掌握至少一种框架，把 IFE2016 刷通关吧，耗时 1 个半月左右。我个人推荐 React，对提升 JavaScript 基础有很大帮助。Vue 更像是一门新语言。新人通常不用纠结框架好坏，时间长了都学会也没什么难度吧。

 

　　进阶：框架周边生态，如无数种 Redux 封装，无数种 CSS in JS 方案等

 

　　造些轮子

 

　　带着问题读源码

 

　　Node.js，Backend for Frontend

 

　　……

 

　　都到了这个份上，该学什么心里都有数吧，还用写么

 

　　以下为推荐给非科班学生，当然科班学生看了如果觉得也需要巩固，那肯定更好的。

 

　　4. 计算机基础知识

 

　　发现前端有太多的非科班选手，所以特此补充一节，不懂基础的话天花板会很低。由于本人有 OI 的经验所以稍微占点优势。

 

　　操作系统：

 

　　《深入理解计算机系统》（CSAPP），入门级别的书，挑重点看一下

 

　　《现代操作系统》，翻译得比较差，有条件的同学可以读英文原版，或者用 Operating Systems: Three Easy Pieces 代替

 

　　The Linux Programming Interface，系统编程好书，跟前端的直接关系已经不大了，但不了解一下的话实在说不过去，不要把路子走窄了

 

　　Advanced Programming in the UNIX Environment （3rd Edition）（中文版《UNIX 环境高级编程》），同上面的可以一起看

 

　　计算机网络：

 

　　《计算机网络 自顶向下方法》，入门的网络书，前端至少也要懂 HTTP 协议吧

 

　　TCP/IP Illustrated（中文版《TCP/IP 详解》），非常详细的经典，内容巨多，按需阅读吧

 

　　UNIX Network Programming（中文版《UNIX 网络编程》），跟上面系统编程的书一起读

 

　　算法和数据结构：

 

　　《算法（第四版）》，书里是 Java 实现的，但其实并不难

 

　　《算法导论》，比较学术，以实践为主的话可以略读

 

　　必须刷题，加强编码水平，LeetCode 级别就足够应付大部分面试了

 

　　《算法竞赛入门经典（第二版）》《算法竞赛入门经典 训练指南》，搞竞赛的基本人手一本，没接触过又感兴趣的可以看一下

 

　　编译原理：

 

　　《编译原理》，俗称龙书。项目里这么多涉及到编译的东西，学一下屠龙之技也无妨啊，其实挺好玩。