一個「學渣」從零開始的Web前端自學之路

從 13 年專科畢業開始，一路跌跌撞撞走了很多彎路，做過餐廳服務員，進過工廠幹過流水線，做過客服，幹過電話銷售可以說經歷相當的“豐富”。

最後的機緣巧合下，走上了前端開發之路，作為一個非計算機專業且低學歷的人來說，自學程式設計其實不是件容易的事情，不過慶幸的是自己堅持下來了。

目前工作還算不錯，收入在目前所在的城市不算高，不算低，生活也還過得去，繼續加油努力，也希望自己在今後更上一層。

從 16 年下半年開始，我真正接觸前端，到現在 2 年多的時間。開始之初，我沒有任何的語言基礎，完全從零的小白開始，就連「物件」我都弄不明白，更別說那些高深莫測的什麼封裝，繼承，多型等。

當時自己也不知從何入手，怎麼辦呢？於是每當自己遇到困難時，就厚著臉皮去請教前輩大牛，然後就是去查閱資料，很多時候自己也很覺得不好意思，現在才發現人很多時候都恥於相別人請教，怕自己丟面子。

但作為一個過來人，我要告訴你請教前輩大牛真的很重要，可以讓你少走很多的彎路，不要怕丟人，沒面子，面子值幾個錢？學到真本事才最重要。沒有技能才叫真的沒有面子。當然了我們在請教別人時，一定要掌握「度」，不要打擾到了別人的工作。

我現在非常感謝前輩們的賜教，也感謝那些在網上寫部落格、文章分享的大牛們，給了我們這些自學的小白很多的資料，經驗，心得。從中受益很多。

向優秀的前輩們學習，所以自己也開始進行學習總結寫部落格，希望也能幫到和我一樣，學渣、從零開始、喜歡技術的一群志同道合的人。

我深知自己的技術並不高，還處在繼續學習的路上，離大牛還差的很遠，我本身也非常敬畏技術，也知道自己的渺小，只希望這篇文章的「學習之路」對於那些「從零開始」學習前端的同學有一些指引作用，不像自己一開始那樣的那麼盲目，哪怕對你有一點點的幫助，就足夠了。

說了這麼多，下面我們直接進入正題，都是我平時學習和收集的一些資料希望能夠幫到你。

前言

1. 首先我得告訴你，自學是件很苦的事情，學習本身就是件反人性的過程，更何況在一個從零開始的全新領域獨自奮鬥，這裡不是要打擊你，而是要你認真想好，結合自身的環境、條件。不然半途而廢浪費的不僅是時間，還有精力、金錢。
2. 如果你已經想好決定去做，那就不要猶豫，堅持下去你就可以成功，像我這樣的學渣都可以，你沒有什麼不可以的，一定要相信自己。
3. 興趣是最好的老師，很多人對這句話非常反感，被生活所迫，談興趣不可笑嗎？其實不是，問問自己對技術有沒有興趣，做自己喜歡和感興趣的事情才能夠走的更遠和更久，很多人不理解這一點，總有一天你會明白的，我當時轉前端的時候也是因為自己挺喜歡，而且最接近使用者，都是所見所得的東西很好玩，令外一方面也覺得工資也挺高，所以自己打心裡覺得做前端挺好。
4. 做好持續學習，時刻保持學習的心態，說實話現在社會，科技的發展非常之快，技術的更新更是如此，如果你覺得學習一門技術就可以吃到老，我勸你還是打住，可能考個公務員更適合你（不要槓精，我並不是說公務員不要學習，自己體會就好）。
5. 永遠不要覺得遲，只要行動然後堅持下去，你就幹掉了 80% 的人，自學的人很多，但是堅持下來的沒有幾個。就像郭德綱說過，不是我的相聲說的多好而是「我活了下來。著名營銷人員「小馬宋」畢業時燒了很多年的鍋爐，但是自己對廣告營銷感興趣，所以離職從零開始，現在已經是很有名的營銷大師。有興趣的可以關注下他的同名公眾號「小馬宋」。
6. 與其把時間花在學與不學的糾結上，不如把這個時間放在行動上，如果發現自己不合適也堅持不下去，那就換個賽道，專注的去做一件事情，會提高你的成功概率。

