我是技术胖，在全国新冠疫情的笼罩下，很多小伙伴不敢出门（我们小区已经戒严，每家只发一个通行证，每天只可以外出一小时），可能很多小伙伴会因此丢掉工作，技术胖作为一个还有100万房贷要还的程序员，经济上实在没办法帮助太多，但也要身体力行，抗击疫情，尽自己所能作点什么。

所以我在这里整理了我所有的视频教程，并全部免费掉，希望小伙伴们能更简单的在家学习。疫情过后，我们一定会有更美好的明天。加油！奥里给！！！

视频还在持续整理中，有些有版权问题，正在协商(建议收藏此文章)

你的一次点赞，会帮助更多的人在线免费学习，你也算是为抗击疫情作了贡献。

下面所有视频免费观看.................

大胖逼逼叨(软技能)

• 01、大胖逼逼叨01-如何高效学习新编程技术:www.bilibili.com/video/av711…
• 02、大胖逼逼叨02-三招提高代码质量:www.bilibili.com/video/av718…
• 03、大胖逼逼叨03-程序员到底学什么语言好:www.bilibili.com/video/av735…
• 04、大胖逼逼叨04-程序员如何避免从入门到入狱:www.bilibili.com/video/av743…
• 05、大胖逼逼叨05-前端三大框架到底学哪个好:www.bilibili.com/video/av751…
• 06、大胖逼逼叨06-12年程序员感悟编程的意义:www.bilibili.com/video/av760…
• 07、大胖逼逼叨07-大胆预测明年软件开发趋势:www.bilibili.com/video/av768…
• 08、大胖逼逼叨08-如何布置桌面提高编码效率:www.bilibili.com/video/av776…
• 09、大胖逼逼叨09-程序员通关阿里面试全攻略:www.bilibili.com/video/av785…
• 10、大胖逼逼叨10-2019年前端大事回顾:www.bilibili.com/video/av793…
• 11、大胖逼逼叨11-程序员快速成神三部曲-基础篇:www.bilibili.com/video/av810…
• 12、大胖逼逼叨12-程序员快速成神三部曲-进阶篇:www.bilibili.com/video/av821…
• 13、大胖逼逼叨13-程序员成神三部曲时间管理:www.bilibili.com/video/av830…
• 14、大胖逼逼叨14-程序员跨过这些坑少走3年弯路:www.bilibili.com/video/av842…
• 15、大胖逼逼叨15-程序员改掉这些陋习 轻松涨薪5000元:www.bilibili.com/video/av851…
• 15、大胖逼逼叨16-程序员改掉这4个陋习将获得同事的尊重:www.bilibili.com/video/av866…

React16版基础视频【28集】

从这里开始学习吧。

• 011、React课程前言:jspang.com/detailed?id…
• 012、React简介和Vue对比:jspang.com/detailed?id…
• 013、React开发环境搭建:jspang.com/detailed?id…
• 014、脚手架生成的项目目录介绍:jspang.com/detailed?id…
• 015、HelloWorld和组件的讲解:jspang.com/detailed?id…
• 016、React中JSX语法简介:jspang.com/detailed?id…
• 017、React实例-小姐姐服务菜单:jspang.com/detailed?id…
• 018、React实例-宝剑磨的好,理论不能少:jspang.com/detailed?id…
• 019、React实例-老板我要加个钟:jspang.com/detailed?id…
• 020、React实例-宝剑虽然好 老腰受不了:jspang.com/detailed?id…
• 021、React进阶-JSX防踩坑的几个地方:jspang.com/detailed?id…
• 022、React进阶-Simple React Snippets:jspang.com/detailed?id…
• 023、React进阶-组件的拆分:jspang.com/detailed?id…
• 024、React进阶-父子组件的传值:jspang.com/detailed?id…
• 025、React进阶-单项数据流和其他:jspang.com/detailed?id…
• 026、React高级-调试工具的安装及使用:jspang.com/detailed?id…
• 027、React高级-PropTypes校验传递值:jspang.com/detailed?id…
• 028、React高级-ref的使用方法:jspang.com/detailed?id…
• 029、React高级-生命周期讲解-1:jspang.com/detailed?id…
• 030、React高级-生命周期讲解-2:jspang.com/detailed?id…
• 031、React高级-生命周期讲解-3:jspang.com/detailed?id…
• 032、React高级-生命周期改善程序性能:jspang.com/detailed?id…
• 033、React高级-axios数据请求:jspang.com/detailed?id…
• 034、React高级-Axios请求EasyMock:jspang.com/detailed?id…
• 035、React高级-用CSS3实现react动画:jspang.com/detailed?id…
• 036、React高级-CSS3的keyframes动画:jspang.com/detailed?id…
• 037、React高级-react-transition-group:jspang.com/detailed?id…
• 038、React高级-多DOM动画制作和编写:jspang.com/detailed?id…

