福利福利~262集前端免費視頻！

作者：技術胖

原文地址：https://juejin.im/post/5c11bf145188252704368b98

來源：掘金

 

2018還有十幾天就要過完了，我覺的這一年我的成長並不是很快，有很多2018新年許的願望都沒有達成。這篇文章算我2018年的一個總結吧！

在這歲末迎新的時候，把所有的視頻送給你，希望你可以在2019年，無論是學習還是工作都有所進步。

有很多人問我為什么要錄制這么多免費視頻，是不是有什么大陰謀。

我以前上學的時候家里很窮，我父親是一名軍人，在我12歲的時候就去世了，走在了工作一線，我們全家都沒見到最后一面。老媽是一名油漆工人，在我的記憶里每次下班回家都是色彩斑斕，一身的油漆味。父親走后，老媽自己承擔起了姥姥、哥哥和我這一大家的負擔，所有收入只靠老媽一人。

我學程序的時候連一本程序書籍都買不起，每天下課后，灌上一壺涼水，買兩個饅頭就去新華書店抄書（那時候我沒有能照相的手機）。抄好一章后等着能上機練習的時候再看着筆記練習。當時過的很窮酸，遭到過很多富家子弟的白眼，我知道學程序的艱辛。

現在我條件好過了一些，我只想幫助大家，讓大家學程序的時候容易點。

這里是我錄制所有的免費課程，我很笨，每節課程我都要准備3-5個小時，因為會和講出來，真的是兩個不同的境界。

一共花了兩年時間，我並不是講師，我是每天敲8個小時以上代碼的一線程序員，所有課程都是我下班回家和早上4:30起床錄制的。

我作的這一切，只想讓你在程序這條路上，走的更容易一些。

我不保證我以后不會變，但此時我是這樣想的，並且已經這樣想了兩年。祝所有小伙伴在新的一年里心想事成，萬事如意。

2019年我還會每周出三節免費視頻教程，希望可以幫助更多的小伙伴學習前端技術。

技術胖祝君安！

Flutter免費視頻教程

1. 課程說明，有用的廢話: jspang.com/post/flutte…

2. 認識一下Flutter : jspang.com/post/flutte…

3. Flutter開發環境搭建Windows版: jspang.com/post/flutte…

4. 安裝AVD虛擬機 Flutter跑起來 :jspang.com/post/flutte…

5. VSCode下如何玩轉Flutter :jspang.com/post/flutte…

6. 寫一個HelloWorld程序: jspang.com/post/flutte…

7. Text Widget 文本組件的使用:jspang.com/post/flutte…

8. Container容器組件的使用1:jspang.com/post/flutte…

9. Container容器組件的使用2:jspang.com/post/flutte…

10. Image圖片組件的使用: jspang.com/post/flutte…

11. ListView 列表組件簡介: jspang.com/post/flutte…

12. 橫向列表的使用：jspang.com/post/flutte…

13. 動態列表的使用:jspang.com/post/flutte…

14. GridView網格列表組件: jspang.com/post/flutte…

15. 水平布局Row的使用:jspang.com/post/flutte…

16. 垂直布局Column組件：jspang.com/post/flutte…

17. Stack層疊布局: jspang.com/post/flutte…

18. Stack的Positioned屬性:jspang.com/post/flutte…

19. 卡片組件布局:jspang.com/post/flutte…

Nginx免費視頻教程

1. 初識Nginx和環境准備：jspang.com/post/nginx.…

2. Nginx的快速搭建：jspang.com/post/nginx.…

3. Nginx基本配置文件詳講:jspang.com/post/nginx.…

4. Nginx服務啟動、停止、重啟:jspang.com/post/nginx.…

5. 自定義錯誤頁和訪問設置:jspang.com/post/nginx.…

6. Nginx訪問權限詳講:jspang.com/post/nginx.…

7. Nginx設置虛擬主機:jspang.com/post/nginx.…

8. Nginx使用域名設置虛擬主機:jspang.com/post/nginx.…

9. Nginx反向代理的設置:jspang.com/post/nginx.…

10. Nginx適配PC或移動設備：jspang.com/post/nginx.…

11. Nginx的Gzip壓縮配置：jspang.com/post/nginx.…

TypeScript免費視頻教程

1. 初識TypeScript:jspang.com/post/typesc…

2. 開發環境的安裝: jspang.com/post/typesc…

