50天完成50个项目，目前已完成五分之一！🌻

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

为了提高我的前端技能，我在 Udemy 上购买并开始学习 Brad Traversy 的“50 天 50 个项目”。

在完成并个性化大部分任务后，以下是我在这十天里学到的东西：

第一个项目：展开卡片
如果你想让你的 HTML 元素拥有炫酷的效果，那就使用过渡效果吧！
它们确实是使用 CSS 实现动画效果的最佳方式，因为它们可以定义特定元素两种状态之间的视觉过渡。
我了解到，出于性能考虑，最好避免使用 `all` 来应用多个属性，因为它们会消耗大量 CPU 资源。以下是第一个项目中的示例，我希望使用平滑过渡来编辑元素的透明度。

第二个项目：进度步骤
就学习到的概念而言，我认为这个项目是我做过的最好的项目之一。
在彻底复习了 `position: relative`和 `position: absolute` 的工作原理及其相互关系之后，我还了解到，如果给光标设置`not-allowed`
属性，就可以弹出一个小小的禁止标志！ 而仅仅给按钮应用 `transform: scale : 09` 属性就能让它短暂地弹出，这真是令人惊叹！
此外，在使用 `::before` 和 `::after` 选择器时，即使没有实际渲染的内容，也不要忘记添加 `content` 属性。 不过，这个练习的主要收获是，我可以通过从 DOM 中获取元素，然后在 JavaScript 代码中直接更改其样式来控制元素的宽度。记住，你可以对 DOM 元素应用迭代/数组方法！第二个项目中的一个例子是，我需要让进度条在点击时具有响应式效果。在这里，每当点击圆圈（按钮）时，进度条的宽度都会增加相应的百分比。

第三个项目：旋转导航。
在编写一些特效时，我问自己：transition和transform属性之间到底有什么区别？
前者为元素应用更平滑的视觉变化，它应该相当微妙且赏心悦目。后者则真正地变换（例如移动、改变外观）元素。以下是第三个项目中的示例。在这里，我使用 transform: translateX 使元素水平移动，然后应用 transition 使变化更加平滑。

第四个项目：隐藏搜索组件。
在这个项目中，我学习了两个非常有用的 JavaScript 方法，它们可以帮助我管理 DOM 元素。`toggle ()`
方法本质上相当于依次调用 `classList.add()` 和 `classList.remove()`！只需使用 `toggle()`，每次点击元素或元素有监听器时，我的操作就会切换该元素的状态。 然后，` focus()`方法用于将焦点赋予 HTML 元素，也就是说，如果该元素可以被聚焦，则会为其添加 `focus` 属性。我在上面的示例中使用了这两个方法，这样每次点击带有 `'search'` 类的 `div` 元素时，都会为其添加 `'active'` 类，从而使输入框获得焦点。

第五个项目：模糊加载
在编写这个项目时，我深入研究了模糊（半径）函数，它能对输入图像应用高斯模糊。该函数本质上决定了屏幕上有多少像素相互融合，也就是说，值越大，模糊效果越明显；而值为 0px 时，图像则保持不变。
我还了解到，通过使用z-index属性，我可以控制多个元素的重叠方式，并决定哪些元素可见，哪些元素隐藏。在第五个项目的 CSS 文件中，我并不想对图像应用任何实际的模糊效果。

第六个项目：滚动动画。
这个项目让我很好地复习了 `:nth-of-type()` 选择器，我之前竟然不知道可以简单地写出来，而不用像往常那样用各种公式把事情搞复杂。哈哈。我希望每隔一个 div 元素就向左水平移动一个位置。

第七个项目：分屏落地页
这个项目很有趣。我的页面被分成两部分：左侧是 PlayStation 5 的广告，右侧是 Xbox 的广告。两个页面都有一个“立即购买”按钮，点击哪个按钮，页面就会展开。这个项目
很好地复习了 CSS 选择器和伪类选择器，而且 JavaScript 也相当简单。我只需根据鼠标悬停在页面的哪一侧，应用 hover-right 或 hover-left 类即可。以下示例展示了当鼠标悬停在页面左侧或离开左侧时，hover-left 类是如何应用或移除的。

第八个项目：表单波浪动画
！耶！！！我终于搞懂了`display: block`和`display: inline-block`的区别，不用再去谷歌搜索来决定这个项目里该用哪个了。简单来说，如果用`inline-block`，你可以给元素设置宽度和高度，上下边距、外边距和内边距都会生效。如果只用 ` block`，这些都不会发生，因为元素后面会换行，导致它无法与其他元素“对齐”。这里展示的是如何将 `inline-block` 应用于按钮。

第九个项目：音效板
你知道HTML里有音频标签吗？说实话，我当时既惊讶又觉得挺有意思的。简单来说，Web Audio API允许你通过将音频文件（例如mp3文件）添加到HTML文件中，然后在脚本文件中进行管理。JavaScript的play ()和pause ()方法可以让你开始和停止音频文件，避免声音重叠。这是我的项目HTML索引文件，其中我设置了六种不同的声音。脚本文件允许我遍历这些声音名称，并为每个声音添加一个事件监听器。每次我点击一个按钮，之前的声音就会停止播放（这就是需要stopSounds函数的原因），然后新的声音开始播放。

第十个项目：爸爸笑话
这个项目与其说是其他项目，不如说是一次 FetchAPI 的练习，谢天谢地，我对它的使用相当自信（不过我得提一下，我通常更喜欢用 Axios）。
使用 Fetch 有两种主要方式：async/await 语法和 .then。
我之前从未想到过一个很棒的方法，那就是创建一个变量来存储请求头和接受条件。这是一个使用 async/await 功能的示例，可以说更清晰简洁。而这是一个使用更基本的 .then 语法的示例。

等我完成课程的五分之二时再见❤️🌻😻
基娅拉