Redux免费视频教程【24集】

• 039、基础-认识Redux和文章介绍:jspang.com/detailed?id…
• 040、基础-Redux工作流程:jspang.com/detailed?id…
• 041、基础-Ant Design介绍和环境初始化:jspang.com/detailed?id…
• 042、基础-用Ant Design制作UI界面:jspang.com/detailed?id…
• 043、基础-创建Redux中的仓库-store和reducer:jspang.com/detailed?id…
• 044、基础-Redux Dev Tools的安装:jspang.com/detailed?id…
• 045、基础-通过Input体验Redux的流程:jspang.com/detailed?id…
• 046、基础-Redux制作ToDoList列表:jspang.com/detailed?id…
• 047、基础-用Redux实现ToDoList的删除功能:jspang.com/detailed?id…
• 048、基础-工作中写Redux的小技巧-1:jspang.com/detailed?id…
• 049、基础-工作中写Redux的小技巧-2:jspang.com/detailed?id…
• 050、加餐-Redux填三个小坑:jspang.com/detailed?id…
• 051、进阶-组件UI和业务逻辑的拆分方法:jspang.com/detailed?id…
• 052、进阶-填坑和Redux中的无状态组件:jspang.com/detailed?id…
• 053、进阶-Axios异步获取数据并和Redux结合:jspang.com/detailed?id…
• 054、进阶-Redux-thunk中间件的安装和配置:jspang.com/detailed?id…
• 055、进阶-Redux-thunk中间件的安装和配置:jspang.com/detailed?id…
• 056、进阶-Redux-saga的安装和配置:jspang.com/detailed?id…
• 057、进阶-用Redux-saga获取TodoList列表:jspang.com/detailed?id…
• 058、进阶-React-Redux介绍和安装:jspang.com/detailed?id…
• 059、进阶-React-redux中的Provider和connect:jspang.com/detailed?id…
• 060、进阶-React-redux的数据修改:jspang.com/detailed?id…
• 061、进阶-React-redux增加List数据:jspang.com/detailed?id…
• 062、加餐-React-redux程序优化(完结):jspang.com/detailed?id…

React Router免费视频教程【9集】

• 063、React Router 安装和基础环境搭建:jspang.com/detailed?id…
• 064、像制作普通网页一样使用ReactRouter:jspang.com/detailed?id…
• 065、ReactRouter动态传值-1:jspang.com/detailed?id…
• 066、ReactRouter动态传值-2:jspang.com/detailed?id…
• 067、ReactRouter重定向-Redirect使用:jspang.com/detailed?id…
• 068、实例-ReactRouter嵌套路由-1:jspang.com/detailed?id…
• 069、实例-ReactRouter嵌套路由-2:jspang.com/detailed?id…
• 070、实例-ReactRouter嵌套路由-3:jspang.com/detailed?id…
• 071、后台动态获取路由进行配置:jspang.com/detailed?id…

React Hooks 免费视频教程【共11集】

