获得任何技能的最佳方法是通过参与项目将其付诸实践，然而许多人认为他们在看过教程后就什么都知道了。然而，这是不正确的；他们不会自己创建任何项目。所有这些因素也适用于前端 Web 开发；如果您想成为一名出色的前端 Web 开发人员，那么自己构建项目不仅会增加您的信心，而且还会通过添加您将要创建的项目来逐步使您的投资组合做好工作准备。
因此，这里有一份完整的前端 Web 开发项目列表，每个有抱负的前端 Web 开发人员都必须完成这些项目。
1. 建立一个网站的克隆
构建网站克隆是学习页面结构、颜色、字体、媒体、表格和其他设计元素基础知识的绝佳方法。要复制原件，请尽可能详细。选择一个您喜欢的网站并创建它的克隆。为了充分利用源代码，请尽可能避免查看它。克隆网站的好处是您可以选择复杂程度。如果您刚刚开始，一个只需要 HTML 和 CSS 的简单网站是一个很好的起点。如果您更高级，请选择使用 JavaScript 或 React 的网站。
所需技能： HTML、CSS 和 JavaScript
2. 建立自己的作品集网站
建立个人作品集网站是最简单但最艰难的前端项目创意之一。您可以首先使用您的网站作为简历。这意味着您可以向网站添加有关您的经验、才能和专业知识的信息。出于这个原因，许多自由网页设计师和开发人员都拥有可爱的个人作品集网站。为了保持网站的娱乐性、原创性和互动性，您需要运用您的 HTML、CSS 和 JavaScript 技能。您应该能够使用 HTML 组织网页，使用 CSS 设置其元素的样式，并使用 JS 使网站具有交互性。
所需技能： HTML、CSS 和 JavaScript
3. 一个 CRUD 操作 Web 应用程序
作为前端开发人员，您需要熟悉 CRUD（创建-读取-更新-删除）操作，因为它们是大多数网站（包括博客、电子商务、仪表板等）的通用功能.待办事项列表或备注网页是 CRUD 应用程序的两个示例。在您的网站上拥有这些项目之一可以证明您对数据结构的了解。这也是展示您的前端框架技能的绝佳机会。推荐技术：因为 CRUD 应用程序需要使用可重用的组件，所以根据您的经验水平，使用 React 或 Vue 等框架开发它们是个好主意。
技能要求： JavaScript/React/Vue
4.一个完美的分数登陆页面
在 Chrome Lighthouse 审核报告中，满分网站在所有领域都获得满分。构建具有所有基本功能的网站表明您有能力坚持最佳实践并提供高质量的产品。
技能要求：满足Chrome Lighthouse审核报告要求的一切
5. JavaScript 音乐播放器
对于前端 Web 开发，创建 JavaScript 音乐播放器可能是一个可行的选择。作为一名新的 JavaScript 开发人员，每个人都应该专注于扩展应用程序的功能，但是如果没有基本的图形和架构，设计和用户体验的决策就会变得更加困难。因此，这里的架构分为三个主题桶： CSS（为 HTML 文件中定义的每个元素添加样式） JavaScript（添加音频、播放器按钮和音乐信息元素）（单击 HTML 元素时添加功能）
所需技能： HTML、CSS 和 JavaScript
6. 动态登陆页面
一旦您了解了前端开发的基本知识，例如 HTML、CSS 和 JavaScript，您就可以通过探索 Bootstrap 的功能进入下一个级别。它可以简化您的工作并提高您的产出。有了这些信息，您就可以使用 Bootstrap 为任何产品开发一个极具吸引力的登陆页面。您可以通过显示本地存储中用户的时间和姓名来使其更有趣。您可以使用 Bootstrap 来复制一些您喜欢的登陆站点。
所需技能： HTML、CSS、JavaScript 和 Bootstrap
7. 建立自己的二维码阅读器
条形码和二维码彻底改变了我们的购物方式。客户现在可以使用他们的智能手机扫描产品并获取价格或购买地点等信息。它还消除了在网站上输入长代码（例如激活码或型号）的需要，使他们的购买体验更加方便。与流行的看法相反，您不需要本地手机应用程序来读取 QR 码。在带有摄像头的智能设备上运行的网站或许能够做到这一点。将使用 HTML 和 JavaScript，但最重要的元素是使用可以解码 QR 码的 JS 库。好消息是您不必从头开始构建它，因为有许多优秀的库可用于此目的。
所需技能： HTML、CSS 和 JavaScript
8. 建立一个计算器
具有基本算术运算功能（如加法、减法、乘法和除法）的计算器项目对于具有 HTML、CSS 和 JavaScript 基本知识的新手非常有用。您需要设计一个带有用于输入数据的按钮和用于显示结果的显示屏的用户界面。在类似网格的格式中，CSS 网格可用于对齐按钮和屏幕。至少，您应该熟悉 If-else 语句、循环、运算符、JavaScript 函数、事件侦听器等。
所需技能： HTML、CSS 和 JavaScript
9. 构建天气应用
可以使用 HTML、CSS 和 JS 创建天气应用程序。您可以使用 Open Weather Map API 添加天气信息。在这个项目中，你也可以使用 AngularJS。为了使您的网站看起来不错，您可以使用面向设计的库。 Open Weather Map API 将为您提供各个地点的基本天气信息，您的工作就是以愉快的方式呈现这些信息。完成本项目后，您将熟悉各种 JS、Angular 和 AJAX 组件。
所需技能： HTML、CSS 和 JavaScript
10. 构建一个 JavaScript 测验
当您第一次开始学习 JavaScript 时，弄清楚如何将所学付诸实践并选择适合您技能组合的项目可能会很困难。构建一个小测验游戏是一个很好的起点。您将不得不处理高度抽象的逻辑，并且由您来控制和/或扩展测验难度的范围。首先创建一个包含四个多项选择题的简单游戏。在制作这些问题时，为每个问题分配正确的答案。您将在编程时学到很多关于数据管理和创建评分系统的知识。
所需技能： HTML、CSS 和 JavaScript