1. 程式人生 > >2018web前端最全最牛的學習路線

2018web前端最全最牛的學習路線

前端 前端學習 前端工程師 前端框架 前端開發

第一章 初級課程

這個是我的前端新手學習群606加721加798,有全套的免費的學習資料,晚上也有365天講的前端免費公開課,想學習前端的朋友可以加群

第1天 html

1、HTTP協議

2、html是純文本

3、html骨架

4、DTD文檔類型

5、head標簽

6、body標簽

7、html基本語法

8、h系列的標簽

9、p標簽

10、img標簽

11、a標簽

12、div和span含義

第2天 html

1、無序列表

2、有序列表

3、定義列表

6、表格基礎

7、合並單元格

8、三個劃分區域的語義標簽

9、form標簽

10、input標簽

11、單行文本框

13、密碼框

14、單選框

15、多選框

16、文本域

17、下拉菜單

18、按鈕

第3天 css

1、html註釋

2、廢棄標簽

3、實體字符

4、css的概念

5、css的作用

6、css的樣式

7、css的書寫位置

8、基礎選擇

9、高級選擇器

10、css的繼承性

11、css的層疊性

第4天 css

1、color屬性

2、font-size屬性

3、font-family屬性

4、line-height屬性

5、font-weight屬性

6、font-style屬性

7、text-indent屬性

8、text-align屬性

9、text-decoration屬性

10、盒模型的初步認識

11、padding詳解

12、margin詳解

13、border詳解

第5天 css

1、盒模型的拓展知識

2、清除默認樣式

3、寬度剩余法

4、height高度設置法

5、margin特性之垂直方向上的塌陷

6、margin特性之不能用兒子去踹父親

7、父子盒模型的特性

8、居中的幾種設置方法

9、認識標準文檔流

10、標準文檔流的特性

11、塊級元素和行內元素的特性

12、浮動的基礎知識

第6天 css

1、浮動的作用

2、浮動的特性之浮動的元素脫離標準文檔流

3、浮動的特性之浮動的元素沒有margin塌陷

4、浮動的特性之浮動的元素依次貼邊

5、浮動的特性之浮動的元素讓出標準流的位置

6、浮動的特性之字圍效果

7、浮動存在的問題

8、清除浮動的方法之給父盒子加高度

9、清除浮動的方法之加clear屬性

10、清除浮動的方法之加隔墻法

11、清除浮動的方法之overflow法

第7天 css

1、a標簽的偽類

2、a標簽偽類的順序不能顛倒

3、a標簽偽類的應用實例之按鈕實例

4、a標簽偽類的應用實例之導航欄實例

5、background-color背景色的詳解

6、background-image背景圖的詳解

7、background-repeat背景重復的詳解

8、background-position背景定位的詳解

9、精靈圖的使用方法及案例

10、background-attachment背景固定的詳解

11、背景的應用之文字換圖片案例

12、背景的應用之padding設置背景圖案例

第8天 css

1、position:relative的詳解

2、position:relative的負值表示法

3、position:relative的應用之元素位置微調的實例

4、position:absolute的詳解

5、position:absolute的特性之不針對祖先元素的定位參考點

6、position:absolute的特性之祖先元素有定位的參考點

7、position:absolute的特性之絕對定位的頂點

8、position:absolute的特性之利用絕對定位制作壓蓋效果

9、position:absolute的特性之絕對定位的元素設置水平居中

10、position:absolute的實例之滾動輪播圖

11、position:fixed的詳解

12、z-index屬性的詳解

13、html hack的詳解

14、css值hack的詳解

15、css選擇器hack的詳解

16、IE6的兼容性問題

第9天 項目實戰

1、制作博客頁面

2、分析頁面的結構

3、搭建html結構代碼

4、搭建css樣式代碼

第10天 html5

1、html5的簡介

2、HTML5的新骨架和語義化標簽

3、新的input控件

4、placeholder屬性的詳解