3. 變量類型的那些事:jspang.com/post/typesc…

4. TypeScript的函數:jspang.com/post/typesc…

5. 三種函數的定義方式:jspang.com/post/typesc…

6. 函數中變量的作用域：jspang.com/post/typesc…

7. 引用類型-數組:jspang.com/post/typesc…

8. 引用類型-字符串：jspang.com/post/typesc…

9. 引用類型-日期對象:jspang.com/post/typesc…

10. 引用類型-正則表達式:jspang.com/post/typesc…

11. 面向對象編程-類的聲明和使用:jspang.com/post/typesc…

12. 面向對象編程-修飾符:jspang.com/post/typesc…

13. 面向對象編程-繼承和重寫:jspang.com/post/typesc…

14. 面向對象編程-接口:jspang.com/post/typesc…

15. 面向對象編程-命名空間:jspang.com/post/typesc…

Vue2.x免費視頻教程

1. 走起我的Vue2.0：jspang.com/post/vue2-1…

2. v-if v-else v-show 指令:jspang.com/post/vue2-1…

3. v-for指令 ：解決模板循環問題:jspang.com/post/vue2-1…

4. v-text & v-html:jspang.com/post/vue2-1…

5. v-on：綁定事件監聽器:jspang.com/post/vue2-1…

6. v-model指令:jspang.com/post/vue2-1…

7. v-bind 指令:jspang.com/post/vue2-1…

8. 其他內部指令(v-pre & v-cloak & v-once):jspang.com/post/vue2-1…

9. Vue.directive 自定義指令:jspang.com/post/vue2-2…

10. Vue.extend構造器的延伸:jspang.com/post/vue2-2…

11. Vue.set全局操作：jspang.com/post/vue2-2…

12. Vue的生命周期（鈎子函數）:jspang.com/post/vue2-2…

13. Template 制作模版:jspang.com/post/vue2-2…

14. Component 初識組件:jspang.com/post/vue2-2…

15. Component 組件props 屬性設置:jspang.com/post/vue2-2…

16. Component 父子組件關系:jspang.com/post/vue2-2…

17. Component 標簽:jspang.com/post/vue2-2…

18. propsData Option 全局擴展的數據傳遞:jspang.com/post/vue2-3…

19. computed Option 計算選項:jspang.com/post/vue2-3…

20. Methods Option 方法選項:jspang.com/post/vue2-3…

21. Watch 選項 監控數據:jspang.com/post/vue2-3…

22. Mixins 混入選項操作:jspang.com/post/vue2-3…

23. Extends Option 擴展選項:jspang.com/post/vue2-3…

24. 實例入門-實例屬性: jspang.com/post/vue2-4…

25. 實例方法:jspang.com/post/vue2-4…

26. 實例事件:jspang.com/post/vue2-4…

27. 內置組件 -slot講解:jspang.com/post/vue2-4…

Vue-cli 免費視頻教程

1. Vue-cli，開始吧騷年：jspang.com/post/vue-cl…

2. Vue-cli項目結構講解：jspang.com/post/vue-cl…

3. 解讀Vue-cli的模板： jspang.com/post/vue-cl…

Vue-router免費視頻教程

1. Vue-router入門:jspang.com/post/vue-ro…

2. vue-router配置子路由：jspang.com/post/vue-ro…

3. vue-router如何參數傳遞：jspang.com/post/vue-ro…

4. 單頁面多路由區域操作：jspang.com/post/vue-ro…

5. vue-router 利用url傳遞參數：jspang.com/post/vue-ro…

6. vue-router 的重定向-redirect:jspang.com/post/vue-ro…

7. alias別名的使用: jspang.com/post/vue-ro…

8. 路由的過渡動畫:jspang.com/post/vue-ro…

9. mode的設置和404頁面的處理:jspang.com/post/vue-ro…

10. 路由中的鈎子:jspang.com/post/vue-ro…

vuex免費視頻教程

1. 初出茅廬 來個小Demo：jspang.com/post/vuex.h…

2. state訪問狀態對象：jspang.com/post/vuex.h…

3. Mutations修改狀態:jspang.com/post/vuex.h…

4. getters計算過濾操作:jspang.com/post/vuex.h…

5. actions異步修改狀態:jspang.com/post/vuex.h…

6. module模塊組:jspang.com/post/vuex.h…

Vue免費實戰視頻-快餐店收銀系統

1. Mockplus把我們的想法畫出來：jspang.com/post/vuedem…

