一苏章、基礎（重新學一遍比第一次學效率快很多）
1、HTML基礎
筆記：實踐建議

HTML給你的網(wǎng)頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切刨啸。你的學習應該聚焦在下面這些東西上：

學習HTML基礎，了解如何編寫語義HTML
理解如何把網(wǎng)頁分成section（段落）识脆，以及如何正確組織DOM（文檔對象模型）
現(xiàn)在很多html5的新標簽也很有用，需要進行了解
實踐建議：
一旦你學習了HTML基礎，至少要制作5個HTML網(wǎng)頁灼捂。我建議你隨便找一個網(wǎng)站离例，比如看看Github的檔案頁或者Twitter的登錄頁。然后把焦點放在恰當?shù)亟M織內容上悉稠。出來的東西可能會很難看宫蛆，但是暫時別擔心，把你的關注點放在恰當?shù)慕Y構上的猛。

2耀盗、CSS
現(xiàn)在我們已經(jīng)學會了如何給網(wǎng)頁準備好骨架，接下來就是在此基礎上添加一些皮膚讓它好看一點了卦尊。CSS——級聯(lián)樣式表就是用來美化你的HTML頁面的叛拷。

首先要做的是學習語法，熟悉常見的CSS屬性岂却。
了解盒模型（box model）忿薇，掌握如何利用Grid和Flexbox準備布局
一旦學習完上面的，再學習以下通過媒體查詢把網(wǎng)站做成響應式的躏哩。
實踐建議：
一旦你掌握了基礎署浩，接下來就應該設計上一步制作的HTML網(wǎng)頁。比方說如果你給Github檔案編寫了HTML頁面的話扫尺，現(xiàn)在是時候應用CSS來讓它的樣子看起來像實際的Github資料頁面一樣了筋栋。前面的那5個頁面都要拿來試一下。

3正驻、JavaScript基礎
JavaScript能讓你的HTML頁面互動性更強弊攘。比方說你在網(wǎng)站上看過的所有那些幻燈片、彈出窗口以及廣播通知拨拓，以及在沒有重載頁面的情況下重載頁面的特定部分肴颊，這些都是用JavaScript做的。在這一步中渣磷，你將會學習JavaScript的基礎來為后面的旅程做好準備——

學習這門語言的語法和基本機構婿着。
學習如何用JavaScript來操縱DOM，比方說如何從頁面移除一些元素醋界，如何增加一些元素竟宋，增加和移除類，通過JavaScript應用CSS樣式等形纺。
完成之后再學習和理解諸如范圍丘侠、閉包、變量提升以及事件冒泡這樣的主題逐样。
學習如何用XHR或者Ajax生成HTTP調用蜗字。Ajax可以讓你在不需要重載網(wǎng)頁的情況下執(zhí)行特定動作打肝。
學完之后接下來就要了解ES6+的所有新特性。ES6只是JavaScript的一個版本挪捕，里面給這門語言引入了大量有趣的更新粗梭，比如類、定義變量的多種方式级零，給數(shù)組增加了新的方法断医，字符串連接等。你們在網(wǎng)上找到的大部分文章都會用Babel來解析ES6奏纪，這其實是個轉譯器鉴嗤，可以將這門新的JavaScript轉換為舊的JavaScript，因為有一些舊版的瀏覽器不支持新版的JS序调。不過現(xiàn)在先不用擔心Babel醉锅，只需要了解相關概念，然后用到任何一種支持ES6的最新版瀏覽器上來練習一下就行炕置。
現(xiàn)在你應該已經(jīng)感覺到東西像是那么一回事了荣挨。如果你按照上面的步驟做下來的話應該鼓勵一下。這些是你剛剛學到的一些最重要的東西朴摊。

我應該學jQuery嗎默垄？

曾經(jīng)有一段時間每個人都對jQuery瘋狂，也有充分的理由甚纲；這是一個強大的庫口锭，在JavaScript基礎上提供了一個封裝，讓你可以用兼容瀏覽器的方式執(zhí)行任何東西介杆。不過那些日子已經(jīng)一去不復返鹃操，現(xiàn)在新項目用它已經(jīng)不是很多了，但是仍然還有人在用春哨。所以其實jQuery對我們最大的用處其實看源碼荆隘，它對與dom的操作和交互的源碼其實對我們寫js代碼是有很大的啟示作用的。

