一、基礎
1、學習HTML基礎
HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上：
- 學習HTML基礎，瞭解如何編寫語義HTML
- 理解如何把網頁分成section（段落），以及如何正確組織DOM（文件物件模型）
- 現在很多html5的新標籤也很有用，需要進行了解
實踐建議：
一旦你學習了HTML基礎，至少要製作5個HTML網頁。我建議你隨便找一個網站，比如看看Github的檔案頁或者Twitter的登入頁。然後把焦點放在恰當地組織內容上。出來的東西可能會很難看，但是暫時別擔心，把你的關注點放在恰當的結構上。
2、學點CSS
現在我們已經學會了如何給網頁準備好骨架，接下來就是在此基礎上新增一些皮膚讓它好看一點了。CSS——級聯樣式表就是用來美化你的HTML頁面的。
- 首先要做的是學習語法，熟悉常見的CSS屬性。
- 瞭解盒模型（box model），掌握如何利用Grid和Flexbox準備佈局
- 一旦學習完上面的，再學習以下通過媒體查詢把網站做成響應式的。
實踐建議：
一旦你掌握了基礎，接下來就應該設計上一步製作的HTML網頁。比方說如果你給Github檔案編寫了HTML頁面的話，現在是時候應用CSS來讓它的樣子看起來像實際的Github資料頁面一樣了。前面的那5個頁面都要拿來試一下。
3、學習JavaScript基礎
JavaScript能讓你的HTML頁面互動性更強。比方說你在網站上看過的所有那些幻燈片、彈出視窗以及廣播通知，以及在沒有過載頁面的情況下過載頁面的特定部分，這些都是用JavaScript做的。在這一步中，你將會學習JavaScript的基礎來為後面的旅程做好準備——
- 學習這門語言的語法和基本機構。
- 學習如何用JavaScript來操縱DOM，比方說如何從頁面移除一些元素，如何增加一些元素，增加和移除類，通過JavaScript應用CSS樣式等。
- 完成之後再學習和理解諸如範圍、閉包、變數提升以及事件冒泡這樣的主題。
- 學習如何用XHR或者Ajax生成HTTP呼叫。Ajax可以讓你在不需要過載網頁的情況下執行特定動作。
- 學完之後接下來就要了解ES6+的所有新特性。ES6只是JavaScript的一個版本，裡面給這門語言引入了大量有趣的更新，比如類、定義變數的多種方式，給陣列增加了新的方法，字串連線等。你們在網上找到的大部分文章都會用Babel來解析ES6，這其實是個轉譯器，可以將這門新的JavaScript轉換為舊的JavaScript，因為有一些舊版的瀏覽器不支援新版的JS。不過現在先不用擔心Babel，只需要瞭解相關概念，然後用到任何一種支援ES6的最新版瀏覽器上來練習一下就行。
現在你應該已經感覺到東西像是那麼一回事了。如果你按照上面的步驟做下來的話應該鼓勵一下。這些是你剛剛學到的一些最重要的東西。
我應該學jQuery嗎？
曾經有一段時間每個人都對jQuery瘋狂，也有充分的理由；這是一個強大的庫，在JavaScript基礎上提供了一個封裝，讓你可以用相容瀏覽器的方式執行任何東西。不過那些日子已經一去不復返，現在新專案用它已經不是很多了，但是仍然還有人在用。所以其實jQuery對我們最大的用處其實看原始碼，它對與dom的操作和互動的原始碼其實對我們寫js程式碼是有很大的啟示作用的。
實踐建議：
你可能隨時都會感覺自己已經理解了但是如果不練習的話很快就會忘掉。在按照這份路線圖去學習的時候，要確保儘可能多地去上手實踐。
繼續做些響應式網站，用JavaScript增加互動性。你可以新增任何感興趣的現有的網頁上去，但記住要利用上目前學到的一切。
一旦你製作出了一些網站，接下來就是開始做真正的東西了。你可以到github上面找一些專案開啟某些開源專案的pull請求。以下就是一些可以去嘗試的pull請求：
- 增強UI，把任何演示頁做成響應式或者改進設計
- 看看有什麼開放的issue是你能夠解決的
- 重構任何你認為自己可以改進的程式碼
4、其他
相關筆記：git筆記
在學習基礎內容之後，還需要了解一些技能，主要如下：
- chrome瀏覽器的控制檯除錯，這個將會大大方便修改程式碼觀察前後臺互動
- 選擇適合的ide,一般來說使用的有sublime,vs,webstorm,vscode等，還有各種配合程式設計的外掛
- 學會git的基本操作，如果想簡單也可以用git的GUI版本，但其實學會git的基本命令列很有用
二、進階
1、包管理器
相關筆記：npm&yarn筆記
在此之前，如果你要用到一些外部庫,如外掛或外部的桌面小部件的話，你得手工下載JavaScript和CSS檔案並且將它們放到專案裡面，然後那些庫或者外掛釋出新版本的時候，你又得下載更新的檔案再放到你的專案裡面，這是極其麻煩的事情。
具體來說，包管理器就是可以通過命令列，幫助你把外部庫和外掛放到你的專案裡面並在之後進行版本升級，這樣就不用手工複製和更新庫。現在有的包管理器主要是yarn和npm。這兩個中npm先於yarn出現但yarn在包的版本管理強於npm,其具體使用幾乎是一樣的，一旦學會了使用其中一個，另一個自然也不成問題。
實踐建議：
在對包管理器有了基本瞭解之後，你就可以去安裝一些外部庫到你前面製作的一些網頁上了，比如安裝一些提示外掛，當使用者點選某個按鈕時顯示提示資訊，或者建立一個登入表單用一些表單驗證庫進行表單驗證，或者試試不同的選項看看如何安裝不同的版本。
注：記得要看看語義版本控制
2、CSS前處理器
前處理器以CSS預設不支援的功能豐富了後者。可選的css預處理語言包括Sass、Less、Stylus等等。我更樂意選擇Sass。但是PostCSS最近的發展勢頭也不錯，這屬於一個錦上添花的東西，有點類似於CSS的“Babel”。你可以拿來獨立使用或者在Sass的基礎上疊加。
總之，我的建議是先學Sass，瞭解less,stylus,等後面有時間了再看看PostCSS。
3、CSS框架
CSS框架其實並不是什麼困難的事，邊用邊學就行了，推薦在Bootstrap、Materialize和Bulma裡面選。如果考慮市場需求的話則是Bootstrap。
4、CSS組織
隨著你的應用不斷膨脹，CSS也開始變得混亂難以維繫。有多種手段可以對你的CSS進行組織，讓它更好地應對伸縮性，比如OOCSS、SMACSS、SUITCSS、Atomic以及BEM，都是很好的css程式碼組織管理的指導實踐。CSS組織是對於複雜龐大的css開發的一個統一固定的 CSS 程式碼組織和管理規範。包括 CSS 樣式的命名規則，你應該瞭解它們之間的不同，但是我更偏好BEM。
5、構建工具
相關筆記：ESlint筆記
工具可以幫助你進行JavaScript應用的構建/打包以及開發。這一類工具功能主要包括以下三個方面：
- linter（程式碼檢查） ， 是指對程式碼進行靜態檢查，如定義變數是否使用，變數命名，方法回撥次數，註釋是否規範等，主要對程式碼書寫是否規範進行檢查。linter有很多選項，其中包括ESLint、JSLint、JSHint以及JSCS等。但是目前主要是ESLint用得多。
- task runner（自動構建） ， 即是對專案程式碼進行自動構建編譯為瀏覽器能夠執行的東西，如對typescript和Sass進行編譯，使用自動化構建工具則不需要程式設計師手動進行操作。這個本來是是很多選項的，包括npm指令碼、gulp、grun等等。不過既然webpack能夠處理gulp能做的大部分東西，所以只有自動構建中的npm指令碼可以用來對webpack能做的任務進行自動化。不需要學習Gulp，如果到後面如果你有點時間的話，可以去看看它能否對你的應用有所幫助。
- bundler（打包工具） ， 不同的選項包括Parcel、Webpack、Rollup、Browserify等。如果你必須選一個，目前你可以閉著眼睛選Webpack就是。Rollup也很常用但是主要建議用到庫上面，至於app，還是以webpack為主。所以可以先學習一下webpack，後面如果想的話再瞭解一下Rollup。
實踐建議：
恭喜你！你現在可以稱自己為75%的現代JavaScript開發者了。現在繼續用你學到的東西做點什麼出來。也許可以做個庫將來用到Sass和JavaScript上。然後用Webpack將Sass轉換成CSS，用babel轉換成ES6程式碼。一旦你做完了再把它釋出到Github和npm上。
三、再進階
1、框架
其實在一般開發中，這個部分往往是緊挨著基礎部分的，之所以放在Sass、構建工具和包管理器後面，是因為在框架中你全都會用上那些東西。
框架也有好些選項。不過目前比較常用的是React、Vue和Angular。最近對React.js的需求越來越旺盛。然而，前面列的這幾個你隨便選一個都不會錯。個人會選React或者Angular。不過特別說明一下，作為初學者也許會發現相對而言Angular會容易點，因為它支援幾乎一切立即可用的東西，比如支援延遲載入的強大路由器，支援攔截器的HTTP客戶端，依賴注入，元件CSS封裝等而不需要關心選擇外部庫的問題。不過React在社群方面無疑更有優勢，而且Facebook一直都在努力改進它。
一旦選擇框架，當然還有其他一些東西需要你學的。
- 如學React的話，還得學Redux或者Mobx去了解狀態管理，具體選學什麼要取決於應用的規模。Mobx適合中小規模應用，Redux更適合大規模應用。甚至如app允許的話可能都不需要學，靠React的原生狀態管理就行了。
- 如果選擇Angular，就得用TypeScript（沒有它你也能開發出Angular應用，但是我們還是推薦你使用）和Rx.js，這些除了Angular應用以外在其他地方也能用得上。這都是非常強大的庫，也適合於函式程式設計開發。
- 如果選Vue.js的話，也許還得學習Vuex，這東西有點類似於Redux但是是給Vue用的。
需要注意的是，Redux、Mobx以及Rx.js都不是跟這些框架綁死到一起的，你也可以用到各種JavaScript應用裡面。此外，如果選擇了Angular的話，確保你用的是Angular 2+而不是Angular 1+,這裡對vue也是一樣的，vue2.0與vue1.0也有細微的區別。
實踐建議：
現在已經知道了開發現代JavaScript應用所需的一切。可以選擇學習的框架做一個專案出來以便練習。
做完之後，再去看看如何衡量和改進效能。比方說可以看看Interactivity Time、Page Speed Index以及Lighthouse Score等。
2、漸進式Web應用
一旦完成了上述所有步驟，再來學習一下service worker以及如何製作漸進式web應用。
漸進式web應用（PWA）是指可以在任何瀏覽器上執行的支援網際網路的應用程式，它是由伺服器端指令碼(PHP和ASP)和客戶端指令碼(JavaScript和HTML)組成的。Service Worker則是位於客戶端（瀏覽器）和伺服器之間的代理。PWA 有以下優點：
- 漸進式 – 每個使用者都可用而不管選擇什麼樣的瀏覽器，因為它們是以漸進式增強為核心原則構建的。
- 自適應 – 適應任何形態：桌面，移動裝置，平板電腦或尚未出現的形式。
- 不依賴網路連線 – Service Workers允許離線工作，或在低質量網路上工作。
- 類似於應用程式 – 使用應用程式風格的互動和導航，感覺像一個應用程式。
- 保持最新 – 得益於service Woker的更新程式，應用能始終保持最新狀態。
- 安全 – 藉助於HTTPS，防止窺探，並確保內容沒有被篡改
- 可發現 – 受益於W3C清單和service Worker註冊作用域，搜尋引擎可找到它們，可以識別為“應用程式”。
- 使用者粘性 – 通過推送通知等功能讓使用者重返應用。
- 可安裝 – 允許使用者在主螢幕上“保留”他們認為最有用的應用程式，而無需經過應用程式商店。
- 可連結 – 通過URL輕鬆共享，不需要複雜的安裝。
3、測試你的應用
相關筆記：QUnit筆記
應用測試有很多工具，各自的用途也不一樣。我本人經常是組合使用Jest、Mocha、 Karma及Enzyme。然而，在開始選擇工具之前，最好是首先理解有哪些不同的測試型別，看看所有的選項情況，然後從中再選擇最適合需求的一個。
單元測試：
JS裡面有許多可以供我們選擇進行單元測試的框架。比如，Mocha, Selenium, jasmine 和 QUnit。本文將重點講述Qunit，Qunit 由開發了許多大名鼎鼎的js庫，包括了的jQuery 、jQuery UI等的Jquery團隊（jQuery team）開發。
4、靜態型別檢查器
靜態型別檢查器幫助給JavaScript增加型別檢查。你不需要學習這些，不過這些東西可以賦予你超能力，而且學習起來也很快，幾個鐘頭就行了。這方面主要有TypeScript 和 Flow。我喜歡TypeScript ，不過可以兩個都看看再選喜歡的。
5、伺服器渲染
目前為止，你所學到的技能應該足夠你找到一個“前端工程”的位置了。但還可以在選定的任何框架內再學學伺服器端渲染的知識。有不同的選項可選，這要取決於你用什麼樣的框架。
- 如果你決定用React，最值得關注的選項是Next.js 和 After.js。
- 如果是Angular，可以選Universal。
- 對於Vue.js，有 Nuxt.js。
四、全棧小嚐試
學習前端的過程如果能瞭解後端是如何運作的將會有利於理清思路，況且現在nodejs發展日益強大，前端的MVC框架也更偏向邏輯化而不是簡單的html頁面，所以做一個小的全棧專案會很有意義，可以從nodejs入手，mysql資料庫也比較簡單輕量，然後可以嘗試瞭解一下javaweb，或者pyhton的django框架。
小結
這份路線可能還會有遺漏的地方，但是足以應付任何“前端工程”角色之所需。還要記住的是，關鍵是儘可能多地練習。一開始你可能會覺得很嚇人，總感覺自己沒有掌握，但這是正常的，慢慢你就會覺得自己變得越來越好。還有，陷入困境時別忘了尋求幫助，你會驚喜地發現有多少人願意幫助你的。
英文：Kamran Ahmed 譯文：36氪，轉自微信公眾號，在博主自身理解上有所改動，侵刪