🚀 10 个项目助你快速提升编程技能

介绍

无论何时，如果你想提高编程水平，有很多方法可以实现。你可以阅读开发文章，也​​可以不断学习教程、课程、视频和书籍，但真正的关键在于从学习到实践的过渡。相信我，没有什么比通过基于项目的学习将你迄今为止学到的所有概念运用起来更好的方法了。

我本人是一名拥有8 年以上经验的软件工程师，我发送了大量简历，参加了数十次面试，尤其是现在，找一份前端/Web 开发人员的工作比以往任何时候都更加困难，我强烈建议您构建自己的项目。

为了在众多项目当中脱颖而出，我将介绍 10 个项目，每个项目都有其独特的设计、要求和技能，您可以掌握这些来构建您的投资组合并实际构建可以影响您作为开发人员的进步的东西！

此外，每个项目都附带预定义的实施卡，可以帮助您感觉像一个真正的开发人员在敏捷环境中工作，具有用户故事和验收标准，同时还支持项目本身的规划。

名片

深入 Web 开发的良好介绍热身。

您将了解基本的 HTML 和 CSS、响应式设计原则以及在线个人品牌的介绍。

牌

1. UI容器
2. 用户联系部分
3. 用户图像
4. 用户信息部分
5. 绝对定位形状
6. 动画

其他资源

• 带有项目文档的 Glitch 模板
• 带有项目文档的 GitHub 模板

素食王

经典的 CSS RWD 登陆页面风格，感受媒体查询！

您将学习高级 CSS 技术、CSS Flexbox/Grid 以及如何创建响应迅速且有吸引力的登录页面。

牌

1. 导航
2. 英雄部分
3. 关于我们部分
4. 菜单部分
5. 画廊部分
6. 联系部分
7. 页脚
8. 悬停效果
9. 移动菜单
10. 响应式网页设计
11. 优化

其他资源

• 带有项目文档的 Glitch 模板
• 带有项目文档的 GitHub 模板

计算器

让我们更多地了解 JS、逻辑、纯函数和一些数学运算。

您将学习 JavaScript 基础知识、DOM 操作和事件处理来创建交互式 Web 应用程序。

牌

1. UI容器
2. 输入数字
3. 数学运算
4. 清除并重置
5. 先前的操作
6. 明暗模式
7. 边缘情况处理

其他资源

• 带有项目文档的 Glitch 模板
• 带有项目文档的 GitHub 模板

只是天气

这个项目类型已经多次用于面试家庭作业挑战，值得至少做一次！

您将学习从外部 API、异步 JavaScript（Promises、async/await）获取数据，并在 Web 上显示动态数据。

牌

1. API 配置
2. 搜索栏
3. 位置和温度
4. 每小时预报
5. 天气详情
6. 位置访问
7. 温度单位切换
8. 近期搜索
9. 骨骼动画
10. 错误处理

其他资源

• 带有项目文档的 Glitch 模板
• 带有项目文档的 GitHub 模板

GifTok

更多 API、分页、无限滚动。

您将学习如何使用富媒体 API、实现分页以及确保移动友好的 UI。

牌

1. API 配置
2. 显示第一个 GIF
3. 滑动下一页
4. 向后滑动
5. 无限滑动
6. 用户详细信息
7. 骨架加载
8. 桌面版
9. 边缘情况

其他资源

• 带有项目文档的 Glitch 模板
• 带有项目文档的 GitHub 模板

值得注意的是

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

您将学习现代 JavaScript 框架中的 CRUD 操作、状态管理和不可变编程原理。

牌

1. 导航占位符
2. 新笔记
3. 列出笔记
4. 编辑注释
5. 删除注释
6. 完整笔记
7. 搜索笔记
8. 过滤笔记
9. 已完成的笔记
10. 空状态
11. 字段验证
12. 持久存储

其他资源

• 带有项目文档的 Glitch 模板
• 带有项目文档的 GitHub 模板

色彩记忆

创建游戏并拥有组件化和结构的高级图像总是好的。

您将学习软件开发中的逻辑构建、维护应用程序状态和用户交互处理。

牌

1. 圆形组件
2. 主页
3. 游戏玩法
4. 游戏结束模式
5. 最佳成绩
6. 游戏规则模式
7. 声音通知
8. 响应式网页设计
9. 边缘情况

其他资源

• 带有项目文档的 Glitch 模板
• 带有项目文档的 GitHub 模板

AI帖子生成器

很时尚，很现代的人工智能潮流，对吧？这可是个了解最流行 API 之一的绝佳机会。

您将学习通过 API 与 AI 交互，了解提示的工作原理，并构建具有实际用例的工具。

牌

1. API 配置
2. UI容器
3. 社交平台选择器
4. 消息文本区域
5. 音调和风格选择器
6. 生成帖子按钮
7. 生成阶段
8. 按钮逻辑

其他资源

• 带有项目文档的 Glitch 模板
• 带有项目文档的 GitHub 模板

关卡编辑器

它就像您的第一个“迷你 Photoshop 工具”😁现在有很多类似风格的“无代码”应用程序。

您将学习如何实现拖放功能、资产管理以及游戏级设计基础知识和 UX/UI 注意事项。

牌

1. UI容器
2. 资产提取机制
3. 快速资产
4. 撤消功能
5. 橡皮擦工具
6. 缩放功能
7. 设置和导出
8. 网格大小调整
9. 水平持久性

其他资源

• 带有项目文档的 Glitch 模板
• 带有项目文档的 GitHub 模板

任何聊天

掌握前端和后端、套接字和事件广播的完整流程是一项非常有用的技能。

您将学习全栈开发，包括服务器端编程、实时数据处理和数据库管理。

牌

1. 入职页面
2. 进入聊天页面
3. Node.js 服务器
4. 聊天页面标题
5. 聊天窗口
6. 聊天页面页脚
7. 消息发送
8. 表情符号支持
9. 连接和断开
10. 边缘情况

其他资源

• 带有项目文档的 Glitch 模板
• 带有项目文档的 GitHub 模板

概括

尝试各种技术、框架和库，创建你自己的创意变体，看看哪种最适合你。我强烈建议你拓展 HTML/CSS 以外的技能，增加更多 JS 和逻辑知识，使用 API、一些流行的框架（例如 React/Vue/Svelte），并深入研究 Node.js/Express，以了解完整的前端<->后端流程。

创建出色的项目，我祈祷即将到来的成功面试，继续编写 BIG 代码。

我长期以来的目标就是通过社区传播基于项目的学习方法，而BigDevSoon 的启动和运行，对于我们过去两年来一直致力于开发的应用程序来说，是一个巨大的成就。

如果你喜欢这篇文章，请随意传播！ ❤️