記錄一些收集的資料
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
