如何成为一名前端开发人员

几年前，我成为了一名软件工程师，走上了前端之路。别误会，前端开发不仅仅是 HTML 和 CSS，远非如此！你还需要了解 JavaScript、Git、性能、可访问性、设计等等。构建一个优秀的前端应用程序是一项极具挑战性的任务。

成为一名前端开发者的道路并非易事。但你很幸运。我经历过，我知道什么方法有效，什么方法无效！这段旅程主要分为四个步骤：

1. 获取知识
2. 建筑项目
3. 找工作
4. 面试成功

我写这篇文章的目的是阐明如何成为一名优秀的前端开发人员。事不宜迟，让我们从实现这一目标所需的知识和资源开始吧！

获取知识

如今，前端开发令人应接不暇。要学的东西太多了！也许你觉得自己永远也学不会。相信我，你不可能什么都懂。好消息是，你必须专注于学习正确的东西。然而，你需要练习。积极主动地学习，这是精通的关键！

您将在下文中找到前端开发人员成功职业生涯所需的知识。我添加了一些资源，介绍了如何将技能付诸实践，以及我撰写的相关文章（毕竟，何不自我推销一下呢？😏）

注意：我列出的资源与我没有任何合作关系。我只是觉得它们制作精良。

HTML 和 CSS

HTML 代表网页的结构，CSS 代表布局。你每天都会用到这两种技术，所以你需要熟悉它们！

• 资源：您可以查看freeCodeCamp，尤其是基本 HTML 和基本 CSS 部分。
• 练习：创建一个简单的页面。例如，一个登陆页面或一个烹饪食谱。
• 博客文章：编写超快的 HTML 代码、如何更好地编写 CSS以及如何仅使用三行 CSS 制作响应式网格。

JavaScript

这就是驱动你的应用的关键。JavaScript 是一种对任何 Web 应用都至关重要的编程语言。JavaScript 的应用无处不在：服务器、桌面应用，甚至移动应用！它是前端开发人员的必备技能。

• 资源：你可以继续学习 freeCodeCamp，也可以看看 Wes Bos 的课程：JavaScript 入门。如果你注重实践，我强烈推荐Wes Bos 的JavaScript 30 。
• 练习：您应该能够构建第一个小型应用程序，例如待办事项应用程序或倒计时应用程序。
• 博客文章：关于 JavaScript 数组你应该知道些什么以及JavaScript 中的对象和数组解构

CSS框架

纯 CSS 很好。但编写一些 CSS 代码并不总是那么容易。尝试学习一些 CSS 框架，例如TailwindCSS、Bulma或Bootstrap。这类框架在公司中很常见，熟悉它们很重要。

• 资源：如果你感兴趣的话，可以参考 Tailwind CSS 的一系列截屏视频。通常情况下，阅读 CSS 框架的文档就足够了。
• 练习：改进你在学习 HTML 和 CSS 时构建的页面，或者改进你用 JavaScript 创建的应用程序。选择权在你！

版本控制（Git 和 GitHub）

版本控制对于在同一个项目上进行协作非常有用。你无法逃避它，所以要熟悉它git commit, git push,或分支。你还需要学习如何使用源代码管理平台，例如GitHub、GitLab。

• 资源：来自 GitHub 的指南，尤其是初学者指南。
• 练习：在 GitHub 上创建一个帐户。添加你之前做的项目（落地页、待办事项应用，或者任何你做过的代码相关的项目）。这能让你练习一下那些著名的git status git add、git commit、git push。

JS框架

大多数公司并不使用纯 JS。他们会使用一些框架来提高效率，编写出色的应用程序。目前市场上有三种领先的解决方案：React、Vue 和 Angular（尽管 Angular 的使用率较低）。React和 Vue 是最受欢迎的，因此我强烈建议学习其中一种，以最大限度地提高你的求职机会。

通过学习 JS 框架，您将学习诸如npm和yarn之类的包管理器。您还将学习一些工具以及如何与 API 交互。别担心。我下面提供的资源涵盖了所有这些内容。

