自學前端不用慌張！零基礎學習前端必備手冊 ，學成月薪12K

隨著網際網路的深入發展，前端開發工程師一躍成為市場上非常搶手的人才。很多同學，包括以前做UI的、Java的、或者對於IT完全零基礎的同學都想學習前端。下圖是網上流傳甚廣的一張前端學習思維導圖，很多初學者表示看到這些密密麻麻的知識點就已經暈了。確實，前端是一門涵蓋面很廣的學科。但是想學前端的你也不用慌張，內容雖多但有跡可循，只要循序漸進就不怕學不好前端！

那麼對於零基礎的一個學員該怎麼學習前端呢？

工具篇

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

1. WebStorm

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

1. Google

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

1. Github

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

1. Stack Overflow

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

1. SegmentFault

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

1. Markdown

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

· Markdown 中文文件

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

HTML 篇

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

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

1. 基礎

· w3school 線上教程：內容非常的基礎，適合小白學習，對 HTML 有一個入門瞭解。

· freeCodeCamp：一個非常好的入門學習網站，採用闖關的模式，就像遊戲打怪升級一樣，非常的有樂趣，準備自學的小夥伴不妨試試。

1. 進階

· MDN HTML：這裡的內容質量更好，錯誤更少，內容也更加的全面。

· HTML和CSS編碼規範：掌握一些程式碼技巧，寫出更好，更高質量的程式碼。

CSS 篇

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

1. 基礎

· 學習CSS佈局：帶你一步一步的完成 CSS 的學習。

· CSS參考手冊：對CSS可以有一個全面入門的學習。

· w3school CSS 參考手冊：同上也是非常基礎的知識，適合入門。

1. 進階

書籍：

《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 的知識點。

1. 進階

·JavaScript語言精粹：揭示·JavaScript中的精華。

·JavaScript秘密花園：對 JS 一些的核心知識點進行梳理講解，例如：this，閉包/作用域，建構函式，原型等等，都是面試必考知識點。

· ECMA 6 入門：阮一峰老師ES6入門書籍，全面介紹 ECMA 6 新引入的語法特性。

· ·JavaScript使用技巧：可以認識到一些你平時沒有接觸過的小技巧。

· 深入理解·JavaScript原型和閉包系列：詳細解釋了原型和閉包，看完之後對原型與閉包讓你徹底明白。

· 大漠老師的·JavaScript系列：大漠老師的·JavaScript系列文章。

··JavaScript演算法與資料結構：基於·JavaScript的演算法與資料結構，讓你愉快的學習。

·JavaScript中的正規表示式：我自己的一篇正規表示式的文章，希望對你有幫助。

· 30分鐘掌握ES6/ES2015核心內容（上）

· 30分鐘掌握ES6/ES2015核心內容（下）：闡述了一些常用的ES6的知識點。

· 學用 ·JavaScript設計模式：闡述·JavaScript程式語言中經典和現代的設計模式。

· 你不懂JS（系列叢書）

· InterviewMap：聚集了很多知識點，包括JS，瀏覽器，效能等。

· 30 秒就能理解的·JavaScript程式碼片段：讓你更好的理解一些有用的JS程式碼片段。

Type篇

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

· Type 中文手冊：官網翻譯版。

· Type Handbook（中文版）：中文版。

· RxJS 中文文件：中文官網。

· 30 天精通 RxJS (01)：認識 RxJS ：繁體字可能閱讀起來並沒有那麼順暢。

Jquery篇

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

· 《鋒利的jQuery(第2版)》：一本很不錯的 Jquery 學習書籍。

· jQuery API中文文件：JQuery 中文教程。

Ajax篇

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

· 廖雪峰AJAX：廖雪峰大佬的部落格知識。

· 物件：阮一峰老師的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 元件庫，阿里巴巴出品。

1. Vue

· Vue：官網，最好的學習資料。

· 我的Vue進階之路：厚著臉皮貼出來，自己的一些學習總結，希望對你有所收穫，哪怕一點點。

· 使用vue全家桶製作部落格網站

· Element：一個高質量的 Vue UI 元件庫。餓了嗎前端團隊出品。

· Vue 專案裡戳中你痛點的問題及解決辦法（更新）：做專案難免回去到坑，這裡你或許可以找到答案。

1. React

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

· React官網

對web前端這門技術感興趣的小夥伴可以加入到我們的學習圈來，程式設計工作第六個年頭了，與大家分享一些學習方法，實戰開發需要注意的細節。784-783-012 秋裙。從零基礎開始怎麼樣學好前端。看看前輩們是如何在程式設計的世界裡傲然前行！不停更新最新的教程和學習方法（web前端系統學習路線，詳細的前端專案實戰教學影片，PDF），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入。我們會一起結伴同行 學習前端我們是認真的