實踐建議：
你可能隨時都會感覺自己已經(jīng)理解了但是如果不練習的話很快就會忘掉赴背。在按照這份路線圖去學習的時候椰拒，要確保盡可能多地去上手實踐。

繼續(xù)做些響應式網(wǎng)站凰荚，用JavaScript增加交互性燃观。你可以添加任何感興趣的現(xiàn)有的網(wǎng)頁上去，但記住要利用上目前學到的一切便瑟。

一旦你制作出了一些網(wǎng)站缆毁，接下來就是開始做真正的東西了。你可以到github上面找一些項目打開某些開源項目的pull請求到涂。以下就是一些可以去嘗試的pull請求：

增強UI脊框，把任何演示頁做成響應式或者改進設計
看看有什么開放的issue是你能夠解決的
重構任何你認為自己可以改進的代碼
4颁督、其他
在學習基礎內容之后，還需要了解一些技能缚陷，主要如下：

chrome瀏覽器的控制臺調試适篙，這個將會大大方便修改代碼觀察前后臺交互
選擇適合的ide,一般來說使用的有sublime,vs,webstorm,vscode等，還有各種配合編程的插件
學會git的基本操作箫爷，如果想簡單也可以用git的GUI版本，但其實學會git的基本命令行很有用
二聂儒、進階
1虎锚、包管理器
在此之前，如果你要用到一些外部庫,如插件或外部的桌面小部件的話衩婚，你得手工下載JavaScript和CSS文件并且將它們放到項目里面窜护，然后那些庫或者插件發(fā)布新版本的時候，你又得下載更新的文件再放到你的項目里面非春，這是極其麻煩的事情柱徙。

具體來說，包管理器就是可以通過命令行奇昙，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級护侮，這樣就不用手工復制和更新庫。現(xiàn)在有的包管理器主要是yarn和npm储耐。這兩個中npm先于yarn出現(xiàn)但yarn在包的版本管理強于npm,其具體使用幾乎是一樣的羊初，一旦學會了使用其中一個，另一個自然也不成問題什湘。

實踐建議：
在對包管理器有了基本了解之后长赞，你就可以去安裝一些外部庫到你前面制作的一些網(wǎng)頁上了，比如安裝一些提示插件闽撤，當用戶點擊某個按鈕時顯示提示信息得哆，或者創(chuàng)建一個登錄表單用一些表單驗證庫進行表單驗證，或者試試不同的選項看看如何安裝不同的版本哟旗。

注：記得要看看語義版本控制

2贩据、CSS預處理器
預處理器以CSS默認不支持的功能豐富了后者∪柔＃可選的css預處理語言包括Sass乐设、Less、Stylus等等绎巨。我更樂意選擇Sass近尚。但是PostCSS最近的發(fā)展勢頭也不錯，這屬于一個錦上添花的東西场勤，有點類似于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開發(fā)的一個統(tǒng)一固定的 CSS 代碼組織和管理規(guī)范葱色。包括 CSS 樣式的命名規(guī)則递宅，你應該了解它們之間的不同，但是我更偏好BEM苍狰。

5办龄、構建工具
工具可以幫助你進行JavaScript應用的構建/打包以及開發(fā)。這一類工具功能主要包括以下三個方面：

