16 个前端项目（带设计）可帮助您提高编码技能

没有什么比构建项目更能帮助开发者成长了。教程是绝佳的学习工具。但到了一定时候，你需要放下训练，开始真正地构建。

问题是，作为开发人员，我们自己往往不擅长让事情看起来很棒😅

如果有人让我从零开始创作一件精美的作品，我甚至都不知道该从何下手！但如果设计师给我一个设计方案，我肯定会非常乐意把它写出来。

如果您也遇到同样的问题，Frontend Mentor 为您准备了一些很棒的项目。每个项目都包含移动端和桌面端设计、前端风格指南（包括字体、颜色等）以及基本简介。所有资源均已提供并预先优化，这意味着您只需专注于编写代码！

构建每个项目时，你可以使用任何你喜欢的工具。所以，如果你想练习 React、Vue、Sass、Tailwind 之类的东西，你可以选择你的设置。

那么，事不宜迟，让我们开始第一个挑战：

1）单一价格网格组件

这个挑战是一个完美的起点。你的任务不是构建整个落地页，而是构建一个单独的组件。

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看组件的最佳布局
• 在桌面上查看“注册”号召性用语的悬停状态

学习成果

虽然项目规模不大，但这个项目却带来了一些不错的布局挑战。这是一个练习 Flexbox 或 CSS Grid 布局的绝佳机会。你还将学习构建响应式组件的基础知识。

2）四卡特色部分

在这个项目中，你将面临一个有趣的布局测试。你会如何处理垂直居中的卡片？

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局

学习成果

这将是另一个有用的挑战，可以增强你布局元素时的信心。你必须选择最佳的卡片对齐方式，并根据移动设备屏幕尺寸重新调整它们。

3）只有一个介绍部分的 Huddle 登陆页面

这个挑战将以前两个挑战为基础，并更上一层楼。你需要思考如何在页面上最佳地定位和分配元素。

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看组件的最佳布局
• 查看所有交互元素在桌面上的悬停状态

学习成果

考虑一下图片和内容的并排放置。将内容缩放到移动设备而不使其显得过于拥挤也是一个挑战。

4）Base Apparel 即将推出页面

你将在这个挑战中第一次接触 JavaScript。你需要在提交表单时进行验证。哦，对了，从桌面端到移动端，文字内容和图片的布局顺序会进行巧妙的互换。

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局
• 查看页面上所有交互元素的悬停状态
• 如果出现以下情况，提交表单时会收到错误消息：
  • 输入字段为空
  • 电子邮件地址格式不正确

学习成果

您将学习如何对单个字段进行基本的表单验证。这个项目还需要一些布局规划，所以请务必在开始时花一些时间仔细考虑。

5）带有注册表单的介​​绍组件

现在你已经完成了单个字段的表单验证，那么在四个字段上也进行验证怎么样？另外，别忘了确保屏幕阅读器用户可以访问这些输入！

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局
• 查看页面上所有交互元素的悬停状态
• 如果出现以下情况，提交表单时会收到错误消息：
  • 任何输入字段为空
  • 电子邮件地址格式不正确

学习成果

现在你应该已经很好地掌握了基本的布局。所以这里的主要学习成果是如何编写可重用的 JavaScript 代码来检查不同表单字段的有效性。

6）带切换的定价组件

这项定价组件挑战将为你带来一场精彩的布局挑战。尤其如果你选择获得下面提到的奖励！

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看组件的最佳布局
• 使用鼠标/触控板和键盘控制切换
• 奖励：仅使用 HTML 和 CSS 完成挑战

学习成果

如果你追求额外奖励，你需要仔细思考你的HTML结构。你需要完美的标记才能在切换按钮中使用伪类和兄弟选择器。

7）确保落地页

本次挑战仅涉及少量 JavaScript，用于移动导航切换。但这将是你第一次在这个赛道上构建多部分着陆页。

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局
• 查看页面上所有交互元素的悬停状态

学习成果

