隨著互聯(lián)網(wǎng)的深入發(fā)展翰苫，前端開(kāi)發(fā)工程師一躍成為市場(chǎng)上非常搶手的人才。很多同學(xué)谨履，包括以前做UI的欢摄、Java的、或者對(duì)于IT完全零基礎(chǔ)的同學(xué)都想學(xué)習(xí)前端笋粟。下圖是網(wǎng)上流傳甚廣的一張前端學(xué)習(xí)思維導(dǎo)圖怀挠，很多初學(xué)者表示看到這些密密麻麻的知識(shí)點(diǎn)就已經(jīng)暈了。確實(shí)害捕，前端是一門(mén)涵蓋面很廣的學(xué)科唆香。但是想學(xué)前端的你也不用慌張，內(nèi)容雖多但有跡可循吨艇，只要循序漸進(jìn)就不怕學(xué)不好前端！

那么對(duì)于零基礎(chǔ)的一個(gè)學(xué)員該怎么學(xué)習(xí)前端呢腾啥？在這里愛(ài)創(chuàng)課堂小編給大家說(shuō)說(shuō)东涡，需要更多資料可以搜愛(ài)創(chuàng)課堂

?

工具篇

工欲善其事冯吓，必先利其器，所以在開(kāi)始之前選擇一個(gè)合適好用的編輯器是很重要的疮跑，工具不再多组贺，在于好用就行，除了編輯器祖娘，我們也要掌握其他的一些工具失尖，才能夠讓我們?cè)趯W(xué)習(xí)的道路上更加的順暢。

1. WebStorm

不必多說(shuō)渐苏，前端最強(qiáng)大的編輯器掀潮，特別是那無(wú)敵的智能提示，但是它的缺點(diǎn)在于如果項(xiàng)目多于大時(shí)琼富，出現(xiàn)的卡頓讓很多人苦惱仪吧。

5. Google

在使用「Google」之前必須學(xué)會(huì)***，不然無(wú)法訪問(wèn)鞠眉，學(xué)會(huì)使用搜索可以幫助我們解決很多問(wèn)題薯鼠，一個(gè)人的知識(shí)是有限的，掌握了搜索的技巧才能以不變應(yīng)萬(wàn)變械蹋，很多時(shí)候百度出來(lái)的東西重復(fù)性很大出皇，最重要的是垃圾信息很多，在百度找不到的答案哗戈，在這里很容易找到郊艘，Google?是我的必備搜索。

6. Github

全球最大的「同性」開(kāi)源交流社區(qū)谱醇，沒(méi)有賬號(hào)的趕緊注冊(cè)暇仲，在這有很多優(yōu)秀的資源項(xiàng)目，各種大神副渴。觀摩優(yōu)秀代碼是我們學(xué)習(xí)的很好路徑奈附。另外在開(kāi)發(fā)過(guò)程中，很多時(shí)候任務(wù)重煮剧、時(shí)間緊斥滤，應(yīng)該避免重復(fù)造輪子，這里能夠找到你需要的工具或代碼勉盅。

7. Stack Overflow

國(guó)外著名的技術(shù)問(wèn)答交流社區(qū)佑颇，開(kāi)發(fā)時(shí)碰到的很多問(wèn)題在這里都能找到答案。

8. SegmentFault

對(duì)應(yīng)的國(guó)內(nèi)版的技術(shù)問(wèn)答交流社區(qū)草娜，如果你英文不好挑胸，也可以在這里找找答案。

9. Markdown

Markdown?輕量級(jí)標(biāo)記語(yǔ)言宰闰，簡(jiǎn)潔的語(yǔ)法茬贵，讓作者專注內(nèi)容而非復(fù)雜的格式要求簿透，我認(rèn)為人人都應(yīng)該掌握，特別是經(jīng)常寫(xiě)博客的人解藻。想想你在用world?時(shí)的場(chǎng)景老充，每次寫(xiě)完文章之后，不得不話費(fèi)很多時(shí)間進(jìn)行格式的排版螟左，使用它你就可以避免這些煩惱啡浊。

·?Markdown?中文文檔

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

HTML?篇

一些準(zhǔn)備就緒之后胶背，開(kāi)始我們的學(xué)習(xí)之旅巷嚣，首先我們先從?HTML?開(kāi)始。

HTML名為「超文本標(biāo)記語(yǔ)言」奄妨，是整個(gè)頁(yè)面的結(jié)構(gòu)基礎(chǔ)涂籽，它承載了我們的頁(yè)面內(nèi)容。

1.?基礎(chǔ)

·?w3school?在線教程：內(nèi)容非常的基礎(chǔ)砸抛，適合小白學(xué)習(xí)评雌，對(duì)?HTML?有一個(gè)入門(mén)了解。

