掌握前端和 Web 开发的 10 个项目

介绍

从第一天开始通过动手编写代码来学习是进入编码的最酷的方法之一，每当你迈出一小步，无论是修复错误还是添加新功能，你都能感受到多巴胺的提升！

您可能会因为不知道如何构建某些东西或前进而很快陷入困境，但这就是编码的全部意义所在，当您遇到困难时，您需要找到一种方法来实现和交付功能，阅读文档，学习如何学习以及如何用谷歌搜索，但每次你都会好一点...

...完成整个项目的那一刻真是太棒了！你的作品集 +1，学习新技能和成就感都是独一无二的。

让我介绍另外 10 个您可以构建的项目，以提高您的编码技能 x10！

虽然我厚颜无耻地推销，但是您可以使用USERS8000 -80% 促销代码获得订阅，释放您的编码能力，跳上代码学习列车，如果您认真学习，则可以在 2-3 个月内申请工作。

让我们深入研究这些项目吧！🤿

1.神奇宝贝图鉴

把它们全都抓起来！啊，这勾起了很多回忆，让我们用所有物种创建你自己的神奇宝贝词典吧！

显然，您将了解有关 Pokémons 的更多信息……以及有关无限加载、动态渲染和 RWD、交互式搜索面板、排序、过滤和数据处理的详细视图的 API 集成的更多信息！

牌

1. API 配置

2. UI 渲染

3. 搜索面板

4. 排序功能

5. 筛选器

6. 神奇宝贝详情

如何创建教程

• YouTube 视频

• HackerNoon 文章

其他资源

• 带有项目文档的 Glitch 模板

• 带有项目文档的 GitHub 模板

2.音乐播放器

这是一个重新创建您最喜爱的音乐播放器并了解 HTML（和 CSS 样式）中的音频控制的绝佳方法。

您将了解有关 UI 控件、数据处理、事件处理、音频播放以及酷炫的 UX/UI 设计的更多信息。

牌

1. UI 逻辑

2. 播放按钮

3. 暂停按钮

4. 重播按钮

5. 循环按钮

6. 时间滑块

7. 下一步按钮

8. 上一个按钮

9. 静音按钮

10. 取消静音按钮

11. 音量滑块

如何创建教程

• YouTube 视频

• 中篇文章

其他资源

• 带有项目文档的 Glitch 模板

• 带有项目文档的 GitHub 模板

3.代码编辑器

重新创建 JSFiddle 或 CodePen 等网站的主要功能。🤩

您将了解 JavaScript 交互性、CSS 灵活性（flexbox/grid 布局）、第三方库集成（例如 CodeMirror）以及一些本地存储，以便在用户会话之间保留代码。

牌

1. 导航栏

2. 代码区域

3. 代码预览

4. 调整垂直条的大小

5. 更改视图按钮

6. 代码编辑器库

7. 响应式网页设计

8. 其他案件

如何创建教程

• YouTube 视频

• SmashingMagazine文章

其他资源

• 带有项目文档的 Glitch 模板

• 带有项目文档的 GitHub 模板

4.测验应用程序

创建一个有趣的测验应用程序，其中包含来自不同类别的 10 个随机生成的问题，以便轻松玩并测试您的知识。

您将了解 API 集成（Open Trivia DB API）、交互式 UI 开发、问题和结果页面之间的转换状态管理以及响应式设计（RWD）。

牌

1. API 配置

2. 主页

3. 测验生成

4. 问题逻辑

5. 最后一个问题

6. 结果栏

7. 结果答案

8. 粘性导航

9. 平板电脑设计

10. 移动设计

如何创建教程

• YouTube 视频

• GeeksForGeeks 文章

其他资源

• 带有项目文档的 Glitch 模板

• 带有项目文档的 GitHub 模板

5.查找电影

创建您的应用程序以快速预览特色电影和电视剧，搜索您喜欢的电影并查看其详细信息页面！

您将学习从外部 API 获取数据、具有去抖动功能的动态搜索技术、现代 UX/UI 设计以及带有数据分页的无限滚动。

牌

