Web前端:面向开发人员的前端初学者项目创意

　　开发实时项目的作用是多么重要，它不仅可以提高你的编码技能，还可以帮助你培养对它的热情。这里收集了10个最好的初学者项目，你可以在进行前端开发时了解这些想法。

　　1.个人网站

　　创建个人网站是最简单但最艰巨的前端项目之一。可以在你的网站上展示你擅长的技能以及作品集，独立的网页设计师和开发人员更喜欢拥有令人愉快的个人网站，他们可以在其中展示他们的整个背景。

　　要使网站具有娱乐性、独特性和吸引力，你必须使用 HTML、CSS 和 JavaScript 等语言。完成此项目后，你很可能会了解如何使用 HTML 设计网页，使用 CSS 设置其功能，并使用 JS 使网站交互。

　　2. JavaScript 问答游戏

　　当你真正学习 JavaScript 时，了解如何运用你的知识，并在你能力范围内决定一个项目可能是非常具有挑战性的。一个很好的起点是构建一个小型问答游戏，你要处理抽象逻辑，并且控制或建立测验难度的范围也是要做的事情。

　　从开发一个包含 4 个 MCQ 的简单游戏开始。在提出这些问题时，为每个问题分配正确的答案。在编程中，你将学到很多关于数据管理和构建评分系统的知识。不要浪费太多时间专注于你所做的设计。一旦你熟悉了 CSS，你就不必担心样式了。

　　3. Vue 即时通讯应用

　　另一个 JavaScript 最常见的库是 Vue。在开始项目之前，你必须对使用 JS 有一个深刻的了解。创建聊天应用程序肯定会提升你的体验并进一步增强你的知识。

　　你要了解 Vue.js 的基础知识和使用 CSS 框架。创建一个合适的交互式应用程序需要一些工作，你可以更进一步，增加通过同一平台捕获音频消息、共享文件和图像的可能性。这个项目的想法一开始可能看起来有点复杂，但绝对值得花时间和精力，你还将熟悉用户体验和用户界面。

　　4. 手机二维码阅读器

　　我们现在的购物方式已经随着条形码和二维码的出现而发展。消费者现在可以轻松地扫描产品并在智能手机上找到有关该产品的不同数据，例如价格或购买地点。它还消除了在网站上输入长代码(例如激活码或型号)的需要，使他们的购物体验更简单、更轻松。

　　你甚至不需要手机应用程序来搜索 QR 码，你的智能手机相机将为你完成交易。你可以使用 HTML 和 JavaScript，但最重要的是，你将使用可以读取 QR 码的 JS 库。非常棒的一点是，由于这个原因，你不必从头开始制作它，因为现在有很多很棒的库。

　　5.天气应用

　　Angular，与 React 和 Vue.js 一起，是三个最常见的前端开发框架之一。它通常用于创建基于表单的应用程序(其中必须注册才能创建帐户)，但它也可用于开发游戏甚至具有虚拟现实方面的应用程序。

　　可以在这样的应用程序中使用具有精美插图和基本界面的简单流线型样式。你可以根据自己的喜好使用颜色和字体。这个项目的好处在于，你将了解从头开始创建功能性、响应式应用程序的样子。从下载 Node.js 和 Angular CLI 到使用 LightHouse 检查你的代码，你可以学习一切。

　　6. Svelte List 应用程序

　　Svelte具有使其非常独特的独特功能。作为一名前端 Web 开发人员，对它有透彻的了解肯定会让你受益匪浅。Svelte 具有更好的运行时性能，因为它的应用程序不使用系统引用，相反，DOM 操作由其应用程序完成。

　　使用 Svelte、组件和事件处理程序，你可以创建列表应用程序。你可以使用 CSS 来设计样式。有多种选择，例如使用表情符号或通过应用程序录制音频消息，你的列表应用程序应该具有基本且方便的界面。

　　7. 内容管理系统(CMS)

　　如今，内容管理系统变得非常流行，你也可以为你的网站创建一个 CMS，作为前端项目的一部分。在这样的项目中，你可以显示到目前为止你已完成的所有任务或分配。开发 CMS 还可以让你熟悉各种 CMS 平台的活动，并且你会知道如何使用它们来创建更强大的网站。

　　通过将多个功能合并到你的 CMS 中，项目会更有趣。或者，你可以轻松添加自定义幻灯片功能。完成此项目后，你可能已经熟悉 Web 开发和内容管理系统的几个元素。

　　8. 使用 Giphy API 创建 GIF 页面

　　Giphy 是一个 GIF 搜索引擎，拥有大量的 GIF。如果你对使用 JS 或 jQuery 执行 DOM 操作感到满意，那么这个项目将是你的绝佳选择。该项目的目的是创建一个精美的页面来查找你可以使用的 GIF。

　　Giphy API 将派上用场来实现这个项目。你可以免费使用它，而且你不必费心设置。他们的 API 将使你能够在你的网站上显示常见的 gif，具有可以搜索特定 gif 的输入，并且在结果页面的底部有一个“加载更多”按钮以获取更多搜索建议。

　　9. Next.JS 电子商务网站

　　Next.js 是迄今为止开发支持服务器端渲染的 React 应用程序的最常用框架。这个项目将教你如何为电子商务构建一个购物车。

　　在处理此项目时，你将了解如何为 Next.js 设置开发环境、构建新页面和组件、检索数据、对其进行样式设置以及在此项目中部署下一个应用程序。

　　任何商业网站或应用程序的任何应用程序都需要前端开发人员，这直接意味着对前端开发人员的要求越来越高，所以要不断提高自己的技能，特别是实践项目技能。

了解更多