·?freeCodeCamp：一個(gè)非常好的入門(mén)學(xué)習(xí)網(wǎng)站直焙，采用闖關(guān)的模式景东，就像游戲打怪升級(jí)一樣，非常的有樂(lè)趣奔誓，準(zhǔn)備自學(xué)的小伙伴不妨試試斤吐。

2.?進(jìn)階

·?MDN HTML：這里的內(nèi)容質(zhì)量更好，錯(cuò)誤更少厨喂，內(nèi)容也更加的全面和措。

·?HTML和CSS編碼規(guī)范：掌握一些代碼技巧，寫(xiě)出更好蜕煌，更高質(zhì)量的代碼派阱。

CSS?篇

HTML?承載了頁(yè)面的內(nèi)容，但是有時(shí)候會(huì)略顯單調(diào)與「丑陋」斜纪，CSS?的作用就是為這些內(nèi)容加上樣式贫母，就像一個(gè)美女也要有漂亮的外衣去修飾才會(huì)更加漂亮，「人靠衣裝馬靠鞍」盒刚，網(wǎng)頁(yè)的內(nèi)容也是需要穿上一件漂亮的外衣去吸引用戶腺劣。而CSS?則完成了這個(gè)裝飾。

1.?基礎(chǔ)

·?學(xué)習(xí)CSS布局：帶你一步一步的完成?CSS?的學(xué)習(xí)因块。

·?CSS參考手冊(cè)：對(duì)CSS可以有一個(gè)全面入門(mén)的學(xué)習(xí)橘原。

·?w3school CSS?參考手冊(cè)：同上也是非常基礎(chǔ)的知識(shí)，適合入門(mén)靠柑。

2.?進(jìn)階

書(shū)籍：

《CSS揭秘》：非常推薦的一本?CSS?書(shū)籍寨辩，可以學(xué)到很多鮮為人知的技巧。

在線系列：

·?MDN CSS：和?HTML?都是MDN?社區(qū)文檔歼冰，質(zhì)量保障。

·?HTML和CSS編碼規(guī)范：掌握一些代碼技巧耻警，寫(xiě)出更好隔嫡，更高質(zhì)量的代碼。

·?大漠老師的CSS系列：大漠老師對(duì)CSS有非常深入的認(rèn)識(shí)和豐富的實(shí)踐經(jīng)驗(yàn)甘穿，《圖解CSS3：核心技術(shù)與案例實(shí)戰(zhàn)》的作者腮恩。

·?大漠老師的SASS系列：大漠老師的?sass?文章系列。

·?SASS中文網(wǎng)：成熟温兼、穩(wěn)定秸滴、強(qiáng)大的?CSS?擴(kuò)展語(yǔ)言解析器，它可以讓你使用變量募判，條件語(yǔ)句等書(shū)寫(xiě)CSS荡含。

·?Stylus官網(wǎng)：同樣是?CSS?預(yù)編譯器，但它省去了一些符號(hào)届垫，讓CSS?寫(xiě)起來(lái)更加的簡(jiǎn)潔释液，清爽。

·?HTML5和CSS3：詳解HTML5?和CSS3装处。

知識(shí)點(diǎn)：

·?別說(shuō)你懂CSS相對(duì)單位：深入了解?CSS?的相對(duì)單位rem误债，em區(qū)別。

·?CSS?進(jìn)階內(nèi)容：常見(jiàn)知識(shí)點(diǎn)的深入了解妄迁。

·?Flex?布局教程：語(yǔ)法篇：阮一峰老師的flex講解寝蹈。

·?Flex?布局教程：實(shí)例篇：阮一峰老師的flex講解。

·?“CSS相關(guān)”目錄存檔：張?chǎng)涡翊罄械腃SS系列文章登淘，深入淺出箫老，《CSS世界》作者。

·?CSS繪制的40種形狀和圖形：利用CSS繪制出的40各種圖形形狀形帮。

·?CSS-大前端：一些?CSS?的知識(shí)點(diǎn)槽惫。

JavaScript?篇

有了?HTML?與CSS，網(wǎng)頁(yè)也就有了內(nèi)容和樣式辩撑，但是會(huì)缺少與用戶的互動(dòng)界斜，所有的內(nèi)容都靜靜的躺在那里死氣沉沉。就好比一個(gè)美女穿著漂亮的衣服在你面前一動(dòng)不動(dòng)好像也沒(méi)有什么吸引力合冀，但如果又唱歌各薇，又跳舞，還向你拋媚眼，那可真就把持不住了峭判。JavaScript?就是給網(wǎng)頁(yè)添加這樣的「行為」开缎。

Javascript?簡(jiǎn)史?：可以簡(jiǎn)單了解下，JavaScript?發(fā)展由來(lái)林螃。

1.?基礎(chǔ)

