前端入门虽然简单，但是想要做好很难，是一个要通十行才能精一行的工作。再这几年 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 的基础语法。
链接：http://www.imooc.com/learn/9
学习完上面《HTML + CSS 基础课程》的所有内容之后，自行完成一个百度搜索的首页，要求做到位置、颜色、间距等 99% 还原。不需要点击可以搜索。
【3.12 更新】
课程中没有提到的该学习的还有 flex 布局。
JavaScript
学习 JavaScript 可以上廖雪峰的网站上学习：
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
跟着目录从上往下学习，一直到 Promise。
学习的过程中可以结合练习题学习，这里整理了一些：
https://github.com/iszu/web-learning/blob/master/JavaScript%E7%BB%83%E4%B9%A0%E9%A2%98.md
正确把代码写的简单，短小。最好能一行实现。
当你学完 HTML、CSS 和 JavaScript 的基础之后，完成这么一个小练习：
实现一个简单的 TodoList
不懂啥是 TodoList 的自行 Google
限制
- 界面不能照抄网上已有页面的风格，可以把网上的设计稿做成你的页面，也可以自己设计
- 不能使用任何已有的库（如 jQuery, Bootstrap, Vue 等）
- 增加、删除、修改的操作执行后，页面不能刷新
基本功能
- 增删改查
增删改查是指可以实现“增加”、“删除”、“修改”、“查询”四个功能。 其中“查询”不代表“搜索”，只要页面刷新后，数据能够正常显示即可。 - 可以储存 “内容” 与 “是否已完成” 的状态
- 使用 localStorage 储存数据
- 界面尽可能做的好看
加分项
- 可以只显示“未完成”或“已完成”的条目
你可以把它们分开显示，或者是通过按钮切换显示，或者你也可以自己想一种把它们分开显示的方法 - 给每一条 todo 添加 “完成日期”
- 在第二点的基础上，已过期的条目有不同的样式
- 其它更牛逼的功能
进阶阶段
学习时间：1 个月
学习完上面的课程，你就已经是一个合格的美工了，能根据设计师的设计稿实现出页面，但是还不是一个前端工程师，或者说还不是一个工程师。这一阶段你要开始接触一些作为程序员需要学习的东西。
Markdown
首先学会使用 Markdown 进行写作，Markdown 是什么，怎么样个语法，可以查看我之前的推送：
https://mp.weixin.qq.com/s?__biz=MzI1MDA2MTUyMQ==&mid=210548061&idx=1&sn=df5b99d555867c279596dde9b1862de2#rd
git 版本控制
其次要学会使用 git 进行版本控制，还是刚刚的廖雪峰—— git 教程：
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
并且把上面做的两个项目，通过 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 基础语法，一定要看官方的文档来学习：https://cn.vuejs.org。
- 学习使用 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 来接触后端的开发，这里不再详述。
转发关注+私信小编 “ 资料”，即可获取啦！
閱讀更多 馮文說編程 的文章
