摘要：網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知識(shí)點(diǎn)羅列為主或是資料的匯總，數(shù)據(jù)量讓新人望而卻步。天了解一個(gè)前端框架。也可以關(guān)注微信公眾號(hào)曉舟報(bào)告，發(fā)送獲取資料，就能收到下載密碼，網(wǎng)盤(pán)地址在最下方，獲取教程和案例的資料。

好的學(xué)習(xí)方法可以事半功倍，好的學(xué)習(xí)路徑可以指明前進(jìn)方向。這篇文章不僅要寫(xiě)學(xué)習(xí)路徑，還要寫(xiě)學(xué)習(xí)方法，還要發(fā)資料，干貨滿滿，準(zhǔn)備接招。

網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知識(shí)點(diǎn)羅列為主或是資料的匯總，數(shù)據(jù)量讓新人望而卻步。今天我們雖然也有大量的知識(shí)點(diǎn)，但是整體以特定目標(biāo)引導(dǎo)學(xué)習(xí)，讓學(xué)習(xí)梯度更加平滑。

文章用下面七個(gè)目標(biāo)引導(dǎo)學(xué)習(xí)，只要依次完成，就可以踏進(jìn)前端開(kāi)發(fā)的大門(mén)

將設(shè)計(jì)稿還原成html頁(yè)面（5天）

在網(wǎng)頁(yè)中添加圖片切換的效果（2天）

學(xué)會(huì)使用git管理你的代碼，并且用markdown格式做筆記（2天）

系統(tǒng)地學(xué)習(xí)javaScript（8天）

搭建一個(gè)web服務(wù)器（5天）。

熟悉ajax和跨域請(qǐng)求。（2天）

了解一個(gè)前端框架。（2天）

第一天：掌握html標(biāo)簽和css樣式基礎(chǔ)

html有那么多標(biāo)簽，你只需要記住八個(gè)就可以搞定99%的網(wǎng)頁(yè)，它們分別是：h,p,a,img,ul,li,div,span。

css選擇器：id選擇器，class選擇器，元素選擇器，層級(jí)選擇器；記住四個(gè)，夠用了。

css屬性：width,height,color,background-color,font-size;記住這幾個(gè)就夠了。

上面的內(nèi)容沒(méi)有多少需要理解的，照著w3cschool上面敲一遍，剩下的時(shí)間自己隨便玩玩，比如弄個(gè)空div，設(shè)置個(gè)寬高，設(shè)置個(gè)背景色，里面添加一個(gè)標(biāo)題，添加一個(gè)連接等等，想怎么玩就怎么玩，但是注意：

有疑問(wèn)不一定要馬上解決，但是定要用筆記下來(lái)，以后可以帶著問(wèn)題學(xué)習(xí)(同下)
有疑問(wèn)不一定要馬上解決，但是定要用筆記下來(lái)，以后可以帶著問(wèn)題學(xué)習(xí)(同下)
有疑問(wèn)不一定要馬上解決，但是定要用筆記下來(lái)，以后可以帶著問(wèn)題學(xué)習(xí)(同下)

如果有問(wèn)題馬上去解決，你會(huì)陷入問(wèn)題的黑洞，然后被一個(gè)個(gè)連鎖問(wèn)題搞得喘不過(guò)氣來(lái)，記住，第一天就一個(gè)目標(biāo)，知道html和css是怎么用的就行。

第二天：盒子模型

關(guān)于盒子模型，網(wǎng)上有大量的博客，找一篇自己能理解的從頭看到尾就差不多了，其實(shí)記住五個(gè)css屬性就行（width，height,margin,padding,border）

概念理解了一點(diǎn)要多練，一天的時(shí)間搞盒子模型，怎么也玩明白了。可以看看電商網(wǎng)站中的一個(gè)個(gè)盒子都是怎么設(shè)置的。自己也照著做一做。

第三天：浮動(dòng)布局

在前兩天的學(xué)習(xí)中，一定會(huì)發(fā)現(xiàn)：有些元素獨(dú)占一行，有些元素可以和其他元素共享一行。因?yàn)槭裁矗靠纯丛氐姆诸?lèi)。如何讓兩個(gè)div放在同一個(gè)，學(xué)學(xué)浮動(dòng)布局，在看看如何清除浮動(dòng)。這些網(wǎng)上都有相應(yīng)的教程。也可以關(guān)注微信公眾號(hào)：曉舟報(bào)告，發(fā)送“獲取資料”，就能收到下載密碼，網(wǎng)盤(pán)地址在最下方，獲取教程和案例的資料。

