建设项目对于学习编程非常重要。当你创建一个项目时，你扩展了自己的作品集，并学会如何将你的技能应用到新的情境中。

我们在freeCodeCamp.org西班牙语YouTube频道发布了一个2小时的课程，将一步步指导你使用HTML、CSS和JavaScript构建3个项目。你将通过构建响应式的导航栏（含下拉菜单）、滑块和一个带有自定义模态的落地页来练习你的技能。

如果你有说西班牙语的朋友，欢迎你与他们分享这篇文章的西班牙语版本。

乔丹·亚历山大·克鲁兹·加西亚教授这门课程。他是一位热爱分享知识，教授他人CSS神奇世界的网页开发者。

💡 提示：请注意，课程侧重于HTML和CSS，但也需要基本的JavaScript知识来实现交互性。

HTML、CSS和JavaScript

HTML代表超文本标记语言，CSS代表层叠样式表。虽然HTML提供了网站的结构和内容，但CSS决定了内容的显示方式。它控制着网站的视觉方面，如字体、颜色、布局、间距和动画。

使用CSS，您可以轻松地为不同的屏幕尺寸创建不同的样式和布局，使您的网站在台式机、平板电脑和移动设备上看起来很棒。

💡 提示：适应不同屏幕尺寸的网站被称为”响应式网站”。

我们通常将CSS写在一个外部文件中，我们称之为”样式表”。然后，我们将这个样式表链接到HTML文件中，根据CSS选择器和属性将所有样式应用于相应的HTML元素。

将网站的内容与其展示分离非常有帮助。这样做可以得到一个更易维护的项目结构和一个更高效的渲染过程，因为浏览器可以更快地渲染结构，同时在后台下载CSS样式。

基本上，CSS是创建我们今天看到的漂亮、视觉和用户友好的网站的必备工具。

JavaScript为网站增加了交互性。它将普通元素转换为交互式元素，以创建引人入胜的用户体验。

使用HTML、CSS和JavaScript创建项目（西班牙语）

太棒了。现在您更了解HTML、CSS和JavaScript了，让我们来看看在课程中您将构建的项目。

项目1：导航栏

您将首先构建一个带有下拉菜单的导航栏。这个导航栏将是响应式的，因此它会展开或缩小以适应屏幕的大小。如果屏幕太小，它将自动转换为侧边栏。

💡提示： 主要选项将始终显示。当用户点击“关于”或“项目”时，将显示带有额外选项的下拉菜单。

桌面版本

这里你可以看到桌面版本。

移动版本

这是在小设备上你会看到的移动版本。

💡 提示： 这种隐藏和切换导航栏的技术被非常频繁地使用，以尽可能优化内容的空间。

项目2：滑块

接下来，你将构建一个有三个位置的滑块，当用户点击左右箭头时，滑块会改变位置。每个位置都将有一个标题，一个简短的段落和一个圆形图片。

💡提示： 滑块对于分享用户反馈、引语和评论很有帮助。

项目3：落地页

最后，你将逐步使用CSS Grid构建一个落地页。

当用户点击“加入我们！”按钮时，将显示一个自定义模态框。你将逐步使用HTML、CSS和JavaScript实现这个模态框。

如果你已经准备好开始练习你的HTML、CSS和JavaScript技能，请查看freeCodeCamp.org西班牙语YouTube频道上的课程：

✍️ 课程由Jordan Alexander Cruz Garcia（AlexCG）创建。