请简述一下你认为做得最好的项目（年让你获得第一份开发工作的）

对于那些希望通过第一份开发工作进入 Web 开发世界的人来说，您需要了解的知识数量可能会让人不知所措：HTML、CSS、JavaScript、版本控制、构建工具、框架、命令行名单还在继续……，我来为大家讲解一下关于请简述一下你认为做得最好的项目?跟着小编一起来看一看吧!

请简述一下你认为做得最好的项目

对于那些希望通过第一份开发工作进入 Web 开发世界的人来说，您需要了解的知识数量可能会让人不知所措：HTML、CSS、JavaScript、版本控制、构建工具、框架、命令行。名单还在继续……

但永远不要害怕！在这篇文章中，我想通过概述 10 项技能为您提供一些指导，这些技能将帮助您在 2020 年找到第一份开发工作。对于每项技能，我都会建议一个动手实践的项目想法，以帮助您入门和将您指向SitePoint 库中的适当资源以供进一步阅读。

让我们潜入。

1. 了解您的代码编辑器

作为一名编码员，您将花费大量时间在您选择的编辑器上。这就是为什么您应该努力了解它可以做什么以及如何正确配置它。使用哪个编辑器的主题很快就会引起争议，但如果您刚刚开始，我建议您查看VS Code（如果您关心隐私，请查看VSCodium）。

VS Code 附带了许多很酷的功能，例如Emmet 缩写、智能感知、各种键盘快捷键和Git 集成。也有扩展的数百个（如果不是千人），您可以安装自定义您的工作流程。

项目理念

在您的机器上安装 VS Code 并承诺使用它。花一些时间研究您选择的语言的流行扩展，并至少安装其中三个。您还应该安装Prettier并将其配置为在保存时格式化您的代码，以及ESLint，它将在 VS Code 的控制台中显示 JavaScript linting 错误。对于奖励积分，您可以打印出您平台的键盘快捷键参考表，并尝试每周记住两个或三个快捷键。

进一步阅读

作为参考，我会推荐Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers。这个最新的指南涵盖了所有基本的 VS Code 组件，包括工作区的编辑功能、代码重构和键绑定等高级功能，以及与 Grunt、Gulp、npm 和其他外部工具的集成。第二章，介绍你的用户界面，以及第九章，与扩展工作，应该特别关注的。

2. 建立联系表格

如果您正在构建 Web 应用程序，那么遇到 HTML 表单只是时间问题。它们是网络体验的重要组成部分，而且它们可能很复杂。例如，您需要使它们易于访问，并且需要确保它们在不同的浏览器和较小的屏幕上都能很好地呈现。在不破坏其可用性的情况下始终如一地设计它们也可能是一个挑战。

表单是访问者访问您网站的重要组成部分。即使您的访客以您所提供的东西出售，破损甚至布局不当的表格也足以让他们弃船。这意味着你失去了转换。

项目理念

构建和设计联系表单。专注于表单字段的对齐，突出的CTA，并确保表单在浏览器和设备上都能很好地预览。尝试包含各种表单控件，例如<select>元素和复选框，同时保持布局简单优雅。

您可能还想将完成的表单上传到CodePen，这是一个在线社区，用于测试和展示用户创建的 HTML、CSS 和 JavaScript 代码片段。在申请工作时，精心策划的 CodePen 帐户可能会用作迷你投资组合。

进一步阅读

表单设计模式为不同类型的表单提供了十种方法——注册表单、预订表单、登录表单等等。向专业人士学习，了解如何让您的表单既吸引人又可供所有人使用。如果您正在寻找该项目的快速入门，我建议您阅读第一章的第一部分，其中涵盖了诸如标签、占位符、样式和输入类型等内容。

3. 熟悉客户端验证

如果不了解 JavaScript，您将无法在 2020 年成为 Web 开发人员：它是世界上最流行的编程语言之一，坦率地说，它是一项必备技能。

在前端，它用于各种各样的任务，例如为网页制作交互式元素（滑块、地图、图表、菜单、聊天小部件等），并通常增强用户体验。该语言的一个相当不错的特性是它可以操纵DOM，为用户提供有关操作的即时反馈，而无需重新加载页面。这使网页感觉更快速且响应更快。

项目理念

在这个项目中，您应该采用您在第二步中构建的联系表单，并通过客户端验证对其进行扩充。

使用正确的输入类型会让你有很多方法，但也会尝试添加一些自定义验证。您应该以直观的方式显示错误消息并避免使用警报框。如果这一切听起来有点太简单了，为什么不添加一个提出问题的字段，以确保用户不是机器人。

进一步阅读

如果您是 JavaScript 编程领域的新手，或者只是想要快速简单的桌面参考，请查看JavaScript：新手到 Ninja，第 2 版。这个 JavaScript 编码的分步介绍将向您展示如何解决实际问题和开发更丰富的 Web 应用程序。您需要特别注意第八章，它向您展示了如何使用 JavaScript 与 HTML 表单交互。