• 072、React Hooks介绍和环境搭建:jspang.com/detailed?id…
• 073、useState 的介绍和多状态声明:jspang.com/detailed?id…
• 074、useEffect代替常用生命周期函数:jspang.com/detailed?id…
• 075、useEffect 实现 componentWillUnmount生命周期函数:jspang.com/detailed?id…
• 076、useContext 让父子组件传值更简单:jspang.com/detailed?id…
• 077、useReducer介绍和简单使用:jspang.com/detailed?id…
• 078、useReducer代替Redux小案例-1:jspang.com/detailed?id…
• 079、useReducer代替Redux小案例-2:jspang.com/detailed?id…
• 080、useMemo优化React Hooks程序性能:jspang.com/detailed?id…
• 081、useRef获取DOM元素和保存变量:jspang.com/detailed?id…
• 082、自定义Hooks函数获取窗口大小:jspang.com/detailed?id…

React服务端渲染框架Next.js入门(共12集)

• 083、Next.js简介和创建项目:jspang.com/detailed?id…
• 084、creact-next-app快速创建Next.js项目:jspang.com/detailed?id…
• 085、Next.js的Page和Component的使用:jspang.com/detailed?id…
• 086、路由-基础和基本跳转:jspang.com/detailed?id…
• 087、路由-跳转时用query传递和接受参数:jspang.com/detailed?id…
• 088、路由-六个钩子事件的讲解:jspang.com/detailed?id…
• 089、在getInitialProps中用Axios获取远端数据:jspang.com/detailed?id…
• 090、使用Style JSX编写页面的CSS样式:jspang.com/detailed?id…
• 091、Lazy Loading实现模块懒加载:jspang.com/detailed?id…
• 092、自定义Head 更加友好的SEO操作:jspang.com/detailed?id…
• 093、Next.js框架下使用Ant Design UI:jspang.com/detailed?id…
• 094、Next.js生产环境打包（完结）:jspang.com/detailed?id…

React Hooks+Egg.js博客实战视频教程(更新39集)

更新完成

目前我的博客就是用的这个程序,预览页面

• 095、博客实战的课程介绍:jspang.com/detailed?id…
• 096、项目前端基础开发环境搭建:jspang.com/detailed?id…
• 097、制作博客公用头部并形成组件:jspang.com/detailed?id…
• 098、完成首页主体的两栏布局:jspang.com/detailed?id…
• 099、利用List组件制作博客列表:jspang.com/detailed?id…
• 100、编写“博主介绍”组件:jspang.com/detailed?id…
• 101、编写“通用广告”组件:jspang.com/detailed?id…
• 102、博客列表页面快速制作:jspang.com/detailed?id…
• 103、博客详细页面制作1-编写基本页面结构:jspang.com/detailed?id…
• 104、博客详细页面制作2-解析Markdown语法:jspang.com/detailed?id…
• 105、博客详细页面制作3-Markdown导航制作:jspang.com/detailed?id…
• 106、中台搭建1-安装egg.js开发环境:jspang.com/detailed?id…
• 107、中台搭建2-egg.js目录结构和约定规范:jspang.com/detailed?id…
• 108、中台搭建3-RESTful API设计简介和路由配置:jspang.com/detailed?id…
• 109、中台搭建4-Egg.js中连接mysql数据库:jspang.com/detailed?id…
• 110、中台搭建5-数据库设计和首页接口制作:jspang.com/detailed?id…
• 111、前中台结合1-前台读取首页文章列表接口:jspang.com/detailed?id…
• 112、前中台结合2-文章详细页面接口制作展示:jspang.com/detailed?id…
• 113、解决egg.js的跨域问题:jspang.com/detailed?id…
• 114、重构前台博客详细页面1-marked+highlight:jspang.com/detailed?id…
• 115、重构前台博客详细页面2-实现文章导航:jspang.com/detailed?id…
• 116、前台文章列表页的制作1-接口模块化和读取文章分类:jspang.com/detailed?id…
• 117、前台文章列表页的制作2-根据类别读取文章列表:jspang.com/detailed?id…
• 118、让前台所有页面支持Markdown解析:jspang.com/detailed?id…
• 119、后台开发01-开发环境搭建:jspang.com/detailed?id…
• 120、后台开发02-页面路由配置:jspang.com/detailed?id…
• 121、后台开发03-编写登录界面:jspang.com/detailed?id…
• 121、后台开发04-UI框架搭建:jspang.com/detailed?id…
• 122、后台开发05-添加文章页面制作1:jspang.com/detailed?id…
• 123、后台开发06-添加文章页面制作2:jspang.com/detailed?id…
• 124、后台开发07-Markdown编辑器制作:jspang.com/detailed?id…
• 125、后台开发08-编写service登录接口:jspang.com/detailed?id…
• 126、后台开发09-实现前台登录操作:jspang.com/detailed?id…
• 127、后台开发10-中台路由守卫制作:jspang.com/detailed?id…
• 128、后台开发11-读取添加文章页面的类别信息:jspang.com/detailed?id…
• 129、后台开发12-添加文章的方法(上):jspang.com/detailed?id…
• 130、后台开发13-添加文章的方法(中):jspang.com/detailed?id…
• 131、后台开发14-添加文章的方法(下):jspang.com/detailed?id…
• 132、后台开发15-文章列表制作(上):jspang.com/detailed?id…
• 133、后台开发16-文章列表制作(中):jspang.com/detailed?id…
• 134、后台开发17-删除文章:jspang.com/detailed?id…
• 135、后台开发18-修改文章（上）:jspang.com/detailed?id…
• 136、后台开发19-修改文章（下）:jspang.com/detailed?id…
• 137、博客部署介绍和演示:jspang.com/detailed?id…

