30天完成30个JS原生开发项目挑战视频教程—3314人已学习
课程介绍
在Github上看到了wesbos的一个Javascript30天挑战的repo，旨在使用纯JS来进行练习，不允许使用任何其他的库和框架，该挑战共30天，我会在这里复现这30天遇到的挑战与问题，将其教程化、视频化分享给大家。源码及文档：https://github.com/liyuechun/JavaScript30-liyuechun
课程收益
1、每天一JS原生项目挑战 2、30天精通JS
讲师介绍
黎跃春 更多讲师课程
北京从零到壹科技有限公司 创始人 CEO 孔壹学院 教学总监 21点见 产品经理，架构师
课程大纲
第1章:01 - JavaScript Drum Kit
1. 【JavaScript30 系列之第01天】001项目效果演示以及知识点分析 1:12
2. 【JavaScript30 系列之第01天】002爵士鼓项目UI搭建之HTML 7:19
3. 【JavaScript30 系列之第01天】003CSS之min-height和vh 5:15
4. 【JavaScript30 系列之第01天】004CSS之background-size 16:12
5. 【JavaScript30 系列之第01天】005CSS之rem 3:57
6. 【JavaScript30 系列之第01天】006CSS之布局完结篇 16:03
7. 【JavaScript30 系列之第01天】007CSS之playing效果模拟 4:14
8. 【JavaScript30 系列之第01天】008JavaScript逻辑实现与控制台调试 26:31
第2章:02 - JS and CSS Clock
1. 【JavaScript30 系列之第02天】001项目介绍与技术要点分析 3:45
2. 【JavaScript30 系列之第02天】002项目之flex布局与盒子模型 14:44
3. 【JavaScript30 系列之第02天】003项目之position实战 28:33
4. 【JavaScript30 系列之第02天】004rem之bug总结 7:33
5. 【JavaScript30 系列之第02天】005transform系列属性 18:31
6. 【JavaScript30 系列之第02天】006JS逻辑处理 4:37
7. 【JavaScript30 系列之第02天】007transition动画过度 5:25
8. 【JavaScript30 系列之第02天】008指针回转bug思考与处理方法 9:48
9. 【JavaScript30 系列之第02天】009效果优化 5:03
第3章:03 - CSS Variables
1. 【JavaScript30 系列之第03天】001项目效果演示及技术点分析 5:14
2. 【JavaScript30 系列之第03天】002UI搭建 22:04
3. 【JavaScript30 系列之第03天】003CSS变量的声明与使用 5:02
4. 【JavaScript30 系列之第03天】004CSS变量使用之JS逻辑处理 12:19
第4章:04 - Array Cardio Day 1
1. 【JavaScript30 系列之第04天】001Day4挑战目标介绍 2:40
2. 【JavaScript30 系列之第04天】002优美的调试技巧 0:58
3. 【JavaScript30 系列之第04天】003筛选 16 世纪出生的发明家 6:40
4. 【JavaScript30 系列之第04天】004展示他们的姓和名 7:11
5. 【JavaScript30 系列之第04天】005把他们按照年龄从大到小进行排序 6:00
6. 【JavaScript30 系列之第04天】006计算所有的发明家加起来一共活了多少岁 4:35
7. 【JavaScript30 系列之第04天】007按照他们活了多久来进行排序 2:43
8. 【JavaScript30 系列之第04天】008筛选出网页中含有CSS标题的数据名称 8:11
9. 【JavaScript30 系列之第04天】009按照姓氏来对发明家进行排序 5:11
10. 【JavaScript30 系列之第04天】010统计给出数组中各个物品的数量 7:02
第5章:05 - Flex Panel Gallery
1. 【JavaScript30 系列之第05天】001Flex 实现可伸缩的图片墙 25:26
第6章:06 - Type Ahead
1. 【JavaScript30 系列之第06天】001项目效果展示与相关技术分析 4:06
2. 【JavaScript30 系列之第06天】002UI搭建 41:31
3. 【JavaScript30 系列之第06天】003通过Fetch下载数据并解析存储 9:31
4. 【JavaScript30 系列之第06天】004事件监听 4:35
5. 【JavaScript30 系列之第06天】005RegExp数据匹配 15:21
6. 【JavaScript30 系列之第06天】006替换高亮的标签 6:21
第7章:07 - Array Cardio Day 2
1. 【JavaScript30 系列之第07天】001Day7挑战知识点介绍 2:37
2. 【JavaScript30 系列之第07天】002是否至少有一人年满19周岁？ 11:42
3. 【JavaScript30 系列之第07天】003是否每一个人都年满19周岁？ 5:31
4. 【JavaScript30 系列之第07天】004是否存在id=823423的评论？ 7:56
5. 【JavaScript30 系列之第07天】005找到id=823423的评论的序列号(下标) 2:39
6. 【JavaScript30 系列之第07天】006删除id=823423的评论-splice 8:34
7. 【JavaScript30 系列之第07天】007删除id=823423的评论-slice 5:03
第8章:08 - Fun with HTML5 Canvas
1. 【JavaScript30 系列之第08天】001HTML5 Canvas 实现彩虹画笔绘画 32:21
第9章:09 - Dev Tools Domination
1. 【JavaScript30 系列之第09天】001Day9挑战内容简介 1:49
2. 【JavaScript30 系列之第09天】002log 的更多用法 5:45
3. 【JavaScript30 系列之第09天】003清空 console 面板输出内容 1:49
4. 【JavaScript30 系列之第09天】004不同样式的输出 1:36
5. 【JavaScript30 系列之第09天】005打印DOM节点 1:40
6. 【JavaScript30 系列之第09天】006断点调试 2:48
7. 【JavaScript30 系列之第09天】007打印表格 1:10
8. 【JavaScript30 系列之第09天】008分组打印 2:26
9. 【JavaScript30 系列之第09天】009console.count() 计数 2:08
10. 【JavaScript30 系列之第09天】010time 计时 1:16
第10章:10 - Hold Shift and Check Checkboxes
1. 【JavaScript30 系列之第10天】001按住 Shift 实现批量选中 15:14
2. 【JavaScript30 系列之第10天】002按住 Shift 实现批量取消 12:25
3. 【JavaScript30 系列之第10天】003按住 Shift 实现批量取消之新方法 4:53
第11章:11 - Custom Video Player
1. 【JavaScript30 系列之第11天】001项目介绍 2:30
2. 【JavaScript30 系列之第11天】002变量绑定 4:20
3. 【JavaScript30 系列之第11天】003事件监听以及函数实现 13:48
第12章:12 - Key Sequence Detection
1. 【JavaScript30 系列之第12天】001项目挑战介绍 5:00
2. 【JavaScript30 系列之第12天】002项目源码实现 19:54
第13章:13 - Slide in on Scroll
1. 【JavaScript30 系列之第13天】001项目效果展示以及实现分析 7:52
2. 【JavaScript30 系列之第13天】002基础知识讲解 9:36
3. 【JavaScript30 系列之第13天】003JS代码逻辑以及算法分析 23:37
第14章:14 - JavaScript References VS Copying
1. 【JavaScript30 系列之第14天】001按值操作 5:47
2. 【JavaScript30 系列之第14天】001浅拷贝-指针拷贝 15:40
3. 【JavaScript30 系列之第14天】002数组的深拷贝 6:46
4. 【JavaScript30 系列之第14天】003Object.assign进行对象深拷贝 3:49
5. 【JavaScript30 系列之第14天】004JSON字符串实现对象深拷贝 5:08
第15章:15 - LocalStorage
1. 【JavaScript30 系列之第15天】001项目挑战介绍 3:25
2. 【JavaScript30 系列之第15天】002新增待办事项的事件监听以及数组构建 10:51
3. 【JavaScript30 系列之第15天】003代办事项UI展示 12:18
4. 【JavaScript30 系列之第15天】004localStorage应用 16:54
第16章:16 - Mouse Move Shadow
1. 【JavaScript30 系列之第16天】001项目挑战展示与内容概述 2:51
2. 【JavaScript30 系列之第16天】002text-shadow属性使用详解 9:36
3. 【JavaScript30 系列之第16天】003解构赋值 15:46
4. 【JavaScript30 系列之第16天】004 MouseEvent 20:08
5. 【JavaScript30 系列之第16天】005 offset系列属性精讲 16:43
6. 【JavaScript30 系列之第16天】006整个项目JS代码逻辑完成 11:21
第17章:17 - Sort Without Articles
1. 【JavaScript30 系列之第17天】001数组排序 7:39
第18章:18 - Adding Up Times with Reduce
1. 【JavaScript30 系列之第18天】001项目挑战之方法一 11:45
2. 【JavaScript30 系列之第18天】002项目挑战之方法二 6:50
第19章:19 - Webcam Fun
1. 【JavaScript30 系列之第19天】001项目挑战内容介绍 2:51
2. 【JavaScript30 系列之第19天】002了解Browsersync 8:38
3. 【JavaScript30 系列之第19天】003捕捉视频流以及进行实时播放 10:36
4. 【JavaScript30 系列之第19天】004canvas绘图 7:22
5. 【JavaScript30 系列之第19天】005拍照 10:07
6. 【JavaScript30 系列之第19天】006滤镜制作原理 8:28
第20章:20 - Speech Detection
1. 【JavaScript30 系列之第20天】001项目挑战内容介绍 3:39
2. 【JavaScript30 系列之第20天】002语音识别代码解析 13:59
第21章:21 - Geolocation
1. 【JavaScript30 系列之第21天】001Geolocation 视频 8:46
第22章:22 - Follow Along Link Highlighter
1. 【JavaScript30 系列之第22天】001鼠标锚点动画生成教程 12:18
第23章:23 - Speech Synthesis
1. 【JavaScript30 系列之第23天】001Speech Synthesis 35:01
第24章:24 - Sticky Nav
1. 【JavaScript30 系列之第24天】导航吸附效果教程 24:30
第25章:25 - Event Capture, Propagation, Bubbling and Once
1. 【JavaScript30 系列之第25天】001DOM事件机制 9:44
第26章:26 - Stripe Follow Along Nav
1. 【JavaScript30 系列之第26天】001气泡在导航上随鼠标的位置的出现和消失 51:32
第27章:27 - Click and Drag
1. 【JavaScript30 系列之第27天】001点按、拖拽 18:19
第28章:28 - Video Speed Controller
1. 【JavaScript30 系列之第28天】001Video Speed Controller 17:01
第29章:29 - Countdown Timer
1. 【JavaScript30 系列之第29天】001倒计时项目 20:54
第30章:30 - Whack A Mole
1. 【JavaScript30 系列之第30天】001JS原生实现打地鼠游戏 37:21
大家可以点击【 查看详情】查看我的课程
课程介绍
在Github上看到了wesbos的一个Javascript30天挑战的repo，旨在使用纯JS来进行练习，不允许使用任何其他的库和框架，该挑战共30天，我会在这里复现这30天遇到的挑战与问题，将其教程化、视频化分享给大家。源码及文档：https://github.com/liyuechun/JavaScript30-liyuechun
课程收益
1、每天一JS原生项目挑战 2、30天精通JS
讲师介绍
黎跃春 更多讲师课程
北京从零到壹科技有限公司 创始人 CEO 孔壹学院 教学总监 21点见 产品经理，架构师
课程大纲
第1章:01 - JavaScript Drum Kit
1. 【JavaScript30 系列之第01天】001项目效果演示以及知识点分析 1:12
2. 【JavaScript30 系列之第01天】002爵士鼓项目UI搭建之HTML 7:19
3. 【JavaScript30 系列之第01天】003CSS之min-height和vh 5:15
4. 【JavaScript30 系列之第01天】004CSS之background-size 16:12
5. 【JavaScript30 系列之第01天】005CSS之rem 3:57
6. 【JavaScript30 系列之第01天】006CSS之布局完结篇 16:03
7. 【JavaScript30 系列之第01天】007CSS之playing效果模拟 4:14
8. 【JavaScript30 系列之第01天】008JavaScript逻辑实现与控制台调试 26:31
第2章:02 - JS and CSS Clock
1. 【JavaScript30 系列之第02天】001项目介绍与技术要点分析 3:45
2. 【JavaScript30 系列之第02天】002项目之flex布局与盒子模型 14:44
3. 【JavaScript30 系列之第02天】003项目之position实战 28:33
4. 【JavaScript30 系列之第02天】004rem之bug总结 7:33
5. 【JavaScript30 系列之第02天】005transform系列属性 18:31
6. 【JavaScript30 系列之第02天】006JS逻辑处理 4:37
7. 【JavaScript30 系列之第02天】007transition动画过度 5:25
8. 【JavaScript30 系列之第02天】008指针回转bug思考与处理方法 9:48
9. 【JavaScript30 系列之第02天】009效果优化 5:03
第3章:03 - CSS Variables
1. 【JavaScript30 系列之第03天】001项目效果演示及技术点分析 5:14
2. 【JavaScript30 系列之第03天】002UI搭建 22:04
3. 【JavaScript30 系列之第03天】003CSS变量的声明与使用 5:02
4. 【JavaScript30 系列之第03天】004CSS变量使用之JS逻辑处理 12:19
第4章:04 - Array Cardio Day 1
1. 【JavaScript30 系列之第04天】001Day4挑战目标介绍 2:40
2. 【JavaScript30 系列之第04天】002优美的调试技巧 0:58
3. 【JavaScript30 系列之第04天】003筛选 16 世纪出生的发明家 6:40
4. 【JavaScript30 系列之第04天】004展示他们的姓和名 7:11
5. 【JavaScript30 系列之第04天】005把他们按照年龄从大到小进行排序 6:00
6. 【JavaScript30 系列之第04天】006计算所有的发明家加起来一共活了多少岁 4:35
7. 【JavaScript30 系列之第04天】007按照他们活了多久来进行排序 2:43
8. 【JavaScript30 系列之第04天】008筛选出网页中含有CSS标题的数据名称 8:11
9. 【JavaScript30 系列之第04天】009按照姓氏来对发明家进行排序 5:11
10. 【JavaScript30 系列之第04天】010统计给出数组中各个物品的数量 7:02
第5章:05 - Flex Panel Gallery
1. 【JavaScript30 系列之第05天】001Flex 实现可伸缩的图片墙 25:26
第6章:06 - Type Ahead
1. 【JavaScript30 系列之第06天】001项目效果展示与相关技术分析 4:06
2. 【JavaScript30 系列之第06天】002UI搭建 41:31
3. 【JavaScript30 系列之第06天】003通过Fetch下载数据并解析存储 9:31
4. 【JavaScript30 系列之第06天】004事件监听 4:35
5. 【JavaScript30 系列之第06天】005RegExp数据匹配 15:21
6. 【JavaScript30 系列之第06天】006替换高亮的标签 6:21
第7章:07 - Array Cardio Day 2
1. 【JavaScript30 系列之第07天】001Day7挑战知识点介绍 2:37
2. 【JavaScript30 系列之第07天】002是否至少有一人年满19周岁？ 11:42
3. 【JavaScript30 系列之第07天】003是否每一个人都年满19周岁？ 5:31
4. 【JavaScript30 系列之第07天】004是否存在id=823423的评论？ 7:56
5. 【JavaScript30 系列之第07天】005找到id=823423的评论的序列号(下标) 2:39
6. 【JavaScript30 系列之第07天】006删除id=823423的评论-splice 8:34
7. 【JavaScript30 系列之第07天】007删除id=823423的评论-slice 5:03
第8章:08 - Fun with HTML5 Canvas
1. 【JavaScript30 系列之第08天】001HTML5 Canvas 实现彩虹画笔绘画 32:21
第9章:09 - Dev Tools Domination
1. 【JavaScript30 系列之第09天】001Day9挑战内容简介 1:49
2. 【JavaScript30 系列之第09天】002log 的更多用法 5:45
3. 【JavaScript30 系列之第09天】003清空 console 面板输出内容 1:49
4. 【JavaScript30 系列之第09天】004不同样式的输出 1:36
5. 【JavaScript30 系列之第09天】005打印DOM节点 1:40
6. 【JavaScript30 系列之第09天】006断点调试 2:48
7. 【JavaScript30 系列之第09天】007打印表格 1:10
8. 【JavaScript30 系列之第09天】008分组打印 2:26
9. 【JavaScript30 系列之第09天】009console.count() 计数 2:08
10. 【JavaScript30 系列之第09天】010time 计时 1:16
第10章:10 - Hold Shift and Check Checkboxes
1. 【JavaScript30 系列之第10天】001按住 Shift 实现批量选中 15:14
2. 【JavaScript30 系列之第10天】002按住 Shift 实现批量取消 12:25
3. 【JavaScript30 系列之第10天】003按住 Shift 实现批量取消之新方法 4:53
第11章:11 - Custom Video Player
1. 【JavaScript30 系列之第11天】001项目介绍 2:30
2. 【JavaScript30 系列之第11天】002变量绑定 4:20
3. 【JavaScript30 系列之第11天】003事件监听以及函数实现 13:48
第12章:12 - Key Sequence Detection
1. 【JavaScript30 系列之第12天】001项目挑战介绍 5:00
2. 【JavaScript30 系列之第12天】002项目源码实现 19:54
第13章:13 - Slide in on Scroll
1. 【JavaScript30 系列之第13天】001项目效果展示以及实现分析 7:52
2. 【JavaScript30 系列之第13天】002基础知识讲解 9:36
3. 【JavaScript30 系列之第13天】003JS代码逻辑以及算法分析 23:37
第14章:14 - JavaScript References VS Copying
1. 【JavaScript30 系列之第14天】001按值操作 5:47
2. 【JavaScript30 系列之第14天】001浅拷贝-指针拷贝 15:40
3. 【JavaScript30 系列之第14天】002数组的深拷贝 6:46
4. 【JavaScript30 系列之第14天】003Object.assign进行对象深拷贝 3:49
5. 【JavaScript30 系列之第14天】004JSON字符串实现对象深拷贝 5:08
第15章:15 - LocalStorage
1. 【JavaScript30 系列之第15天】001项目挑战介绍 3:25
2. 【JavaScript30 系列之第15天】002新增待办事项的事件监听以及数组构建 10:51
3. 【JavaScript30 系列之第15天】003代办事项UI展示 12:18
4. 【JavaScript30 系列之第15天】004localStorage应用 16:54
第16章:16 - Mouse Move Shadow
1. 【JavaScript30 系列之第16天】001项目挑战展示与内容概述 2:51
2. 【JavaScript30 系列之第16天】002text-shadow属性使用详解 9:36
3. 【JavaScript30 系列之第16天】003解构赋值 15:46
4. 【JavaScript30 系列之第16天】004 MouseEvent 20:08
5. 【JavaScript30 系列之第16天】005 offset系列属性精讲 16:43
6. 【JavaScript30 系列之第16天】006整个项目JS代码逻辑完成 11:21
第17章:17 - Sort Without Articles
1. 【JavaScript30 系列之第17天】001数组排序 7:39
第18章:18 - Adding Up Times with Reduce
1. 【JavaScript30 系列之第18天】001项目挑战之方法一 11:45
2. 【JavaScript30 系列之第18天】002项目挑战之方法二 6:50
第19章:19 - Webcam Fun
1. 【JavaScript30 系列之第19天】001项目挑战内容介绍 2:51
2. 【JavaScript30 系列之第19天】002了解Browsersync 8:38
3. 【JavaScript30 系列之第19天】003捕捉视频流以及进行实时播放 10:36
4. 【JavaScript30 系列之第19天】004canvas绘图 7:22
5. 【JavaScript30 系列之第19天】005拍照 10:07
6. 【JavaScript30 系列之第19天】006滤镜制作原理 8:28
第20章:20 - Speech Detection
1. 【JavaScript30 系列之第20天】001项目挑战内容介绍 3:39
2. 【JavaScript30 系列之第20天】002语音识别代码解析 13:59
第21章:21 - Geolocation
1. 【JavaScript30 系列之第21天】001Geolocation 视频 8:46
第22章:22 - Follow Along Link Highlighter
1. 【JavaScript30 系列之第22天】001鼠标锚点动画生成教程 12:18
第23章:23 - Speech Synthesis
1. 【JavaScript30 系列之第23天】001Speech Synthesis 35:01
第24章:24 - Sticky Nav
1. 【JavaScript30 系列之第24天】导航吸附效果教程 24:30
第25章:25 - Event Capture, Propagation, Bubbling and Once
1. 【JavaScript30 系列之第25天】001DOM事件机制 9:44
第26章:26 - Stripe Follow Along Nav
1. 【JavaScript30 系列之第26天】001气泡在导航上随鼠标的位置的出现和消失 51:32
第27章:27 - Click and Drag
1. 【JavaScript30 系列之第27天】001点按、拖拽 18:19
第28章:28 - Video Speed Controller
1. 【JavaScript30 系列之第28天】001Video Speed Controller 17:01
第29章:29 - Countdown Timer
1. 【JavaScript30 系列之第29天】001倒计时项目 20:54
第30章:30 - Whack A Mole
1. 【JavaScript30 系列之第30天】001JS原生实现打地鼠游戏 37:21
大家可以点击【 查看详情】查看我的课程
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
