我經常會看到很多同學在學習前端的時候比較迷茫，不知道到底應該以怎樣的學習路線來入門和進階前端領域。每次遇到這種問題我也會分享一下自己的學習經驗，但是發現這是一個問得非常多的一個共性問題。
作為程序員，肯定是不能容忍重復無味的勞動的，因此我就系統地總結分享一下我的前端學習路線，希望對你能夠有所幫助。
前言
前端學習是一個螺旋上升的過程，既要反復地看書，也要抓緊時間進行實戰。只看書，看了就會忘，所以必須將看書和寫代碼相結合。只要你認真學，入門前端的話三個月左右就可以了。之后我還給出了前端進階路線，幫助你提升前端技能水平。我把前端入門和前端進階一共分為六個階段，並對相應階段所需要的大致的學習時間進行了標注。
前端入門
入門前端開發主要需要學習 HTML，CSS 和 JavaScript 三大件。之后學習前端主流框架的使用，並基於已學內容開發一個小項目進行實戰。當你把這些學習並理解透徹以后，也就算真正地入門前端了。
階段一：HTML + CSS
前端對於入門者相當友好，因為開始學習的時候你只需要一個瀏覽器，推薦 Chrome。HTML 和 CSS 可以直接運行在瀏覽器中，瀏覽器就是它們的運行環境。你也可以使用編輯器，推薦 VSCode，這是前端開發使用最多的編輯器。
HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其實並不是編程語言。HTML 中文名叫做超文本標記語言，其實就是一些標簽。CSS 中文名為層疊樣式表，也就是一些樣式的配置。
首先學習 HTML，非常簡單。HTML 有非常多的標簽，剛入門的時候不要沉浸在記住這些標簽中，你也記不住。你只需要整體瀏覽一遍，知道有哪些標簽，各自的作用是什么，整體有一個印象就行了。
學習css過程中千萬不要剝離HTML學習。當你什么時候理解了html的重要性（從頁面開發角度而言，它可以視為是后續良好css和js編碼得以實施的基礎，相當於程序中的數據結構，設計好了可以讓你事半功倍），你才可以稱得上是一個合格的頁面開發對於新人，我建議除了幾個關鍵概念，如布局、盒模型、單位等等，都不應該花大量去扣細節，甚至背書記憶，瀏覽性學習知道有這個東西就行，在實際應用時再去加深記憶。
階段二：JavaScript
學習了 HTML 和 CSS，可以開始學習 JavaScript 了。這也是至關重要的階段。JavaScript 主要包括語言基礎（ECMAScript）、DOM 和 BOM 三部分，如果你是初學者，會想這到底是啥，咋還三個東西。那就開始學起來，學完你就知道啦，其實沒那么難。
JavaScript這幾年變化很快，但是對於初學者來說要摒棄浮躁的氣氛，靜下心來打好基礎。記住：自己是初學者，玩的東西就是：JavaScript和jQuery，工具就用一個編輯器和一個瀏覽器，這些就夠了，別的不要碰
階段三：入門前端框架
學完前端三大件，打好了大樹的根基，就可以開始擴展技能樹了，開始學習前端框架。前端的主流框架目前主要為 React，Vue 和 Angular。選擇哪個框架呢？你可以去知乎或者其他網站搜一搜，然后根據你的個人喜好進行選擇。一般是在 React 和 Vue 中選一個。React 的開發體驗更類似於寫原生的 JavaScript，要求你有較好的 JavaScript 基礎。Vue 則引入了模版，將很多實現封裝成了 API，你需要記住並調用 API 來進行開發，因為很多都是封裝好的，所以學習起來較為簡單，只是編程的感覺稍微弱了一些。
這兩個都是非常優秀的框架，新人不必糾結於選擇哪個框架，學了一個，另一個也很容易學。如果你不知道選擇哪個，我推薦你先學習 React。
前端進階
成功入門前端開發之后就要開啟進階部分了，主要是加深對各個知識的理解程度，打牢計算機領域基礎知識，擴展技能樹，提升項目開發和宏觀理解及把控能力。前端進階是需要終生學習的，活到老學到老
階段四：語言基礎進階
這個階段就是加深對編程語言的理解，多閱讀進階書籍.
進階必讀書籍：
《你不知道的 JavaScript 上/中/下卷》：必買書籍，將 JavaScript 的疑難問題，細節知識一網打盡。原版是 GitHub 上開源的電子書，英語水平高的可以去讀英文原版。
《JavaScript 忍者秘籍》：深入講解 JavaScript 的核心知識點，必買書籍。
《了不起的 JavaScript 工程師》：從宏觀來看 JavaScript 語言，以及前端工程師所需要掌握的一些技能，推薦閱讀。
《JavaScript 函數式編程指南》：學習函數式編程思想
《JavaScript 函數式編程》：也是一本函數式編程思想的好書
《JavaScript 設計模式》：學習 JavaScript 設計模式，推薦閱讀
《JavaScript 設計模式與開發實踐》：另一本同等分量的設計模式書籍，推薦閱讀
《鋒利的 jQuery》：jQuery 現在已經很少有人用了，除非是很老的項目或者寫小東西。不過這本書值得買，學習 jQuery 的優秀思想，還可以去學習一下它的源碼，對你進階很有幫助。
階段五：框架和學習邊界進階
通過階段三，你已經掌握了前端框架的基本使用，開發一個完整項目的流程。那么在框架和學習邊界進階階段，你就可以：
學習框架周邊的生態，社區總結出來的優秀組件，以及各種好用的工具庫。
造一些自己的輪子，使用框架搭建自己的開源項目
學習 Webpack，Gulp，Babel，ESLint 等工具的使用、思想和原理
帶着問題去閱讀框架源碼，學習性能優化
養成良好的編程習慣
擴展技術邊界，學習 Node.js 等后端相關技能
……
推薦閱讀書籍：
以下推薦的書籍都是比較出名的書籍，你可以根據自己的技能樹，選擇所需要的書籍進行閱讀。並不是一字不差地整本閱讀，而是在每本書中學習自己所需要的部分。很多都是非常著名的好書，有精力盡量買來學習。
Webpack 相關：
《深入淺出 Webpack》
《Webpack 實戰：入門、進階與調優》
React 相關：
《深入 React 技術棧》
《深入淺出 React 和 Redux》
《Redux 實戰》
《React 學習手冊》
《React 快速上手開發》
《React 設計模式與最佳實踐》
Vue 相關：
《Vue.js 實戰》
《Vue.js 開發實戰》
《深入淺出 Vue.js》
《Vue.js 權威指南》
《Vue.js 從入門到項目實戰》
《Vue.js 前端開發基礎與項目實戰》
《Vue.js 項目開發實戰》
《Vue.js 快速入門》
《Vue.js 前端開發》
Node.js 相關：
《狼書卷1》
《狼書卷2》
《Node 學習指南》
《了不起的 Node.js》
《深入淺出 Node.js》
《Node.js 實戰》
《Node.js 開發指南》
《Node 即學即用》
《Node 與 Express 開發》
樣式和布局相關：
《Bootstrap 實戰》
《Bootstrap 用戶手冊》
《響應式 Web 設計：HTML5 與 CSS3 實戰》
性能相關：
《Web 性能權威指南》
《高性能網站建設指南》
PWA 相關：
《PWA 開發實戰》
《PWA 實戰：面向下一代的 Progressive Web APP》
其他：
《SVG 精髓》
《深入理解 SVG》
《前端架構設計》
《重構：改善既有代碼的設計》
《同構 JavaScript 應用開發》
階段六：計算機基礎知識進階
編程編程，萬變不離其宗，那就是計算機基礎知識，算法、數據結構、計算機原理、網絡等內容。在這里我只推薦最經典的好書，每一本都是必讀書籍。學好這些內容，大廠任你選。
數據結構和算法：
《劍指offer》
《程序員面試金典（第 6 版）》
《編程之美》
《漫畫算法》
《算法圖解》
《程序員代碼面試指南》
《大話數據結構》
《趣學算法》
《學習 JavaScript 數據結構與算法》
《數據結構與算法：JavaScript 描述》
計算機網絡：
《HTTP/2 基礎教程》
《HTTPS 權威指南》
《計算機網絡：自頂向下方法》
《圖解 HTTP》
《圖解 TCP/IP》
《TCP/IP 詳解》
《UNIX 網絡編程》
操作系統：
《深入理解計算機系統》
《現代操作系統》
《UNIX 環境高級編程》
《The Linux Programming Interface》
總結
至此，你已經完成了前端開發從入門到進階，已然成為了一個巨佬，之后再學什么已經了如指掌。希望我的分享對你有幫助，如果你覺得有用，可以收藏本文，並分享給你有需要的朋友。讓我們一起學習，共同進步！