工具篇

工欲善其事，必先利其器，所以在開始之前選擇一個合適好用的編輯器是很重要的，工具不再多，在於好用就行，除了編輯器，我們也要掌握其他的一些工具，才能夠讓我們在學習的道路上更加的順暢。

1. WebStorm

不必多說，前端最強大的編輯器，特別是那無敵的智慧提示，但是它的缺點在於如果專案多於大時，出現的卡頓讓很多人苦惱。

• WebStorm：官網下載地址。
• WebStorm 有哪些過人之處？
• 啟用WebStorm2018

2. Visual Studio Code

微軟開源免費產品，受到非常多技術人員的喜愛，基本上成為前端開發者的必備編輯器，強大的外掛擴充套件，可以靈活的打造自己喜歡的風格。給你們送上常用外掛列表拿走不謝。

• Visual Studio Code：官網下載地址。
• VSCode擴充推薦
• 使用頂級 VSCode 擴充套件來加快開發 JavaScript
• vscode 外掛推薦

3. atom

也是一款免費開源的編輯器，受到很多人的喜愛，但是我本人用的較少，所以外掛方面就不推薦了，大家可以按照自己的愛好去尋找。

4. 科學上網

每個程式設計師都應該具備的工具和能力，否則很多事情都無法辦到，至於怎麼做，你可以自己查閱資料，這裡不就不在多說了。而且下面推薦的很多資源都是需要科學上網之後才能訪問，所以一定要學會，一定要學會，一定要學會。

5. Google

在使用「Google」之前必須學會科學上網，不然無法訪問，學會使用搜尋可以幫助我們解決很多問題，一個人的知識是有限的，掌握了搜尋的技巧才能以不變應萬變，很多時候百度出來的東西重複性很大，最重要的是垃圾資訊很多，在百度找不到的答案，在這裡很容易找到，Google 是我的必備搜尋。

6. Github

全球最大的「同性」開源交流社群，沒有賬號的趕緊註冊，在這有很多優秀的資源專案，各種大神。觀摩優秀程式碼是我們學習的很好路徑。另外在開發過程中，很多時候任務重、時間緊，應該避免重複造輪子，這裡能夠找到你需要的工具或程式碼。

7. Stack Overflow

國外著名的技術問答交流社群，開發時碰到的很多問題在這裡都能找到答案。

8. SegmentFault

對應的國內版的技術問答交流社群，如果你英文不好，也可以在這裡找找答案。

9. Markdown

Markdown 輕量級標記語言，簡潔的語法，讓作者專注內容而非複雜的格式要求，我認為人人都應該掌握，特別是經常寫部落格的人。想想你在用 world 時的場景，每次寫完文章之後，不得不話費很多時間進行格式的排版，使用它你就可以避免這些煩惱。

• Markdown 中文文件
• 有道雲筆記：我自己一直在用的線上 Markdown 編輯器。

HTML 篇

一些準備就緒之後，開始我們的學習之旅，首先我們先從 HTML 開始。

HTML名為「超文字標記語言」，是整個頁面的結構基礎，它承載了我們的頁面內容。

1. 基礎

• w3school 線上教程：內容非常的基礎，適合小白學習，對 HTML 有一個入門瞭解。
• freeCodeCamp：一個非常好的入門學習網站，採用闖關的模式，就像遊戲打怪升級一樣，非常的有樂趣，準備自學的小夥伴不妨試試。

2. 進階

• MDN HTML：這裡的內容質量更好，錯誤更少，內容也更加的全面。
• HTML和CSS編碼規範：掌握一些程式碼技巧，寫出更好，更高質量的程式碼。

CSS 篇

HTML 承載了頁面的內容，但是有時候會略顯單調與「醜陋」，CSS 的作用就是為這些內容加上樣式，就像一個美女也要有漂亮的外衣去修飾才會更加漂亮，「人靠衣裝馬靠鞍」，網頁的內容也是需要穿上一件漂亮的外衣去吸引使用者。而 CSS 則完成了這個裝飾。

