還在迷茫於前端如何入門和進階？萬字指南讓你再也不迷茫！

我常常會看到不少同窗在學習前端的時候比較迷茫，不知道到底應該以怎樣的學習路線來入門和進階前端領域。每次遇到這種問題我也會分享一下本身的學習經驗，可是發現這是一個問得很是多的一個共性問題。

做爲程序員，確定是不能容忍重複無味的勞動的，所以我就係統地總結分享一下個人前端學習路線，但願對你可以有所幫助。

前言

前端學習是一個螺旋上升的過程，既要反覆地看書，也要抓緊時間進行實戰。只看書，看了就會忘，因此必須將看書和寫代碼相結合。只要你認真學，入門前端的話三個月左右就能夠了。以後我還給出了前端進階路線，幫助你提高前端技能水平。我把前端入門和前端進階一共分爲六個階段，並對相應階段所須要的大體的學習時間進行了標註。

前端入門

入門前端開發主要須要學習 HTML，CSS 和 JavaScript 三大件。以後學習前端主流框架的使用，並基於已學內容開發一個小項目進行實戰。當你把這些學習並理解透徹之後，也就算真正地入門前端了。

階段一：HTML + CSS

前端對於入門者至關友好，由於開始學習的時候你只須要一個瀏覽器，推薦 Chrome。HTML 和 CSS 能夠直接運行在瀏覽器中，瀏覽器就是它們的運行環境。你也可使用編輯器，推薦 VSCode，這是前端開發使用最多的編輯器。

HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其實並非編程語言。HTML 中文名叫作超文本標記語言，其實就是一些標籤。CSS 中文名爲層疊樣式表，也就是一些樣式的配置。

首先學習 HTML，很是簡單。HTML 有很是多的標籤，剛入門的時候不要沉浸在記住這些標籤中，你也記不住。你只須要總體瀏覽一遍，知道有哪些標籤，各自的做用是什麼，總體有一個印象就好了。我推薦跟着 MDN 的 HTML 學習路徑 過一遍就行。我學習 HTML 的時候還看過兩本書，你感興趣也能夠看一下，這是這方面很好的書了：

• 《Head First HTML and CSS》
• 《HTML5 與 CSS3 基礎教程》

看完以後能夠自我檢測一下，例如經常使用的標籤有哪些，<!DOCTYPE> 的做用是什麼，哪些標籤是行內標籤，哪些是塊級標籤，HTML5 有什麼新特性等。這裏不要花太多時間，大體過一下便可，不用都記住，以後有須要再回來查就行。

接下來學習 CSS，直接推薦目前最適合 CSS 入門的書：

• 《精通 CSS（第三版）》

在入門階段，不須要將整本書一字不差地看完，你只須要抓住幾塊核心內容，例如選擇器、層疊、繼承、盒模型、Flex 頁面佈局和網格等。這些內容快速過一遍就行，太細節的內容不用記，以後須要了再回來查。以上內容用時 6 天左右，其中 HTML 2 天，CSS 4 天。

有了這些基礎知識，你就能夠進行實戰了。這裏推薦百度前端技術學院平臺，他們這都是開源免費的前端題目，應該是爲了培養前端人才，讓本身可以招到更合適的人而建立的。他們的課開了四年：

• IFE 2015: github.com/baidu-ife/i…
• IFE 2016: ife.baidu.com/2016/static…
• IFE 2017: ife.baidu.com/2017
• IFE 2018: ife.baidu.com/

如今打開 IFE2018 中的 第五題 開始寫靜態頁面吧。而後你會發現，你根本寫不出來。這是很正常的，那你就去看別人的代碼，看一點你就開竅了，就知道怎麼寫了。忘掉的屬性就回去查 MDN 或者查我推薦的書，如此反覆你就記住了。

寫完一個頁面以後別急着往下寫。你寫的第一個頁面確定有不少問題，例如屬性使用錯誤，代碼縮進不規範等問題。這時候你應該找一個代碼規範，例如 百度前端代碼規範，根據規範重寫你的代碼。這個規範我只是舉一個例子，本身上網搜一下，好的大公司都有本身的規範，這個不是規定死的，風格統一而且可讀性強便可。

