記錄一些收集的資料
https://www.zhihu.com/question/30180100
一 初級篇：HTML/CSS/JavaScript基礎(chǔ)知識
1.1 Html（視頻+文檔+項(xiàng)目）
視頻教程
imooc(全免費(fèi)粱年、全自學(xué)):HTML+CSS基礎(chǔ)課程-慕課網(wǎng)
網(wǎng)易前端微專業(yè)（1000+軟妹幣、有答疑智政、便宜乏悄、夠用）：前端開發(fā)工程師微專業(yè)
參考文檔
菜鳥學(xué)院（基礎(chǔ)弱匪、簡單）：HTML 教程 | 菜鳥教程
Mozila官方文檔（全E文、逼格高，詳細(xì)）：MDN HTML Doc
項(xiàng)目
完成零基礎(chǔ)Html基礎(chǔ)編碼：百度前端技術(shù)學(xué)院
1.2 CSS（視頻+文檔+項(xiàng)目）時(shí)間：1周
視頻教程
imooc(全免費(fèi)税灌、全自學(xué)):HTML+CSS基礎(chǔ)課程-慕課網(wǎng)
網(wǎng)易前端微專業(yè)（1000+軟妹幣吹害、有答疑螟凭、便宜、夠用）：前端開發(fā)工程師微專業(yè)
參考文檔
菜鳥學(xué)院（基礎(chǔ)它呀、簡單）：CSS 教程 | 菜鳥教程
Mozila官方文檔（全E文螺男、逼格高，詳細(xì)）：MDN CSS Doc
完成項(xiàng)目
完成Htm/Css基礎(chǔ)編碼的所有項(xiàng)目：百度前端技術(shù)學(xué)院 - HTML/CSS所有項(xiàng)目
1.3 JavaScript初級(視頻+文檔+項(xiàng)目）時(shí)間：1周
imooc(全免費(fèi)纵穿、全自學(xué)):JavaScript入門篇-JavaScript入門視頻教程-慕課網(wǎng)
網(wǎng)易前端微專業(yè)（1000+軟妹幣下隧、有答疑、便宜谓媒、夠用）：前端開發(fā)工程師微專業(yè)
參考文檔
菜鳥學(xué)院（基礎(chǔ)淆院、簡單）：JavaScript 教程 | 菜鳥教程
Mozila官方文檔（全E文、逼格高篙耗，詳細(xì)）：MDN JavaScript DOC
完成項(xiàng)目
完成該頁面中的前三個(gè)項(xiàng)目：百度前端技術(shù)學(xué)院 - JavaScript
1.4 JavaScript高級(視頻+文檔+項(xiàng)目）時(shí)間：2周
imooc(全免費(fèi)迫筑、全自學(xué)):JavaScript進(jìn)階篇_JavaScript視頻教程-慕課網(wǎng)
網(wǎng)易前端微專業(yè)（1000+軟妹幣宪赶、有答疑、便宜脯燃、夠用）：前端開發(fā)工程師微專業(yè)
參考文檔
菜鳥學(xué)院（基礎(chǔ)搂妻、簡單）：JavaScript 教程 | 菜鳥教程
Mozila官方文檔（全E文、逼格高辕棚，詳細(xì)）：MDN JavaScript DOC
完成項(xiàng)目
完成該頁面中的所有項(xiàng)目：百度前端技術(shù)學(xué)院 - JavaScript
1.5 Web基本操作（純項(xiàng)目）時(shí)間：2周
Html/CSS/Javascript的內(nèi)容到此學(xué)習(xí)完畢欲主，剩下的之需要用項(xiàng)目來打磨，所以你需要完成頁面中直到任務(wù)7的項(xiàng)目：百度前端技術(shù)學(xué)院 - 所有課程
【以上為4.30之前應(yīng)該完成的任務(wù)們逝嚎，與君共勉】
收集：
前端技能圖譜? ? ? ??慕課網(wǎng)前端工程師視頻? ? ? ? ??前端開發(fā)分享
論壇：前端網(wǎng)
大牛的博客可以關(guān)注下：
張鑫旭首頁 ? 張鑫旭
大漠w3cplus_引領(lǐng)web前沿扁瓢，打造前端精品教程
書
第一步：入門 html & css ，用時(shí) 2 周Head First HTML與CSS（第2版） (豆瓣)
第二步： 入門 javascript 补君，用時(shí) 3 周JavaScript DOM編程藝術(shù) （第2版） (豆瓣)
第三步：入門 jQuery引几，用時(shí) 3~4 周鋒利的jQuery (豆瓣)
最重要的一步：復(fù)習(xí)鞏固，用時(shí) 6~12 周
工具書：
JavaScript高級程序設(shè)計(jì)（第3版） (豆瓣)
進(jìn)階：（知乎問題：前端為什么那么多人）
在幾年前的基礎(chǔ)上挽铁，現(xiàn)在入行至少理解目前常用的客戶端模式的一種伟桅，比如 MVVM FLUX。至少一個(gè)跟那些模式相關(guān)的前端框架叽掘，比如 Angular楣铁，React，Vue更扁。一定要學(xué)會項(xiàng)目的構(gòu)建盖腕，使用 Webpack 或是 Gulp 。一定要會一種 CSS 預(yù)處理語言浓镜，例如 SCSS溃列，LESS 。一定要了解 NodeJS 的常識膛薛，例如使用 NPM 做依賴管理哭廉，使用 Express 跑起最簡單的應(yīng)用。
上面是必須的相叁，往后說說加分項(xiàng)。
會 ES6辽幌，TypeJS 是加分項(xiàng)增淹，懂得多終端適配是加分項(xiàng)，懂得如何進(jìn)行單元測試和功能測試是加分項(xiàng)乌企，懂得函數(shù)式編程是加分項(xiàng)虑润，懂得后端開發(fā)的知識是加分項(xiàng)，懂得一門不是 JS 的編程語言是加分項(xiàng)加酵。
如此一來拳喻，可以甩掉不少競爭者吧哭当，但是比起只需掌握 HTML CSS JS jQuery 就能找工作的三四年前，要多了不少內(nèi)容呢冗澈。
首先你需要安裝 NodeJS 然后看這里（《一起學(xué) Node.js》徹底重寫完畢 - CNode技術(shù)社區(qū)）免費(fèi)的 NodeJS 教程哎钦勘，時(shí)間多，可以看完順便學(xué)習(xí)后端知識亚亲，時(shí)間不多彻采，看前三章，看完后有收獲捌归，記得給作者打賞肛响，請他喝杯咖啡。接下來馬馬虎虎就知道 NodeJS 是什么鬼了惜索。
然后學(xué)習(xí) Vue 技術(shù)棧特笋，現(xiàn)在有許多公司在使用，崗位數(shù)量有保證巾兆。同時(shí)它簡單易學(xué)猎物，不像 AngularJS 那么重，也沒有 React 那么多文縐縐的概念臼寄，文檔齊全教程豐富霸奕，隨便在 GitHub 上搜 Vue 都能找到許多實(shí)例項(xiàng)目可以參考學(xué)習(xí)。先跟著 Vue 官方教程(https://cn.vuejs.org/v2/guide/)走一遍吉拳，基本上 Vue 技術(shù)棧中常用的幾個(gè)模塊就能一一碰到了质帅，它們分別是 vue-router vuex。
然后當(dāng)你看完教程想要新建目錄準(zhǔn)備大干一場的時(shí)候留攒，發(fā)覺自己什么都不會煤惩，別擔(dān)心，這是人之常情炼邀。學(xué)過 NodeJS 的你魄揉，可以在 5 秒鐘內(nèi)敲出指令，通過 NPM 安裝一個(gè) 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.）不出三分鐘拭宁，你就得到了一個(gè)配置完善的 Vue 項(xiàng)目洛退，有一整套的基于 Webpack 的構(gòu)建流程，連目錄都給你建好了杰标，你只需在此基礎(chǔ)上不斷的增加自己的代碼兵怯。
接著可以在 GitHub 上找一個(gè)你喜歡的項(xiàng)目模仿學(xué)習(xí)，比如在 GitHub 上搜索「vue 知乎日報(bào)」就能出現(xiàn)許多相關(guān)項(xiàng)目腔剂。盡量找新的媒区，并且使用了全套 Vue 技術(shù)（Vue、Vue-Router、Vuex袜漩、Vue-Resource）的項(xiàng)目來參考绪爸。
接著，對著各種文檔宙攻，邊查看邊練習(xí)吧奠货，當(dāng)你磕磕碰碰完成一個(gè)完整的項(xiàng)目時(shí)，你會發(fā)覺自己更上一層樓了粘优，找工作也沒原來那么難了仇味。再看原來那些 jQuery 代碼，你就會發(fā)現(xiàn)那是上個(gè)時(shí)代的產(chǎn)物了雹顺。
另外丹墨，當(dāng)你想要讓 Webpack 幫你處理更多的東西時(shí)你可以看看 Webpack(webpack) 的文檔，然后修改 vue-cli 給你生成的 Webpack 的配置代碼嬉愧，你就能嘗試配置自己的項(xiàng)目了贩挣，順便學(xué)習(xí) Webpack 的使用。想寫 SCSS 没酣？Webpack 有個(gè) scss-loader王财。想寫 ES6 ？ Webpack 有個(gè) babel-loader裕便。等等等等……
前文提到的 Vue-Resource 作者已經(jīng)停止維護(hù)绒净，替代品是 axios 地址在這 ：mzabriskie/axios
如果 Webpack 一下子不好弄懂，這里有個(gè)非常不錯(cuò)的 webpack 中文教程：Introduction · Webpack for fools