【第一季】Vue2.x视频教程-内部指令(共8集)

• 001.走起我的Vue2.x : jspang.com/detailed?id…
• 002.v-if v-else v-show 指令: jspang.com/detailed?id…
• 003.v-for指令 ：解决模板循环问题: jspang.com/detailed?id…
• 004.v-text & v-html: jspang.com/detailed?id…
• 005.v-on：绑定事件监听器: jspang.com/detailed?id…
• 006.v-model指令: jspang.com/detailed?id…
• 007.v-bind 指令: jspang.com/detailed?id…
• 008.其他内部指令(v-pre & v-cloak & v-once): jspang.com/detailed?id…

【第二季】Vue2.0视频教程-全局API(共9集)

• 009.Vue.directive 自定义指令: jspang.com/detailed?id…
• 010.Vue.extend构造器的延伸: jspang.com/detailed?id…
• 011.Vue.set全局操作: jspang.com/detailed?id…
• 012.Vue的生命周期（钩子函数）: jspang.com/detailed?id…
• 013.Template 制作模版: jspang.com/detailed?id…
• 014.Component 初识组件: jspang.com/detailed?id…
• 015.Component 组件props 属性设置: jspang.com/detailed?id…
• 016.Component 父子组件关系: jspang.com/detailed?id…
• 017.Component 标签: jspang.com/detailed?id…

【第三季】Vue2.0视频教程-选项（共6集）

• 018.propsData Option 全局扩展的数据传递: jspang.com/detailed?id…
• 019.computed Option 计算选项: jspang.com/detailed?id…
• 020.Methods Option 方法选项: jspang.com/detailed?id…
• 021.Watch 选项 监控数据: jspang.com/detailed?id…
• 022.Mixins 混入选项操作: jspang.com/detailed?id…
• 023.Extends Option 扩展选项: jspang.com/detailed?id…

【第四季】Vue2.0视频教程-实例和内置组件（共4集）

• 024.实例入门-实例属性: jspang.com/detailed?id…
• 025.实例方法: jspang.com/detailed?id…
• 026.实例事件: jspang.com/detailed?id…
• 027.内置组件 -slot讲解: jspang.com/detailed?id…

Vue-router免费视频教程