5、autofocus屬性的詳解

6、datalist標簽的詳解

7、video標簽的詳解

8、audio標簽的詳解

9、css3的簡介

10、屬性選擇器的詳解

11、兒子序選擇器的詳解

12、兒子類型序選擇器的詳解

13、節點關系選擇器的詳解

第11天 css3

1、偽類的應用

2、偽元素的應用

3、border-radius屬性的詳解

4、box-shadow屬性的詳解

5、text-shadow屬性的詳解

6、background-origin屬性的詳解

7、background-clip屬性的詳解

8、background-size屬性的詳解

9、漸變背景的詳解

10、多背景的詳解

-- 第12天 css3

1、過渡的基礎知識

2、2D變形的詳解

3、@keyframes規則的詳解

4、animation屬性的詳解

5、animation屬性制作動畫的實例

6、box-sizing屬性的詳解

7、響應式布局的詳解

8、百分比布局的詳解

9、固比固模型的詳解

10、媒體查詢的詳解

第13天 BootStrap

1、Bootstrap使用步驟

2、Bootstrap柵格系統的詳解

3、Bootstrap柵格系統的實例

4、Bootstrap的排版之內聯子標題

5、Bootstrap的排版之引導主體副本

6、Bootstrap的排版之對齊類

7、Bootstrap的排版之強調類

8、Bootstrap的表單使用及實例

9、Bootstrap的按鈕,圖片的使用及實例

10、Bootstrap的字體圖標

11、Bootstrap的導航等工具的使用及實例

第14天 項目實戰

1、制作線上項目的頁面

2、分析頁面的結構

3、搭建html結構代碼

4、搭建css樣式代碼

第15天 項目實戰

1、制作線上項目移動端的頁面

2、分析頁面的結構

3、搭建html結構代碼

4、搭建css樣式代碼

第16天 js基礎

1、Javascript簡介

2、Javascript的書寫位置

3、alert語句

4、console.log()語句

5、數字字面量

6、字符串字面量

7、變量的聲明

8、變量的賦值

9、變量聲明的提升

10、數據類型的檢測方法

11、數據類型的轉換方法

第17天 js基礎

1、數學運算符

2、Math對象的幾種方法

3、比較運算符

4、邏輯運算符

5、賦值運算符

6、綜合運算的順序

7、if語句的詳解

8、三元運算符的詳解

9、switch語句的詳解

第18天 js基礎

1、for循環語句的詳解

2、窮舉思想的詳解

3、累加器和累成器的實例

4、do while語句的詳解

5、while語句的詳解

6、break用法的詳解

7、continue用法的詳解

8、函數語句的聲明

9、函數語句的調用

第19天 js基礎

1、函數的參數詳解

2、函數的返回值的詳解

3、函數表達式

4、函數的數據類型

5、函數聲明的提升

6、遞歸函數的詳解

7、變量的作用域

8、局部變量和全局變量的詳解

9、作用域鏈的詳解

10、函數的作用域

11、閉包的詳解

12、數組的基礎知識

13、數組的遍歷

第20天 js基礎

1、數組的首尾操作方法

2、數組的合並和拆分方法

3、數組的刪除方法

4、數組的插入方法

5、數組的替換方法

6、數組的排序方法

7、數組轉換為字符串的方法

8、charAt()方法的詳解

9、concat()方法的詳解

10、indexOf()方法的詳解

11、slice()方法的詳解

12、split()方法的詳解

13、substr()方法的詳解

14、substring()方法的詳解

15、toLowerCase()方法的詳解

16、toUpperCase()方法的詳解

第21天 js基礎

1、正則表達式的概念

2、正則表達式的精確匹配

3、正則表達式的預定義特殊字符

4、正則表達式的字符集

5、正則表達式的修飾符

6、正則表達式的邊界

7、正則表達式的預定義類

8、正則表達式的量詞

9、正則表達式的分組

10、正則表達式的或操作符