linter（代碼檢查） 淋昭， 是指對代碼進行靜態(tài)檢查俐填，如定義變量是否使用，變量命名翔忽，方法回調次數(shù)英融，注釋是否規(guī)范等，主要對代碼書寫是否規(guī)范進行檢查歇式。linter有很多選項驶悟，其中包括ESLint、JSLint材失、JSHint以及JSCS等痕鳍。但是目前主要是ESLint用得多。
task runner（自動構建） ， 即是對項目代碼進行自動構建編譯為瀏覽器能夠執(zhí)行的東西笼呆，如對typescript和Sass進行編譯熊响，使用自動化構建工具則不需要程序員手動進行操作。這個本來是是很多選項的诗赌，包括npm腳本汗茄、gulp、grun等等铭若。不過既然webpack能夠處理gulp能做的大部分東西洪碳，所以只有自動構建中的npm腳本可以用來對webpack能做的任務進行自動化。不需要學習Gulp奥喻，如果到后面如果你有點時間的話偶宫，可以去看看它能否對你的應用有所幫助。
bundler（打包工具） 环鲤， 不同的選項包括Parcel、Webpack憎兽、Rollup冷离、Browserify等。如果你必須選一個纯命，目前你可以閉著眼睛選Webpack就是西剥。Rollup也很常用但是主要建議用到庫上面，至于app亿汞，還是以webpack為主瞭空。所以可以先學習一下webpack，后面如果想的話再了解一下Rollup疗我。
實踐建議：
恭喜你咆畏！你現(xiàn)在可以稱自己為75%的現(xiàn)代JavaScript開發(fā)者了。現(xiàn)在繼續(xù)用你學到的東西做點什么出來吴裤。也許可以做個庫將來用到Sass和JavaScript上旧找。然后用Webpack將Sass轉換成CSS，用babel轉換成ES6代碼麦牺。一旦你做完了再把它發(fā)布到Github和npm上钮蛛。

三、再進階
1剖膳、框架
其實在一般開發(fā)中魏颓，這個部分往往是緊挨著基礎部分的，之所以放在Sass吱晒、構建工具和包管理器后面甸饱，是因為在框架中你全都會用上那些東西。

框架也有好些選項枕荞。不過目前比較常用的是React柜候、Vue和Angular搞动。最近對React.js的需求越來越旺盛。然而渣刷，前面列的這幾個你隨便選一個都不會錯鹦肿。個人會選React或者Angular。不過特別說明一下辅柴，作為初學者也許會發(fā)現(xiàn)相對而言Angular會容易點箩溃，因為它支持幾乎一切立即可用的東西，比如支持延遲加載的強大路由器碌嘀，支持攔截器的HTTP客戶端涣旨，依賴注入，組件CSS封裝等而不需要關心選擇外部庫的問題股冗。不過React在社區(qū)方面無疑更有優(yōu)勢霹陡，而且Facebook一直都在努力改進它。

一旦選擇框架止状，當然還有其他一些東西需要你學的烹棉。

如學React的話，還得學Redux或者Mobx去了解狀態(tài)管理怯疤，具體選學什么要取決于應用的規(guī)模浆洗。Mobx適合中小規(guī)模應用，Redux更適合大規(guī)模應用集峦。甚至如app允許的話可能都不需要學伏社，靠React的原生狀態(tài)管理就行了。
如果選擇Angular塔淤，就得用TypeScript（沒有它你也能開發(fā)出Angular應用摘昌，但是我們還是推薦你使用）和Rx.js，這些除了Angular應用以外在其他地方也能用得上凯沪。這都是非常強大的庫第焰，也適合于函數(shù)編程開發(fā)。
如果選Vue.js的話妨马，也許還得學習Vuex挺举，這東西有點類似于Redux但是是給Vue用的。
需要注意的是烘跺，Redux湘纵、Mobx以及Rx.js都不是跟這些框架綁死到一起的，你也可以用到各種JavaScript應用里面滤淳。此外梧喷，如果選擇了Angular的話，確保你用的是Angular 2+而不是Angular 1+,這里對vue也是一樣的，vue2.0與vue1.0也有細微的區(qū)別铺敌。

實踐建議：
現(xiàn)在已經(jīng)知道了開發(fā)現(xiàn)代JavaScript應用所需的一切汇歹。可以選擇學習的框架做一個項目出來以便練習偿凭。

做完之后产弹，再去看看如何衡量和改進性能。比方說可以看看Interactivity Time弯囊、Page Speed Index以及Lighthouse Score等痰哨。

2、漸進式Web應用
一旦完成了上述所有步驟匾嘱，再來學習一下service worker以及如何制作漸進式web應用斤斧。