1. 基礎

• 學習CSS佈局：帶你一步一步的完成 CSS 的學習。
• CSS參考手冊：對CSS可以有一個全面入門的學習。
• w3school CSS 參考手冊：同上也是非常基礎的知識，適合入門。

2. 進階

書籍：

《CSS揭祕》：非常推薦的一本 CSS 書籍，可以學到很多鮮為人知的技巧。

線上系列：

• MDN CSS：和 HTML 都是 MDN 社群文件，質量保障。
• HTML和CSS編碼規範：掌握一些程式碼技巧，寫出更好，更高質量的程式碼。
• 大漠老師的CSS系列：大漠老師對CSS有非常深入的認識和豐富的實踐經驗，《圖解CSS3：核心技術與案例實戰》的作者。
• 大漠老師的SASS系列：大漠老師的 sass 文章系列。
• SASS中文網：成熟、穩定、強大的 CSS 擴充套件語言解析器，它可以讓你使用變數，條件語句等書寫 CSS。
• Stylus官網：同樣是 CSS 預編譯器，但它省去了一些符號，讓 CSS 寫起來更加的簡潔，清爽。
• HTML5和CSS3：詳解HTML5 和 CSS3。

知識點：

• 別說你懂CSS相對單位：深入瞭解 CSS 的相對單位rem，em區別。
• CSS 進階內容：常見知識點的深入瞭解。
• Flex 佈局教程：語法篇：阮一峰老師的flex講解。
• Flex 佈局教程：例項篇：阮一峰老師的flex講解。
• “CSS相關”目錄存檔：張鑫旭大佬的CSS系列文章，深入淺出，《CSS世界》作者。
• CSS繪製的40種形狀和圖形：利用CSS繪製出的40各種圖形形狀。
• CSS-大前端：一些 CSS 的知識點。

JavaScript 篇

有了 HTML 與 CSS，網頁也就有了內容和樣式，但是會缺少與使用者的互動，所有的內容都靜靜的躺在那裡死氣沉沉。就好比一個美女穿著漂亮的衣服在你面前一動不動好像也沒有什麼吸引力，但如果又唱歌，又跳舞，還向你拋媚眼，那可真就把持不住了。JavaScript 就是給網頁新增這樣的「行為」。