• 028.Vue-router入门: jspang.com/detailed?id…
• 029.vue-router配置子路由: jspang.com/detailed?id…
• 030.vue-router如何参数传递: jspang.com/detailed?id…
• 031.单页面多路由区域操作: jspang.com/detailed?id…
• 032.vue-router 利用url传递参数: jspang.com/detailed?id…
• 033.vue-router 的重定向-redirect: jspang.com/detailed?id…
• 034.alias别名的使用: jspang.com/detailed?id…
• 034.路由的过渡动画: jspang.com/detailed?id…
• 035.mode的设置和404页面的处理: jspang.com/detailed?id…
• 036.路由中的钩子: jspang.com/detailed?id…
• 037.编程式导航: jspang.com/detailed?id…

Vue-cli 免费视频教程

• 038.Vue-cli，开始吧骚年: jspang.com/detailed?id…
• 039.Vue-cli项目结构讲解: jspang.com/detailed?id…
• 040.解读Vue-cli的模板: jspang.com/detailed?id…

vuex免费视频教程

• 041.初出茅庐 来个小Demo: jspang.com/detailed?id…
• 042.state访问状态对象: jspang.com/detailed?id…
• 043.Mutations修改状态: jspang.com/detailed?id…
• 044.getters计算过滤操作: jspang.com/detailed?id…
• 045.actions异步修改状态: jspang.com/detailed?id…
• 046.module模块组: jspang.com/detailed?id…

Vue实战视频-快餐店收银系统 (共11集)

• 047.Mockplus把我们的想法画出来: jspang.com/detailed?id…
• 048.Vue-cli搭建开发环境: jspang.com/detailed?id…
• 049.搞定项目图标Iconfont: jspang.com/detailed?id…
• 050.编写独立的侧边栏导航组件: jspang.com/detailed?id…
• 051.开启Element封印: jspang.com/detailed?id…
• 052.利用Element快速布局（1）: jspang.com/detailed?id…
• 053.利用Element快速布局（2）: jspang.com/detailed?id…
• 054.Axios从远程读取数据: jspang.com/detailed?id…
• 055.订单模块制作 核心功能-1: jspang.com/detailed?id…
• 056.订单模块制作 核心功能-2: jspang.com/detailed?id…
• 057.项目打包和上线: jspang.com/detailed?id…

WEEX免费视频教程-从入门到放肆 (共17集)

• 058.课程介绍: jspang.com/detailed?id…
• 059.开发环境安装(1): jspang.com/detailed?id…
• 060.开发环境安装(2): jspang.com/detailed?id…
• 061.weex常用命令和热更新: jspang.com/detailed?id…
• 062.Android Studio 开发设置: jspang.com/detailed?id…
• 063.weex和vue的爱恨情仇: jspang.com/detailed?id…
• 064.自定义组件和Text组件: jspang.com/detailed?id…
• 065.Input组件和初识内建模块: jspang.com/detailed?id…
• 066.Image和video组件: jspang.com/detailed?id…
• 067.从后端服务器上获取数据: jspang.com/detailed?id…
• 068.作轮播图片效果: jspang.com/detailed?id…
• 069.a组件和web组件: jspang.com/detailed?id…
• 070.通用事件和动画: jspang.com/detailed?id…
• 071.教会你自学weex: jspang.com/detailed?id…
• 072.Navigator和webview模块: jspang.com/detailed?id…
• 073.vue-router的使用: jspang.com/detailed?id…

Nuxt.js免费视频教程 开启SSR渲染 ( 共10集)

• 074.课程介绍: jspang.com/detailed?id…
• 075.Nuxt环境搭建和Hello World: jspang.com/detailed?id…
• 076.Nuxt目录结构详讲: jspang.com/detailed?id…
• 077.Nuxt常用配置项: jspang.com/detailed?id…
• 078.Nuxt的路由配置和参数传递: jspang.com/detailed?id…
• 079.Nuxt的动态路由和参数校验: jspang.com/detailed?id…
• 080Nuxt的路由动画效果: jspang.com/detailed?id…
• 081.Nuxt的默认模版和默认布局: jspang.com/detailed?id…
• 082.Nuxt的错误页面和个性meta设置: jspang.com/detailed?id…
• 083.asyncData方法获取数据: jspang.com/detailed?id…
• 084.静态资源和打包: jspang.com/detailed?id…

