记录一些收集的资料
https://www.zhihu.com/question/30180100
一 初级篇：HTML/CSS/JavaScript基础知识
1.1 Html（视频+文档+项目）
视频教程
imooc(全免费、全自学):HTML+CSS基础课程-慕课网
网易前端微专业（1000+软妹币、有答疑、便宜、够用）：前端开发工程师微专业
参考文档
菜鸟学院（基础、简单）：HTML 教程 | 菜鸟教程
Mozila官方文档（全E文、逼格高，详细）：MDN HTML Doc
项目
完成零基础Html基础编码：百度前端技术学院
1.2 CSS（视频+文档+项目）时间：1周
视频教程
imooc(全免费、全自学):HTML+CSS基础课程-慕课网
网易前端微专业（1000+软妹币、有答疑、便宜、够用）：前端开发工程师微专业
参考文档
菜鸟学院（基础、简单）：CSS 教程 | 菜鸟教程
Mozila官方文档（全E文、逼格高，详细）：MDN CSS Doc
完成项目
完成Htm/Css基础编码的所有项目：百度前端技术学院 - HTML/CSS所有项目
1.3 JavaScript初级(视频+文档+项目）时间：1周
imooc(全免费、全自学):JavaScript入门篇-JavaScript入门视频教程-慕课网
网易前端微专业（1000+软妹币、有答疑、便宜、够用）：前端开发工程师微专业
参考文档
菜鸟学院（基础、简单）：JavaScript 教程 | 菜鸟教程
Mozila官方文档（全E文、逼格高，详细）：MDN JavaScript DOC
完成项目
完成该页面中的前三个项目：百度前端技术学院 - JavaScript
1.4 JavaScript高级(视频+文档+项目）时间：2周
imooc(全免费、全自学):JavaScript进阶篇_JavaScript视频教程-慕课网
网易前端微专业（1000+软妹币、有答疑、便宜、够用）：前端开发工程师微专业
参考文档
菜鸟学院（基础、简单）：JavaScript 教程 | 菜鸟教程
Mozila官方文档（全E文、逼格高，详细）：MDN JavaScript DOC
完成项目
完成该页面中的所有项目：百度前端技术学院 - JavaScript
1.5 Web基本操作（纯项目）时间：2周
Html/CSS/Javascript的内容到此学习完毕，剩下的之需要用项目来打磨，所以你需要完成页面中直到任务7的项目：百度前端技术学院 - 所有课程
【以上为4.30之前应该完成的任务们，与君共勉】
收集：
论坛：前端网
大牛的博客可以关注下：
阮一峰阮一峰的网络日志
张鑫旭首页 » 张鑫旭
书
第一步：入门 html & css ，用时 2 周Head First HTML与CSS（第2版） (豆瓣)
第二步： 入门 javascript ，用时 3 周JavaScript DOM编程艺术 （第2版） (豆瓣)
第三步：入门 jQuery，用时 3~4 周锋利的jQuery (豆瓣)
最重要的一步：复习巩固，用时 6~12 周
工具书：
进阶：（知乎问题：前端为什么那么多人）
在几年前的基础上，现在入行至少理解目前常用的客户端模式的一种，比如 MVVM FLUX。至少一个跟那些模式相关的前端框架，比如 Angular，React，Vue。一定要学会项目的构建，使用 Webpack 或是 Gulp 。一定要会一种 CSS 预处理语言，例如 SCSS，LESS 。一定要了解 NodeJS 的常识，例如使用 NPM 做依赖管理，使用 Express 跑起最简单的应用。
上面是必须的，往后说说加分项。
会 ES6，TypeJS 是加分项，懂得多终端适配是加分项，懂得如何进行单元测试和功能测试是加分项，懂得函数式编程是加分项，懂得后端开发的知识是加分项，懂得一门不是 JS 的编程语言是加分项。
如此一来，可以甩掉不少竞争者吧，但是比起只需掌握 HTML CSS JS jQuery 就能找工作的三四年前，要多了不少内容呢。
首先你需要安装 NodeJS 然后看这里（《一起学 Node.js》彻底重写完毕 - CNode技术社区）免费的 NodeJS 教程哎，时间多，可以看完顺便学习后端知识，时间不多，看前三章，看完后有收获，记得给作者打赏，请他喝杯咖啡。接下来马马虎虎就知道 NodeJS 是什么鬼了。
然后学习 Vue 技术栈，现在有许多公司在使用，岗位数量有保证。同时它简单易学，不像 AngularJS 那么重，也没有 React 那么多文绉绉的概念，文档齐全教程丰富，随便在 GitHub 上搜 Vue 都能找到许多实例项目可以参考学习。先跟着 Vue 官方教程(https://cn.vuejs.org/v2/guide/)走一遍，基本上 Vue 技术栈中常用的几个模块就能一一碰到了，它们分别是 vue-router vuex。
然后当你看完教程想要新建目录准备大干一场的时候，发觉自己什么都不会，别担心，这是人之常情。学过 NodeJS 的你，可以在 5 秒钟内敲出指令，通过 NPM 安装一个 vue-cli （文档地址：vuejs/vue-cli: Simple CLI for scaffolding Vue.js projects）然后使用它的 webpack 模版（文档地址：vuejs-templates/webpack: A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.）不出三分钟，你就得到了一个配置完善的 Vue 项目，有一整套的基于 Webpack 的构建流程，连目录都给你建好了，你只需在此基础上不断的增加自己的代码。
接着可以在 GitHub 上找一个你喜欢的项目模仿学习，比如在 GitHub 上搜索「vue 知乎日报」就能出现许多相关项目。尽量找新的，并且使用了全套 Vue 技术（Vue、Vue-Router、Vuex、Vue-Resource）的项目来参考。
接着，对着各种文档，边查看边练习吧，当你磕磕碰碰完成一个完整的项目时，你会发觉自己更上一层楼了，找工作也没原来那么难了。再看原来那些 jQuery 代码，你就会发现那是上个时代的产物了。
另外，当你想要让 Webpack 帮你处理更多的东西时你可以看看 Webpack(webpack) 的文档，然后修改 vue-cli 给你生成的 Webpack 的配置代码，你就能尝试配置自己的项目了，顺便学习 Webpack 的使用。想写 SCSS ？Webpack 有个 scss-loader。想写 ES6 ？ Webpack 有个 babel-loader。等等等等……
前文提到的 Vue-Resource 作者已经停止维护，替代品是 axios 地址在这 ：mzabriskie/axios
如果 Webpack 一下子不好弄懂，这里有个非常不错的 webpack 中文教程：Introduction · Webpack for fools