第三天主要就是兩個(gè)屬性（float:left和clear:both），玩明白了任務(wù)就完成了。

第四天：定位

如何設(shè)置元素的絕對(duì)定位，相對(duì)定位和固定定位，如何設(shè)置定位元素的參照物：一個(gè)css屬性和三個(gè)值就搞定了（posotion：absolute,raletive,fixed），這個(gè)也可以玩一天，看看網(wǎng)頁(yè)中的廣告是怎么做的。向?qū)β?lián)廣告，彈框廣告，都需要用到定位。

第五天：還原設(shè)計(jì)稿

如果前四天的知識(shí)都掌握了，第五天要學(xué)習(xí)還原設(shè)計(jì)稿，找一個(gè)簡(jiǎn)單的設(shè)計(jì)稿（psd格式），用photoshop的切片工具把主要內(nèi)容切下來(lái)（可以用一上午的時(shí)間學(xué)習(xí)切圖），用半天的時(shí)間將設(shè)計(jì)稿還原成html頁(yè)面。如果沒(méi)有簡(jiǎn)單的設(shè)計(jì)稿，可以關(guān)注微信公眾號(hào)：曉舟報(bào)告，發(fā)送“獲取資料”，就能收到下載密碼，網(wǎng)盤(pán)地址在最下方，這里有簡(jiǎn)單的設(shè)計(jì)稿素材。

jQuery仍然是當(dāng)前使用最廣泛的庫(kù)，我們可以在不懂JavaScript的情況下，直接使用jQuery實(shí)現(xiàn)一些網(wǎng)頁(yè)效果，如果自學(xué)，我建議先簡(jiǎn)單學(xué)學(xué)jQuery，然后再去學(xué)習(xí)JavaScript，這樣學(xué)習(xí)曲線更加平滑，而且會(huì)有更多的學(xué)習(xí)樂(lè)趣（js相對(duì)枯燥）。

第六天：入門(mén)jQuery

首先，了解jQuery選擇器，這個(gè)基本看一下就會(huì)了。

然后，使用jQuery修改樣式和屬性。

最后，學(xué)會(huì)綁定單擊事件

第七天：完成一個(gè)圖片切換效果

可以上網(wǎng)找現(xiàn)成的案例，也可以看書(shū)上的案例。《鋒利的jQuery（第二版）》寫(xiě)的不錯(cuò)，有興趣看的話看兩個(gè)小時(shí)，掃一掃就行，適合初學(xué)者，不要在這本書(shū)上面浪費(fèi)太多時(shí)間，如果沒(méi)有找書(shū)籍或是案例素材，可以關(guān)注微信公眾號(hào)：曉舟報(bào)告，發(fā)送“獲取資料”，就能收到下載密碼，網(wǎng)盤(pán)地址在最下方，資料都是現(xiàn)成的。

第八天：是時(shí)候?qū)W習(xí)git了

學(xué)到第八天的時(shí)候，你會(huì)發(fā)現(xiàn)你的代碼越寫(xiě)越多，案例越來(lái)越多，筆記越來(lái)越多，有的可能已經(jīng)找不到了。這時(shí)候，你需要用git來(lái)管理你的代碼。廖雪峰老師的博客有很不錯(cuò)的git教程，可以看一下。如果想看精簡(jiǎn)版的，可以關(guān)注我的微信公眾號(hào)。

第九天：用markdown記錄你的筆記

markdown格式很適合程序員做筆記，真的非常非常適合，我現(xiàn)在寫(xiě)這篇文章就是用markdown格式在寫(xiě)，學(xué)起來(lái)也非常容易，誰(shuí)用誰(shuí)說(shuō)好，抽一天的時(shí)間學(xué)習(xí)一下把。然后以后所有的問(wèn)題，資料，筆記都用它來(lái)記錄。

是時(shí)候?qū)W習(xí)JavaScript了，對(duì)沒(méi)有編程經(jīng)驗(yàn)的朋友，這也許是個(gè)坎，但也是個(gè)試金石，對(duì)于一個(gè)前端開(kāi)發(fā)工程師，你要用JavaScript表達(dá)你的感情，用JavaScript對(duì)瀏覽器下達(dá)指令，用JavaScript體現(xiàn)你的能力，JavaScript是你進(jìn)步的基石，這個(gè)不能再重要了。

第十天：變量、數(shù)據(jù)類(lèi)型、運(yùn)算符、表達(dá)式