11、正則表達式分組的反向引用

12、正則表達式的中文

13、正則表達式的實例

第22天 js基礎

1、arguments的詳解

2、IIFE的詳解

3、結合數組觀察閉包

4、DOM的基礎知識

5、操作html的方法

6、操作css的方法

7、DOM中事件的幾種方法

8、setInterval()方法的詳解

-- 第23天 js基礎

1、getElementsByTagName()方法的詳解

2、批量添加事件監聽的方法

3、對應思想的實例

4、排他思想的實例

6、getElementsById()方法的詳解

5、getComputedStyle()方法的詳解

6、currentStyle()方法的詳解

7、對象基礎知識

8、JSON的基礎知識

9、JSON的遍歷方法

第24天、jQuery第一天

1、jQuery簡介

2、使用方式

3、$函數

4、jQuery對象

5、選擇器

6、jQuery函數

7、常見方法

8、css方法

9、show方法、hide方法

10、slideDown方法、slideUp方法

11、fadeIn方法、fadeOut方法

12、html方法

13、addClass方法、removeClass方法

14、attr方法

15、節點關系

16、$(this)

17、parent()

18、children()

19、siblings()

20、連續打點

21、其他節點關系方法

第25天、jQuery第二天

1、jQuery中的序號

2、eq()

3、index()

4、對應

5、each()方法

6、animate()方法

7、animate()方法概述

8、哪些屬性能夠參與動畫

9、動畫的順序

10、回調函數

11、delay()延遲

12、stop()方法

13、動畫積累的防止

14、交叉淡入淡出輪播

第26天、jQuery第三天

1、火車法輪播圖

2、布局和CSS

3、按鈕事件

4、三位置法輪播圖

5、布局和css

6、按鈕事件

7、小圓點事件

8、間歇模型

第27天、jQuery第四天

1、籃球計分系統

2、普通思維

3、數組思維

4、異形滾動

5、布局和css

6、分析

7、按鈕功能完成

  • 第28天、jQuery第五天

1、項目實戰

第29天、JavaScript進階第一天

1、DOM深入

2、概述

3、DOM訪問

4、屬性訪問和設置

5、節點關系

6、子節點屬性childNodes

7、firstChild和lastChild屬性

8、parentNode屬性

9、nextSibling和prevSibling屬性

10、節點操作

11、創建節點和上樹

12、移動節點

13、刪除節點removeChild()方法

14、替換節點replaceChild()方法

15、克隆節點cloneNode()方法

16、jQuery中的節點操作

17、創建節點

18、上樹的8種方法

19、wrap()和unwrap()、wrapAll()

20、replaceWith()和replaceAll()方法

21、empty()和remove()方法

22、clone()方法

23、拼圖輪播

第30天、 JavaScript進階第二天

1、事件流

2、事件流概述

3、DOM0級事件監聽方法

4、DOM2級事件監聽

5、低版本IE的事件添加

6、事件綁定小輪子

7、event事件對象

8、IE6、7、8的兼容問題

9、通用屬性

10、阻止事件冒泡

11、阻止默認事件

12、講解三個案例

13、鼠標位置

第31天、JavaScript進階第三天

1、復習

2、原生JS的元素位置和尺寸

3、認識offsetParent

4、offsetTop和offsetLeft

5、在頁面中的凈位置

6、clientWidth、clientHeight、offsetWidth、offsetWidth

7、拖拽

8、去掉監聽

9、jQuery中的事件

10、jQuery中的同名事件是不會覆蓋的

11、$(document).ready()

12、jQuery的事件相關方法

第32天、JavaScript進階第四天

1、復習

2、鼠標滾輪事件

3、Onmousewheel

4、火狐中的鼠標滾輪事件

5、滾輪的滾動方向與速度

6、區別

7、onscroll事件

8、頁面的卷動值

9、京東導航

10、頭像裁剪布局

11、鍵盤事件

12、鍵盤對象

13、fromCharCode

