26天學通前端開發（配資料）

前言

好的學習方法能夠事半功倍，好的學習路徑能夠指明前進方向。這篇文章不只要寫學習路徑，還要寫學習方法，還要發資料，乾貨滿滿，準備接招。

網上有不少前端的學習路徑文章，大可能是知識點羅列爲主或是資料的彙總，數據量讓新人望而卻步。今天咱們雖然也有大量的知識點，可是總體以特定目標引導學習，讓學習梯度更加平滑。

文章用下面七個目標引導學習，只要依次完成，就能夠踏進前端開發的大門

1. 將設計稿還原成html頁面（5天）
2. 在網頁中添加圖片切換的效果（2天）
3. 學會使用git管理你的代碼，而且用markdown格式作筆記（2天）
4. 系統地學習javaScript（8天）
5. 搭建一個web服務器（5天）。
6. 熟悉ajax和跨域請求。（2天）
7. 瞭解一個前端框架。（2天）

1、將設計稿還原成html頁面

第一天：掌握html標籤和css樣式基礎

html有那麼多標籤，你只須要記住八個就能夠搞定99%的網頁，它們分別是：h,p,a,img,ul,li,div,span。

css選擇器：id選擇器，class選擇器，元素選擇器，層級選擇器；記住四個，夠用了。

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

上面的內容沒有多少須要理解的，照着w3cschool上面敲一遍，剩下的時間本身隨便玩玩，好比弄個空div，設置個寬高，設置個背景色，裏面添加一個標題，添加一個鏈接等等，想怎麼玩就怎麼玩，可是注意：

有疑問不必定要立刻解決，可是定要用筆記下來，之後能夠帶着問題學習(同下)
有疑問不必定要立刻解決，可是定要用筆記下來，之後能夠帶着問題學習(同下)
有疑問不必定要立刻解決，可是定要用筆記下來，之後能夠帶着問題學習(同下)

若是有問題立刻去解決，你會陷入問題的黑洞，而後被一個個連鎖問題搞得喘不過氣來，記住，第一天就一個目標，知道html和css是怎麼用的就行。

次日：盒子模型

關於盒子模型，網上有大量的博客，找一篇本身能理解的從頭看到尾就差很少了，其實記住五個css屬性就行（width，height,margin,padding,border）

概念理解了一點要多練，一天的時間搞盒子模型，怎麼也玩明白了。能夠看看電商網站中的一個個盒子都是怎麼設置的。本身也照着作一作。

第三天：浮動佈局

在前兩天的學習中，必定會發現：有些元素獨佔一行，有些元素能夠和其餘元素共享一行。由於什麼？看看元素的分類。如何讓兩個div放在同一個，學學浮動佈局，在看看如何清除浮動。這些網上都有相應的教程。也能夠關注微信公衆號：曉舟報告，發送「獲取資料」，就能收到下載密碼，網盤地址在最下方，獲取教程和案例的資料。

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

第四天：定位

如何設置元素的絕對定位，相對定位和固定定位，如何設置定位元素的參照物：一個css屬性和三個值就搞定了（posotion：absolute,raletive,fixed），這個也能夠玩一天，看看網頁中的廣告是怎麼作的。向對聯廣告，彈框廣告，都須要用到定位。

第五天：還原設計稿

若是前四天的知識都掌握了，第五天要學習還原設計稿，找一個簡單的設計稿（psd格式），用photoshop的切片工具把主要內容切下來（能夠用一上午的時間學習切圖），用半天的時間將設計稿還原成html頁面。若是沒有簡單的設計稿，能夠關注微信公衆號：曉舟報告，發送「獲取資料」，就能收到下載密碼，網盤地址在最下方，這裏有簡單的設計稿素材。

2、在網頁中添加圖片切換的效果

jQuery仍然是當前使用最普遍的庫，咱們能夠在不懂JavaScript的狀況下，直接使用jQuery實現一些網頁效果，若是自學，我建議先簡單學學jQuery，而後再去學習JavaScript，這樣學習曲線更加平滑，並且會有更多的學習樂趣（js相對枯燥）。

第六天：入門jQuery

首先，瞭解jQuery選擇器，這個基本看一下就會了。

而後，使用jQuery修改樣式和屬性。

最後，學會綁定單擊事件

第七天：完成一個圖片切換效果

能夠上網找現成的案例，也能夠看書上的案例。《鋒利的jQuery（第二版）》寫的不錯，有興趣看的話看兩個小時，掃一掃就行，適合初學者，不要在這本書上面浪費太多時間，若是沒有找書籍或是案例素材，能夠關注微信公衆號：曉舟報告，發送「獲取資料」，就能收到下載密碼，網盤地址在最下方，資料都是現成的。

3、學會使用git管理你的代碼，而且用markdown格式作筆記

第八天：是時候學習git了

學到第八天的時候，你會發現你的代碼越寫越多，案例愈來愈多，筆記愈來愈多，有的可能已經找不到了。這時候，你須要用git來管理你的代碼。廖雪峯老師的博客有很不錯的git教程，能夠看一下。若是想看精簡版的，能夠關注個人微信公衆號。

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

markdown格式很適合程序員作筆記，真的很是很是適合，我如今寫這篇文章就是用markdown格式在寫，學起來也很是容易，誰用誰說好，抽一天的時間學習一下把。而後之後全部的問題，資料，筆記都用它來記錄。

4、系統地學習JavaScript

是時候學習JavaScript了，對沒有編程經驗的朋友，這也許是個坎，但也是個試金石，對於一個前端開發工程師，你要用JavaScript表達你的感情，用JavaScript對瀏覽器下達指令，用JavaScript體現你的能力，JavaScript是你進步的基石，這個不能再重要了。