漸進式web應用（PWA）是指可以在任何瀏覽器上執(zhí)行的支持互聯(lián)網(wǎng)的應用程序，它是由服務器端腳本(PHP和ASP)和客戶端腳本(JavaScript和HTML)組成的霎烙。Service Worker則是位于客戶端（瀏覽器）和服務器之間的代理撬讽。PWA 有以下優(yōu)點：

漸進式 - 每個用戶都可用而不管選擇什么樣的瀏覽器，因為它們是以漸進式增強為核心原則構建的悬垃。
自適應 - 適應任何形態(tài)：桌面锐秦，移動設備，平板電腦或尚未出現(xiàn)的形式盗忱。
不依賴網(wǎng)絡連接 - Service Workers允許離線工作，或在低質量網(wǎng)絡上工作羊赵。
類似于應用程序 - 使用應用程序風格的交互和導航趟佃，感覺像一個應用程序。
保持最新 - 得益于service Woker的更新進程昧捷，應用能始終保持最新狀態(tài)闲昭。
安全 - 借助于HTTPS，防止窺探靡挥，并確保內容沒有被篡改
可發(fā)現(xiàn) - 受益于W3C清單和service Worker注冊作用域序矩，搜索引擎可找到它們，可以識別為“應用程序”跋破。
用戶粘性 - 通過推送通知等功能讓用戶重返應用簸淀。
可安裝 - 允許用戶在主屏幕上“保留”他們認為最有用的應用程序，而無需經(jīng)過應用程序商店毒返。
可鏈接 - 通過URL輕松共享租幕，不需要復雜的安裝。
3拧簸、測試你的應用
應用測試有很多工具劲绪，各自的用途也不一樣。我本人經(jīng)常是組合使用Jest、Mocha贾富、 Karma及Enzyme歉眷。然而，在開始選擇工具之前颤枪，最好是首先理解有哪些不同的測試類型汗捡，看看所有的選項情況，然后從中再選擇最適合需求的一個汇鞭。

單元測試：
JS里面有許多可以供我們選擇進行單元測試的框架凉唐。比如，Mocha, Selenium, jasmine 和 QUnit霍骄。本文將重點講述Qunit台囱，Qunit 由開發(fā)了許多大名鼎鼎的js庫，包括了的jQuery 读整、jQuery UI等的Jquery團隊（jQuery team）開發(fā)簿训。

4、靜態(tài)類型檢查器
靜態(tài)類型檢查器幫助給JavaScript增加類型檢查米间。你不需要學習這些强品，不過這些東西可以賦予你超能力，而且學習起來也很快屈糊，幾個鐘頭就行了的榛。這方面主要有TypeScript 和 Flow。我喜歡TypeScript 逻锐，不過可以兩個都看看再選喜歡的夫晌。

5、服務器渲染
目前為止昧诱，你所學到的技能應該足夠你找到一個“前端工程”的位置了晓淀。但還可以在選定的任何框架內再學學服務器端渲染的知識。有不同的選項可選盏档，這要取決于你用什么樣的框架凶掰。

如果你決定用React，最值得關注的選項是Next.js 和 After.js蜈亩。
如果是Angular懦窘，可以選Universal。
對于Vue.js勺拣，有 Nuxt.js奶赠。
四、全棧小嘗試
學習前端的過程如果能了解后端是如何運作的將會有利于理清思路药有，況且現(xiàn)在nodejs發(fā)展日益強大毅戈，前端的MVC框架也更偏向邏輯化而不是簡單的html頁面苹丸，所以做一個小的全棧項目會很有意義，可以從nodejs入手苇经，mysql數(shù)據(jù)庫也比較簡單輕量赘理，然后可以嘗試了解一下javaweb，或者pyhton的django框架扇单。

歡我的文章就關注我吧商模，持續(xù)更新中.....
以上內容希望幫助到大家，很多朋友在進階的時候總會遇到一些問題和瓶頸蜘澜，業(yè)務代碼寫多了沒有方向感畸裳，不知道該從那里入手去提升舀射，對此我整理了一些資料国撵，多個知識點高級進階干貨需要的可以免費分享給大家瓤的，需要的可以去主頁或者評論留言