14、小鋼琴

第33天、JavaScript進階第六天

1、ECMA中的數據類型

2、對象

3、delete關鍵字

4、如何快速創建相似對象

5、構造函數

6、方法和屬性

7、原型

8、hasOwnProperty方法

9、instanceof關鍵字

10、繼承

11、構造函數式繼承

12、類式繼承

13、組合式繼承

14、貪吃蛇遊戲

15、分析

-- * 第34天、JavaScript進階第七天

1、中介者模式

2、貪吃蛇遊戲

3、遊戲類

4、蛇類

5、食物類

6、障礙類

第35天、PHP入門第一天

1、服務器

2、Apache服務器

3、數據庫

4、Mysql數據庫

5、後臺語言

6、php

7、前臺語言

8、js

9、一鍵安裝

10、php語法

11、Php標簽

12、Php書寫位置

13、Php輸出

第36天、Ajax企業級項目開發第一天

1、http請求

2、Get請求

3、Post請求

4、GET請求和POST請求帶參數發送

5、AJAX簡介

6、什麽叫ajax?

7、XHR對象

8、字符串轉化的三種方式

9、Eval

10、JSON.parse

11、new Function

12、封裝輪子

13、表單序列化和對象化

第37天、Ajax企業級項目開發第二天

1、jQuery中的ajax

2、$.get

3、$.post

4、$.ajax

5、緩存問題與解決

6、得到JSON後改變DOM

7、模板與字典

8、Underscore

9、Each方法

10、Filter方法

11、Contains方法

12、Max、min

第38天、Ajax企業級項目開發與地圖第三天

1、Template方法

2、模板修正

3、卷動到底部加載更多

4、動態綁定

5、域

6、跨域

7、jsonp

8、ajax分頁

9、封裝輪子

10、jQuery中的jsonp

11、瀑布流

12、百度地圖

  • 第39天、後臺管理 項目實戰第五天

1、選課系統

第40天、css3 3D效果

1、3D變形

2、perspective

3、3d旋轉

4、旋轉軸

5、空間移動

6、各種3d效果

7、3d輪播圖

第41天、移動端響應式開發

1、Touch事件

2、touchStart

3、touchMove

4、touchEnd

5、Touch事件的輪播圖

6、慣性拖拽

7、體驗Highchars

8、 標題

9、橫坐標軸

10、縱坐標軸

11、提示框

12、數據點的細節

13、署名

14、圖例

15、數據列

第42天 HTML5與大數據可視化

1、百度天氣

2、導出圖片

3、動態更新圖表

4、本地存儲

5、會話存儲

6、webWorker

7、EventSource

8、駕考一點通

9、攝像頭

10、離線資源

11、在線與離線

12、地理定位

13、History API

第二章 高級課程

第1天、html5開發實戰與webGL

1、Canvas詳細介紹

2、Canvas API

3、getContext

4、rect

5、Arc

6、lineTo

7、moveTo

8、drawImage

9、getImageData

10、putImageData

11、等方法

12、webGL

-- 第2天、HTML5遊戲項目實戰 flappy bird

1、Flappybird遊戲

2、遊戲分析

3、遊戲類

4、遊戲類的屬性與作用

5、中介者模式

6、背景類

7、背景類的屬性與作用

8、背景類的無縫連接

9、鳥類

10、鳥類的屬性與作用

11、鳥類的旋轉與上升下落

  • 第3天、HTML5遊戲項目實戰 打地鼠

前端開發學習群前面是二九6中間是五九1後面是二九0

1、打地鼠遊戲

2、遊戲分析

3、Game類

4、中介者模式

5、背景類

6、背景的洞屬性

7、洞的位置屬性

8、地鼠類

9、地鼠的生命周期

10、地鼠的渲染

11、地鼠的樣式切換

12、地鼠的死亡

13、其它類

14、錘子、

15、星星、

16、計分、

17、生命次數

第4天、node.js企業級應用開發