在深入代码之前，请花点时间规划一下。你将面临一些关于放置背景图案的有趣测试。

8）Fylo 深色主题登陆页面

回到纯 HTML 和 CSS 的页面。这是一个相当长的落地页，所以你的布局技巧将受到真正的考验。

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局
• 查看页面上所有交互元素的悬停状态

学习成果

本次挑战的核心在于布局。请尽量关注响应速度，确保其在所有屏幕尺寸下都能呈现良好的视觉效果。

9）URL缩短API登陆页面

本次挑战将带你初次体验从 API 中提取数据。你将与rel.link API集成，构建一个功能齐全的 URL 缩短器。

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局
• 缩短任何有效的 URL
• 即使刷新浏览器后，仍可查看其缩短的链接列表
• 只需单击一下即可将缩短的链接复制到剪贴板
• 如果出现以下情况，提交表单时会收到错误消息：
  • 输入字段为空

学习成果

学习如何发出 HTTP 请求并与外部 API 集成。这也是一个不错的项目，可以让你开始深入研究 React 或 Vue 等 JS 库/框架。此外，还可以尝试使用 localStorage 在用户刷新浏览器时保存缩短的链接列表。

10）管理登陆页面

这个落地页将很好地考验你的 CSS 技能。其中有一些背景图案需要准确定位，还有一些从桌面端切换到移动端的小细节。此外，还有一些区域需要用到 JS。

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局
• 查看页面上所有交互元素的悬停状态
• 通过水平滑块查看所有评价
• 如果出现以下情况，提交新闻稿注册表单时会收到错误消息：
  • 输入字段为空
  • 电子邮件地址格式不正确

学习成果

本次挑战的主要收获将与 CSS 和布局相关。如果您还没有尝试过，不妨尝试一下预处理器，例如 Sass，它能帮助您的代码保持可维护性。

11）书签登陆页面

另一个落地页挑战，旨在巩固你在上一个挑战中学到的知识。不过，这次挑战包含一些比较棘手的元素。首先，背景图案不包含在下载资源中，所以你需要自己编写代码。其次，我们提供了一些基于 JS 的组件，其中包含功能选项卡和常见问题解答部分。

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局
• 查看页面上所有交互元素的悬停状态
• 如果出现以下情况，提交新闻稿表单时会收到错误消息：
  • 输入字段为空
  • 电子邮件地址格式不正确

学习成果

这项挑战将有助于巩固你的知识，并在创建相当复杂的布局时优化工作流程。这也是一个使用预处理器的好机会。如果你现在已经熟悉纯 CSS/Sass，你甚至可以尝试使用像 Tailwind 这样的 UI 框架。

12）可筛选的职位列表

现在你已经对 JavaScript 有了一定的了解，让我们来练习一下筛选功能。在这个挑战中，你需要根据所选的类别筛选职位列表。有两种方法可供选择：

• 选项 1：使用 HTML 属性根据类别筛选职位列表data-。在此选项中，您将使用文件中已存在的硬编码内容index.html。
• 选项 2：使用本地data.json文件拉取数据，然后动态添加内容。如果你想练习 React、Vue 或 Svelte 之类的 JS 库/框架，这将是完美的选择。

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局
• 查看页面上所有交互元素的悬停状态
• 根据所选类别筛选职位列表

学习成果

你将学习如何使用 JavaScript 过滤 DOM 中的元素。这是构建客户端应用程序的一项关键技能，因此这项挑战将是一次绝佳的练习！

13）石头、剪刀、布游戏

让我们暂时放下落地页和过滤器，来构建一个游戏。这个“石头、剪刀、布”游戏将考验你的 CSS 技能和 JS 能力。如果你喜欢冒险，甚至还有一个“石头、剪刀、布、蜥蜴、史波克”的奖励游戏！

对于那些不知道石头、剪刀、布、蜥蜴、史波克的人来说，请看一下这个：

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看游戏的最佳布局
• 与电脑玩石头、剪刀、布
• 刷新浏览器后保持分数状态（可选）
• 奖励：与计算机玩石头、剪刀、布、蜥蜴、史波克(可选)