4. 使用 Fixer API 制作货币转换器

过去，JavaScript 被认为是一种玩具语言——适用于菜单和动画，但不是很多。虽然在 2000 年代初可能就是这种情况，但在 2020 年，事实并非如此。

如今，整个应用程序都是用 JavaScript 编写的。新的工具和框架的引入和开发速度很快，自 ES2015（又名 ES6）到来以来，语言本身发生了很大的变化。跟上这些变化很重要，并且很好地了解 JavaScript 的功能以及它在整个 Web 开发图景中的位置。

项目理念

制作一个允许用户将一种货币转换为另一种货币的应用程序。用户应输入金额，选择实际货币，选择所需货币，然后应用程序应从Fixer API获取汇率。用户界面应动态更新，无需任何类型的页面刷新。

尽可能使用现代 JavaScript 功能。使用 vanilla JavaScript 或React 之类的库来完成项目以处理 UI 更新。

进一步阅读

JavaScript：最佳实践是一系列文章，这些文章着眼于现代 JavaScript 以及该语言如何演变以允许您编写干净、可维护和可重用的代码。我建议阅读“现代 JavaScript 应用程序剖析”、“使用现代 JavaScript 语法”和“现代 JavaScript 中的流控制”。

5. 设计您自己的投资组合网站

在您作为 Web 开发人员的职业生涯中，您可能会发现自己在同一个项目中与设计师一起工作。虽然设计和开发可以被视为独立的学科，但牢牢掌握设计过程将缓解这种关系，并使您与同事保持良好的关系。

或者，您可能想作为一名自由职业者独自完成项目，从设计到部署。在这种情况下，一个看起来一般的网站不会削减它。您需要为客户提供引人注目但功能强大的设计，以帮助他们实现业务目标。

项目理念

设计你自己的作品集网站——你在互联网上展示自己和展示你的技能的地方。花一些时间研究什么是好的投资组合设计，然后用铅笔和纸或使用您选择的线框图工具模拟您自己的设计。

在设计方面，请注意布局、您将使用的颜色和排版。在内容方面，考虑您需要哪些页面（提示：您可以包含联系表格）以及如何展示您自己和您的作品。互联网上有很多站点可以为您提供有关包含哪些内容的提示。

进一步阅读

好的我明白了。设计很难。但这并不需要……

如果您在设计过程中苦苦挣扎，《美丽网页设计原理》是一本很棒的书。它将引导您完成从概念到完成的示例设计，并在此过程中教您许多实用技能。

从第一章开始，阅读什么是好的设计，然后从那里开始学习。就我个人而言，我在一周内从头到尾阅读了这本书，但您也可以在闲暇时深入了解其他章节并了解布局、颜色、纹理、排版和图像。

6. 编写您自己的投资组合网站

JavaScript 并不是唯一快速发展的技术；CSS 的世界也有很多变化。语言的进步意味着我们现在可以轻松地制作复杂的布局、在 CSS 代码中声明变量、创建动画、有条件地应用 CSS（使用@supports）等等——在过去，我们会求助于黑客（或 JavaScript）来实现。

如果您在 2020 年编写 CSS，您应该了解所有这些现代技术以及何时使用它们——尤其是用于创建布局的 Flexbox 和 CSS Grid。您还应该掌握现代 CSS 工具（例如Houdini）、预处理器和我们可以使用的丰富框架。

项目理念

在上一个项目中，您设计了自己的作品集网站。现在是时候动手编写代码了。使用现代 CSS 来布置站点，并花时间研究一些最近引入的度量单位，例如vw和vh。例如，如果您想包含全屏启动图像，这些将非常方便。

此外，包括您之前创建的联系表单并使用 CSS 添加几个最小动画。例如，您可以在用户将鼠标悬停或单击时设置发送按钮的动画。

进一步阅读

CSS Master，第 2 版向您展示了如何编写更好、更高效的 CSS，以及如何利用前端开发人员可用的大量新的尖端 CSS 功能。您还将学习掌握可以改进工作流程的工具。

要特别注意的第五章，这将有助于您使用最近推出的创建复杂的布局multicolumn，Flexbox和Grid模块。

7. 性能很重要！使用 Lighthouse 审核您的网站

如今，网站缓慢几乎没有任何借口。人们不耐烦。没有人愿意等待 15 秒来加载您的高清图像。您的用户只想直接访问您的内容。

即使你觉得一切正常，也不要忘记另一半是如何生活的。并非每个人都拥有配备 100Gbit 以太网连接的高端 MacBook Pro。您的许多访问者将在智能手机上浏览您的网站，可能是在不稳定的 3G 网络上。作为 Web 开发人员，您的工作是为所有访问者提供他们的技术允许的最佳体验。

项目理念

谷歌浏览器附带了一个名为Lighthouse的出色工具，它对页面的性能、可访问性、最佳实践和 SEO 进行审核。它将为您提供有关如何解决它发现的任何问题的各种提示。

