20 个使用 Vanilla JavaScript 的 Web 项目

使用 HTML5、CSS 和 JavaScript 从头开始​​构建 20 个迷你前端项目（无框架或库）

讲师：Brad Traversy

独家Udemy付费课程，中英文字幕，课程资料包齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

你将会学到的

• 从头开始构建 20 个前端项目
• 没有 JS 或 CSS 框架
• 现代 JavaScript (ES6+) – 箭头、获取、承诺等
• DOM 操作和事件
• 使用 CSS 和 JavaScript 制作动画
• 使用第 3 方 API 获取和 JSON
• HTML5 画布、语音 API、音频和视频
• 初学者友好

课程内容

21 个章节 • 121 个讲座 • 总时长 16 小时 7 分钟展开所有章节

介绍3 个讲座 • 9 分钟

1：表单验证器 | 介绍项目6 个讲座 • 55 分钟

2：电影座位预订 | DOM 和本地存储6 个讲座 • 59 分钟

3：自定义视频播放器 | HTML5 视频 API5 个讲座 • 36 分钟

4：汇率计算器| Fetch & JSON 简介5 个讲座 • 39 分钟

5：DOM 数组方法 | forEach，映射，过滤，排序，减少8 个讲座 • 51 分钟

6：菜单滑块和模式 | DOM & CSS5 个讲座 • 41 分钟

7：刽子手游戏| DOM、SVG、事件7 个讲座 • 1 小时 3 分钟

8：膳食查找器 | Fetch & MealDB API5 个讲座 • 58 分钟

9：费用跟踪器 | 数组方法和本地存储7 个讲座 • 52 分钟

10：音乐播放器 | HTML5 音频 API6 个讲座 • 48 分钟

11：无限滚动帖子| 获取、异步/等待、CSS 加载器6 个讲座 • 34 分钟

12：打字游戏| DOM、间隔、事件6 个讲座 • 44 分钟

13：语音文本阅读器 | 语音合成6 个讲座 • 49 分钟

14：存储卡 | CSS 效果，本地存储8 个讲座 • 1 小时 8 分钟

15：歌词搜索应用程序 | 获取、分页、Lyrics.ovh API6 个讲座 • 54 分钟

16: 放松器应用程序 | CSS 动画，setTimeout4 个讲座 • 25 分钟

17: 突围游戏 | HTML5 画布 API8 个讲座 • 1 小时 7 分钟

18：新年倒计时 | DOM、日期和时间4 个讲座 • 31 分钟

19：可排序列表 | 拖放 API6 个讲座 • 51 分钟

20：说数字猜谜游戏 | 语音识别4 个讲座 • 31 分钟

要求

• HTML、CSS 和 JavaScript 基础知识

说明

这是一个适合所有技能水平的有趣、实用和基于项目的课程。本课程中的项目旨在让你在没有框架或库的情况下使用 HTML5、CSS 和 JavaScript 构建事物。每个项目都是从头开始构建的，并且具有某种动态功能，从小型游戏到费用跟踪器再到呼吸放松应用程序。

虽然这是一门基于项目的课程，但我仍然会在进行过程中解释所有内容。这些是专为你在几个小时内完成的迷你项目。

你应该对 HTML/CSS/JS 有一些基本的了解。如果你是全新的，我建议你在 Udemy 上的 Modern HTML/CSS From The Beginning 和/或 Modern JS From The beginning 课程。本课程是两者的混合。

你将在这些项目中学到一些东西：

• 使用 HTML/CSS（无 CSS 框架）创建布局和 UI
• CSS 动画（带有 JS 触发器的过渡、关键帧等）
• JavaScript 基础
• DOM 选择和操作
• JavaScript 事件（表单、按钮、滚动等）
• 获取 API 和 JSON
• HTML5 画布
• 音频和视频 API
• 拖放
• 网络语音 API (Syth & Recognition)
• 使用本地存储
• 高阶数组方法 – forEach、map、filter、reduce、sort
• 设置时间，设置间隔
• 箭头函数
• 和更多！！

此课程面向哪些人：

• 任何想要构建一些有趣且易于中间项目的人