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

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

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

前言

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

我目前是在職前端開發，若是你如今也想學習前端開發技術，在入門學習前端的過程中有碰見任何關於學習方法，學習路線，學習效率等方面的問題，你均可以申請加入個人前端學習交流裙：前面：603 中間：985 最後：993。裏面彙集了一些正在自學前端的初學者裙文件裏面也有我作前端技術這段時間整理的一些前端學習手冊，前端面試題， 前端開發工具，PDF文檔書籍教程，須要的話均可以自行來獲取下載。

前端入門

入門前端開發主要須要學習 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 天。

有了這些基礎知識，你就能夠進行實戰了。

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

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

以上爲階段一內容，用時 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。推薦的學習路線：

閱讀 React 官方文檔：先學習文檔中核心概念部分，而後跟着官方文檔寫出文檔中的井字棋。而後本身寫一個 Todo App。

而後學習慕課網 Dell 老師的React16.4  快速上手和React16.4 開發簡書項目課程。

還能夠繼續選一些百度前端技術學院裏的經典題目來鞏固 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…

總結

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