• 资源：Tyler McGinnis 的优秀 React 课程。学完之后，你还可以参加React Hooks 课程来学习最新技术。或者，Andrei Neagoie 也创建了一门完整的课程：Complete React Developer。在 Vue 方面，你可以参考Vue Mastery或Vue School，尤其是Vue.js Master Class。
• 练习：你可以在这里构建更高级的应用。比如天气应用、电影搜索应用，或者如果你愿意，可以开发一个待办事项应用的第二个版本。
• 博客文章：Vue 入门和如何使用 Vue CLI 创建应用程序。如果您正在学习 React，可以阅读这些文章来初步了解 Vue。我还写了一篇关于 React 工具的文章：如何为您的 React 应用程序设置 ESLint 和 Prettier。

现代 CSS

CSS 又回来了！既然你已经知道如何用 JS 框架构建应用程序，你需要掌握一些高级 CSS 技能：Flexbox、Grid、预处理器等等！研究一下像Emotion这样的 CSS-in-JS 解决方案或许会很有趣。

• 资源： Jonas Schmedtmann 的高级 CSS 和 Sass。你将学习如何在此基础上构建设计精良的页面！
• 练习：还记得你之前做的落地页吗？用你新学到的 CSS 技能改造一下吧。现在或许也是打造你作品集初版的好时机。

信不信由你，但这些就是你成为一名初级前端开发人员所需了解的全部内容。大多数公司都知道你不可能无所不知。他们也对你的职业发展道路感兴趣。他们知道随着时间的推移，你会获得越来越多的知识。

然而，上述技能不足以让你成为顶尖的前端开发人员。如果你想在前端开发中更得心应手，下面列出了其他一些需要掌握的技能。在你的职业生涯中，你不可避免地会遇到这些技能。

高级 JavaScript

如果你厌倦了 JavaScript，那我可没好消息要告诉你。你或许知道如何用 JavaScript 构建酷炫的应用，但这还不是全部。你还应该了解JavaScript 的底层工作原理以及一些高级 JavaScript 机制，例如事件循环、闭包、异步操作以及原型链。

• 资源：你可以去 Frontend Masters 上观看 Will Sentance 的课程《JavaScript：难点》。你也可以看看 Tyler McGinnis 的课程《高级 JavaScript》。
• 博客文章：Airbnb 国际化库逆向工程以及超过 20 个提升 JavaScript 技能的资源
• 练习：练习高级 JS 有点难。这更需要长期坚持。你写的代码越多，你的水平就越高。所以现在就练习 JS 吧！

测试

在构建应用程序时，总会遇到部署或添加新功能时缺乏信心的情况。了解如何测试前端应用程序是您工具箱中的宝贵资产。测试库生态系统将成为您测试的最佳伙伴。

• 资源：Kent C. Dodds 是测试方面的专家。他创建了一门很棒的课程，叫做《JavaScript 测试》。
• 练习：测试你的一个应用。从小处着手。你不需要一开始就写复杂的测试！目标是熟悉测试。
• 博客文章：如何使用 Jest 测试 JavaScript、React 应用测试完整初学者指南

无障碍设施

您需要了解如何在构建应用时充分考虑无障碍功能。开发人员经常会忽略无障碍功能，但事实并非如此。请考虑所有用户，包括盲人、色盲或使用语音阅读器的用户。

• 资源：Marcy Sutton 的另一门 Frontend Masters 课程：JavaScript 应用程序中的可访问性
• 练习：对你之前的一个应用进行无障碍审核。找出问题所在，并用无障碍解决方案替代。

表现

世界瞬息万变，我们渴望一切尽在掌握。应用程序也是如此；用户无法忍受运行缓慢的应用程序。此外，运行缓慢还会对您的业务造成严重影响。了解如何构建高性能应用程序。

• 资源：Steve Kinney 的另一门 Frontend Masters 课程：Web 性能
• 博客文章：提升 Web 应用程序性能的 3 种简单方法

搜索引擎优化

没有搜索引擎，你在互联网上什么都找不到。SEO 就是优化你的网站，让任何人都能用正确的关键词快速找到你的网站。

