【Udemy中英字幕】30 HTML CSS & JavaScript Projects A Beginner’s Guide to JS

30 个 HTML、CSS 和 JavaScript 项目 JS 初学者指南

连续 30 天每天构建 HTML、CSS 和 JavaScript 项目，并创建您的作品集作为初学者前端 Web

讲师：Vijay Kumar

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

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

您将学到什么

• 现代 CSS 动画和自定义属性。
• DOM 操作技术。
• JavaScript 中的事件处理。
• 用于数据操作的数组方法。
• 使用 JavaScript 进行日期操作。
• 使用纯 JavaScript、HTML5 和 CSS3 构建 30 个项目。
• 有效地利用 CSS 进行基本应用。
• 编写可维护、干净且高性能的 JavaScript 代码。
• 使用 JavaScript 创建交互式 Web 元素。
• 作为初级前端 Web 开发人员构建可靠的投资组合。
• 在一些基本应用中使用 CSS 的绝妙方法
• 编写可维护、干净且高性能的 JavaScript 代码

探索相关主题

要求

• HTML、CSS 和 JavaScript 的基础知识
• PC 或 Mac

描述

大家都发生什么事了？

欢迎参加 30 天 30 个项目课程！

这是一个适合初学者的项目课程，包含 HTML5、CSS3 和 JavaScript 的所有现代功能！

那么，开启一段探索之旅吧！我们专为前端 Web 开发者初学者设计的“30 天 30 个项目”课程，将为你带来精彩的学习体验。在一个月的时间里，你将深入学习 HTML5、CSS3 和 JavaScript，每天创建一个新项目，从而积累经验，巩固技能。

在本课程中，您将探索现代CSS 动画、自定义属性、DOM 操作、事件、数组方法、数据操作等。通过 30 个使用纯 JavaScript、HTML5 和 CSS3 的项目，您将获得编写可维护、简洁且高性能代码的实践经验。每个项目都是从零开始构建的，让您能够了解开发过程的各个方面。

无论您是想温习基础知识，还是想深入学习现代 Web 开发技术，本课程都能满足初学者和中级水平的学习需求。项目复杂程度各异，确保提供适用于实际场景的全面学习体验。

如果您已准备好迎接挑战，那就加入我们，踏上这段激动人心的旅程，提升您作为前端 Web 开发者的技能吧！无论您是想丰富个人作品集，还是开启新的职业道路，这些项目对于任何渴望掌握 JavaScript 并在 Web 开发领域取得卓越成就的人来说都至关重要。

课程结构：

那么我们要建设什么呢？30个项目如下：

第 1 天：语音转文本项目：创建一个项目，用户可以对着设备的麦克风说话，并将他们的语音转换成文本。

第 2 天：钢琴应用程序：开发一个虚拟钢琴应用程序，用户可以使用键盘或鼠标弹奏音符和和弦。

第 3 天：文本转语音应用程序：构建一个将书面文本转换为口头语言的应用程序，让用户可以收听他们输入的文本。

第 4 天：机器人笑话生成器：制作一个项目，以机器人语音或文本格式生成随机笑话。

第 5 天：HSL 颜色生成器：开发一个使用 HSL（色调、饱和度、亮度）颜色模型生成颜色的工具，允许用户自定义和预览颜色。

第 6 天：模态应用程序：创建一个模态弹出窗口，在主应用程序界面上显示内容或消息。

第 7 天：数字时钟：设计一个显示当前时间并实时更新的数字时钟。

第 8 天：颜色翻转器：构建一个随机选择和显示颜色的项目，为用户提供一种有趣且互动的方式来探索不同的颜色组合。

第 9 天：百分比计算器：开发一个能够计算各种数学运算百分比的计算器应用程序。

第 10 天：计算器应用程序：创建一个功能齐全的计算器应用程序，支持基本的算术运算。

第 11 天：少读多读：实现一项功能，截断长文本块并提供“阅读更多”按钮来展开和折叠文本内容。

