16个前端项目（带有设计）可帮助您提高编码技能
没有什么比构建项目来成长为开发人员更像了。教程是一种出色的学习工具。但是在某些时候，训练轮需要松开，您需要开始构建。
问题是，作为开发人员，我们常常无法使自己看起来很棒things
如果有人要我从头开始创建漂亮的东西，我什至不知道从哪里开始但是，如果设计师将设计交给我，我将很乐意编写代码。
如果您在同一条船上，Frontend Mentor为您提供了一些很棒的项目。每一篇都包括移动和桌面设计，前端样式指南（用于字体，颜色等）和基本摘要。所有资产均已提供并已预先优化，这意味着您需要中心化精力编写代码
在构建每个项目时，您可以使用任何喜欢的工具。因此，如果您想练习React，Vue，Sass，Tailwind之类的东西，就可以选择设置。
因此，事不宜迟，让我们开始第一个挑战：
1）单一价格网格组件
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS | 新手 | 自由 | 查看专案 |
这个挑战是一个完美的起点。您的任务是构建单个组件，而不是构建整个登录页面。
简要
您的用户应该能够：
- 根据组件的设备屏幕尺寸查看组件的最佳布局
- 查看桌面上的悬停状态以获取注册号召性用语
学习成果
尽管规模很小，但该项目提出了一些不错的布局挑战。这是练习Flexbox或CSS网格的绝佳机会。您还将获得构建响应组件的基础知识。
2）四卡功能部分
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS | 新手 | 自由 | 查看专案 |
在此项目中，您将面临有趣的布局测试。您将如何接近垂直居中的牌？
简要
您的用户应该能够：
- 根据设备的屏幕尺寸查看网站的最佳布局
学习成果
在布局元素时，这将是另一个建立您的信心的有用挑战。您必须选择最佳方法来对齐卡，并使它们重新对齐到移动屏幕尺寸。
3）包含单个介绍性内容的闲杂着陆页
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS | 新手 | 自由 | 查看专案 |
这项挑战将建立在其他两个挑战的基础上，并进一步提高。您需要考虑如何最好地在页面上放置和间隔元素。
简要
您的用户应该能够：
- 根据组件的设备屏幕尺寸查看组件的最佳布局
- 有关所有互动元素，请参见桌面上的悬停状态
学习成果
考虑将图像和内容彼此相邻放置。将内容缩放到移动设备而又不显得过于压缩也将是一个挑战。
4）基本服装即将推出页面
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS | 新手 | 自由 | 查看专案 |
在此挑战中，您将获得第一批JavaScript。提交表单时，您需要验证表单。哦，还有一个偷偷摸摸的布局顺序交易所，可将书面内容和图像从台式机转移到移动设备。
简要
您的用户应该能够：
- 根据设备的屏幕尺寸查看网站的最佳布局
- 查看页面上所有互动元素的悬停状态
- 提交表单时，如果出现以下情况，则会收到错误消息：
- 输入字段为空
- 电子邮件地址格式不正确
学习成果
您将学习如何在单个字段上进行基本表单验证。该项目还将进行一些布局规划，因此请务必在开始时花一些时间进行考虑。
5）带有注册表格的简介组件
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS | 新手 | 自由 | 查看专案 |
现在，您已经在单个字段上完成了表单验证，那么如何在四个字段上进行表单验证呢？另外，不要忘记确保屏幕阅读器用户可以访问输入
简要
您的用户应该能够：
- 根据设备的屏幕尺寸查看网站的最佳布局
- 查看页面上所有互动元素的悬停状态
- 提交表单时，如果出现以下情况，则会收到错误消息：
- 任何输入字段为空
- 电子邮件地址格式不正确
学习成果
到目前为止，您应该已经掌握了基本布局。因此，这里的主要学习成果是如何编写可重复使用的JavaScript代码以检查不同表单字段的有效性。
6）带切换的定价组件
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS | 初级 | 自由 | 查看专案 |
此定价组件挑战将为您带来不错的布局挑战。特别是如果您获得以下提到的奖金
简要
您的用户应该能够：
- 根据组件的设备屏幕尺寸查看组件的最佳布局
- 使用鼠标/触控板和键盘控制切换
-
奖励：仅使用HTML和CSS即可完成挑战
学习成果
如果您获得奖金，则需要仔细考虑HTML结构。您将需要完美的标记，以便能够使用伪类和兄弟选择器进行切换。
7）确保登陆页面
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS | 初级 | 自由 | 查看专案 |
通过移动导航切换，只有很少的JavaScript可以应对这一挑战。但这是您第一次在此轨道上构建多节着陆页。
简要
您的用户应该能够：
- 根据设备的屏幕尺寸查看网站的最佳布局
- 查看页面上所有互动元素的悬停状态
学习成果
在深入研究代码之前，请花一些时间计划一下。您将面临一些放置背景图案的有趣测试。
8）Fylo黑暗主题登陆页面
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS | 初级 | 自由 | 查看专案 |
返回到纯HTML和CSS。这是一个相当长的着陆页，因此您的布局技能将得到真正的测试。
简要
您的用户应该能够：
- 根据设备的屏幕尺寸查看网站的最佳布局
- 查看页面上所有互动元素的悬停状态
学习成果
挑战在于布局。尝试注意响应度，并使其在所有屏幕尺寸下都看起来不错。
9）URL缩短API登陆页面
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS，API | 中间 | 自由 | 查看专案 |
这一挑战将使您初尝从API中提取数据的初衷。您将与rel.ink API集成以构建功能齐全的URL缩短器。
简要
您的用户应该能够：
- 根据设备的屏幕尺寸查看网站的最佳布局
- 缩短任何有效的URL
- 即使刷新浏览器，也可以查看其缩短的链接列表
- 单击即可将缩短的链接复制到其剪贴板
- 提交表单时，如果出现以下情况，则会收到错误消息：
- 输入字段为空
学习成果
了解如何发出HTTP请求以及如何与外部API集成。这也是开始深入研究React或Vue等JS库/框架的好项目。另外，如果用户刷新浏览器，可以尝试使用localStorage保存缩短的链接列表。
10）管理着陆页
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS | 中间 | 自由 | 查看专案 |
该登录页面将为您的CSS技能提供不错的测试。从台式机到移动版的切换需要准确定位一些背景图案，并需要一些细节。还有一些区域需要一些JS。
简要
您的用户应该能够：
- 根据设备的屏幕尺寸查看网站的最佳布局
- 查看页面上所有互动元素的悬停状态
- 在水平滑块中查看所有推荐
- 提交时事通讯注册表单时，如果出现以下情况，则会收到错误消息：
- 输入字段为空
- 电子邮件地址格式不正确
学习成果
您从此挑战中获得的主要收益将与CSS和布局有关。如果您现在还没有这样做，您可能想尝试一个预处理器，例如Sass，以帮助保持代码的可维护性。
11）书签登录页面
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS | 中间 | 自由 | 查看专案 |
另一个着陆页挑战，以巩固您在上一个挑战中学到的知识。尽管其中包括一些棘手的元素。首先，背景图案不包含在下载内容中，因此您需要自己编写代码。其次，我们有几个带有功能选项卡和“常见问题”部分的基于JS的组件。
简要
您的用户应该能够：
- 根据设备的屏幕尺寸查看网站的最佳布局
- 查看页面上所有互动元素的悬停状态
- 提交新闻通讯表单时，如果出现以下情况，则会收到错误消息：
- 输入字段为空
- 电子邮件地址格式不正确
学习成果
在创建相当复杂的布局时，这一挑战将有助于巩固您的知识并完善工作流程。这是使用预处理器的另一个好机会。如果您现在对纯CSS / Sass感到满意，您甚至可以尝试使用Tailwind之类的UI框架。
12）带有过滤的工作清单
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS | 中间 | 自由 | 查看专案 |
现在，您已经对JavaScript有所了解，让我们练习一些过滤。在此挑战中，您需要按所选类别过滤工作清单。有两种方法可供选择：
-
选项1：使用HTML根据类别过滤工作清单
data-属性。在此选项中，您将使用已存在于index.html文件。 -
选项2：使用本地
data.json文件以提取数据，然后动态添加内容。如果您想练习像React，Vue或Svelte这样的JS库/框架，这将是完美的。
简要
您的用户应该能够：
- 根据设备的屏幕尺寸查看网站的最佳布局
- 查看页面上所有互动元素的悬停状态
- 根据所选类别过滤工作清单
学习成果
您将学习如何使用JavaScript过滤DOM中的项目。这是构建客户端应用程序时的一项关键技能，因此，这一挑战将是不二之选
13）石头剪刀布游戏
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS | 高级 | 自由 | 查看专案 |
让我们暂时离开登录页面和过滤器，然后制作一个游戏。这个石头剪刀布游戏将测试您的CSS技能和JS印章。如果您想冒险，甚至可以玩摇滚，纸质，剪刀，蜥蜴，史波克的奖金游戏
对于那些不了解岩石，纸张，剪刀，蜥蜴，史波克的人，请看一下：
简要
您的用户应该能够：
- 根据设备的屏幕尺寸查看游戏的最佳布局
- 在计算机上播放石头，剪刀，剪刀
- 刷新浏览器后保持分数状态（可选）
-
奖励：在计算机上玩石头，纸，剪刀，蜥蜴，史波克（可选）
学习成果
这项挑战将使您基于逻辑的问题解决技能更加出色。如果可以的话，尝试推动自己建立奖励游戏。如果用户刷新浏览器，这是另一个练习使用localStorage维护游戏状态的机会。
14）带有颜色主题切换器的REST国家API
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS | 高级 | 自由 | 查看专案 |
这是一个开始真正测试您的技能并与第三方API集成的完美挑战。您将使用REST国家API从中提取数据。这是练习JS库/框架的完美选择
简要
您的用户应该能够：
- 从首页上的API查看所有国家
- 使用搜寻国家
input领域 - 按地区过滤国家
- 单击一个国家以在单独的页面上查看更多详细信息
- 点击进入详细页面上的边境国家
- 在明暗模式之间切换配色方案（可选）
学习成果
在此挑战中，您会学到很多东西。您可以使用它来练习自己喜欢的任何事情，因此请努力推动自己。
15）myteam多页网站
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS | 高级 | 保费 | 查看专案 |
这是我们的高级（付费）挑战之一，它为建立一个多页网站提供了绝佳的机会，该网站在您的投资组合中看起来很棒。如果您想体验与成为专业开发人员最接近的感觉，那么我们面临的高级挑战就在这里。移动，平板电脑和台式机设计是我们面临的高级挑战。它们还包括原始的Sketch设计文件和一个简单但专业的设计系统。
简要
您的用户应该能够：
- 查看每个页面的最佳布局，具体取决于其设备的屏幕尺寸
- 查看整个网站上所有互动元素的悬停状态
- 出现以下情况时，请在“关于”页面上查看每个团队成员的正确内容：
+单击图标 - 提交联系表时，如果出现以下情况，则会收到错误消息：
- 的
Name，Email Address要么Message fields为空应显示“此字段为必填” - 的
Email Address格式不正确应显示“请使用有效的电子邮件地址”
- 的
学习成果
如果您从未构建过多页网站，则应通过完成此挑战来学习负载。因为它是一个较大的站点，所以必须首先对其进行计划。专注于结构化CSS / Sass / Styles（或其他），以保持代码可伸缩。 ITCSS，SMACSS和7：1是一些很好的模式。它们都是很好的方法，并且在构建更大的网站时会大有帮助。
16）极简投资组合网站
| 要求 | 困难 | 类型 | 网址 |
|---|---|---|---|
| HTML，CSS，JS | 中间 | 保费 | 查看专案 |
如果您已经走了这么远，那么您肯定会需要一个漂亮的投资组合网站来展示您的辛勤工作这正是您可以使用此挑战的目的。将其构建到设计中，然后对其进行自定义以使其成为您自己的。
简要
您的用户应该能够：
- 查看每个页面的最佳布局，具体取决于其设备的屏幕尺寸
- 查看整个网站上所有互动元素的悬停状态
- 点击首页上的“关于我”号召性用语，然后将屏幕向下滚动到下一部分
- 提交联系表时，如果出现以下情况，则会收到错误消息：
- 的
Name，Email Address要么Message字段为空应显示“此字段为必填” - 的
Email Address格式不正确应显示“请使用有效的电子邮件地址”
- 的
学习成果
这个挑战是练习编写可重用和可维护的代码的另一个绝佳机会。如上所述，手机，平板电脑和台式机设计面临着严峻的挑战，其中包括原始的Sketch设计文件。因此，您可以真正地练习构建一个完全响应的网站。
继续编码
如果您已经走了那么远，那就做得好 Frontend Mentor上还有更多免费的挑战，因此请查看并浏览。
每当您在平台上提交解决方案时，您都会收到一份自动报告，其中包括：
- 无障碍审核
- HTML验证检查
这些可以帮助您发现代码问题。您还将能够收到社区的反馈，因此请务必在提交解决方案时提出问题
了解更多信息的另一种好方法是亲自编写一些代码审查因此，请随时潜入并开始回答问题并提供反馈。您将学习负载，它也具有帮助他人的好处 ?
我希望您发现这些挑战对于实践和建立您的投资组合以及作为开发人员的信心很有帮助。
我一直很喜欢听到反馈和建议，因此，如果有任何疑问，请随时告诉我