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

介绍

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

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

……完成整个项目的那一刻真是太棒了！你的作品集+1，学习新技能，成就感无与伦比。

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

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

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

1.神奇宝贝图鉴

把它们都抓起来！啊，这回勾起我好多回忆啊，我们来创建你自己的宝可梦词典，把所有种类都收录进去吧！

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

牌

API 配置
UI渲染
搜索面板
排序功能
过滤器
宝可梦详情

如何创建教程

其他资源

2.音乐播放器

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

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

牌

UI逻辑
播放按钮
暂停按钮
重播按钮
循环按钮
时间滑块
下一个按钮
上一个按钮
静音按钮
取消静音按钮
声级滑块

如何创建教程

其他资源

3.代码编辑器

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

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

牌

导航栏
代码区域
代码预览
调整垂直条的大小
更改视图按钮
代码编辑器库
响应式网页设计
其他案件

如何创建教程

其他资源

4.测验应用程序

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

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

牌

API 配置
主页
测验生成
问题逻辑
最后一个问题
结果栏
结果答案
粘性导航
平板电脑设计
移动设计

如何创建教程

其他资源

5.查找电影

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

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

牌

API 配置
搜索栏
今日精选栏目
首映和公告部分
详细信息页面
骨骼动画
错误处理
近期搜索
骨骼动画
错误处理

如何创建教程

其他资源

6.井字游戏

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

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

牌

主页
挑选球员
游戏板
游戏玩法
游戏结束
情态动词
平板电脑设计
移动设计

如何创建教程

其他资源

7.待办事项应用

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

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

牌

UI容器
添加待办事项
删除待办事项
标记为已完成
灯光模式切换

如何创建教程

其他资源

8.博客

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

你将学习到如何使用不同的路由器进行页面导航，以及 SEO 优化（例如使用 NextJS 构建），并深入了解各种 CMS 以及如何在前端和 API 之间进行连接。此外，本课程还包含 RWD。

牌

内容策略
基本导航
英雄部分
博客文章部分
关于部分
全局页脚
帖子页面
动态搜索
博客文章页面
移动设计

如何创建教程

其他资源

9.仪表板

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

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

牌

数据管理
侧边栏
顶部导航
数字卡
销售概览图
销售区域图
注册用户图表
集成列表
浅色深色模式

如何创建教程

其他资源

10.角色生成器

带状态管理的虚拟形象创建器是一个非常常见的问题，它涉及数据结构、从本地存储加载并实时更改。这是一个初级项目，但完成起来仍然很有趣！

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

牌

UI容器
角色定制
随机选择
保存角色
坚持性格

如何创建教程

其他资源

概括

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

我一直以来的目标都是在社区中推广基于项目的学习方法，并让BigDevSoon顺利运行起来。我们过去两年一直在开发这款应用。这对我们来说是一项巨大的成就。

继续写大代码！🙇‍♂️

文章来源：https://dev.to/bigsondev/10-projects-to-master-frontend-web-development-acm