• 资源：Ahrefs是 SEO 的参考工具之一，它有一些很棒的指南，例如：SEO 基础知识：SEO 成功初学者指南
• 实践：如果您已经有作品集，请改善其 SEO。

苏维埃社会主义共和国

目前，应用程序渲染主要有两种方式：客户端渲染和服务器渲染。React 和 Vue 默认在客户端渲染，但这不利于 SEO。许多公司正在研究像Next或Nuxt这样的服务器渲染应用。

• 资源：Wes Bos 创建了一门很棒的课程，涵盖 React、Next.js 和 GraphQL：高级 React。它能教你构建一个在线商店应用！

TypeScript

TypeScript 就是 JavaScript，但添加了类型。越来越多的开发者，尤其是在中大型公司，开始欣赏 TypeScript 提供的额外安全层。了解这一点是获得聘用的一大优势！

• 资源：我之前提到过前端大师吗？Mike North 有一门课程，叫做TypeScript 3 Fundamentals。如果你想快速入门，可以查看官方文档中的“5 分钟学会 TypeScript” 。

UI/UX 设计

通常这不是你的工作。这些技能主要针对设计师。设计师负责创建模型，而你的任务是让它们完全交互。然而，了解如何构建模型以及如何使用颜色、阴影、间距或组件仍然是值得的。

除此之外，初创公司通常聘请不起设计师。因此，懂得设计，即使不多，对他们来说也是一大优势！

• 资源：《重构 UI》是一本很棒的设计书籍。最近我听说Shift Nudge可以让你掌握最强的 UI 技能。虽然价格不菲，但我觉得物有所值。
• 练习：设计就像任何技能一样。练习得越多，就越熟练，就是这样。为此，你可以挑战每日 UI 挑战。
• 博客文章：开发人员如何更好地掌握颜色以及学习设计对于前端开发人员的重要性

数据库和服务器

再说一遍，这不是你的工作。但是，你还需要将从服务器获取的数据集成到你的前端应用中。了解如何构建一个基本的 API 或许对你来说很有价值，这样可以更好地理解后端开发人员的日常工作。

呼！技能就讲到这里。还有一些技能需要学习，比如学习如何构建 PWA、Gatsby之类的静态站点生成器、GraphQL或Docker，但那篇文章太长了😅

副业

你掌握了所需的知识，并开发了一些小型应用程序或网页，太棒了！现在是时候将你的技能付诸实践，并创建一些项目了。

这里要记住一个关键的事情：一个大项目胜过一百个小项目。

确实，当你申请一家公司时，他们需要知道他们是否信任你，并会根据你的工作支付报酬。从零开始构建一个项目，即使它并不完美，也是展现这一点的好方法。做一百个小项目并不能证明你能走多远。当然，这能证明你充满热情，但并不能证明你的技能！这是一个你不应该犯的常见错误。

构建应用程序

以下是开始副项目的步骤：

1. 寻找一个应用程序/项目创意。如果你需要寻找创意方面的帮助，可以阅读这篇文章（又是自我推销🙃）。
2. 如果可行的话，就构建项目。运用你学到的技术和技能（前端框架、CSS 技能等），并将你的代码发布到 GitHub 上。公司可能会要求你展示你的代码，而 GitHub 正是你的理想之选。
3. 别放弃！是的，你的项目最终会到达代码库变得丑陋的阶段，但这对每个人来说都是一样的，即使是大公司也是如此。
4. 部署项目，让每个人都能使用。Netlify或ZEIT Now将是你最好的选择。

项目构想：

• Twitter 克隆版
• 一款用于管理您观看的电影和电视剧的应用程序
• 一款聊天应用
• Todoist克隆版
• 您想到什么了吗？

如果你对自己的后端技能没有信心，可以看看Firebase。它是一款功能强大且相对容易使用的工具。

技术博客

即使你不是某个领域的专家，开设博客并学习撰写技术文章也是一个好主意。拥有这样的博客既能展现你的写作能力，又能提升你的技术水平。更重要的是，它还能巩固你的学习成果！

