一个寒假回来，好几个同学都来问我或者自己开始学起了前端，前端入门虽然简单，但是想要做好很难，是一个要通十行才能精一行的工作。再这几年 MVVM 框架的大肆流行，前端已经不是以前用 jQuery 写一写就可以的时代了。于是我写下这篇文章，来给大家一个参考。

首先，请大家牢记以下几点：

前端不简单！前端不简单！前端不简单！前端和美工不一样！不是只会 HTML、CSS、JavaScript 就行的。程序和其他的行业不一样，经验是十分重要的，不管看多少书，都逃不过要经常的练习。在学会使用 JavaScript 实现相同操作之前，不要使用 jQuery。JavaScript 和 Java 的关系如同雷锋和雷峰塔的关系一样，并没有什么关系！前期准备工作下载好 Sublime Text 3，并自行找教程安装 Package Control。安装完后使用 Package Control 安装 Sublime Text 的汉化包，名字叫做 ChineseLocalizations。之后单独写 HTML 和 CSS 的时候，使用 Sublime Text 编辑。下载 Chrome 浏览器，目前（2017 年 3 月 9 日）最新版本为 56，请尽量安装最新版本，并设置为默认浏览器。下载 Visual Studio Code，之后单独写 JavaScript 的时候，使用 VS Code 编辑。下载并在本地安装 Node.js，目前（2017 年 3 月 9 日）最新版本为 7.7.1，请尽量安装最新版本。使用 Google 搜索，不能使用 Google 的使用 Bing 搜索，不要使用百度。注册一个 Github 账号。初学阶段

学习时间：1 个月

初学阶段主要是学习 HTML、CSS 和 JavaScript，掌握三种语言的基础语法，并且掌握基本的布局方式、基本的 DOM 操作和算法。

HTML 和 CSS

推荐跟着 iMooc 的《HTML + CSS 基础课程》学习，里面的每一小节都是指引式的教学，跟着指导学习 HTML 和 CSS 的基础语法。

链接：

学习完上面《HTML + CSS 基础课程》的所有内容之后，自行完成一个百度搜索的首页，要求做到位置、颜色、间距等 99% 还原。不需要点击可以搜索。

【3.12 更新】

课程中没有提到的该学习的还有 flex 布局。

JavaScript

学习 JavaScript 可以上廖雪峰的网站上学习：

跟着目录从上往下学习，一直到 Promise。

学习的过程中可以结合练习题学习，这里整理了一些：

正确把代码写的简单，短小。最好能一行实现。

当你学完 HTML、CSS 和 JavaScript 的基础之后，完成这么一个小练习：

实现一个简单的 TodoList

不懂啥是 TodoList 的自行 Google

限制

界面不能照抄网上已有页面的风格，可以把网上的设计稿做成你的页面，也可以自己设计不能使用任何已有的库（如 jQuery, Bootstrap, Vue 等）增加、删除、修改的操作执行后，页面不能刷新

基本功能

增删改查

增删改查是指可以实现“增加”、“删除”、“修改”、“查询”四个功能。 其中“查询”不代表“搜索”，只要页面刷新后，数据能够正常显示即可。可以储存 “内容” 与 “是否已完成” 的状态使用 localStorage 储存数据界面尽可能做的好看

加分项

可以只显示“未完成”或“已完成”的条目

你可以把它们分开显示，或者是通过按钮切换显示，或者你也可以自己想一种把它们分开显示的方法给每一条 todo 添加 “完成日期”在第二点的基础上，已过期的条目有不同的样式其它更牛逼的功能进阶阶段

学习时间：1 个月

学习完上面的课程，你就已经是一个合格的美工了，能根据设计师的设计稿实现出页面，但是还不是一个前端工程师，或者说还不是一个工程师。这一阶段你要开始接触一些作为程序员需要学习的东西。

Markdown

首先学会使用 Markdown 进行写作，Markdown 是什么，怎么样个语法；

git 版本控制

其次要学会使用 git 进行版本控制，还是刚刚的廖雪峰—— git 教程：

并且把上面做的两个项目，通过 git push 到 Github 上开源，README.md 使用 Markdwon 编写。

HTTP, Ajax 和异步

学习 Ajax 的基本实现，在这个阶段你会接触到 JavaScript 的异步编程，你得自行了解什么是异步，并且会开始基础 HTTP 协议，请自行了解 HTTP 状态码，请求头，响应头等基础知识，并了解 TCP/IP，HTTP，HTTPS 协议的概念和关系。接着了解 JavaScript 的同源策略，为什么需要同源策略，以及如何跨域。

高级阶段

学习时间：6 个月以上

【3.12 更新】

这个阶段你会开始多终端前端的开发，了解响应式布局，接触前端工程化和前端框架，并开始深入学习 JavaScript 的深入内容，包括 ES6、ES7 等。

响应式布局

了解响应式布局的应用范围、基本原理。学习 em, px, rem, vh, vw 等单位的使用。

ECMAScript 6

学习 ECMAScript 6，了解 ECMAScript 和 JavaScript 的关系，具体文章可以看阮一峰的 《ECMAScript 6 入门》，另外可以参考我写的《ECMAScript6 学习笔记》。

NPM

自行找教程学习 npm 的使用，接触前端工程化，了解 Gulp, Webpack 等工具的用处，并在本地自己搭建一个工程化环境。

前端框架

自行找教程学习 Vue.js 或 React 或 Angular 等前端框架，并尝试使用这些框架搭建一个单页面应用。以下以 Vue.js 举例：

学习 Vue.js 基础语法，一定要看官方的文档来学习：。学习使用 Vue-cli 在本地一键搭建 Vue.js 项目。本地开发一个 Todolist 的 Vue.js 版本，同样使用 localstorage 进行存储。学习使用 Github pages 部署开发好的 Todolist，可以让别人一起使用。了解 Vue.js 2.0 的内部原理和外部思想：Virtual DOM数据监听render 函数单向数据流Vue.js 的 Lifecycle服务端渲染的原理Vuex 和 Vue-Router……

Canvas 相关

了解 Canvas API 的使用，懂得使用 Canvas 制作动画，以此来制作一些更炫酷的前端效果，如图片背景的高斯模糊等。

深入阶段

学习时间：无限

这个阶段是作为一个前端继续精进自己的一个阶段，你已经可以胜任小型项目了，但是还有一些细节需要你一直不断的学习。

前端储存

前端储存知识点：

储存技术有哪些？Cookie, SessionStorage, LocalStorage 有什么区别？……

History API

什么是 History API，为什么要增加这个功能？

性能优化

学习有关前端性能优化的相关知识等：

如何缩短白屏时间如何提升 CSS3 动画的性能……

安全

学习有关前端的安全相关知识等：

通信安全如何保障 Ajax 通信安全XSS 攻击什么是 XSS 攻击如何防范 XSS 攻击CSRF 攻击什么是 CSRF 攻击如何防范 CSRF 攻击CSRF 攻击和 XSS 攻击的区别是什么……

兼容性

有关 IE 浏览器以及老版本浏览器的兼容性问题的学习和解决，包括：

HTML 标签的兼容性CSS 样式的兼容性JavaScript 的 API 的兼容性优雅降级与渐进增强学习后端

等到前端学习的差不多了，可以通过 Node.js 来接触后端的开发，这里不再详述。