Flutter免费视频第一季-环境搭建

• 001.课程说明，有用的废话: jspang.com/detailed?id…
• 002.认识一下Flutter: jspang.com/detailed?id…
• 003.Flutter开发环境搭建Windows版: jspang.com/detailed?id…
• 004.Flutter开发环境搭建Mac版: jspang.com/detailed?id…
• 005.安装AVD虚拟机 Flutter跑起来: jspang.com/detailed?id…
• 006.VSCode下如何玩转Flutter: jspang.com/detailed?id…
• 007.写一个HelloWorld程序: jspang.com/detailed?id…

Flutter免费视频第二季-常用组件

• 008.Text Widget 文本组件的使用: jspang.com/detailed?id…
• 009.Container容器组件的使用1: jspang.com/detailed?id…
• 010.Container容器组件的使用2: jspang.com/detailed?id…
• 011.Image图片组件的使用: jspang.com/detailed?id…
• 012.ListView 列表组件简介: jspang.com/detailed?id…
• 013.横向列表的使用: jspang.com/detailed?id…
• 014.GridView网格列表组件: jspang.com/detailed?id…

Flutter免费视频第三季-布局

• 015.水平布局Row的使用: jspang.com/detailed?id…
• 016.垂直布局Column组件: jspang.com/detailed?id…
• 017.Stack层叠布局: jspang.com/detailed?id…
• 018.Stack的Positioned属性: jspang.com/detailed?id…
• 019.卡片组件布局: jspang.com/detailed?id…

Flutter免费视频第四季-页面导航和其他

• 020.一般页面导航和返回: jspang.com/detailed?id…
• 021.导航参数的传递和接收（1）: jspang.com/detailed?id…
• 022.导航参数的传递和接收（2）: jspang.com/detailed?id…
• 023.页面跳转并返回数据: jspang.com/detailed?id…
• 024.静态资源和项目图片的处理: jspang.com/detailed?id…
• 025.Flutter客户端打包: jspang.com/detailed?id…

20个Flutter实例视频教程 让你轻松上手工作 （共20集）

• 026.底部导航栏制作-1: jspang.com/detailed?id…
• 027.底部导航栏制作-2: jspang.com/detailed?id…
• 028.不规则底部工具栏制作-1: jspang.com/detailed?id…
• 029.不规则底部工具栏制作-2: jspang.com/detailed?id…
• 030.酷炫的路由动画-1: jspang.com/detailed?id…
• 031.酷炫的路由动画-2: jspang.com/detailed?id…
• 032.毛玻璃效果制作: jspang.com/detailed?id…
• 033.保持页面状态: jspang.com/detailed?id…
• 034.保持页面状态-2: jspang.com/detailed?id…
• 035.一个不简单的搜索条-1: jspang.com/detailed?id…
• 036.一个不简单的搜索条-2: jspang.com/detailed?id…
• 037.流式布局 模拟添加照片效果: jspang.com/detailed?id…
• 038.展开闭合案例: jspang.com/detailed?id…
• 039.展开闭合列表案例: jspang.com/detailed?id…
• 040.贝塞尔曲线切割: jspang.com/detailed?id…
• 041.波浪形式的贝塞尔曲线: jspang.com/detailed?id…
• 042.打开应用的闪屏动画案例: jspang.com/detailed?id…
• 043.右滑返回上一页案例: jspang.com/detailed?id…
• 044.ToolTip控件实例: jspang.com/detailed?id…
• 045.Draggable控件实例: jspang.com/detailed?id…

其它视频还在整理中，稍后会更新