1、Nodejs簡介

2、Nodejs的誕生

3、Nodejs的安裝

4、Nodejs的特點

5、單線程、

6、非阻塞I/O、

7、事件驅動

8、Nodejs的適用場景

9、高並發、IO密集型

第5天、node.js企業級應用開發

1、模塊

2、內置模塊與自定義模塊

3、http模塊

4、Url模塊

5、Path模塊

6、Fs模塊

7、處理get請求

8、處理post請求

9、Npm命令

10、Formidable文件上傳

第6天、node.js企業級應用開發

1、Express

2、簡介

3、路由

4、Verbs路由

5、Router路由

6、Express中間件

7、Express靜態化文件

8、Body-parser

9、Ejs模板引擎

10、使用

11、與express配合使用

12、非關系型數據庫mongodb

13、Cookie

14、在express中使用cookie

15、Cookie-parser

16、在express中使用session

17、Express-session

第7天、node.js企業級應用開發.

1、相冊項目分析

2、使用的模塊、和事先安裝的程序

3、主頁/路由

4、登陸、註冊頁面/路由

5、修改密碼

6、權限管理

7、管理員賬戶

8、普通賬戶

9、會員賬戶

10、管理相冊功能

11、相冊的創建

12、圖片的上傳

第8天、node.js項目實戰 相冊

1、相冊項目

2、管理相冊功能

3、相冊的刪除

4、圖片的刪除

5、圖片是否共享

6、查看相冊功能

7、只能查看自己的相冊

8、所有相冊功能

9、查看所有人的相冊

10、管理員用戶可以查看所有人的相冊

11、會員用戶可以查看所有人的相冊

12、普通用戶可以查看其它人共享的相冊、

13、頭像裁剪功能

14、Graphics Magic介紹

15、Graphics Magic使用

16、在node中使用GM

17、頭像裁剪

-- * 第9天、node.js項目實戰 聊天室

1、Ajax長輪詢

2、長輪詢的實現

3、長輪詢的缺點

4、Socketio

5、介紹

6、使用

7、建立前後端的socket通道

8、前端發起信息

9、後端接收消息並廣播

10、聊天室

11、布局

12、分析

13、登陸

14、發送信息並顯示

15、單獨對某一個人聊天

16、管理員踢人和禁言

第10天 設計模式

1、設計模式的概念

2、簡單工廠模式

3、寄生工廠模式

4、創建小球

5、工廠方法模式

6、安全類

7、閉包類

8、單例模式

9、靜態變量

10、原型

11、原型模式

第11天 設計模式

1、適配器模式

2、組合模式

3、組合模式創建頁面

4、策略模式

5、策略模式驗證表單

6、策略模式淘寶價格

7、jQuery的easing動畫策略

8、自定義策略

9、觀察者模式

10、微博案例-三個模塊之間的互相通信

第12天 設計模式

1、模板

2、格式模板的函數

3、命令模式

4、使用命令模式組件視圖

5、canvas繪圖的命令模式

6、叠代器模式

7、jQuery中的叠代器模式

8、對象、數組叠代器

9、叠代構造函數的實例

10、圖片綜合案例操作

第13天 設計模式

1、委托模式

2、委托模式-減少事件數量

3、委托模式-減少內存泄漏

4、委托模式-語言未來元素

5、請求委托

6、請求委托-案例

7、節流模式

8、封裝節流函數

9、節流案例-浮層

10、節流案例-統計

  • 第14天 設計模式項目實戰

1、MVC簡介

2、M的封裝

3、V的封裝

4、C的封裝

5、綜合到一起

6、建站案例

7、MVVM的介紹

8、M

9、V

10、VM

11、使用mvvm創建進度條

第15天 模塊化開發 - seajs

1、 工作中常見問題

2、 試用seajs

3、 定義模塊

4、 Require模塊

5、 使用具有id的模塊

下午

6、 暴露接口10種方法

7、 模塊對象