您应该对新创建的投资组合网站运行此工具，并尽最大努力确保每个类别都处于绿色状态。Lighthouse 将允许您为网站的移动版和桌面版生成报告。你应该检查这两个。

如果您尚未创建投资组合网站，请针对您拥有的其他网站运行它。

进一步阅读

实用的简短书籍Jump Start Web Performance提供建议、技巧和最佳实践，以提高您网站的性能和响应能力。这些范围从快速、五分钟的配置更改到主要的网站大修。它详细介绍了使用 Lighthouse以及一般的 Chrome DevTools运行审计。本书后面的章节将有助于解决审计强调的任何问题。

8. 了解您的终端

作为 Web 开发人员，命令行正在成为我们工作流程中越来越重要的一部分。我们使用它来从 npm 安装包、测试 API 端点、将提交推送到 GitHub 等等。如果您可以向潜在雇主展示对命令行的熟悉程度，那无疑会增加您的机会。

能够使用终端的另一个优点是它打开了编写脚本的大门。这将允许您自动执行各种日常任务（例如文件操作或部署站点），从长远来看，这可能会真正节省时间。

项目理念

安装并熟悉Bash shell。这将成为 macOS 和许多 Linux 发行版的标准配置。在 Windows 上，您需要为 Linux 启用称为 Windows 子系统的功能，您可以在此处阅读有关内容。

承诺使用 Bash 整整一周，并使用它来执行您可以执行的任何任务。这些可能包括浏览文件系统、处理文件、编辑文件、读取日志、启动服务或安装程序。您还应该研究别名，这是常用命令的快捷方式。

提示：如果您已经对 Bash 感到满意，您可能想尝试使用 Zsh 作为替代方案。我进入这里。

进一步阅读

如果离开舒适的 GUI 会让您感觉不舒服，请查看Bash 快速入门指南。本书将为您全面介绍 Bash，让您熟悉它的命令结构，并让您快速掌握一些基本命令。

对于勇敢的人，本书后面的章节将向您介绍 shell 脚本，并演示即使是 shell 中的简单编程结构也可以加速和自动化任何类型的日常命令行工作。

9. 将您的项目置于版本控制之下

现在我们已经掌握了一些终端知识，是时候看看Git——用于在开发过程中跟踪源代码更改的版本控制软件。由于其分支功能，Git 使多人可以轻松地在一个项目上进行协作。如果您意识到自己无意中引入了一个错误，那么您也可以轻松地将代码回滚到以前的状态。

实际上，您申请的任何职位都希望您了解版本控制。现在是获取这些知识的好时机。

项目理念

在您的机器上安装 Git 并熟悉其基本命令。将您在项目四中创建的货币转换器应用程序置于版本控制之下，然后创建一个GitHub帐户并将其上传给全世界（当然是从命令行）。

对于那些不熟悉 GitHub 的人来说，它是一个基于 Web 的平台，开发人员可以在其中存储他们的项目并与其他志同道合的开发人员进行互动。当您来申请工作时，拥有一个可以为潜在雇主指明方向的 GitHub 帐户将是有利的。

进一步阅读

Jump Start Git针对几乎没有或没有 Git 经验的初级开发人员，将引导您完成设置，以及构成成功 Git 工作流程的基本命令和步骤。

请务必查看第二章，其中介绍了远程存储库以及如何将您的代码推送到 GitHub。

10. 构建你的第一个节点应用程序

正如我之前提到的，JavaScript 无处不在。它支持大多数（如果不是全部）前端应用程序，但它也可以以Node.js的名义在服务器上运行。在进入当今的就业市场时，至少了解如何在服务器上编写 JavaScript（包括 Node 的执行模型）是一项理想的技能。

项目理念

我们将对此采取稍微不同的策略，因为我想向您介绍我的教程“使用 Node、Bootstrap 和 MongoDB 构建简单的初学者应用程序”。

从头开始，我演示了如何使用 Node.js 构建一个简洁的 Web 应用程序，但不是关注最终结果，而是关注您在构建真实世界时可能遇到的一系列事情应用程序。这些包括路由、模板、处理表单、与数据库交互甚至基本身份验证。

对于这个项目，您应该按照我的教程进行操作，调整最终结果以满足您的需求。您还应该将您的代码置于版本控制之下并将其推送到您的 GitHub 个人资料。

进一步阅读

与其说是阅读，不如说是一种资源：SitePoint 论坛。这是一个潜在的棘手项目，因此如果您遇到困难，请随时过来寻求帮助。

结论

这样你就知道了——帮助你在 2020 年找到第一份开发工作的十项技能。虽然不是详尽无遗，但我希望这篇文章能帮助你在不断变化的 Web 开发世界中定位自己，并给你一些想法接下来要学什么。

并且不要忘记，阅读教程很棒，但不能替代实际构建的东西。一个活跃的 GitHub 帐户会给你的下一个雇主留下更深刻的印象，而不是你读过的内容列表。

,