2. Vue-cli搭建開發環境:jspang.com/post/vuedem…

3. 搞定項目圖標Iconfont：jspang.com/post/vuedem…

4. 編寫獨立的側邊欄導航組件 : jspang.com/post/vuedem…

5. 開啟Element封印:jspang.com/post/vuedem…

6. 利用Element快速布局（1）:jspang.com/post/vuedem…

7. 利用Element快速布局（2）:jspang.com/post/vuedem…

8. Axios從遠程讀取數據: jspang.com/post/vuedem…

9. 訂單模塊制作 核心功能-1:jspang.com/post/vuedem…

10. 訂單模塊制作 核心功能-2:jspang.com/post/vuedem…

11. 項目打包和上線:jspang.com/post/vuedem…

WEEX免費視頻教程

1. 課程介紹： jspang.com/post/weex.h…

2. 開發環境安裝(1)：jspang.com/post/weex.h…

3. 開發環境安裝(2):jspang.com/post/weex.h…

4. weex常用命令和熱更新:jspang.com/post/weex.h…

5. Android Studio 開發設置:jspang.com/post/weex.h…

6. weex和vue的愛恨情仇:jspang.com/post/weex.h…

7. 自定義組件和Text組件:jspang.com/post/weex.h…

8. Input組件和初識內建模塊:jspang.com/post/weex.h…

9. Image和video組件：jspang.com/post/weex.h…

10. 一起作個列表出來:jspang.com/post/weex.h…

11. 從后端服務器上獲取數據:jspang.com/post/weex.h…

12. 作輪播圖片效果:jspang.com/post/weex.h…

13. a組件和web組件：jspang.com/post/weex.h…

14. 通用事件和動畫: jspang.com/post/weex.h…

15. 教會你自學weex：jspang.com/post/weex.h…

16. Navigator和webview模塊:jspang.com/post/weex.h…

17. vue-router的使用: jspang.com/post/weex.h…

Nuxt.js免費視頻教程 開啟SSR渲染

1. 課程介紹：jspang.com/post/Nuxt.j…

2. Nuxt環境搭建和Hello World:jspang.com/post/Nuxt.j…

3. Nuxt目錄結構詳講:jspang.com/post/Nuxt.j…

4. Nuxt常用配置項: jspang.com/post/Nuxt.j…

5. Nuxt的路由配置和參數傳遞:jspang.com/post/Nuxt.j…

6. Nuxt的動態路由和參數校驗:jspang.com/post/Nuxt.j…

7. Nuxt的路由動畫效果:jspang.com/post/Nuxt.j…

8. Nuxt的默認模版和默認布局:jspang.com/post/Nuxt.j…

9. Nuxt的錯誤頁面和個性meta設置:jspang.com/post/Nuxt.j…

10. asyncData方法獲取數據:jspang.com/post/Nuxt.j…

11. Nuxt的路由動畫效果:jspang.com/post/Nuxt.j…

React免費視頻教程-入門和組件

1. React課程介紹:jspang.com/post/react.…

2. 環境搭建和HelloWorld程序:jspang.com/post/react.…

3. 初識JSX語法:jspang.com/post/react.…

4. 進階JSX語法:jspang.com/post/react.…

5. React組件：state成員:jspang.com/post/react.…

6. React組件：props和render成員:jspang.com/post/react.…

7. React組件：生命周期：jspang.com/post/react.…

8. React組件小實例-必做練習:jspang.com/post/react.…

9. React組件：this.props.children:jspang.com/post/react.…

10. React組件：props屬性驗證:jspang.com/post/react.…

11. React組件：獲取真實DOM節點:jspang.com/post/react.…

React免費視頻教程-表單的應用

1. 表單的事件響應和bind復用 : jspang.com/post/react-…

2. React表單name復用:jspang.com/post/react-…

3. React表單-可控組件:jspang.com/post/react-…

4. React表單-不可控組件:jspang.com/post/react-…

React項目構建和路由 免費視頻教程

1. 構建：create-react-app 快速腳手架 : jspang.com/post/react-…

2. 構建：generator-react-webpack: jspang.com/post/react-…

3. 構建：webpack一步一步構建01:jspang.com/post/react-…

4. 構建：webpack一步一步構建02:jspang.com/post/react-…

5. 路由：Hello React路由:jspang.com/post/react-…

6. 路由：NavLink中常用選項:jspang.com/post/react-…