8、 異步加載模塊

9、 同步加載與異步加載

10、 配置

11、 預加載插件

12、 加載css文件

13、 MVC模塊化

第16天 模塊化開發 - requirejs

1、體驗requirejs

2、定義模塊

3、模塊對象

4、使用具有id的模塊

5、模塊覆蓋

下午

6、接口暴露

7、配置

8、Css插件

9、MVC模塊化

10、體驗Backbone

11、模型實例化

12、模型默認屬性

13、模型構造函數

14、模型轉換對象

15、模型獲取數據

16、設置模型數據

第17天 Backbone

1、模型事件

2、是否修改過模型

3、模型刪除屬性

4、視圖實例化

5、設置容器元素

6、修改容器元素

7、構造函數

下午

8、模板方法

9、渲染方法

10、Taobao商品

11、渲染產品

12、Underscore節流器

13、集合

14、集合轉化數組

15、添加模型

16、集合獲取模型

17、集合刪除模型

18、集合構造函數

19、集合事件

20、淘寶商品列表

第18天 Backbone

1、forEach方法

2、Map方法

3、sortBy方法

4、groupBy方法

6、淘寶商品排序

7、過濾方法

8、淘寶商品

下午

9、事件對象

10、事件命名空間

11、事件註銷

12、單次註冊事件

13、跨對象事件監聽

14、模型與視圖通信

15、淘寶商品

16、跨對象事件註銷

17、路由模塊

18、動態路由

19、異步拉去數據

20、淘寶案例

-- * 第19天 Backbone 項目實戰

1、搭建項目

2、定義路由

3、列表樣式

4、圖片模型

5、圖片集合

下午

6、列表頁視圖

7、列表頁搜索

8、加載更多

9、列表頁分類

10、返回頂部

11、大圖頁視圖

12、大圖頁交互

13、模塊化

第20天 Vue 2.0

1、體驗vue

2、選擇器

3、數據綁定

4、屬性插值

5、單次插值

6、過濾html

7、插值表達式

8、插值過濾器

下午

9、數據動態綁定

10、數據雙向綁定

11、類的三種綁定方式

12、新浪案例

13、樣式的三種綁定方式

14、淘寶案例

15、Underscore條件語句

16、V-if指令

17、Template模板v-if

18、Underscore循環指令

19、V-for指令

20、Template循環指令

21、支付寶註冊

第21天 Vue 2.0

1、多選框

2、單選框

3、下拉框

4、Hao123下拉框

5、過濾器

6、淘寶註冊

7、表單特性屬性

8、自定義指令

9、京東註冊

10、自定義過濾器

11、京東商品價格

12、事件

13、鍵盤事件修飾符

14、登錄頁面

15、過渡

  • 第22天 Vue 2.0 項目實戰

1、組件

2、子組件向父組件通信

3、創建頁面組件

4、搭建路由

5、Header與工具方法

下午

6、分類按鈕

7、廣告視圖

8、商品列表

9、列表頁

10、列表頁交互

11、詳情頁

12、模塊化

第23天 Angular

1、angular簡介

2、Vue雙向綁定

3、Angular雙向綁定

4、初始化數據

5、獲取應用該程序

6、作用域

下午

7、事件

8、顯隱頁面

9、插值表達式

10、過濾器

11、日期過濾器

12、日期過濾器實現

13、Filter過濾器

14、字符串過濾器

15、排序過濾器

16、數字過濾器

17、自定義過濾器

第24天 Angular

1、臟值檢測

2、註冊頁面

3、Ng-readyonly

4、Ng-disabled

5、Ng-checked

6、Ng-change

7、Ng-submit

下午

8、根作用域

9、作用域

10、Ng-href

11、Ng-src

12、綁定類

13、綁定樣式

14、If模板指令

15、多分支模板指令

16、循環模板指令

17、Ng-include

第25天 Angular

1、自定義指令

2、指令作用域

3、自定義指令內容作用域

