很多人都想學編程。但是苦於沒有具體的步驟和指導。比如想找份前端開發的工作，卻不知道應該先學習什么再學習什么，也不知道該選擇什么樣的工具。因為經常被人問到類似的問題，全棧開發者Kamran Ahmed索性在github上制訂了一份現代前端開發的路線圖，並且用一篇文章對前端開發的整個學習過程進行了詳細解釋。感興趣的初學者不容錯過。
1.學習HTML基礎
HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上：
學習HTML基礎，了解如何編寫語義HTML
理解如何把網頁分成section（段落），以及如何正確組織DOM（文檔對象模型）
2.學點CSS
現在我們已經學會了如何給網頁准備好骨架，接下來就是在此基礎上添加一些皮膚讓它好看一點了。CSS——級聯樣式表就是用來美化你的HTML頁面的。
首先要做的是學習語法，熟悉常見的CSS屬性。
了解盒模型（box model），掌握如何利用Grid和Flexbox准備布局
一旦學習完上面的，再學習以下通過媒體查詢把網站做成響應式的。
3.學習JavaScript基礎
JavaScript能讓你的HTML頁面互動性更強。比方說你在網站上看過的所有那些幻燈片、彈出窗口以及廣播通知，以及在沒有重載頁面的情況下重載頁面的特定部分，這些都是用JavaScript做的。在這一步中，你將會學習JavaScript的基礎來為后面的旅程做好准備——學習這門語言的語法和基本機構。
學習如何用JavaScript來操縱DOM，比方說如何從頁面移除一些元素，如何增加一些元素，增加和移除類，通過JavaScript應用CSS樣式等。
完成之后再學習和理解諸如范圍、閉包、變量提升以及事件冒泡這樣的主題。
學習如何用XHR或者Ajax生成HTTP調用。Ajax可以讓你在不需要重載網頁的情況下執行特定動作。
學完之后接下來就要了解ES6+的所有新特性。ES6只是JavaScript的一個版本，里面給這門語言引入了大量有趣的更新，比如類、定義變量的多種方式，給數組增加了新的方法，字符串連接等。你們在網上找到的大部分文章都會用Babel來解析ES6，這其實是個轉譯器，可以將這門新的JavaScript轉換為舊的JavaScript，因為有一些舊版的瀏覽器不支持新版的JS。不過現在先不用擔心Babel，只需要了解相關概念，然后用到任何一種支持ES6的最新版瀏覽器上來練習一下就行。我們后面還會再繼續講ES6的。
現在你應該已經感覺到東西像是那么一回事了。如果你按照上面的步驟做下來的話應該鼓勵一下。這些是你剛剛學到的一些最重要的東西。
4.我應該學jQuery嗎？
曾經有一段時間每個人都對jQuery瘋狂，也有充分的理由；這是一個強大的庫，在JavaScript基礎上提供了一個封裝，讓你可以用兼容瀏覽器的方式執行任何東西。不過那些日子已經一去不復返，現在新項目用它已經不是很多了，但是仍然還有人在用。你不是一定要學它，但是這玩意兒的確很容易，如果你想看看的話還是有好處的。
5.包管理器
在此之前，如果你要用到一些外部庫比如插件或者任何外部的桌面小部件的話，你得手工下載JavaScript和CSS文件並且將它們放到項目里面，然后那些庫或者插件發布新版本的時候，你又得下載更新的文件再放到你的項目里面，這是極其麻煩的事情。包管理器可以干掉這種麻煩。它們幫助你把外部庫和插件放到你的項目里面，這樣你就不用關心手工復制庫或者費事地在它們發布新版時更新文件的事情了。現在有yarn和npm了。這兩個幾乎是一樣的，都只是實現，你可以任選一個，一旦學會了使用其中一個，另一個自然也不成問題。
6.CSS預處理器
預處理器以CSS默認不支持的功能豐富了后者。可選項有很多，包括Sass、Less、Stylus等等。要我選的話，我會選擇Sass。然而，PostCSS最近的發展勢頭也不錯，這屬於一個錦上添花的東西，有點類似於CSS的“Babel”。你可以拿來獨立使用或者在Sass的基礎上疊加。目前我建議你先學Sass，等后面有時間了再看看PostCSS。
7.CSS框架
你已經不再需要學習CSS框架了，然而如果你想學一個的話。我會推薦在Bootstrap、Materialize和Bulma里面選。但如果你要考慮它們的市場需求的話，我會選擇Bootstrap。
8.CSS組織
隨着你的應用不斷膨脹，CSS也開始變得混亂難以維系。有多種手段可以對你的CSS進行組織，讓它更好地應對伸縮性，比如OOCSS、SMACSS、SUITCSS、Atomic以及BEM。你應該了解它們之間的不同，但是我更偏好BEM。
9.構建工具
工具可以幫助你進行JavaScript應用的構建/打包以及開發。這一類包括了linter（代碼檢查）、task runner（自動構建）以及bundler（打包工具）。
對於自動構建，這個本來是是很多選項的，包括npm腳本、gulp、grun等等。不過這一次，既然webpack能夠處理gulp能做的大部分東西，所以只有自動構建中的npm腳本可以用來對webpack能做的任務進行自動化。你不需要學習Gulp，然而到后面如果你有點時間的話，可以去看看它能否對你的應用有所幫助。
至於linter，再次地也有很多選項，其中包括ESLint、JSLint、JSHint以及JSCS等。但是目前主要是ESLint用得多。
對於模塊打包工具，不同的選項包括Parcel、Webpack、Rollup、Browserify等。如果你必須選一個，目前你可以閉着眼睛選Webpack就是。Rollup也很常用但是主要建議用到庫上面，至於app，還是以webpack為主。所以現在你就先學習一下webpack吧，后面如果想的話再了解一下Rollup。
10.選一個框架
在舊的路線圖中，這個部分往往是緊挨着基礎部分的，但是這次我改到放在Sass、構建工具和包管理器后面了，因為在框架中你全都會用上那些東西，如果不具備相應知識的話會嚇到你的。
框架也有好些選項。不過目前比較常用的是React、Vue和Angular。最近對React.js的需求越來越旺盛。然而，前面列的這幾個你隨便選一個都不會錯。我個人會選React或者Angular。不過特別說明一下，作為初學者你也許會發現相對而言Angular會容易點，也許是因為它支持幾乎一切立即可用的東西，比如支持延遲加載的強大路由器，支持攔截器的HTTP客戶端，依賴注入，組件CSS封裝等而不需要關心選擇外部庫的問題。不過React在社區方面無疑更有優勢，而且Facebook一直都在努力改進它。你需要確保的是不要因為什么東西火就選擇什么，要去google一下，對比一下，看看哪一個最適合你。
這兩個的比較以及我的個人體會我要留到下一篇文章再談了，不過既然這篇文章是談學習的，我就來講講如何找到Angular和React的學習曲線。
一旦你選擇了自己的框架，當然還有其他一些東西需要你學的。比方說如果你決定學React的話，你可能還得學Redux或者Mobx去了解狀態管理，具體選學什么要取決於你要做的應用的規模。Mobx適合中小規模應用，Redux更適合大規模應用。甚至你可能都不需要學，靠React的原生狀態管理就行了，如果你的app允許的話。
如果你選擇Angular，你就得用TypeScript（沒有它你也能開發出Angular應用，但是我們還是推薦你使用）和Rx.js，這些除了Angular應用以外在其他地方也能用得上。這都是非常強大的庫，也適合於函數編程開發。
如果你選了Vue.js的話，也許還得學習Vuex，這東西有點類似於Redux但是是給Vue用的。
11.漸進式Web應用
一旦完成了上述所有步驟，再來學習一下service worker以及如何制作漸進式web應用。
12.測試你的應用
應用測試有很多工具，各自的用途也不一樣。我本人經常是組合使用Jest、Mocha、 Karma及Enzyme。然而，在開始選擇工具之前，最好是首先理解有哪些不同的測試類型，看看所有的選項情況，然后從中再選擇最適合您需求的一個。
13.靜態類型檢查器
靜態類型檢查器幫助給JavaScript增加類型檢查。你不需要學習這些，不過這些東西可以賦予你超能力，而且學習起來也很快，幾個鍾頭就行了。這方面主要有TypeScript 和 Flow。我喜歡TypeScript ，不過你可以兩個都看看，再選你喜歡的。
14.服務器渲染
目前為止，你所學到的技能應該足夠你找到一個“前端工程”的位置了。但且慢，你還可以更上一層樓。
你還可以在選定的任何框架內再學學服務器端渲染的知識。有不同的選項可選，這要取決於你用什么樣的框架。比方說如果你決定用React，最值得關注的選項是Next.js 和 After.js。如果是Angular，你可以選Universal。對於Vue.js，我們有 Nuxt.js。
這份路線圖可能還會有遺漏的地方，但是足以應付任何“前端工程”角色之所需。還要記住的是，關鍵是盡可能多地練習。一開始你可能會覺得很嚇人，總感覺自己沒有掌握，但這是正常的，慢慢你就會覺得自己變得越來越好。還有，陷入困境時別忘了尋求幫助，你會驚喜地發現有多少人願意幫助你的，或者至少我願意。