7. 路由：404設置和跳轉設置:jspang.com/post/react-…

8. 路由：通過路由傳值的方法:jspang.com/post/react-…

9. 路由：Router中的屬性和路由模式:jspang.com/post/react-…

10. 路由：prompt用法講解:jspang.com/post/react-…

Koa2免費視頻教程

1. Koa開發環境搭建:jspang.com/post/koa2.h…

2. async/await的使用方法：jspang.com/post/koa2.h…

3. Get請求的接收:jspang.com/post/koa2.h…

4. POST請求如何接收（1）:jspang.com/post/koa2.h…

5. POST請求如何接收（2）:jspang.com/post/koa2.h…

6. koa-bodyparser中間件：jspang.com/post/koa2.h…

7. Koa2原生路由實現：jspang.com/post/koa2.h…

8. Koa-router中間件（1）入門:jspang.com/post/koa2.h…

9. Koa-router中間件（2）層級:jspang.com/post/koa2.h…

10. Koa-router中間件（3）參數:jspang.com/post/koa2.h…

11. Koa2中使用cookie :jspang.com/post/koa2.h…

12. Koa2的模板初識（ejs）:jspang.com/post/koa2.h…

13. koa-static靜態資源中間件：jspang.com/post/koa2.h…

MongoDB免費視頻教程

1. 認識和安裝MongoDB：jspang.com/post/mongod…

2. Mongo基本命令-1:jspang.com/post/mongod…

3. Mongo基本命令-2:jspang.com/post/mongod…

4. 用js文件寫mongo命令：jspang.com/post/mongod…

5. 批量插入的正確方法:jspang.com/post/mongod…

6. 修改：Update常見錯誤:jspang.com/post/mongod…

7. 修改：初識update修改器:jspang.com/post/mongod…

8. 修改：update數組修改器jspang.com/post/mongod…

9. 修改：狀態返回與安全:jspang.com/post/mongod…

10. 查詢：find的不等修飾符:jspang.com/post/mongod…

11. 查詢：find的多條件查詢:jspang.com/post/mongod…

12. 查詢：find的數組查詢:jspang.com/post/mongod…

13. 查詢：find的參數使用方法:jspang.com/post/mongod…

14. 查詢：find如何在js文本中使用:jspang.com/post/mongod…

15. 索引:構造百萬級數據:jspang.com/post/mongod…

16. 索引：索引入門：jspang.com/post/mongod…

17. 索引：復合索引:jspang.com/post/mongod…

18. 索引：全文索引:jspang.com/post/mongod…

19. 管理:用戶的創建、刪除與修改:jspang.com/post/mongod…

20. 管理：備份和還原:jspang.com/post/mongod…

21. 管理：圖形界面管理（完結）:jspang.com/post/mongod…

ES6免費視頻教程

1. ES6的開發環境搭建：jspang.com/post/es6.ht…

2. 新的聲明方式:jspang.com/post/es6.ht…

3. 變量的解構賦值:jspang.com/post/es6.ht…

4. 擴展運算符和rest運算符:jspang.com/post/es6.ht…

5. 字符串模版:jspang.com/post/es6.ht…

6. ES6數字操作:jspang.com/post/es6.ht…

7. ES6中新增的數組知識（1）:jspang.com/post/es6.ht…

8. ES6中新增的數組知識（2）:jspang.com/post/es6.ht…

9. ES6中的箭頭函數和擴展:jspang.com/post/es6.ht…

10. ES6中的函數和數組補漏:jspang.com/post/es6.ht…

11. ES6中對象:jspang.com/post/es6.ht…

12. Symbol在對象中的作用:jspang.com/post/es6.ht…

13. Set和WeakSet數據結構:jspang.com/post/es6.ht…

14. map數據結構:jspang.com/post/es6.ht…

15. 用Proxy進行預處理:jspang.com/post/es6.ht…

16. promise對象的使用:jspang.com/post/es6.ht…

17. class類的使用:jspang.com/post/es6.ht…

18. 模塊化操作:jspang.com/post/es6.ht…

CocosCreator從基礎到實戰

1. 簡介和HelloWorld:jspang.com/post/cocosC…

2. 軟件界面介紹和跳動的小球:jspang.com/post/cocosC…

3. Scene介紹和基本操作:jspang.com/post/cocosC…

4. 玩家輸入事件監聽: jspang.com/post/cocosC…