[Javascript 簡史
](https://blog.csdn.net/qq_3213…：可以簡單瞭解下，JavaScript 發展由來。

1. 基礎

書籍

• 《JavaScript權威指南 （第6版）》：俗稱「犀牛書」，JS 的經典之作，提升JS技能的必備書籍，我的JS基礎知識全都是啃這本書啃下來的，剛開始讀時可能有會有些吃力，但是隻要堅持下來收穫滿滿。
• 《JavaScript高階程式設計（第3版）》：俗稱「紅寶書」，JavaScript 超級暢銷書，全書闡述了JavaScript語言實現的各個組成部分，ECMAScript，DOM，BOM，事件，物件導向等等，隨時拿出來翻翻，更加深入了學習 JS。

線上系列

除了書籍之外，也有很多優秀的線上教程，可以幫助我們更好的學習。

• 現代 Javascript 教程：非常全面的JavaScript 學習教程，從基礎到高階，非常詳細，相信你會愛上它的。
• 廖雪峰的JavaScript教程：廖雪峰系列教程。
• JavaScript 標準參考教程（alpha）：阮一峰老師的系列教程，通俗易懂，案例豐富。

2. 進階

• JavaScript語言精粹：揭示JavaScript中的精華。
• JavaScript 祕密花園：對 JS 一些的核心知識點進行梳理講解，例如：this，閉包/作用域，建構函式，原型等等，都是面試必考知識點。
• ECMAScript 6 入門：阮一峰老師ES6入門書籍，全面介紹 ECMAScript 6 新引入的語法特性。
• JavaScript使用技巧：可以認識到一些你平時沒有接觸過的小技巧。
• 深入理解javascript原型和閉包系列：詳細解釋了原型和閉包，看完之後對原型與閉包讓你徹底明白。
• 大漠老師的JavaScript系列：大漠老師的JavaScript系列文章。
• JavaScript 演算法與資料結構：基於 JavaScript 的演算法與資料結構，讓你愉快的學習。
• JavaScript中的正規表示式：我自己的一篇正規表示式的文章，希望對你有幫助。
• 30分鐘掌握ES6/ES2015核心內容（上）
• 30分鐘掌握ES6/ES2015核心內容（下）：闡述了一些常用的ES6的知識點。
• 學用 JavaScript 設計模式：闡述JavaScript程式語言中經典和現代的設計模式。
• 你不懂JS（系列叢書）
• InterviewMap：聚集了很多知識點，包括JS，瀏覽器，效能等。
• 30 秒就能理解的 JavaScript 程式碼片段：讓你更好的理解一些有用的JS程式碼片段。

TypeScript篇

ES6 的超集擴充套件，嚴格的資料型別，帶來更好的維護，適合大型專案的開發工作，有人說它是未來的發展趨勢，你說要不要了解？

• TypeScript 中文手冊：官網翻譯版。
• TypeScript Handbook（中文版）：中文版。
• RxJS 中文文件：中文官網。
• [30 天精通 RxJS (01)：認識 RxJS

](https://ithelp.ithome.com.tw/…：繁體字可能閱讀起來並沒有那麼順暢。

Jquery篇

雖說現在已經是單頁面應用時代，有React，Vue 這種強大的框架可以使用，但也不缺乏一些老的專案需要維護，而且在學習之初，可以用它做兩個簡單的應用還是不錯的，可以相對了解下基本用法，它可以讓你更好，更方便的操作DOM。但不建議再深度學習。

• 《鋒利的jQuery(第2版)》：一本很不錯的 Jquery 學習書籍。
• jQuery API中文文件：JQuery 中文教程。

Ajax篇

掌握了的HTML、CSS、JavaScript時，這時候可以嘗試自己做一些專案了，而專案中肯定會有資料的互動，這時候就是 Ajax 的用武之地了。

• 廖雪峰AJAX：廖雪峰大佬的部落格知識。
• XMLHttpRequest 物件：阮一峰老師的AJAX詳解。
• JSON風格指南：前後端的互動資料通常都是 JSON 格式，所以瞭解 JSON 是必要的。

NodeJS與模組化

NodeJs 的出現讓前端發展進入了一個新的領域，並且滋生出專業的 Node 工程師，不僅如此 Node 在前端模組化，工程化起到很重要的作用，所以瞭解是必須的，如果感興趣的可以深入學習，可以向全棧工程師發展。

• Javascript模組化程式設計（一）：模組的寫法
• Javascript模組化程式設計（二）：AMD規範
• Javascript模組化程式設計（三）：require.js的用法
• 前端模組化開發那點歷史：瞭解下，前端模組化的發展。
• Node.js 官方
• 狼叔：如何正確的學習Node.js：狼叔江湖地位頗高，《更了不起的 Node.js》的作者。
• 全棧工程師之路-Node.js

框架篇

隨著日益複雜的使用者需求，與系統的複雜度上升，傳統的開發模式日漸的很難滿足，此時的三大框架孕育而生，讓開發者更加高效，可複用，把關注點都放在資料層的操作，免去那些繁瑣而又重複的檢視操作。

現在框架的能力已經是前端開發人員必備的技能之一也是趨勢，三大框架的「最終目的」都是一致的，我認為開發者不必糾結於到底應該選擇哪一個學習，可以選擇其中的兩個是最好的。對於剛入門的人來說，建議選擇 Vue 入手，比較簡單，靈活。

• MVC，MVP 和 MVVM 的圖示：在學習框架之前，你應該瞭解下MVVM的設計思想。
• 框架原理：瞭解一些框架的基本原理。

1. Angular

• Angular：Angular官方社群。
• Angular開發者：大漠窮秋老師維護的站點，Angular中國佈道者。
• NG-ZORRO：Angular UI 元件庫，阿里巴巴出品。

2. Vue

• Vue：官網，最好的學習資料。
• 我的Vue進階之路：厚著臉皮貼出來，自己的一些學習總結，希望對你有所收穫，哪怕一點點。
• 使用vue全家桶製作部落格網站
• Element：一個高質量的 Vue UI 元件庫。餓了嗎前端團隊出品。
• Vue 專案裡戳中你痛點的問題及解決辦法（更新）：做專案難免回去到坑，這裡你或許可以找到答案。

3. React

React我瞭解不多，所以就沒什麼好推薦的了，大家可自行學習。

• React官網

視訊課程

很多時候，我們在學習的時候有些知識點很難理解或者自己一時間想不通，如果有大牛能夠詢問或者帶著我們再好不過了，而那些視訊學習資源是你最好的選擇，能夠錄製視訊的都是一些大廠的資深大佬，技術造詣也足夠深，我就推薦幾個我經常看的視訊網站，供你們選擇。

• 網易公開課
• 慕課網：高質量的線上學習平臺。
• 極客學院。
• 網易雲課堂
• 騰訊課堂
• 51CTO學院

圖形視覺化

隨著日益增長的資料，如何利用高效的利用資料，是每個企業都考慮的問題，而人的眼睛看到的東西要勝過閱讀的問題，俗話說「一圖勝千言」就是這個道理，所以資料的視覺化就會格外的重要，以下都是我常看的一些技術，書籍，和關注的視覺化開源庫。

• 《HTML5 Canvas核心技術》：學習 Canvas 比較好的一本書籍。
• Canvas系列：大漠老師的 Canvas 系列。
• Echarts
• D3
• Highcharts
• AntV
• Mapv

工程化與版本控制篇

1. Git

版本控制工具，很多新手往往把 git 與 github 傻傻分不清楚，二者是不同的東西，一定要去區分清楚。

• Git教程：廖雪峰老師的教程。
• Learn Git Branching：一種有趣的學習 Git 的方式。
• GitHub 漫遊指南：作者是一個極客。
• git – 簡易指南

2. Gulp

自動化構建工具，專案打包部署前的壓縮合並，節省時間，提高開發效率。

• Gulp 中文網：官方教程。
• gulp詳細入門教程：非常詳細的實現步驟。

3. Webpack

Webpack 是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。

• Webpack中文文件
• webpack原理
• Webpack揭祕——走向高階前端的必經之路
• Webpack HMR 原理解析
• webpack 熱載入原理探索

4. Babel

JavaScript程式碼編譯器，可以讓ES6及以上語法轉換成瀏覽器支援的語法，一般會在框架的腳手架中自行配置。

• Babel：官網教程。

5. 程式碼質量

• ESLint：javascript程式碼檢測工具幫助我們寫出更規範的程式碼。

瀏覽器與HTTP

• 瀏覽器的常見知識點：需要我們瞭解的常見知識。
• 網站安全：幾種常見安全問題。
• 同源限制
• 從URL輸入到頁面展現到底發生什麼？
• 深入理解瀏覽器的快取機制
• 網頁效能管理詳解
• 關於Http協議，你必須要知道的
• HTTP 協議
• HTTP2 協議
• 瀏覽器同源政策及其規避方法
• 跨域資源共享 CORS 詳解
• 總結 XSS 與 CSRF 兩種跨站攻擊

效能優化

• 效能優化：常見效能優化。
• 前端效能優化的七大手段
• 延遲載入(Lazyload)三種實現方式
• 詳解懶載入和預載入
• 前端優化帶來的思考，淺談前端工程化
• 推薦幾本與Web效能優化有關的書籍
• vue + webpack 前端效能優化

SEO

• SEO優化實戰

部落格系列

1. 個人

現在是一個資訊爆炸的時代，網上有很多優秀的部落格文章，每個人的精力都是有限的，不可能關注到所有的部落格，每個人關注點可能不太一樣，所以關注的個人部落格也會不同，這些推薦幾個我比較常看的幾個高質量部落格。而且是持續更新的。

• 阮一峰的個人網站：阮一峰老師江湖地位不必多說，部落格不止有技術，現在阿里任職。
• 廖雪峰的官方網站：廖雪峰老師寫過很多優秀的系列教程，值得去學習。
• 張鑫旭：專注前端技術的大牛之一，出版《css世界》一書。
• W3cplus：大漠老師在手淘任職，CSS，HTML 有著豐富的經驗。
• 前端入門和進階學習筆記：從零開始自學，然後進入京東，記錄作者一路走來的學習筆記。
• 六小登登：我自己的個人部落格，記錄自己的一些學習總結，個人成長，認識思維，雖然自己還是個菜鳥，但一直在路上。

2. 團隊

• 奇舞週刊：收集每週前端精華文章。
• 美團技術團隊：分享一些美團的技術路線。
• JavaScript Weekly：每週都會分享一些 JavaScript 優質內容。
• 印記中文週刊：如果你對英文有閱讀障礙的話，印記幫你翻譯。
• 凹凸實驗室：京東團隊。
• 淘寶前端團隊FED：淘寶前端團隊，不必多說了。
• 網易FEG前端團隊：網易的前端團隊，網易的產品一直都是我最喜歡的。
• IMWeb前端部落格：騰訊公司前端團隊，負責QQ的相關業務你就知道了，都是億級別。
• tutorialzine：高質量教程和文章庫。

優質社群

• 掘金：一個幫助開發者成長的社群，很多高質量文章，我每天沒事都會刷刷文章學學技術，自己的文章也會同步上去。
• InfoQ：技術人員必須知道的社群站點。
• CSDN：中國最大的技術交流社群。
• 部落格園：一個專注技術的社群。
• v2ex：V2EX 是一個關於分享和探索的地方，程式設計師聚集地。
• 前端亂燉
• Medium：國外的優質社群，需要科學上網。

專案資源

• 前端技能彙總：一個前端工程師需要的技能點和學習資料。
• You-need-to-know-css：一個CSS的優質專案，純 CSS 實現我們專案中很多常用，不常用的樣式。
• JavaScript libraries：一些優秀的JavaScript 開源庫。
• awesome-web-dev-books：前端經典學習書單。
• 前端 TOP 100：基本涵蓋了所有前端在用的開源專案，我覺得收藏這一個就夠了。

常用工具

• CSS Sprites Generator：雪碧圖的線上製作工具。
• Lorem Picsum：好用的圖片臨時佔位符。
• Md2All：優秀的現在 Markdown 編輯器。
• 優波設計：優秀的設計導航網站，幫助你更好的尋找資料。
• 搬書匠：書籍搜尋下載。
• 史萊姆導航：資源搜尋。
• codePen：線上程式碼編輯工具。
• Iconfont：阿里的字型圖示庫，支援多種格式，下載圖片，線上使用，SVG等等。
• Can I use：可以檢視瀏覽器相容 CSS 情況。
• 線上工具：工具資源導航。

最後

1. 以上是我這兩年多一路走來收藏的一些資料，整理這份資料也花了我好幾天的時間，希望能夠在自學的道路上幫到你。
2. 再次宣告，我並不是什麼大神，我自認為技術也沒有到達這個層級，但是我會一直堅持學下去，另外一定不要誤會這裡面的知識我全部都會，這些都是我學習的一些資料想整理出來，免去小白的一些不知道如何查閱資料。
3. 這裡的資源可能並不適合每一個人，你也不一定全部都需要，只需要挑選自己想要的部分就行，任何事情並不是越多越好。
4. Web前端自學之路 這份資源我會持續的更新，歡迎大家一起交流，如果你覺得好，可以給個 star。
5. 我個人也建立了一個公眾號，新的文章和資料我都會第一時間在公眾號釋出，除了分享技術，還會分享自己的行動，新的認識，感悟，心得體會等等，總之不只有技術，過來吧讓我們一起成長。
6. 如何你覺得本文不錯，歡迎轉發，點贊，收藏。
7. 掃碼關注微信公眾號：六小登登，可以獲取我一路走來的全套學習資源。