定義變量用var（let是什么？先不用管），數(shù)據(jù)類(lèi)型記住六種：數(shù)值，字符，布爾，null，undefined，對(duì)象。運(yùn)算符和表達(dá)式，可以看看犀牛書(shū)，這章寫(xiě)得不錯(cuò)。

第十一天：控制流程語(yǔ)句

記住這四個(gè)：if,switch,for,while。熟悉語(yǔ)法，在做幾個(gè)簡(jiǎn)單的練習(xí)。比如：輸出1-100所有整數(shù)，輸出1-100所有奇數(shù)，輸出1-100所有能陪7整除的數(shù)，輸出1-100前3個(gè)能被7整除的數(shù)。用for寫(xiě)完了再用while寫(xiě)一遍，反正就是多寫(xiě)多練。

第十二天：函數(shù)

什么是函數(shù)，什么是返回值，什么是參數(shù)，什么是形參，什么是實(shí)參，如何調(diào)用函數(shù)。在了解一下作用域的概念。然后做幾個(gè)練習(xí)：寫(xiě)一個(gè)函數(shù)計(jì)算兩個(gè)數(shù)的加和，寫(xiě)一個(gè)函數(shù)計(jì)算四則運(yùn)算，寫(xiě)一個(gè)函數(shù)計(jì)算階乘（用循環(huán)，不用遞歸）。在了解一些作用域的基本概念。

除非好奇心驅(qū)使你，否則不要去看作用域鏈，不要去看閉包，不要解決函數(shù)嵌套的各種問(wèn)題，這些都不是30天之內(nèi)的任務(wù)

第十三天：數(shù)組

到w3cschool上看看數(shù)組的基本概念，如何遍歷數(shù)組，有興趣的話可以試試遍歷二維數(shù)組。在數(shù)組中添加數(shù)組，刪除數(shù)據(jù)，替換數(shù)據(jù)，如何使用排序方法（sort）。

第十四天：內(nèi)置對(duì)象

學(xué)會(huì)使用三個(gè)內(nèi)置對(duì)象：數(shù)學(xué)對(duì)象、日期對(duì)象。數(shù)學(xué)對(duì)象會(huì)取任意的隨機(jī)數(shù)就行，比如1-7的隨機(jī)數(shù)，10-100的隨機(jī)數(shù)。日期對(duì)象會(huì)獲取年、月、日、時(shí)、分、秒，還有時(shí)間戳就夠了。

第十五天：計(jì)時(shí)器方法

四個(gè)計(jì)時(shí)器方法：setInterval,clearInterval,setTimeout,clearTimeout。然后做練習(xí)：5秒跳轉(zhuǎn)到其他頁(yè)面；網(wǎng)頁(yè)顯示時(shí)鐘；還有網(wǎng)頁(yè)顯示倒計(jì)時(shí)；有時(shí)間做一個(gè)圖片自動(dòng)輪播的效果。

第十六天：DOM

熟悉DOM的樹(shù)狀結(jié)構(gòu)，節(jié)點(diǎn)關(guān)系，html節(jié)點(diǎn)分類(lèi)（元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)），獲取節(jié)點(diǎn)的方法，記住這兩個(gè)就行：querySelector和querySelectorAll。（如果看到getElement(s)ByXXXX,有興趣就看看，沒(méi)興趣就放著），添加節(jié)點(diǎn)，刪除節(jié)點(diǎn)，修改節(jié)點(diǎn)的各種方法，都試一遍就可以了。

第十七天：DOM練習(xí)

今天的主要任務(wù)就是把之前用jQuery做的效果，用原生的JavaScript實(shí)現(xiàn)一遍。

學(xué)到這里，原生JavaScript就告一段落了，什么閉包，原型，面向?qū)ο螅珽S6，都不要在這個(gè)階段學(xué)。學(xué)習(xí)就像剝洋蔥一樣，一層一層的去見(jiàn)識(shí)里面的事件，如果扣一個(gè)點(diǎn)一直向內(nèi)探索，這種方法不適合自學(xué)，會(huì)嚴(yán)重打擊自信心。

如果有比較難的案例不會(huì)自己寫(xiě)，可以關(guān)注微信公眾號(hào)：曉舟報(bào)告，發(fā)送“獲取資料”，就能收到下載密碼，網(wǎng)盤(pán)地址在最下方。

第十八天：學(xué)習(xí)node

