初级前端开发者应该做的 5 个 JavaScript 项目

作为一名初级前端开发人员，在寻找第一份工作时，很难展现你作为程序员的经验。你用来学习新技能的项目很少能提供高质量的代码。如果你是第一次写代码，就不可能写出完美的代码！最终，我们的公共代码库里会堆满一堆未完成的项目。你肯定不希望未来的雇主看到所有这些项目。

这就是为什么我鼓励你再次在实践中运用你的技能。这次也要注意代码质量。以下是一些你可以构建的项目示例，以展示你的技能。

1. 使用 HTML 和 CSS 构建博客模板

刚开始学习前端开发时，巩固 HTML 和 CSS 知识至关重要。构建博客模板是你的第一个大型项目不错的选择。不用担心设计，网上有很多资源可以参考。

要求：

• 建立主页、单篇文章页面和联系页面
• 尝试使用 CSS Grid
• 你的页面应该是响应式的（RWD）

很高兴有：

• 添加滑块
• 使用真实内容而不是 Lorem Ipsum

2. 使用纯 JavaScript 构建井字游戏

在浏览器中开发游戏可以很好地测试你的 JavaScript 技能。你需要响应用户事件、与 DOM 交互并存储游戏数据。这也是一个值得向同事和家人展示的好项目！

要求：

• 欢迎屏幕上显示每个玩家的姓名和符号输入
• 当用户点击空白单元格时渲染符号
• 胜利验证

很高兴有：

• 创建记分牌并将其保存到本地存储
• 使用例如 minmax 算法或您自己的解决方案来玩电脑

3. 使用纯 JavaScript 和地图服务共享位置

一个可以与好友分享位置信息的简单应用，既是一个高难度的项目，又是一个非常实用的工具。在这个项目中，你将使用 JavaScript 与外部地图服务（例如 Google 地图或 OpenStreetMap）进行交互。

要求：

• 在地图上显示您的当前位置
• “分享”按钮可创建与您的当前位置的链接
• 显示嵌入 URL 中的位置的页面

很高兴有：

• 共享您的实时位置，您必须保存它并每隔几秒从外部数据库（例如 Firebase）读取一次
• 当你的朋友访问该页面时显示他的实时位置

4. 使用 JS 框架（React、Vue、Angular 或其他）构建电视剧追踪器

这个项目将帮助每一位电视剧粉丝追踪新剧集的首播。这将是一个使用你熟悉的 JavaScript 框架的绝佳机会。

要求：

• 使用外部 API（例如 TVMaze API）搜索电视剧
• 将电视剧添加到跟踪列表
• 显示跟踪的电视剧列表以及最新剧集的首播日期
• 单页视图，包含有关电视剧的更多详细信息
• 将跟踪列表保存到本地存储

很高兴有：

• 首映时发送电子邮件或推送通知

5. 使用 JS 框架（React、Vue、Angular 或其他）的家庭预算应用程序

开发一款家庭预算应用将是对你作为一名初级前端开发人员技能的终极考验。它不仅能检验你创建表单和存储信息的能力，还能帮你省钱！

要求：

• 添加类别
• 添加费用名称、金额和类别
• 按类别汇总每月支出
• 将数据保存到外部数据库（例如 Firebase）

很高兴有：

• 注册、登录和处理多个用户

概括

副业项目是展示你技能的绝佳途径，可以帮助你找到一份初级前端开发人员的工作。让你的潜在雇主了解你目前为止开发了哪些内容。他们不仅会查看网页，还会分析你的代码，所以一定要确保代码干净整洁。

在开始构建新项目之前，请先列出 MVP（最小有价值产品）的需求清单。在开发过程中，你会发现应用程序可以拥有更多有趣的功能，只需将其添加到清单中即可。这将帮助你按时完成项目。

记住，你不必一一照搬这些示例。你可以随意更改、添加或删除任何你喜欢的细节。如果你有之前学习新技能的项目，可以随时重构它并把它放在作品集中。

我会定期发布关于 Web 开发的见解。
欢迎订阅我的新闻通讯。
访问我的博客slawkolodziej.com了解更多精彩内容。欢迎在Twitter
上关注我。