重寫代碼以後，你再去看看別人提交的代碼，這個頁面是怎麼寫的，若是身邊有技術好的前端，可讓他幫你指點一下。這時候你應該就知道如何寫一個頁面，而且怎樣才能寫好一個頁面了。而後你能夠本身再去找幾個題目，寫幾個頁面熟練一下。

以上爲階段一內容，用時 10 天左右。

CSS 進階：學習 CSS 核心內容不須要不少時間，但其實 CSS 是細節很是深的一個技術。前期不要陷入其中，那麼你會問如何深刻學習 CSS 呢？我推薦一些很好的權威書籍，基本看這些就夠了。

• 《CSS 世界》：張鑫旭大神的書，十多年的 CSS 經驗分享，必買書籍。
• 《CSS 選擇器世界》：張鑫旭大神的另外一力做，深刻講解 CSS 選擇器。
• 《深刻解析 CSS》：2020 年的新書，奇虎團工程師翻譯，質量有保證。
• 《CSS 揭祕》：各類 CSS 奇淫巧技，主要是來開闊視野。
• 《CSS 權威指南》：屬於 CSS 的新華字典，很全面，屬於一本工具書。

階段二：JavaScript

學習了 HTML 和 CSS，能夠開始學習 JavaScript 了。這也是相當重要的階段。JavaScript 主要包括語言基礎（ECMAScript）、DOM 和 BOM 三部分，若是你是初學者，會想這究竟是啥，咋還三個東西。那就開始學起來，學完你就知道啦，其實沒那麼難。

學習這部分，必定要從現代 JavaScript 教程學起：

現代 JavaScript 教程是 React 官方文檔中與 MDN 並列推薦的 JavaScript 學習教程。 這個教程解決了現存 JavaScript 書籍最大的痛點：實時性。技術領域的書籍在實時性上一直都存在很大的問題，而這個教程卻解決了這個問題。而且它爲讀者搭建了良好的學習路線，由淺入深，內容足夠詳細也足夠全面，你就按着教程順序學習就好了。此外，每節內容後，還給出了高質量的課後習題和解析。經過作題能夠幫你檢驗本身的學習效果，並鞏固新學到的知識。

教程地址：zh.javascript.info/

學完這個教程，你就其實已經學完了 JavaScript。你可能還據說過 ES5/ES6/ES7/ES8……，其實你也已經學完了，並且還經過這個教程作了不少實戰的小例子。教程裏還將技術點與實際應用聯繫起來，讓你知道這個知識點在實際開發中是如何使用的，它解決了什麼問題。

在學現代 JavaScript 教程的同時，我推薦你買基本權威書籍，其實這些書所講的大部分在教程裏都有，不過能夠相互補充取長補短，同時還能夠鞏固知識點，加深你對 JavaScript 的理解：

• 《JavaScript 高級程序設計（第 3 版）》：俗稱紅寶書，只是這本書版本有些舊，第四版預計於 2020 年下半年出版，能夠關注一下。這本書前七章講的是語言特性，必定要掌握。若是你有其餘語言的編程基礎，理解起來會更快。第 八、10-1四、20、2一、2三、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。推薦的學習路線：

1. 閱讀 React 官方文檔：先學習文檔中核心概念部分，而後跟着官方文檔寫出文檔中的井字棋。而後本身寫一個 Todo App。
2. 而後學習慕課網 Dell 老師的 React16.4 快速上手 和 React16.4 開發簡書項目 課程。
3. 還能夠繼續選一些百度前端技術學院裏的經典題目來鞏固 JavaScript 的基礎知識和使用。

在這個過程當中你會學到不少知識，會用到 React 的高階知識，那麼就把 React 官方文檔中的高級指引，API Reference，Hooks 等部分的內容學完。還會學到 React Router，Redux 等內容。會學到從零開發一個完整項目，從項目配置到組件拆分，到項目打包和上線的完整流程，還會學到 React 框架的一些底層源碼級知識。