對(duì)于前端同學(xué)來(lái)說(shuō)，用node搭建web服務(wù)器是再合適不過(guò)的了，最起語(yǔ)法層面不用重學(xué)了，大家都是js嗎。

前端同學(xué)學(xué)習(xí)node要簡(jiǎn)單粗暴一點(diǎn)，什么異步io,事件驅(qū)動(dòng)，單線程，都不用管。先照著官網(wǎng)開(kāi)一個(gè)服務(wù)器再說(shuō)。

第十九天：學(xué)習(xí)npm

要學(xué)會(huì)用npm下載第三方模塊，要會(huì)用package.json文件管理依賴(lài)模塊，然后下載一個(gè)http-server的模塊，開(kāi)一個(gè)靜態(tài)服務(wù)器就夠了。

第二十天：了解http協(xié)議

知道什么是請(qǐng)求，什么是響應(yīng)，查查get和post的區(qū)別，學(xué)會(huì)使用chrome調(diào)試工具抓包。看看別人網(wǎng)站的請(qǐng)求和相應(yīng)是什么樣的，再看看自己的靜態(tài)服務(wù)器請(qǐng)求和響應(yīng)是什么樣的。

第二十一天：用express搭建靜態(tài)服務(wù)器

不要寫(xiě)太多，就建一個(gè)server.js文件，引入express，處理兩個(gè)url的請(qǐng)求，send回幾個(gè)字符串就OK了。前端可以用表單提交get和post請(qǐng)求，用抓包工具看看有響應(yīng)式什么效果，沒(méi)響應(yīng)式什么效果，404是什么效果。

第二十二天：了解一下pug模板引擎
用模板繼承做一個(gè)動(dòng)態(tài)頁(yè)，感受一下最簡(jiǎn)單的網(wǎng)站時(shí)如何實(shí)現(xiàn)的。

第二十三天：學(xué)習(xí)ajax

了解XMLHttpRequest對(duì)象，再看看如何使用這個(gè)對(duì)象發(fā)送請(qǐng)求和接受響應(yīng)的數(shù)據(jù)。如果之前的內(nèi)容了解的透徹，這個(gè)就很好理解了，ajax說(shuō)的簡(jiǎn)單點(diǎn)就是http協(xié)議的實(shí)現(xiàn)。

嘗試用封裝好的ajax方法來(lái)請(qǐng)求數(shù)據(jù)，jQuery有，axios有，如果前面的課程都學(xué)會(huì)了，這個(gè)看文檔，超簡(jiǎn)單。

第二十四天：學(xué)習(xí)跨域請(qǐng)求

看看什么是同源策略，了解跨域請(qǐng)求的解決方案，看看jsonp的原理，在嘗試用封裝好的jsonp方法獲取數(shù)據(jù)。jQuery有，jsonp模板(npm可以下載)也有。至于后臺(tái)，用node自己模擬一個(gè)跨域的環(huán)境，應(yīng)該不難。

第二十五天：學(xué)習(xí)webpack

阮一峰老師有一套webpack的教學(xué)視頻，寫(xiě)的不錯(cuò)，可以照著練練，然后，找一個(gè)寫(xiě)好的webpack配置文件和package.json文件，面得自己配浪費(fèi)時(shí)間。

第二十六天：刷文檔

現(xiàn)在主流的前端框架：react、vue、angular，找一個(gè)對(duì)著文檔刷一天，感受一下它與jQuery的區(qū)別。

寫(xiě)的一定要比看的多

寫(xiě)的一定要比看的多

寫(xiě)的一定要比看的多

重要的事情說(shuō)三遍

通過(guò)上面26天的學(xué)習(xí)，恭喜你！你已經(jīng)在前端開(kāi)發(fā)的道路上走出了第一步，之后，喜歡數(shù)據(jù)結(jié)構(gòu)和算法，可以去leetcode刷題，喜歡node，可以系統(tǒng)的學(xué)習(xí)一下后臺(tái)，可以深入學(xué)習(xí)網(wǎng)絡(luò)協(xié)議，操作系統(tǒng)，數(shù)據(jù)庫(kù)等知識(shí)，喜歡原生JavaScript，可以看看《js高級(jí)程序設(shè)計(jì)》還有再了解ES的新特性。總之，把上面的目標(biāo)完成之后，你的世界就開(kāi)闊了，對(duì)知識(shí)體系也有了一個(gè)全新的理解，到時(shí)候再著手深入某一個(gè)方向的學(xué)習(xí)。

資料下載地址：http://pan.baidu.com/s/1jI7pjJw

原文鏈接