我經常會看到很多同學在學習前端的時候比較迷茫，不知道到底應該以怎樣的學習路線來入門和進階前端領域。每次遇到這種問題我也會分享一下自己的學習經驗，但是發現這是一個問得非常多的一個共性問題。
作爲程序員，肯定是不能容忍重複無味的勞動的，因此我就係統地總結分享一下我的前端學習路線，希望對你能夠有所幫助。我之前其實發過一篇長文 前端開發從入門到進階完全指南，不用再迷茫前端要怎麼學啦。但是這篇內容太長，我現在將其拆分成幾個部分，以供不同階段的同學閱讀。
前言
前端學習是一個螺旋上升的過程，既要反覆地看書，也要抓緊時間進行實戰。只看書，看了就會忘，所以必須將看書和寫代碼相結合。只要你認真學，入門前端的話三個月左右就可以了。之後我還給出了前端進階路線，幫助你提升前端技能水平。我把前端入門和前端進階一共分爲六個階段，並對相應階段所需要的大致的學習時間進行了標註。
前端入門
入門前端開發主要需要學習 HTML，CSS 和 JavaScript 三大件。之後學習前端主流框架的使用，並基於已學內容開發一個小項目進行實戰。當你把這些學習並理解透徹以後，也就算真正地入門前端了。
階段一：HTML + CSS
前端對於入門者相當友好，因爲開始學習的時候你只需要一個瀏覽器，推薦 Chrome。HTML 和 CSS 可以直接運行在瀏覽器中，瀏覽器就是它們的運行環境。你也可以使用編輯器，推薦 VSCode，這是前端開發使用最多的編輯器。
小編也在前端混了有幾年，整理了一些學習資料，對web開發技術感興趣的同學
歡迎加入新建的Q羣：603985993，不管你是小白還是大牛我都歡迎，希望大家誠心交流！
還有大牛整理的一套高效率學習路線和教程與您免費分享，與企業需求同步。
好友都在裏面學習交流，每天都會有大牛定時講解前端技術!
HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其實並不是編程語言。HTML 中文名叫做超文本標記語言，其實就是一些標籤。CSS 中文名爲層疊樣式表，也就是一些樣式的配置。
首先學習 HTML，非常簡單。HTML 有非常多的標籤，剛入門的時候不要沉浸在記住這些標籤中，你也記不住。你只需要整體瀏覽一遍，知道有哪些標籤，各自的作用是什麼，整體有一個印象就行了。我推薦跟着 MDN 的 HTML 學習路徑[1] 過一遍就行。我學習 HTML 的時候還看過兩本書，你感興趣也可以看一下，這是這方面很好的書了：
《Head First HTML and CSS》
《HTML5 與 CSS3 基礎教程》
看完之後可以自我檢測一下，例如常用的標籤有哪些，<!DOCTYPE> 的作用是什麼，哪些標籤是行內標籤，哪些是塊級標籤，HTML5 有什麼新特性等。這裏不要花太多時間，大致過一下即可，不用都記住，之後有需要再回來查就行。
接下來學習 CSS，直接推薦目前最適合 CSS 入門的書：
《精通 CSS（第三版）》
在入門階段，不需要將整本書一字不差地看完，你只需要抓住幾塊核心內容，例如選擇器、層疊、繼承、盒模型、Flex 頁面佈局和網格等。這些內容快速過一遍就行，太細節的內容不用記，之後需要了再回來查。以上內容用時 6 天左右，其中 HTML 2 天，CSS 4 天。
有了這些基礎知識，你就可以進行實戰了。這裏推薦百度前端技術學院平臺，他們這都是開源免費的前端題目，應該是爲了培養前端人才，讓自己能夠招到更合適的人而創建的。他們的課開了四年：
IFE 2015: https://github.com/baidu-ife/ife
IFE 2016: http://ife.baidu.com/2016/static/index.html
IFE 2017: http://ife.baidu.com/2017
IFE 2018: http://ife.baidu.com/
現在打開 IFE2018 中的 第五題[2] 開始寫靜態頁面吧。然後你會發現，你根本寫不出來。這是很正常的，那你就去看別人的代碼，看一點你就開竅了，就知道怎麼寫了。忘掉的屬性就回去查 MDN 或者查我推薦的書，如此反覆你就記住了。
寫完一個頁面之後別急着往下寫。你寫的第一個頁面肯定有很多問題，例如屬性使用錯誤，代碼縮進不規範等問題。這時候你應該找一個代碼規範，例如 百度前端代碼規範[3]，根據規範重寫你的代碼。這個規範我只是舉一個例子，自己上網搜一下，好的大公司都有自己的規範，這個不是規定死的，風格統一併且可讀性強即可。
重寫代碼之後，你再去看看別人提交的代碼，這個頁面是怎麼寫的，如果身邊有技術好的前端，可以讓他幫你指點一下。這時候你應該就知道如何寫一個頁面，並且怎樣才能寫好一個頁面了。然後你可以自己再去找幾個題目，寫幾個頁面熟練一下。
以上爲階段一內容，用時 10 天左右。
CSS 進階：學習 CSS 核心內容不需要很多時間，但其實 CSS 是細節非常深的一個技術。前期不要陷入其中，那麼你會問如何深入學習 CSS 呢？我推薦一些很好的權威書籍，基本看這些就夠了。
《CSS 世界》：張鑫旭大神的書，十多年的 CSS 經驗分享，必買書籍。
《CSS 選擇器世界》：張鑫旭大神的另一力作，深入講解 CSS 選擇器。
《CSS 揭祕》：各種 CSS 奇淫巧技，主要是來開闊視野。
《CSS 權威指南》：屬於 CSS 的新華字典，很全面，屬於一本工具書。
階段二：JavaScript
學習了 HTML 和 CSS，可以開始學習 JavaScript 了。這也是至關重要的階段。JavaScript 主要包括語言基礎（ECMAScript）、DOM 和 BOM 三部分，如果你是初學者，會想這到底是啥，咋還三個東西。那就開始學起來，學完你就知道啦，其實沒那麼難。
學習這部分，一定要從現代 JavaScript 教程學起：
現代 JavaScript 教程是 React 官方文檔中與 MDN 並列推薦的 JavaScript 學習教程。這個教程解決了現存 JavaScript 書籍最大的痛點：實時性。技術領域的書籍在實時性上一直都存在很大的問題，而這個教程卻解決了這個問題。並且它爲讀者搭建了良好的學習路線，由淺入深，內容足夠詳細也足夠全面，你就按着教程順序學習就行了。此外，每節內容後，還給出了高質量的課後習題和解析。通過做題可以幫你檢驗自己的學習效果，並鞏固新學到的知識。
教程地址：https://zh.javascript.info/
學完這個教程，你就其實已經學完了 JavaScript。你可能還聽說過 ES5/ES6/ES7/ES8……，其實你也已經學完了，而且還通過這個教程做了很多實戰的小例子。教程裏還將技術點與實際應用聯繫起來，讓你知道這個知識點在實際開發中是如何使用的，它解決了什麼問題。
在學現代 JavaScript 教程的同時，我推薦你買基本權威書籍，其實這些書所講的大部分在教程裏都有，不過可以相互補充取長補短，同時還可以鞏固知識點，加深你對 JavaScript 的理解：
《JavaScript 高級程序設計（第 3 版）》：俗稱紅寶書，只是這本書版本有些舊，第四版預計於 2020 年下半年出版，可以關注一下。這本書前七章講的是語言特性，一定要掌握。如果你有其他語言的編程基礎，理解起來會更快。第 8、10-14、20、21、23、24 章也要重點看，第 25 章的第一節也要看，其他沒提到的章節屬於非重點的擴展內容，有空就大概讀一下。
至於 XML 這種過時的東西就不用看了，書中有大量 API 的章節，不用死記硬背，瀏覽一下就行，用到再回來查。你一定要先看《現代 JavaScript 教程》再看這本紅寶書，因爲這裏的內容在教程中都有，而且都是最新的，紅寶書只是用於複習鞏固。
《JavaScript 權威指南》：俗稱犀牛書，和《CSS 權威指南》類似，都是大而全的工具書。
《ES6 標準入門》：你一定聽過 ES6 或者 ES2015 吧，其實指的是一個東西，就是 2015 年發佈的 ECMAScript 規範，發佈的一些語言特性。這本書是阮一峯老師的書，是學習 ES6 必買書籍，當然裏面也參雜了一些作者的個人理解。
《深入理解 ES6》：尼古拉斯大佬的力作，必買書籍！講解非常詳細且深入。
《深入理解 JavaScript 特性》：尼古拉斯大佬的最新書籍，由李松峯老師翻譯，主要講的也是 ES6 的內容。
《JavaScript DOM 編程藝術》：DOM 必備書籍，本書主要講的是 DOM 知識，還會帶你通過實戰深入理解相關知識，很有幫助。
《JavaScript 語言精粹》：俗稱蝴蝶書，很薄的一本，裏面講的都是 JavaScript 語言最核心的部分。半天就能看一遍，可以買了反覆看。
《Head First JavaScript 程序設計》：這本書對於沒有編程經驗的新手友好，內容比較簡單。
階段二用時一個半月左右。如果你有編程經驗，學起來會輕鬆一些。所列出的書不用全都看完，而是挑選重點，相互補充着看。對於 API 相關內容不要死記硬背，大概瀏覽即可，用到的時候再查，多些代碼就自然記住了。
階段三：入門前端框架
學完前端三大件，打好了大樹的根基，就可以開始擴展技能樹了，開始學習前端框架。前端的主流框架目前主要爲 React，Vue 和 Angular。選擇哪個框架呢？你可以去知乎或者其他網站搜一搜，然後根據你的個人喜好進行選擇。一般是在 React 和 Vue 中選一個。
React 的開發體驗更類似於寫原生的 JavaScript，要求你有較好的 JavaScript 基礎。Vue 則引入了模版，將很多實現封裝成了 API，你需要記住並調用 API 來進行開發，因爲很多都是封裝好的，所以學習起來較爲簡單，只是編程的感覺稍微弱了一些。
這兩個都是非常優秀的框架，新人不必糾結於選擇哪個框架，學了一個，另一個也很容易學。如果你不知道選擇哪個，我推薦你先學習 React。推薦的學習路線：
閱讀 React 官方文檔：先學習文檔中核心概念部分，然後跟着官方文檔寫出文檔中的井字棋。然後自己寫一個 Todo App。
然後學習慕課網 Dell 老師的 React16.4 快速上手[4] 和 React16.4 開發簡書項目[5] 課程。
還可以繼續選一些百度前端技術學院裏的經典題目來鞏固 JavaScript 的基礎知識和使用。
在這個過程中你會學到很多知識，會用到 React 的高階知識，那麼就把 React 官方文檔中的高級指引，API Reference，Hooks 等部分的內容學完。還會學到 React Router，Redux 等內容。會學到從零開發一個完整項目，從項目配置到組件拆分，到項目打包和上線的完整流程，還會學到 React 框架的一些底層源碼級知識。
如果你選擇了 Vue 框架，學習路線也類似：閱讀官方文檔，寫一些簡單的 Demo。然後學習慕課網 Dell 老師的 Vue 2.5 入門[6] 和 Vue 2.5 -> 2.6 -> 3.0 開發去哪兒網 App 從零基礎入門到實戰項目開發[7] 課程，中間穿插做一些百度前端技術學院的典型題目鞏固 JavaScript 的基礎知識。
此階段用時一個月左右。至此你已經成功入門前端開發了，恭喜你 🎉🎉🎉
階段一到階段三共計用時三個月。
參考資料
[1]
MDN 的 HTML 學習路徑: https://developer.mozilla.org/zh-CN/docs/Learn/HTML
[2]
第五題: http://ife.baidu.com/course/detail/id/40
[3]
百度前端代碼規範: https://github.com/ecomfe/spec
[4]
React16.4 快速上手: https://www.imooc.com/learn/1023
[5]
React16.4 開發簡書項目: https://coding.imooc.com/class/229.html
[6]
Vue 2.5 入門: https://www.imooc.com/learn/980
[7]
Vue 2.5 -> 2.6 -> 3.0 開發去哪兒網 App 從零基礎入門到實戰項目開發: https://coding.imooc.com/class/203.html