一、基礎

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氪，轉自微信民眾號，在博主本身明白上有所修改，侵刪