新年獻禮 技術胖262集前端免費視訊 讓您走的更容易些

技術胖發表於2018-12-13
前端

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

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

有很多人問我為什麼要錄製這麼多免費視訊，是不是有什麼大陰謀。

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

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

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

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

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

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

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

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

技術胖祝君安！

https://user-gold-cdn.xitu.io/2018/12/13/167a553dc8fdd6c5?w=750&h=150&f=jpeg&s=56670

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…

相關文章