你可以用Gatsby创建博客，特别是用这个博客启动器。至于文章创意，完全由你决定。世界尽在你掌控。选择一个主题，然后开始写作。

文件夹

最后，建立一个包含以下内容的投资组合：

• 描述
• 你的技能
• 您的项目
• 如果你有一些技术帖子
• 我们如何联系您或联系表格

求职

让我们回顾一下：

• ✅ 你有知识
• ✅ 你建立了一个或两个大项目，甚至一个博客
• ✅ 你有一个投资组合

现在是找工作的好时机。这很难，因为很多公司都在寻找至少有五年经验的开发人员。以下是一些建议：

• 如果一家公司正在寻找至少拥有一两年专业经验的开发人员，那就申请吧！有些公司会设置类似的标准来提高入职门槛。你可能很适合，所以赶紧申请吧。
• 你不必符合公司要求的所有技能。真的。如果他们列出了 TypeScript，而你不懂，也没关系。你仍然可以申请。
• 如果你需要撰写一封动机信，不妨将其个性化。你写得越符合公司需求，它就越有影响力。
• 参加你所在城市或线上的聚会。在那里你可以与其他开发者、产品经理或设计师建立联系并交流。公司通常会赞助聚会来招聘更多人才。

对于求职本身，您可能会在LinkedIn上找到机会，因此您必须在其上创建个人资料并将您的项目放在那里！

面试

你被选中了，可以参加面试了？太棒了。但你不知道会发生什么。你缺乏自信。也许你觉得这不可能，觉得他们雇佣你是错的，觉得你是个冒名顶替者。别这么想。很多开发者都认为自己还没准备好胜任这份工作。其实不然。你开发过项目，了解相关技术，这很宝贵。当然，你并非无所不知，但没有人真的无所不知。

我不知道所有公司具体的面试流程是怎样的。但我知道一般是这样的：

1. 您申请一份工作或者有人联系您，通常是人力资源部门的某个人。
2. 你可以打电话，或者亲自与HR见面。你可以谈谈你之前的经历、你是谁、你在寻找什么、这家公司等等。
3. 你会进行技术测试，通常是由公司的前端开发人员、技术主管或首席技术官进行。你需要回答技术问题。你也有可能要完成一个带回家的项目，然后提交公司的源代码。如果是这样，那就好好完善一下吧！
4. 你会见到公司的创始人或领导。他们通常想知道会聘用哪些人，所以你会和他们讨论公司、你的动机等等。根据公司规模，这种情况可能不会发生。
5. 如果一切顺利，你就会收到录用通知！不必非要选择录用通知最好的公司。薪水固然重要，但你的幸福感、在公司的感觉以及你的职业发展道路也同样重要！

我要警告你：有时候，这个过程可能会很长。

以下是一些助您取得成功的建议：

• 保持专业但放松。你不是在银行面试。我第一次去面试的时候，面试官们的冷静程度让我很惊讶。所以，别有压力（不过也别太放松，找到最佳状态就好😄）
• 展现你对这个项目的热情。很遗憾，由于缺乏经验，第一份工作很难找到。但是，你可以展现你对这份工作的渴望，以及你对公司做出的贡献。
• 根据谈话对象调整你的语气。如果你的谈话对象从事与商业相关的工作，就不要讲太多技术细节。
• 不要低估软技能。面试官会考察你是否适合这份工作，以及他是否愿意与你共事，尤其是技术人员！展现出与你共事的乐趣：沟通、微笑，并保持谦逊。如果你想知道应该掌握哪些软技能，我写了一篇关于每个开发人员都应该具备的软技能的文章。
• 面试时不要撒谎。如果你不知道，那你就不知道。即使你答不上所有问题，也没什么大不了的。经验丰富的开发人员不喜欢胡扯的开发人员。
• 开发人员总是会做出权衡。很少有放之四海而皆准的解决方案。请展现你意识到这一点，并思考什么能为公司带来价值。这体现了你的深思熟虑，我们会非常感激你的。

好吧，这个问题说了好长。正如之前所说，成为一名开发者是一条漫长而又充满回报的道路！希望这篇文章能让你对如何找到工作有所启发。