第十天：變量、數據類型、運算符、表達式

定義變量用var（let是什麼？先不用管），數據類型記住六種：數值，字符，布爾，null，undefined，對象。運算符和表達式，能夠看看犀牛書，這章寫得不錯。

第十一天：控制流程語句

記住這四個：if,switch,for,while。熟悉語法，在作幾個簡單的練習。好比：輸出1-100全部整數，輸出1-100全部奇數，輸出1-100全部能陪7整除的數，輸出1-100前3個能被7整除的數。用for寫完了再用while寫一遍，反正就是多寫多練。

第十二天：函數

什麼是函數，什麼是返回值，什麼是參數，什麼是形參，什麼是實參，如何調用函數。在瞭解一下做用域的概念。而後作幾個練習：寫一個函數計算兩個數的加和，寫一個函數計算四則運算，寫一個函數計算階乘（用循環，不用遞歸）。在瞭解一些做用域的基本概念。

除非好奇心驅使你，不然不要去看做用域鏈，不要去看閉包，不要解決函數嵌套的各類問題，這些都不是30天以內的任務

第十三天：數組

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

第十四天：內置對象

學會使用三個內置對象：數學對象、日期對象。數學對象會取任意的隨機數就行，好比1-7的隨機數，10-100的隨機數。日期對象會獲取年、月、日、時、分、秒，還有時間戳就夠了。

第十五天：計時器方法

四個計時器方法：setInterval,clearInterval,setTimeout,clearTimeout。而後作練習：5秒跳轉到其餘頁面；網頁顯示時鐘；還有網頁顯示倒計時；有時間作一個圖片自動輪播的效果。

第十六天：DOM

熟悉DOM的樹狀結構，節點關係，html節點分類（元素節點、屬性節點、文本節點），獲取節點的方法，記住這兩個就行：querySelector和querySelectorAll。（若是看到getElement(s)ByXXXX,有興趣就看看，沒興趣就放着），添加節點，刪除節點，修改節點的各類方法，都試一遍就能夠了。

第十七天：DOM練習

今天的主要任務就是把以前用jQuery作的效果，用原生的JavaScript實現一遍。

學到這裏，原生JavaScript就告一段落了，什麼閉包，原型，面向對象，ES6，都不要在這個階段學。學習就像剝洋蔥同樣，一層一層的去見識裏面的事件，若是扣一個點一直向內探索，這種方法不適合自學，會嚴重打擊自信心。

若是有比較難的案例不會本身寫，能夠關注微信公衆號：曉舟報告，發送「獲取資料」，就能收到下載密碼，網盤地址在最下方。

5、搭建一個web服務器（5天）

第十八天：學習node

對於前端同窗來講，用node搭建web服務器是再合適不過的了，最起語法層面不用重學了，你們都是js嗎。

前端同窗學習node要簡單粗暴一點，什麼異步io,事件驅動，單線程，都不用管。先照着官網開一個服務器再說。

第十九天：學習npm

要學會用npm下載第三方模塊，要會用package.json文件管理依賴模塊，而後下載一個http-server的模塊，開一個靜態服務器就夠了。

第二十天：瞭解http協議

知道什麼是請求，什麼是響應，查查get和post的區別，學會使用chrome調試工具抓包。看看別人網站的請求和相應是什麼樣的，再看看本身的靜態服務器請求和響應是什麼樣的。

第二十一天：用express搭建靜態服務器

不要寫太多，就建一個server.js文件，引入express，處理兩個url的請求，send回幾個字符串就OK了。前端能夠用表單提交get和post請求，用抓包工具看看有響應式什麼效果，沒響應式什麼效果，404是什麼效果。

第二十二天：瞭解一下pug模板引擎
用模板繼承作一個動態頁，感覺一下最簡單的網站時如何實現的。

6、熟悉ajax和跨域請求。（2天）

第二十三天：學習ajax

瞭解XMLHttpRequest對象，再看看如何使用這個對象發送請求和接受響應的數據。若是以前的內容瞭解的透徹，這個就很好理解了，ajax說的簡單點就是http協議的實現。

嘗試用封裝好的ajax方法來請求數據，jQuery有，axios有，若是前面的課程都學會了，這個看文檔，超簡單。

第二十四天：學習跨域請求

看看什麼是同源策略，瞭解跨域請求的解決方案，看看jsonp的原理，在嘗試用封裝好的jsonp方法獲取數據。jQuery有，jsonp模板(npm能夠下載)也有。至於後臺，用node本身模擬一個跨域的環境，應該不難。

7、瞭解一個前端框架。（2天）

第二十五天：學習webpack

阮一峯老師有一套webpack的教學視頻，寫的不錯，能夠照着練練，而後，找一個寫好的webpack配置文件和package.json文件，面得本身配浪費時間。

第二十六天：刷文檔

如今主流的前端框架：react、vue、angular，找一個對着文檔刷一天，感覺一下它與jQuery的區別。

8、注意事項

• 寫的必定要比看的多
• 寫的必定要比看的多
• 寫的必定要比看的多

重要的事情說三遍

9、總結

經過上面26天的學習，恭喜你！你已經在前端開發的道路上走出了第一步，以後，喜歡數據結構和算法，能夠去leetcode刷題，喜歡node，能夠系統的學習一下後臺，能夠深刻學習網絡協議，操做系統，數據庫等知識，喜歡原生JavaScript，能夠看看《js高級程序設計》還有再瞭解ES的新特性。總之，把上面的目標完成以後，你的世界就開闊了，對知識體系也有了一個全新的理解，到時候再着手深刻某一個方向的學習。

10、資料

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

原文連接