2018年Web前端入門的自學路線
以下是正文。
我前幾天寫過一篇文章：《裸辭兩個月，海投一個月，從Android轉戰Web前端的求職之路》。這篇文章講述了我在轉型過程中的親身經歷和感受，不少童鞋私信問我怎麼入門前端，於是有了這篇文章。
Web前端入門的自學路線
新手入門前端，需要學習的基礎內容有很多，如下。
一、HTML、CSS基礎、JavaScript語法基礎。學完基礎後，可以仿照電商網站（例如京東、小米）做首頁的佈局。
二、JavaScript語法進階。包括：作用域和閉包、this和物件原型等。相信我，JS語法，永遠是面試中最重要的部分。
三、jQuery、Ajax等。
四、ES6語法。這部分屬於JS新增的語法，面試必問。其中，關於promise、async等內容要尤其關注。
五、HTML5和CSS3。要熟悉其中的新特性。
六、canvas。面試時，有的公司不一定會問canvas，靠運氣。如果時間不夠，這部分的內容可以先不學。
七、移動Web開發、Bootstrap等。要注意移動開發中的適配和相容性問題。
八、前端框架：Vue.js和React。這兩個框架至少要會一個。入門時，建議先學Vue.js，上手相對容易。
九、Node.js。屬於加分項，如果時間不夠，可以先不學，但至少要知道 node 環境的配置。
十、自動化工具：構建工具 Webpack、構建工具 gulp、CSS 前處理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。
十一、前端綜合：HTTP協議、跨域通訊、安全問題（CSRF、XSS）、瀏覽器渲染機制、非同步和單執行緒、頁面效能優化、防抖動（Debouncing）和節流閥（Throtting）、lazyload、前端錯誤監控、虛擬DOM等。
十二、編輯器相關。Sublime Text 是每個學前端的人都要用到的編輯器。另外，前端常見的IDE有兩個：WebStorm 和 Visual Studio Code。WebStorm什麼都好，可就是太卡頓；VS Code就相對輕量很多。個人總結一下：新手一般用 WebStorm，入門之後，用 VS Code 的人更多。
推薦的學習視訊
我看過的學習視訊，多的數不清。傳智播客、尚矽谷、慕課網、極客學院等等，這些只是冰山一角。下面推薦一些。
溫馨提示：不一定是從頭到尾看，可以選擇性地看。另外，要倍速播放，我一般是用1.5倍的速度播放。
傳智播客
傳智黑馬2018 Web前端全套：
PS：上面這三個連結，指向的的是同一個學習資源。
黑馬的視訊很新，可以找官方的QQ要配套的PPT和原始碼。
尚矽谷
尚矽谷 2018 Web前端全套：
PS：上面這兩個連結，指向的的是同一個學習資源。
尚矽谷的視訊裡，講JS語法和ES6的部分很不錯。
推薦的圖文教程
看視訊還是比較花時間的，你也可以看看圖文教程。我在GitHub上有一個Web前端入門的學習教程，非常詳細，地址是：
非常詳細和貼心，你值得star。
推薦的技術部落格
推薦的書籍
上面這套書有上、中、下三本，你都可以讀一讀。如果時間不夠，那就先讀第一本。
程式設計師面試的時候，經常會被問的一個問題是：“在瀏覽器的位址列輸入url，按下回車後，發生了什麼？”
為了清楚這個問題，看上面這本書，足夠了。如果你想入門計算機網路，這本書也是必讀的。評價非常高。
推薦的連結
待更新。
交流群
另外，我建了一個“前端學習”的微信交流群，目前看來，群裡的學習氛圍很不錯。加我微信（bootmei），拉你進群：
進群暗號：前端學習
進群要求：愛分享
我的公眾號
想學習程式碼之外的軟技能？不妨關注我的微信公眾號：千古壹號（id：qianguyihao）。
掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：
