本文的最新內容，更新於2020-01-09。大家完全不用擔心這篇文章會過時，因為隨着 前端技術 的更新，本文也會隨之更新。
本文的最新內容也會在GitHub上實時更新。歡迎在GitHub上關注我，一起入門和進階前端。
我之前寫過一篇文章：《裸辭兩個月，海投一個月，從Android轉戰Web前端的求職之路》。這篇文章講述了我在轉型過程中的親身經歷和感受，不少童鞋私信問我怎么入門前端，於是有了這篇文章。
Web前端入門的自學路線
新手入門前端，需要學習的基礎內容有很多，如下。
一、HTML、CSS基礎、JavaScript語法基礎。學完基礎后，可以仿照電商網站（例如京東、小米）做首頁的布局。
二、JavaScript語法進階。包括：作用域和閉包、this和對象原型等。相信我，JS語法，永遠是面試中最重要的部分。
三、jQuery、Ajax等。jQuery沒有過時，它仍然是前端基礎的一部分。
四、ES6語法。這部分屬於JS新增的語法，面試必問。其中，關於 promise、async 等內容要尤其關注。
五、HTML5和CSS3。要熟悉其中的新特性。
六、canvas。面試時，有的公司不一定會問canvas，靠運氣。如果時間不夠，這部分的內容可以先不學。但如果你會，絕對屬於加分項。
七、移動Web開發、Bootstrap等。要注意移動開發中的適配和兼容性問題。
八、前端框架：Vue.js和React。這兩個框架至少要會一個。入門時，建議先學Vue.js，上手相對容易。但無論如何，同時掌握 Vue 和 React 才是合格的前端同學。
九、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就相對輕量很多。個人總結一下：用VS Code 的人越來越多，用 WebStorm 的人越來越少。具體可以看：《第一次使用VS Code時你應該知道的一切配置》
十三、TypeScript（簡稱TS）。ES 是 JS 的標准，TS 是 JS 的超集。TS屬於進階內容，建議把上面的基礎掌握之后，再學TS。
推薦的前端圖文教程
我在GitHub上有一個Web前端入門的學習教程，非常詳細，地址是：
非常詳細和貼心，你值得star。這個前端教程主要有三個作用：
-
網上的大部分入門教程，都不太適合初學者，本項目爭取照顧到每一位入門者的同理心。
-
幫助前端同學提供一個精品學習路線和資源，提高學習效率，少走很多彎路。
-
可以當做前端字典，隨時翻閱，查漏補缺。
推薦的技術博客
推薦的書籍
上面這套書有上、中、下三本，你都可以讀一讀。如果時間不夠，那就先讀第一本。
- 《網絡是怎樣連接的》
程序員面試的時候，經常會被問的一個問題是：“在瀏覽器的地址欄輸入url，按下回車后，發生了什么？”
為了清楚這個問題，看上面這本書，足夠了。如果你想入門計算機網絡，這本書也是必讀的。評價非常高。
關於這個問題，也可以看下面這篇文章：瀏覽器輸入 URL 后發生了什么？
- 《CSS世界》
關於 CSS 的書籍，首先推薦這本書，我身邊的大佬們都說這本書好。雖然我不是大牛，但我也覺得這本書很好。
如果 js 熟練，說明你是有技術深度的前端；如果 css 熟練，說明你是有經驗的前端。
推薦的鏈接
這個導航里列出了很多常見網站、博客、工具等，整體來看比較權威。
學是一方面，也是最主要的方面；但還有一個作用，比如，“這個前端框架你都不知道啊”、“這個前端大牛你都沒聽說過啊” 。此時，這份清單就能起到作用了。如果能把清單里列出的內容都了解下，逼格也會高很多。
如果你想查看前端的 api 文檔，請首先去 MDN上看。很官方，很正規。
不要去什么 w3school 上看，可能有很多錯誤。
前端資訊訂閱源
國內的很多技術博客，都是比較粗淺的二手知識，真正的大佬，看不上這些東西。
要了解最新的的前端技術趨勢、前端資訊，還得看國外的網站。下面這兩個前端資訊的網站，極力推薦。它們都可以通過郵件的形式訂閱，我認為是前端開發者必須要訂閱的：
-
Daily JS：https://medium.com/dailyjs - medium 上的博客。
-
JavaScript Weekly：https://javascriptweekly.com/ - 聚合類的技術周刊。
我的公眾號
想學習代碼之外的技能？不妨關注我的微信公眾號：千古壹號（id：qianguyihao）。
掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：
