8 个激发你编程灵感的前端编码理念

我是 Indrek。掌握编程很难。没有捷径。它需要投入大量的工作。你必须尽可能多地编写代码才能精通它。

将本文中的每个想法都作为灵感来源。选择一个让你对编程充满热情的项目，然后开始构建它。

使用你喜欢的任何工具或编程语言。我还会包含你在构建每个想法时能学到的知识。

看看我的个人资料，了解之前的挑战。或者，如果你时间紧迫，又不想耗尽编程灵感， 我整理了一份包含 100 多个挑战的清单，请点击此处。

不用多说，以下是今天的编码思路。

本文最初发表于此处：https://thewholesome.dev/p/8-frontend-coding-ideas-that-will

1.动画菜单标签栏

这是一个 60 FPS 流体标题，在切换选项卡之间有动画。

动画标签栏由 abxlfazl khxrshidi 制作。

您可以使用 CSS 动画或 JavaScript 来实现流畅的 60 FPS 动画。

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

• 如何协调使用 HTML、CSS 和 JavaScript 来重新创建菜单。

• 如何使用 SVG、CSS 动画以及将两者结合起来。

2. 赛博朋克 2077 主题按钮

纯 CSS Cyber​​punk 2077 按钮😎，作者：Jhey。

漂亮的赛博朋克风格按钮。注意它的悬停效果。尝试重现一下。如果不确定怎么做，可以看看原版。

通过构建 Cyber​​punk 2077 按钮，您将学到什么：

• 如何使用 CSS 变量、关键帧和剪辑路径。

• 如何创建复杂的悬停动画。

3.棋盘与棋子

廉价的人工智能国际象棋！作者：Jake Albaugh。

自从根据沃尔特·特维斯1983年小说改编的迷你剧《后翼弃兵》大获成功后，人们对国际象棋的兴趣也一路飙升。如果你还没看过，强烈推荐你去看！

加分点：使棋盘具有互动性。

通过构建棋盘你将学到什么：

• 如何创建 8x8 网格？尝试使用 CSS Grid 来实现。

• 使用 CSS 手工雕刻棋子。

• 奖励：使用 JavaScript 使其具有交互性！

4. 项目管理仪表盘 UI

项目管理仪表板 UI 由 Aybüke Ceylan 设计。

这是用于项目管理的仪表板。监控项目并与客户聊天。

通过构建项目管理仪表板 UI，您将学到：

• 使用 CSS 和 HTML 构建简洁的 UI。

• 如何使用 WebSockets 创建聊天。

5. 新形态动画

由 masuwa 制作的 Neumorphism_animation。

新拟物化（或新拟物化）是网页元素、框架、屏幕等设计风格的现代迭代。——GitHub

通过构建新拟态动画，您将学到：

• 如何使用 CSS 和 HTML 创建流畅的动画。

6.HTML地球

HTML Earth（使用 LUME 制作）由 Joe Pea 制作。

让我们重建地球吧！对了，你注意到月亮经过太阳前方时在地球表面留下的影子了吗？

通过构建 HTML 地球你将学到：

• 如何使用 LUME 库。根据 GitHub 的介绍，LUME 是一个“工具包，可以简化从移动设备到桌面设备再到 AR/VR 等任何设备创建丰富且交互式的 2D 或 3D 体验的过程。”

• 如何使用 HTML、CSS 和 JavaScript 创建 2D 和 3D 对象。

7. 带有动画的流畅标签

看看这美景。每次换标签页的时候，都要注意这些小细节。

由 Aaron Iker 设计的 Tabbar。

通过构建带有动画的流畅标签，您将学到什么

• 60 FPS 动画的 CSS 转换。

• 如何用 CSS 或 JavaScript 创建复杂的动画？一切由你决定！

8.一杯水

一杯水 作者：Zane Wesley

这让我很想喝水。在开始解决这个难题之前，先喝一口。

通过制作一杯水，你将学到什么

• 如何使用 CSS 创建流畅的 60FPS 动画。

• 如何使用 CSS 变换和伪选择器。

结论

还在寻找更多编程灵感吗？从此告别编程灵感枯竭的烦恼！点击此处，体验我设计的一系列前端挑战。（dev.to 用户可享 25% 折扣）

感谢您的阅读，祝您编码愉快！