若是你選擇了 Vue 框架，學習路線也相似：閱讀官方文檔，寫一些簡單的 Demo。而後學習慕課網 Dell 老師的 Vue 2.5 入門 和 Vue 2.5 -> 2.6 -> 3.0 開發去哪兒網 App 從零基礎入門到實戰項目開發 課程，中間穿插作一些百度前端技術學院的典型題目鞏固 JavaScript 的基礎知識。

此階段用時一個月左右。至此你已經成功入門前端開發了，恭喜你 🎉🎉🎉

階段一到階段三共計用時三個月。

前端進階

成功入門前端開發以後就要開啓進階部分了，主要是加深對各個知識的理解程度，打牢計算機領域基礎知識，擴展技能樹，提高項目開發和宏觀理解及把控能力。前端進階是須要終生學習的，活到老學到老。

階段四：語言基礎進階

這個階段就是加深對編程語言的理解，多閱讀進階書籍，有能力的推薦去閱讀 ECMAScript 規範：ecma-international.org/ecma-262/

進階必讀書籍：

• 《你不知道的 JavaScript 上/中/下卷》：必買書籍，將 JavaScript 的疑難問題，細節知識一網打盡。原版是 GitHub 上開源的電子書，英語水平高的能夠去讀英文原版。
• 《JavaScript 忍者祕籍》：深刻講解 JavaScript 的核心知識點，必買書籍。
• 《了不得的 JavaScript 工程師》：從宏觀來看 JavaScript 語言，以及前端工程師所須要掌握的一些技能，推薦閱讀。
• 《JavaScript 函數式編程指南》：學習函數式編程思想
• 《JavaScript 函數式編程》：也是一本函數式編程思想的好書
• 《JavaScript 設計模式》：學習 JavaScript 設計模式，推薦閱讀
• 《JavaScript 設計模式與開發實踐》：另外一本同等份量的設計模式書籍，推薦閱讀
• 《鋒利的 jQuery》：jQuery 如今已經不多有人用了，除非是很老的項目或者寫小東西。不過這本書值得買，學習 jQuery 的優秀思想，還能夠去學習一下它的源碼，對你進階頗有幫助。

進階選讀書籍：

• 《高性能 JavaScript》
• 《JavaScript Web 應用開發》
• 《深刻理解 JavaScript》
• 《JavaScript 經典實例》
• 《JavaScript 面向對象編程指南》
• 《JavaScript 編程精粹》

學習 TypeScript。JavaScript 是一門弱類型語言，你聲明一個變量，既能夠將字符串賦值給它，也能夠將數字等複製給它，這在大型項目開發中很容易由於數據類型出 bug。基於此類種種緣由，就出現了 TypeScript。你有了 JavaScript 的基礎，學習 TypeScript 很容易，它只是一種語法糖，也就是一種另外一種寫 JavaScript 的方式。推薦如下書籍：

• 《深刻理解 TypeScript》
• 《TypeScript 實戰指南》
• 《TypeScript 實戰》

階段五：框架和學習邊界進階

經過階段三，你已經掌握了前端框架的基本使用，開發一個完整項目的流程。那麼在框架和學習邊界進階階段，你就能夠：

• 學習框架周邊的生態，社區總結出來的優秀組件，以及各類好用的工具庫。
• 造一些本身的輪子，使用框架搭建本身的開源項目
• 學習 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》

編程思想：

• 《代碼大全》

編譯原理：

• 《編譯原理》

產品思想：

• Web Fundamentals: developers.google.com/web/fundame…

總結

至此，你已經完成了前端開發從入門到進階，已然成爲了一個巨佬，以後再學什麼已經瞭如指掌。但願個人分享對你有幫助，若是你以爲有用，能夠收藏本文，並分享給你有須要的朋友。讓咱們一塊兒學習，共同進步！

---

更多精彩內容，微信掃碼關注公衆號「技術漫談」：

• LeetCode 算法題解
• JavaScript 入門到進階
• 前端項目從零到一實戰
• ……