4、自定義指令模板作用域

5、@修飾符

6、=修飾符

下午

7、Link方法

8、Ng-show指令

9、Ng-bind指令

10、Ng-class指令

11、Transclude屬性

12、自定義指令嵌套

13、表單驗證指令

14、作用域丟失

15、倒計時

第26天 Angular

1、$http服務

2、Get請求

3、Post請求

4、Factory自定義服務

5、Service自定義服務

6、自定義觀察者模式服務

下午

7、指令路由

8、路由控制器

9、路由重定向

10、路由事件

11、Location服務

12、Ui路由

13、路由參數

14、多視圖渲染

15、重定向以及默認路由

16、子路由

17、Ui路由事件

第27天 Angular 項目實戰

1、環境配置

2、登錄檢測

3、登錄模塊

4、首頁模塊

5、導航模塊

6、創建用戶

7、用戶列表

8、用戶詳情

  • 第28天 微信開發

1、註冊微信小程序

2、全局配置

3、App應用程序

4、Page頁面

5、模塊化開發

下午

6、理由

7、If指令與for指令

8、模板

9、事件

10、引入文件

11、項目實戰--明信片

第29天 前端工程化 - Gulp

1、體驗gulp

2、Task任務

3、讀寫文件

4、監聽文件

5、Globs語法

6、重命名

7、壓縮js

8、壓縮css

9、壓縮html

10、Vue項目實戰

11、文件打包

12、語法檢測

13、圖片壓縮

第30天 前端工程化 - Webpack

1、Webpack

2、Webpack-dev-server

3、圖片加載機

4、壓縮js插件

下午

5、創建html

6、自動打開瀏覽器

7、環境變量

8、代碼拆分

9、代碼塊

10、全局變量

11、Hot module

12、React 編譯

第31天 前端工程化 - Fis3

1、體驗fis

2、Fis配置

3、項目實戰

4、壓縮js

5、壓縮css

6、壓縮圖片

下午

7、精靈圖制作

8、添加指紋

9、合並css資源

10、合同並html資源

11、合並js資源

12、文件打包

13、Cmd規範

14、Amd規範

15、Commonjs規範

16、Vue項目實戰

第32天 CSS預編譯 - Less

1、瀏覽器端使用less

2、Node環境中使用less

3、工程化中使用less

4、變量

5、混合

6、方法

下午

7、條件語句

8、數學方法

9、色彩創建

10、色彩通道

11、色彩操作

12、色彩混合

13、字符串方法

14、作用域

15、導入文件

16、Js語句

17、插值語法

18、MVC項目實戰

第33天 CSS預編譯 - Sass

1、體驗sass

2、工程化編譯sass

3、變量

4、屬性嵌套

5、混合

6、混合傳參

7、獲取剩余參數

下午

8、繼承

9、作用域

10、數學運算

11、色彩運算

12、字符串運算

13、插值語法

14、If條件語句

15、For循環語句

16、柵格化系統

17、While循環

18、枚舉循環

19、三元語句

-- 第34天 CSS預編譯 - Stylus

1、體驗stylus

2、變量

3、混合

4、獲取剩余參數

下午

5、方法

6、繼承

7、作用域

8、內置方法

9、插值

10、條件語句

11、枚舉循環

12、文件導入

13、避免編譯

14、動畫

第35天 ECMAScript 5

1、JSON.parse

2、JSON.stringify

3、判斷數組

4、獲取數組成員

5、數組填充

6、數組遍歷

7、數組映射

下午

8、Some

9、Every

10、Filter

11、Reduce

12、求任意兩個正整數之間整數之和

13、嚴格模式-定義變量

14、嚴格模式-作用域

15、嚴格模式-函數參數

16、嚴格模式-對象屬性

17、嚴格模式-delete關鍵字

18、嚴格模式-關鍵字、保留字、特殊變量

19、嚴格模式-八進制與特殊字符

20、嚴格模式-eval方法