1. API 配置

2. 搜索栏

3. 今日精选栏目

4. 首映及公告部分

5. 详细信息页面

6. 骨骼动画

7. 错误处理

8. 最近搜索

9. 骨骼动画

10. 错误处理

如何创建教程

• YouTube 视频

• 中篇文章

其他资源

• 带有项目文档的 Glitch 模板

• 带有项目文档的 GitHub 模板

6.井字游戏

有史以来最经典的游戏之一，运用游戏逻辑总是很有趣。

您将了解更多有关交互式现代前端开发、游戏逻辑实现、RWD、模态、状态管理的事件处理和基本路由的知识。

牌

1. 主页

2. 挑选球员

3. 游戏板

4. 游戏玩法

5. 游戏结束

6. 情态动词

7. 平板电脑设计

8. 移动设计

如何创建教程

• YouTube 视频

• GeeksForGeeks 文章

其他资源

• 带有项目文档的 Glitch 模板

• 带有项目文档的 GitHub 模板

7.待办事项应用程序

另一个经典的待办事项应用程序风格，如果您还没有创建一个，那么现在可能是好时机！

您将学习具有动态 JavaScript 内容管理、CSS 和主题的交互式 UI 设计，以及具有状态管理的事件处理，用于创建待办事项、将其标记为已完成或删除等操作。

牌

1. UI 容器

2. 添加待办事项

3. 删除待办事项

4. 标记为已完成

5. 灯光模式切换

如何创建教程

• YouTube 视频

• W3Schools 文章

其他资源

• 带有项目文档的 Glitch 模板

• 带有项目文档的 GitHub 模板

8.博客

这是最好的项目之一，因为它是动态内容，通常需要 CMS，这是未来客户提出的常见构建请求之一！（例如动态内容网络商店网站等）

您将学到很多有关使用不同路由器进行页面导航、SEO 优化（如果在 NextJS 中构建）的知识，以及深入了解各种 CMS 以及如何在前端和 API 之间连接它们。此外，RWD 也包含在其中。

牌

1. 内容策略

2. 基本导航

3. 英雄部分

4. 博客文章部分

5. 关于部分

6. 全局页脚

7. 帖子页面

8. 动态搜索

9. 博客文章页面

10. 移动设计

如何创建教程

• YouTube 视频

• Dev.to 文章

其他资源

• 带有项目文档的 Glitch 模板

• 带有项目文档的 GitHub 模板

9.仪表板

如今，在图表、表格中对不同数据进行可视化是开发人员应该具备的一项关键技能，尤其是在使用不同的组件和图表库时。

您将学习如何构建带有菜单项的侧边栏以及从顶部导航和内容开始的带有网格系统的整个导航布局。除此之外，您还可以连接模拟 API 数据以整合加载和错误状态处理。

牌

1. 数据管理

2. 侧边栏

3. 顶部导航

4. 数字卡

5. 销售概览图

6. 销售区域图

7. 注册用户图表

8. 集成列表

9. 浅色深色模式

如何创建教程

• YouTube 视频

• 使用数据创建文章

其他资源

• 带有项目文档的 Glitch 模板

• 带有项目文档的 GitHub 模板

10.角色生成器

具有状态管理的头像创建器是一个非常常见的问题，数据结构，从本地存储加载，实时更改。这是一个初级项目，但完成它仍然很有趣！

了解如何管理状态、优化图像/使用 SVG 以及实现随机字符创建和从画布下载图像等功能。

牌

1. UI 容器

2. 角色定制

3. 随机选择

4. 保存角色

5. 坚持性格

如何创建教程

• YouTube 视频

• Dev.to 文章

其他资源

• 带有项目文档的 Glitch 模板

• 带有项目文档的 GitHub 模板

概括

就是这样！从这些项目中可以学到很多东西，每个项目都很独特，可以作为你作品集的一个很好的补充。

我长期以来的目标就是在社区中传播基于项目的学习方法，并让BigDevSoon投入运行，这是我们过去两年来一直在开发的一个应用程序。这对我们来说是一项巨大的成就。