成为前端大师的 10 多个项目

学习编程可能充满挑战，令人困惑，尤其是在你不知从何入手的情况下。提升编程能力的最佳方法是运用这些技能来创建编程项目。

无论您是新手还是重回编程圈，以下这些优秀的编程项目都能提升您的自信心，让您成为更优秀的开发者。我还提到了每个项目中可以使用的技术，但您也可以自由选择自己喜欢的编程语言或框架。

计算器应用程序

我们每天都会用到的程序就是计算器。这个计算器项目既简单又实用。作为参考，你可以看看Adeola Adeoti 的计算器应用，他的应用源代码可以在这里找到。

您将学到什么

创建计算器应用程序可以帮助您学习如何构建可重用的组件、如何使用道具以及如何处理状态。

技术栈

• Vue.js
• Tailwind CSS

特征

• 漂亮的用户界面
• 暗模式/亮模式
• 响应式

博客网站

建立自己的博客不仅能提升你的编程技能，还能提升你的在线影响力。如果你拥有一个博客并定期分享内容，就能吸引大量访客，从而提升你的在线影响力。

您将学到什么

从头开始创建博客后，您将了解样式组件、Next JS 中的路由、实现 MDX 以及使用动态路由

技术栈

• Next.js
• React.js
• 样式化组件
• MDX

特征

• 响应式
• 暗模式/亮模式

天气应用

拥有一款功能齐全的天气应用，可以极大地帮助你吸引客户。如果你部署了这款应用，不仅你自己，很多人也可能会从中受益。

您将学到什么

创建天气应用程序后，您将了解从 API 获取数据、将数据发布到 API、映射数据以及创建动态页面。

技术栈

• React.js
• Tailwind CSS
• Axios

特征

• 响应式
• 4天预报
• 漂亮的用户界面

Spotify 2.0

您可以创建 Spotify 2.0，即您自己的 Spotify 版本。您可以添加尽可能多的功能，完成后即可在线部署 :)

您将学到什么

创建您自己的 Spotify 版本可以帮助您学习如何从 API 获取数据、如何处理动态路由、如何处理身份验证等。

技术栈

• Next JS
• Tailwind CSS
• Axios
• Auth0

特征

• 响应式
• 亮模式/暗模式
• 漂亮的用户界面
• 验证
• 使用配置文件
• 显示歌词

电影应用程序

你可以从零开始创建一个电影应用，用于展示电影详情、海报、预告片和演员阵容。我相信你会喜欢这个项目。

您将学到什么

创建电影应用程序可以帮助您学习如何创建可重用的组件、如何从 API 获取数据、如何创建动态页面。

技术栈

• Vue.js
• 样式化组件
• Axios
• TMDB API

特征

• 响应式
• 亮模式/暗模式
• 漂亮的用户界面
• 显示电影评级
• 显示电影演员表/预告片
• 根据类型显示电影

Youtube UI 克隆

如果您想了解网格、弹性框和状态处理，最好克隆 YouTube 的 UI。您无需完全照搬 YouTube，您可以自由地重新设计并创建自己的 YouTube 版本。

您将学到什么

创建 YouTube UI 克隆可以帮助您了解网格、弹性框、处理状态和响应能力。

技术栈

• 苗条
• SMUI（Svelte Material UI）

特征

• 响应式
• 漂亮的用户界面

聊天应用程序

如果您想了解 Firebase、Firestore、实时数据库等，这个项目适合您，将这个项目纳入您的投资组合可以使您的投资组合更加强大。

您将学到什么

创建聊天应用程序可以帮助您了解firebase、身份验证、firebase实时数据库等。

技术栈

• React.js
• Firebase
• 材质 UI

特征

• 响应式
• 实时聊天
• 暗模式/亮模式

SaaS登陆页面

创建登录页面可以极大地帮助您提高前端技能。

您将学到什么

为 Saas 开发登录页面可以帮助您提高网格、弹性框和响应能力方面的技能。

技术栈

• Vue
• 样式化组件

特征

• 响应式
• 漂亮的用户界面

任务管理应用

这个项目可能需要一些时间，但绝对值得。你可以创建一个只包含待办事项、日历和一些文档的任务管理网站。

您将学到什么

创建任务管理应用程序可以帮助您了解状态、markdown、本地存储和身份验证。

技术栈

• Next.js
• Tailwind CSS
• Auth0
• Markdown

特征

• 响应式
• 添加待办事项
• 创建 Wiki（使用 markdown）

电子商务网站用户界面

另一个可以提高前端技能的很棒的项目是开发电子商务网站的 UI。

您将学到什么

在开发电子商务网站的 UI 之后，您将了解可重用组件、管理状态和使用道具

技术栈

• 苗条
• 斯维尔特斯特拉普

特征

• 响应式
• 漂亮的用户界面

管理仪表板

我们列表中的最后一个是管理仪表板。管理仪表板或管理面板是网站管理员/所有者管理其网站的地方。创建管理面板的用户界面可以帮助你提高前端技能。

您将学到什么

开发管理仪表板后，您将学习如何创建多种类型的组件、在适当的位置重复使用它们以及使页面具有响应性。

技术栈

• React.js
• SCSS
• 反应引导

特征

• 响应式
• 漂亮的用户界面
• 亮模式/暗模式

结论

我希望您发现这篇文章有用，如果您需要任何帮助，请在评论部分告诉我。

你想请我喝杯咖啡吗？你可以在这里请。

让我们在Twitter和LinkedIn上建立联系。

👋 感谢阅读，下次再见