学习成果

这项挑战将充分考验你的逻辑解题能力。如果可以的话，尽量挑战自己完成奖励游戏。这也是练习使用 localStorage 在用户刷新浏览器时保持游戏状态的另一个机会。

14）带有颜色主题切换器的 REST 国家 API

这是一个完美的挑战，可以真正检验你的技能，并帮助你集成第三方 API。你将使用REST 国家/地区API 来提取数据。这非常适合练习 JS 库/框架！

简短的

您的用户应该能够：

• 在主页上通过 API 查看所有国家
• input使用字段搜索国家
• 按地区过滤国家
• 点击某个国家/地区即可在单独的页面上查看更多详细信息
• 点击详情页面，查看边境国家
• 在明暗模式之间切换配色方案（可选）

学习成果

你会在这次挑战中学到很多东西。你可以用它来练习任何你喜欢的东西，所以努力挑战自己吧。

15）myteam 多页网站

这是我们的高级（付费）挑战之一，它提供了一个绝佳的机会来构建一个多页面网站，让它成为您作品集中的亮点。如果您想体验最接近专业开发者的感觉，我们的高级挑战就是您的理想之选。我们的高级挑战包含移动端、平板电脑和桌面端的设计。它们还包含原始的 Sketch 设计文件和一个简洁但专业的设计系统。

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看每个页面的最佳布局
• 查看整个网站所有交互元素的悬停状态
• +单击图标后，可在“关于”页面上查看每个团队成员的正确内容
• 如果出现以下情况，提交联系表单时会收到错误消息：
  • 、Name或Email Address为Message fields空时应显示“此字段为必填项”
  • 格式Email Address不正确应该显示“请使用有效的电子邮件地址”

学习成果

如果您从未构建过多页网站，完成这项挑战应该能让您受益匪浅。由于网站规模较大，因此必须先进行规划。专注于构建 CSS/Sass/样式（或其他任何内容），以保持代码的可扩展性。一些值得借鉴的优秀模式包括 ITCSS、SMACSS 和 7:1。它们都是很棒的方法，在构建大型网站时将发挥巨大作用。

16）极简主义作品集网站

如果你已经走到这一步，那么你肯定需要一个美观的作品集网站来展示你的辛勤工作！这正是你利用这个挑战的目的。根据设计进行构建，然后进行自定义，打造你自己的作品集网站。

简短的

您的用户应该能够：

• 根据设备的屏幕尺寸查看每个页面的最佳布局
• 查看整个网站所有交互元素的悬停状态
• 点击主页上的“关于我”号召性用语，然后让屏幕向下滚动到下一部分
• 如果出现以下情况，提交联系表单时会收到错误消息：
  • Name、Email Address或字段Message为空时应显示“此字段为必填项”
  • 格式Email Address不正确应该显示“请使用有效的电子邮件地址”

学习成果

这项挑战是练习编写可重用且可维护代码的另一个绝佳机会。正如我上面提到的，高级挑战包含移动设备、平板电脑和桌面设计，并包含原始 Sketch 设计文件。因此，您可以真正练习构建一个完全响应式的网站。

继续编码吧！

如果你已经读到这里，恭喜你！ Frontend Mentor上还有更多免费挑战，欢迎查看并浏览。

每当您在平台上提交解决方案时，您都会收到一份自动报告，其中包含：

• 可访问性审计
• HTML 验证检查

这些可以帮助您发现代码中的问题。您还可以收到来自社区的反馈，所以提交解决方案时一定要提出问题！

另一个学习的好方法是亲自写一些代码评审！所以，请尽情投入，开始回答问题并提供反馈。你会学到很多东西，还能帮助别人！🙂

我希望您发现这些挑战有助于实践并建立您作为开发人员的投资组合和信心。

我总是喜欢听到反馈和建议，所以如果您有任何意见，请随时告诉我！