以下是 7 个有趣又具有挑战性的前端编程创意，你可以动手实践。 

编程是一门很难精通的学科。我发现掌握编程的最佳方法之一就是尽可能多地进行实践。努力终有回报——尤其是在编程领域。

如果你是第一次阅读这类文章，它们的作用主要是启发灵感。选择一个能激发你编程热情的挑战，然后开始动手实现它。

你可以使用任何你喜欢的工具来完成挑战。所以，如果你有什么想练习的技巧，不妨试试看。

如果你时间紧迫，又不想缺少编程灵感—— 我在这里整理了一份包含 100 多个挑战的清单。

注：请同时查看挑战的原始来源。

事不宜迟，以下是挑战内容！

1. “标签栏动画”——仅使用 CSS 构建

GIF

一个外观精美的标签页，鼠标悬停或点击图标时都会有动画效果。请特别留意这些细微的动画效果。 

“标签栏动画 - 仅使用 CSS” - 作者：Milan Raring

来源：https ://codepen.io/milanraring/pen/qBEPzKB

通过构建标签栏动画，您将学到什么

• 如何使用高级 CSS 概念，例如变换、动画、过渡等。

2. 众筹产品页面

编写众筹产品页面的代码，并尽可能使其外观与设计稿保持一致。点击此处查看挑战页面，了解更多详情和说明。 

“众筹产品页面”

来源：https://www.frontendmentor.io/challenges/crowdfunding-product-page-7uvcZe7ZR

通过构建众筹产品页面，您将学到什么

• 确认认捐后，支持者总数会增加一人。
• 切换显示该产品是否已添加到书签。
• 交互式组件的 CSS 悬停状态。
• 使用 CSS 和 HTML 创建流畅丝滑的布局。

3.“CSS冒险包”

我们要重返校园了——确切地说是编程学校。来看看布雷登·科耶尔（Braydon Coyer）仅用 CSS 制作的这款超棒的冒险包吧。

《CSS冒险包》——作者：布雷登·科耶

来源：https ://codepen.io/braydoncoyer/pen/KKNRaKQ

通过构建 CSS 冒险包，您将学到什么

• 如何使用HTML和CSS绘制现实生活中的物体。
• 如何使用CSS变量。

4. 启动倒计时

我们都见过倒计时器。为什么不自己做一个呢？试着搭建一个倒计时器，并尽可能使其外观与设计图接近。

“启动倒计时计时器”

来源：https ://www.frontendmentor.io/challenges/launch-countdown-timer-N0XkGfyz-

通过构建发射倒计时计时器，您将学到什么

• 每秒倒计时一次的计时器

• 奖励积分：当数字发生变化时，从中间翻牌。

5. Substack 阅读器克隆

您订阅的任何 Substack 新闻简报都会自动显示在阅读器中。如果您愿意，也可以添加第三方 RSS 源。

注意：挑战内容仅限于重现前端布局。您可以根据需要使用任何虚拟数据。

Substack 阅读器 -  https://reader.substack.com/inbox

通过构建 Substack 阅读器克隆，您将学到什么

• 如何使用 CSS 和 HTML 重新创建一个外观现代的应用程序。
• 加分项：您可以使用任何新闻简报聚合器 API 来实现其功能。 

6. 足球比赛记分卡组成部分

尝试制作足球比赛记分卡，并尽可能使其外观与设计稿保持一致。不要忽略细节，例如 CSS 阴影和图标。

“足球（英式足球）比赛得分组成部分”- 作者：Håvard Brynjulfsen

来源：https ://codepen.io/havardob/pen/MWKWZxZ

通过构建足球比赛记分卡组件，您将学到什么

• 如何协调使用 CSS 和 HTML 来创建美观的卡片。
• 高级 CSS 功能，例如阴影和变量。

7. 任务管理界面

瞧瞧这界面多漂亮！你是不是也希望所有应用都像这款一样赏心悦目？点击这里查看完整版。 

“任务管理用户界面”——作者：Aaron McGuire

来源：https://codepen.io/aaronmcg/pen/GRjaRva

通过构建任务管理用户界面，您将学到什么

• 如何使用 CSS、HTML 和 JavaScript 构建精美的应用程序

结语
感谢阅读。祝您编程愉快！

还在寻找更多编程灵感？再也不用担心灵感枯竭了！点击这里获取我设计的众多前端挑战题。