21、嚴格模式-anguments.callee

22、嚴格模式-with

23、Data拓展

24、Bind方法

25、Create方法

26、屬性特性

27、特性方法

28、定義多個屬性特性

29、獲取對象特性

30、對象封閉

31、對象凍結

32、對象原型

第36天 React

1、react簡介

2、創建組件

3、Jsx語法

4、工程化編譯jsx語法

下午

5、插值

6、新聞列表

7、屬性

8、樣式

9、事件

10、狀態

11、換膚

第37天 React

1、組件創建期

2、子組件

3、組件存在期

4、組件銷毀期

下午

5、非元素屬性

6、非約束性組件

7、約束性組件

8、下拉框約束性與非約束性

9、單選框約束性與非約束性

10、使用非react類庫

11、使用侵入式插件

第38天 React 項目實戰

1、子組件向父組件通信

2、兄弟組件通信

3、項目部署

4、導航組件

下午

5、Banner組件

6、首頁組件

7、起步頁組件

8、起步頁樣式

9、Css組件

10、抽象組件

11、模塊化

  • 第39天 React 項目實戰

1、項目部署

2、加載動畫

3、圖片加載器

4、請求數據

下午

5、配置路由

6、Banner組件

7、首頁組件

8、分類組件reflux實現

9、Search組件reflux實現

10、模塊化

第40天 Typescript

1、Typescript

2、工程化編譯

3、枚舉類型

4、函數

5、類

6、繼承

下午

7、對象接口

8、函數接口

9、類接口

10、模塊

11、瀏覽器端編譯ES6

12、服務器器端編譯ES6

13、Let關鍵字

14、常量

15、字符串位置

16、多行字符串

17、重復字符串

18、原始字符串

-- 第41天 ECMAScript 6

1、數字對象拓展

2、數學對象拓展

3、Form方法

4、Of方法

5、獲取數組成員

6、數組拷貝

7、對象字面量

8、Is判斷方法

下午

9、數組叠代器方法

10、Assign方法

11、Symbol模型

12、代理

13、默認參數

14、獲取剩余參數

15、對象解構

16、數組解構

17箭頭函數

18、箭頭函數作用域

19、Set對象

20、Weakset對象

21、Map對象

22、Weakmap對象

23、叠代器

24、Generator函數

25、允諾對象

  • 第42天 ECMAScript 6 項目實戰

1、環境搭建

2、三個模塊

3、Until模塊

4、創建列表頁

下午

5、進入詳情頁

6、創建詳情頁

7、進入評論頁

8、創建評論頁

9、追加評論

10、返回邏輯

第43天 ReactNative與GIt版本管理工具

1、安裝reactNative環境

2、體驗ReactNative

3、內置組件

4、樣式模塊

5、Flexbox

6、表單

7、滾動視圖

8、列表

9、網絡請求

10、安裝git

11、常用指令

12、資源狀態

13、建立信任關系

14、創建版本庫

15、更新版本庫

第44天 Vuex

1、ES6語法創建應用

2、創建Store

3、State樹

4、動態狀態

5、Mutations

下午

6、Action

7、Modules切割模塊

8、動態路由配置

9、路由嵌套

10、管理路由

11、命名路由

12、命名視圖

13、路由重定向

14、Resource請求數據

第45天 基於ES6語法VueX項目實戰

1、創建應用程序

2、創建路由

3、創建store

4、工具方法

5、創建組件

6、定義模塊

7、組件通信

8、組件交互

第46天 Angular 4.0

1、體驗angular

2、創建組件

3、樣式

4、插值

5、子組件

下午

6、組件通信

7、事件

8、局部模板變量

9、Ng-if指令

10、Ng-switch指令

11、Ng-for指令

12、自定義管道

13、Form表單以及臟值檢測

14、自定義指令

15、自定義服務

16、RxJS與Promise

17、路由模塊

18、組件繼承

2018web前端最全最牛的學習路線