第 12 天：星级评定：设计一个星级评定组件，允许用户通过选择一定数量的星星来对服务进行评级。

第 13 天：动画计数器：开发一个在网页加载时呈现动画的计数器。

第 14 天：十六进制到二进制转换器：构建一个将十六进制数转换为二进制数的工具。

第 15 天：超棒光标：使用创意和交互效果自定义网页上的光标，以增强用户体验。

第 16 天：快速 URL 应用程序：创建一个保存 URL 的项目，以便快速访问网站内容。

第 17 天：打字文本效果：实现打字效果，使文本逐渐显示出来，就像实时打字一样。

第 18 天：图像比较滑块：设计一个图像滑块，允许用户使用可拖动滑块并排比较两幅图像。

第 19 天：搜索功能：开发一个搜索功能，允许用户输入查询并从数据集中检索相关结果。

第 20 天：字数统计器：构建一个工具，统计给定文本输入中的单词、字符和句子的数量。

第 21 天：动态颜色变换器：创建一个根据用户交互或预定义触发器动态更改网页背景颜色的功能。

第 22 天：框阴影生成器：设计一个生成具有可自定义参数的 CSS 框阴影效果的工具。

第 23 天：图像轮播项目：开发一个图像轮播或幻灯片组件，以过渡方式显示一系列图像。

第 24 天：浏览图像文件上传：实现一项功能，允许用户从其设备的文件系统上传图像。

第 25 天：字符串的乐趣：创建一个执行各种字符串操作任务（例如反转和计数字符串）的项目。

第 26 天：货币/现金计算器：构建一个专门用于执行涉及货币或现金金额的财务计算的计算器应用程序。

第 27 天：年龄计算器：开发一个根据一个人的出生日期和当前日期计算其年龄的工具。

第 28 天：超棒的金融存款计算器：设计一个用于计算复利的计算器。

第 29 天：身体质量指数计算器：创建一个计算器应用程序，根据一个人的身高和体重计算其身体质量指数 (BMI)。

第 30 天：一个可爱的爱情计算器应用程序：制作一个有趣而轻松的应用程序，根据两个人的姓名或其他输入来计算他们之间的兼容性或“爱情分数”。

JavaScript是最受欢迎的编程 语言之一，并且正在攀升至顶峰！

为什么要学习 JavaScript？

答案很简单，去谷歌搜索“十大编程语言”。如果JavaScript 排名前五，那就去学习这门课程。如果不放心，就去谷歌搜索“顶级公司开发人员最需要的十大编程语言”。如果JavaScript 排名前五，那就去学习这门课程。

本课程适合哪些人：

• 第一次学习 JavaScript？已经在使用 JavaScript 并想精通这门语言？本课程正适合你！

• 本课程适合任何想要使用 JavaScript 启动应用程序、转行或作为 JavaScript 开发人员自由职业的人。

什么是 JavaScript？

JavaScript是一种脚本语言，它使您能够创建动态更新的内容、控制多媒体、动画图像以及几乎所有其他功能。

谁应该参加这门课程？初学者希望巩固 HTML、CSS 和 JavaScript 基础，以及那些希望转行或成为 JavaScript 自由开发者的人。JavaScript 在编程领域的突出地位，使得这门课程对于任何渴望在 Web 开发领域蓬勃发展的人来说都是无价之宝。

本课程适合哪些人：

• 想要创建可靠作品集的初级开发者
• 想要创建可靠作品集的初级前端开发人员
• 初级 HTML、CSS 和 JavaScript 开发人员
• 初级 Web 开发人员
• JavaScript 初级开发者
• JavaScript 开发人员正在寻找投资组合项目
• 第一次学习 JavaScript？已经在使用 JavaScript 并想精通这门语言？本课程正适合你！
• 本课程适合任何想要使用 JavaScript 启动应用程序、转行或作为 JavaScript 开发人员自由职业的人。