5. Prefab和計時器:jspang.com/post/cocosC…

6. 實戰-游戲簡介和項目分析:jspang.com/post/cocosC…

7. 實戰-UI界面布局:jspang.com/post/cocosC…

8. 實戰-主角的動作監聽和跳動:jspang.com/post/cocosC…

9. 實戰-隨機生成地刺:jspang.com/post/cocosC…

10. 實戰-點擊生成地刺和移動:jspang.com/post/cocosC…

11. 實戰-碰撞檢測:jspang.com/post/cocosC…

12. 實戰-倒計時和分數增加:jspang.com/post/cocosC…

13. 實戰-歡迎界面代碼編寫:jspang.com/post/cocosC…

14. 實戰-添加音效:jspang.com/post/cocosC…

15. 實戰-發布游戲:jspang.com/post/cocosC…

Fabricjs 免費視頻教程

1. 初識簡單而且強大的Fabric.js庫： http://jspang.com/post/fabricjs.html#toc-e13

2. 在Canvas上畫簡單的圖形:jspang.com/post/fabric…

3. 在Canvas上插入圖片並設置旋轉屬性:jspang.com/post/fabric…

4. Fabric.js用路徑畫不規則圖形:jspang.com/post/fabric…

5. Fabric.js的動畫設置：jspang.com/post/fabric…

6. Fabric.js的圖像過濾器:jspang.com/post/fabric…

7. Fabric.js的顏色模式和相互轉換:jspang.com/post/fabric…

8. Fabric.js的漸變填充:jspang.com/post/fabric…

9. Fabric.js的文本設置:jspang.com/post/fabric…

10. Fabric.js的事件系統:jspang.com/post/fabric…

CSS3免費視頻

1. 嫁漢嫁漢穿衣吃飯：jspang.com/post/CSS3.h…

2. CSS3新特性簡介和瀏覽器支持情況:jspang.com/post/CSS3.h…

3. CSS3偽類選擇器1:jspang.com/post/CSS3.h…

4. CSS3偽類選擇器2結構偽類選擇器:jspang.com/post/CSS3.h…

5. CSS3偽元素:jspang.com/post/CSS3.h…

6. CSS3用border-radius畫圓形:jspang.com/post/CSS3.h…

7. CSS3畫三角形和對話框:jspang.com/post/CSS3.h…

8. CSS3畫菱形和平行四邊形:jspang.com/post/CSS3.h…

9. CSS3畫菱形和平行四邊形:jspang.com/post/CSS3.h…

10. CSS3 畫五角星和六角星：jspang.com/post/CSS3.h…

11. CSS3畫心形和蛋形:jspang.com/post/CSS3.h…

12. CSS3畫太極陰陽圖:jspang.com/post/CSS3.h…

13. CSS3制作透明背景層:jspang.com/post/CSS3.h…

14. CSS3的顏色模式(1)：jspang.com/post/CSS3.h…

15. CSS3的顏色模式（2）-實例仿天貓商品展示效果:jspang.com/post/CSS3.h…

16. CSS3線性漸變:jspang.com/post/CSS3.h…

17. CSS3徑向漸變 radial-gradient:jspang.com/post/CSS3.h…

18. CSS3重復性漸變:jspang.com/post/CSS3.h…

19. CSS3盒子陰影效果box-shadow:jspang.com/post/CSS3.h…

20. CSS3制作緩慢變長的方形（transition特效）：jspang.com/post/CSS3.h…

21. CSS3過渡的timing-function屬性詳解:jspang.com/post/CSS3.h…

22. CSS3仿天貓專題過渡效果實例:jspang.com/post/CSS3.h…

23. CSS3仿天貓類別過渡效果制作:jspang.com/post/CSS3.h…

24. CSS3動畫中的@keyframes關鍵幀講解:jspang.com/post/CSS3.h…

25. CSS3動畫animation復合屬性講解:jspang.com/post/CSS3.h…

26. CSS3動畫綜合實例制作-內容加載loading動畫實現:jspang.com/post/CSS3.h…

27. CSS3 Loading動畫效果實例2:jspang.com/post/CSS3.h…

28. CSS3制作發光字，立體字，蘋果字體:jspang.com/post/CSS3.h…

29. CSS3 用text-overflow解決文字排版問題:jspang.com/post/CSS3.h…

30. CSS3 新的字體單位rem-大結局:jspang.com/post/CSS3.h…