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

六小登登發表於2019-02-17
Web前端

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

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

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

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

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

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

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

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

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

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

前言

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

工具篇

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

1. WebStorm

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

2. Visual Studio Code

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

3. atom

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

4. 科學上網

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

5. Google

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

6. Github

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

7. Stack Overflow

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

8. SegmentFault

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

9. Markdown

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

HTML 篇

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

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

1. 基礎

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

2. 進階

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

CSS 篇

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

1. 基礎

2. 進階

書籍：

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

線上系列：

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

知識點：

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。

線上系列

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

2. 進階

TypeScript篇

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

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

Jquery篇

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

Ajax篇

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

NodeJS與模組化

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

框架篇

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

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

1. Angular

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

2. Vue

3. React

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

視訊課程

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

圖形視覺化

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

工程化與版本控制篇

1. Git

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

2. Gulp

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

3. Webpack

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

4. Babel

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

  • Babel：官網教程。

5. 程式碼質量

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

瀏覽器與HTTP

效能優化

SEO

部落格系列

1. 個人

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

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

2. 團隊

優質社群

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

專案資源

常用工具

最後

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

相關文章