書(shū)籍

·?《JavaScript權(quán)威指南（第6版）》：俗稱「犀牛書(shū)」奕删，JS?的經(jīng)典之作，提升JS技能的必備書(shū)籍疗认，我的JS基礎(chǔ)知識(shí)全都是啃這本書(shū)啃下來(lái)的完残，剛開(kāi)始讀時(shí)可能有會(huì)有些吃力，但是只要堅(jiān)持下來(lái)收獲滿滿横漏。

·?《JavaScript高級(jí)程序設(shè)計(jì)（第3版）》：俗稱「紅寶書(shū)」谨设，JavaScript?超級(jí)暢銷書(shū)，全書(shū)闡述了JavaScript語(yǔ)言實(shí)現(xiàn)的各個(gè)組成部分缎浇，ECMAScript扎拣，DOM，BOM素跺，事件二蓝，面向?qū)ο蟮鹊龋S時(shí)拿出來(lái)翻翻亡笑，更加深入了學(xué)習(xí)JS侣夷。

在線系列

除了書(shū)籍之外，也有很多優(yōu)秀的在線教程仑乌，可以幫助我們更好的學(xué)習(xí)百拓。

·?現(xiàn)代?Javascript?教程：非常全面的JavaScript?學(xué)習(xí)教程，從基礎(chǔ)到高階晰甚，非常詳細(xì)衙传，相信你會(huì)愛(ài)上它的。

·?廖雪峰的JavaScript教程：廖雪峰系列教程厕九。

·?JavaScript?標(biāo)準(zhǔn)參考教程（alpha）：阮一峰老師的系列教程蓖捶，通俗易懂，案例豐富扁远。

2.?進(jìn)階

·?JavaScript語(yǔ)言精粹：揭示JavaScript中的精華俊鱼。

·?JavaScript?秘密花園：對(duì)?JS?一些的核心知識(shí)點(diǎn)進(jìn)行梳理講解，例如：this畅买，閉包/作用域并闲，構(gòu)造函數(shù)，原型等等谷羞，都是面試必考知識(shí)點(diǎn)帝火。

·?ECMAScript 6?入門(mén)：阮一峰老師ES6入門(mén)書(shū)籍，全面介紹ECMAScript 6?新引入的語(yǔ)法特性。

·?JavaScript使用技巧：可以認(rèn)識(shí)到一些你平時(shí)沒(méi)有接觸過(guò)的小技巧犀填。

·?深入理解javascript原型和閉包系列：詳細(xì)解釋了原型和閉包蠢壹，看完之后對(duì)原型與閉包讓你徹底明白。

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

·?JavaScript?算法與數(shù)據(jù)結(jié)構(gòu)：基于?JavaScript?的算法與數(shù)據(jù)結(jié)構(gòu)图贸，讓你愉快的學(xué)習(xí)。

·?JavaScript中的正則表達(dá)式：我自己的一篇正則表達(dá)式的文章比庄，希望對(duì)你有幫助求妹。

·?30分鐘掌握ES6/ES2015核心內(nèi)容（上）

·?30分鐘掌握ES6/ES2015核心內(nèi)容（下）：闡述了一些常用的ES6的知識(shí)點(diǎn)。

·?學(xué)用?JavaScript?設(shè)計(jì)模式：闡述JavaScript編程語(yǔ)言中經(jīng)典和現(xiàn)代的設(shè)計(jì)模式佳窑。

·?你不懂JS（系列叢書(shū)）

·?InterviewMap：聚集了很多知識(shí)點(diǎn)，包括JS父能，瀏覽器神凑，性能等。

·?30?秒就能理解的JavaScript?代碼片段：讓你更好的理解一些有用的JS代碼片段何吝。

TypeScript篇

ES6?的超集擴(kuò)展溉委，嚴(yán)格的數(shù)據(jù)類型，帶來(lái)更好的維護(hù)爱榕，適合大型項(xiàng)目的開(kāi)發(fā)工作瓣喊，有人說(shuō)它是未來(lái)的發(fā)展趨勢(shì)，你說(shuō)要不要了解黔酥？

·?TypeScript?中文手冊(cè)：官網(wǎng)翻譯版藻三。

·?TypeScript Handbook（中文版）：中文版。

·?RxJS?中文文檔：中文官網(wǎng)跪者。

·?30?天精通RxJS (01)：認(rèn)識(shí)RxJS?：繁體字可能閱讀起來(lái)并沒(méi)有那么順暢棵帽。

Jquery篇

雖說(shuō)現(xiàn)在已經(jīng)是單頁(yè)面應(yīng)用時(shí)代，有React渣玲，Vue?這種強(qiáng)大的框架可以使用逗概，但也不缺乏一些老的項(xiàng)目需要維護(hù)，而且在學(xué)習(xí)之初忘衍，可以用它做兩個(gè)簡(jiǎn)單的應(yīng)用還是不錯(cuò)的逾苫，可以相對(duì)了解下基本用法，它可以讓你更好枚钓，更方便的操作DOM铅搓。但不建議再深度學(xué)習(xí)。

·?《鋒利的jQuery(第2版)》：一本很不錯(cuò)的?Jquery?學(xué)習(xí)書(shū)籍秘噪。

·?jQuery API中文文檔：JQuery?中文教程狸吞。

Ajax篇

掌握了的HTML、CSS、JavaScript時(shí)蹋偏，這時(shí)候可以嘗試自己做一些項(xiàng)目了便斥，而項(xiàng)目中肯定會(huì)有數(shù)據(jù)的交互，這時(shí)候就是Ajax?的用武之地了威始。

·?廖雪峰AJAX：廖雪峰大佬的博客知識(shí)枢纠。

·?XMLHttpRequest?對(duì)象：阮一峰老師的AJAX詳解。

·?JSON風(fēng)格指南：前后端的交互數(shù)據(jù)通常都是?JSON?格式黎棠，所以了解JSON?是必要的晋渺。

NodeJS與模塊化

NodeJs?的出現(xiàn)讓前端發(fā)展進(jìn)入了一個(gè)新的領(lǐng)域，并且滋生出專業(yè)的Node?工程師脓斩，不僅如此Node?在前端模塊化木西，工程化起到很重要的作用，所以了解是必須的随静，如果感興趣的可以深入學(xué)習(xí)八千，可以向全棧工程師發(fā)展。

·?Javascript模塊化編程（一）：模塊的寫(xiě)法

·?Javascript模塊化編程（二）：AMD規(guī)范

·?Javascript模塊化編程（三）：require.js的用法

·?前端模塊化開(kāi)發(fā)那點(diǎn)歷史：了解下燎猛，前端模塊化的發(fā)展恋捆。

·?Node.js?官方

·?狼叔：如何正確的學(xué)習(xí)Node.js：狼叔江湖地位頗高，《更了不起的?Node.js》的作者重绷。

·?全棧工程師之路-Node.js

框架篇

隨著日益復(fù)雜的用戶需求沸停，與系統(tǒng)的復(fù)雜度上升，傳統(tǒng)的開(kāi)發(fā)模式日漸的很難滿足昭卓，此時(shí)的三大框架孕育而生愤钾，讓開(kāi)發(fā)者更加高效，可復(fù)用葬凳，把關(guān)注點(diǎn)都放在數(shù)據(jù)層的操作绰垂，免去那些繁瑣而又重復(fù)的視圖操作。

現(xiàn)在框架的能力已經(jīng)是前端開(kāi)發(fā)人員必備的技能之一也是趨勢(shì)火焰，三大框架的「最終目的」都是一致的劲装，我認(rèn)為開(kāi)發(fā)者不必糾結(jié)于到底應(yīng)該選擇哪一個(gè)學(xué)習(xí)，可以選擇其中的兩個(gè)是最好的昌简。對(duì)于剛?cè)腴T(mén)的人來(lái)說(shuō)占业，建議選擇?Vue?入手，比較簡(jiǎn)單纯赎，靈活谦疾。

·?MVC，MVP?和MVVM?的圖示：在學(xué)習(xí)框架之前犬金，你應(yīng)該了解下MVVM的設(shè)計(jì)思想念恍。

·?框架原理：了解一些框架的基本原理六剥。

1. Angular

·?Angular：Angular官方社區(qū)。

·?Angular開(kāi)發(fā)者：大漠窮秋老師維護(hù)的站點(diǎn)峰伙，Angular中國(guó)布道者疗疟。

·?NG-ZORRO：Angular UI?組件庫(kù)，阿里巴巴出品瞳氓。

2. Vue

·?Vue：官網(wǎng)策彤，最好的學(xué)習(xí)資料。

·?我的Vue進(jìn)階之路：厚著臉皮貼出來(lái)匣摘，自己的一些學(xué)習(xí)總結(jié)店诗，希望對(duì)你有所收獲，哪怕一點(diǎn)點(diǎn)音榜。

·?使用vue全家桶制作博客網(wǎng)站

·?Element：一個(gè)高質(zhì)量的?Vue UI?組件庫(kù)庞瘸。餓了嗎前端團(tuán)隊(duì)出品。

·?Vue?項(xiàng)目里戳中你痛點(diǎn)的問(wèn)題及解決辦法（更新）：做項(xiàng)目難免回去到坑赠叼，這里你或許可以找到答案恕洲。

3. React

React我了解不多，所以就沒(méi)什么好推薦的了梅割，大家可自行學(xué)習(xí)。

·?React官網(wǎng)