101 lines
8.7 KiB
Plaintext
101 lines
8.7 KiB
Plaintext
---
|
||
title: 前端简历-前端特定写作技巧和示例
|
||
description: 提高你的前端开发者/网页开发者的简历，以获得面试机会。
|
||
---
|
||
|
||
为了申请前端工程师职位的面试，我们必须提交一份通过公司简历筛选过程的简历。 虽然有许多现有的资源可帮助你制作好的软件工程师简历，但很少针对前端工程师。 有关通用软件工程师简历提示，请参考[面试手册](https://www.techinterviewhandbook.org/resume/)。
|
||
|
||
在本页上，我们提供了一些前端特定的技巧，以帮助前端工程师改进他们的简历并进入面试阶段。
|
||
|
||
## 基本要求
|
||
|
||
- 如果您有不到 5 年的经验，则最好不要超过一页，最多不要超过两页。
|
||
- 使用 Microsoft Word、Google Docs、Pages 或 LaTeX 构建，以便应聘者跟踪系统（ATS）可以解析简历。 避免使用设计软件。
|
||
- 提交 PDF 格式。
|
||
|
||
## 格式和美观度
|
||
|
||
前端工程师经常处理用户界面，并且期望他们有敏锐的设计感。 如果您的简历外观不美观，那么这将给你身为前端工程师的形象带来很不好的影响。
|
||
|
||
- 使用单列格式。
|
||
- 使用大多数操作系统上可用的常见字体，例如 Arial、Calibri 或 Garamond。 避免花俏的字体。
|
||
- 只使用一个或最多两个字体（一个用于标题，另一个用于正文）。
|
||
- 最小字体大小为 11px。
|
||
|
||
你的简历不需要过分漂亮和花哨，它只需要看起来整洁和视觉上令人愉悦即可。 如果你有多余的现金，最快创建美观且适合 ATS 的简历的方法是从[FAANG Tech Leads](https://www.faangtechleads.com/)购买简历模板。
|
||
|
||
## 工作经验部分
|
||
|
||
简历的工作经验部分是最重要的，应占据简历的大部分空间。 此部分应着重强调您对过去或目前雇主的业务目标的贡献，
|
||
|
||
为了提高简历的 ATS 排名，应在可能的情况下在简历中散布“Front End”。 如果您的正式头衔是“软件工程师”，但您已作为工作的一部分进行了大量的前端开发，请考虑将您的头衔更改为“前端工程师”/“前端软件工程师”/“软件工程师（前端）”等，以提高相关性。
|
||
|
||
人们常犯的一个错误是没有提供关于他们的经验和成就的足够细节。 为了脱颖而出，重要的是要提供有关您的经验和成果的规模、复杂性和影响的足够信息。
|
||
|
||
- **差 👎**：“使用 HTML、CSS 和 JavaScript 构建了一个网站”。
|
||
- **更好 👍**：“构建了一个高性能的电子商务网站，允许用户浏览数百种商品，将商品添加到购物车并使用 PayPal 结账。 该网站每月有 20k 的活跃用戶，加载速度低于 2 秒，Lighthouse 得分为 98。 使用的技术：Next.js、React、GraphQL、CSS 模块”。
|
||
|
||
以下是一个前端相关的技术成就列表，适合提到：
|
||
|
||
- **产品工作**：详细说明产品内部构建的功能。
|
||
- **性能**：提供的性能改进，以及它们所带来的百分比收益。 例如， 页面加载大小、页面加载时间、Lighthouse 得分改进等。
|
||
- **测试**：编写测试的数量，它们覆盖了多少重要流程，测试覆盖率的百分比增加。
|
||
- **SEO**：SEO 错误/警告的降低占百分比或是具体数字。 如果公司使用 SEO 工具如 Ahrefs 和 Semrush，则可以轻松获得此度量标准。
|
||
- **可访问性(a11y)**：修复的 a11y 错误数量，改进了符合 WCAG AA/AAA 级标准的流程数目，以及增加的 a11y 组件数目。
|
||
- **工具**：现代化技术在代码库中的现代化，例如将 jQuery 代码库迁移到 React、通过引入 TypeScript 提高类型安全性等。 要么描述产品，要么提到代码行数/工程师数量，以更好地理解规模和复杂性。
|
||
|
||
## 技能部分
|
||
|
||
“技能”部分是你拥有的语言和技术的列表，可作为当 ATS/招聘人员/招聘经理阅读此部分时的快速清单/摘要。 至少，应该为“语言”和“技术”类别有两个列表项：
|
||
|
||
由于构建前端应用程序需要多种不同的技术，您可能会发现您有许多要添加到简历技能部分中的技术。 但不要添加每个技术！ 这会削弱实际重要技能的权重。 优先考虑以下语言/技术：
|
||
|
||
### 1. 在工作列表中出现
|
||
|
||
如果某项技能出现在工作列表中并且你有使用它的经验，一定要将其添加进去。
|
||
|
||
### 2. 仅列出影响架构的关键技术
|
||
|
||
像 React 这样的库对其他相关技术选择产生了很大影响，而像 Underscore/Lodash 这样的库与架构无关，可以轻易地被替换掉。 优先考虑前者，省略小型/实用库，这些库易于替换。
|
||
|
||
### 3. 广为人知或迅速走红
|
||
|
||
这表明你跟上了现代前端生态系统的发展。 公司也可能正在考虑迁移到该技术，如果您在该技术方面有经验，这是一个加分项。
|
||
|
||
### 4. 展示您的广度
|
||
|
||
列出所有的 React、Angular 和 Vue（所有前端视图框架）是过度的，即使您确实熟悉它们中的所有内容。 很少有工作列表会列出多个用于同一目的的技术（如果他们这样做，这是一个红旗信号）。 添加过多的技术（特别是同一类别的技术）会使读者更难以了解您的技能。
|
||
|
||
尝试列出至少一个，最多两个属于以下类别的技术。 不能全部都适用于您，因此只包含相关的内容。 下面是一些热门的例子。
|
||
|
||
- **View**：[React](https://reactjs.org/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
|
||
- **Rendering Frameworks**：[Next.js](https://nextjs.org/)、[Gatsby](https://www.gatsbyjs.com/)、[Nuxt](https://nuxtjs.org/)、[SvelteKit](https://kit.svelte.dev/)
|
||
- **State Management**：[Redux](https://redux.js.org/)、[Flux](https://facebook.github.io/flux/)、[Jotai](https://jotai.org/)、[Zustand](https://github.com/pmndrs/zustand)、[Relay](https://relay.dev/)
|
||
- **CSS**：[CSS Modules](https://github.com/css-modules/css-modules)、[Styled Components](https://styled-components.com/)、[Tailwind CSS](https://tailwindcss.com/)、[Sass](https://sass-lang.com/)、[Less](https://lesscss.org/)
|
||
- **CSS 框架**：[Bootstrap](https://getbootstrap.com/)、[Material UI](https://mui.com/)、[Chakra UI](https://chakra-ui.com/)、[Bulma](https://bulma.io/)
|
||
- **单元测试**：[Jest](https://jestjs.io/)、[Vitest](https://vitest.dev/)、[Storybook](https://storybook.js.org/)、[Mocha](https://mochajs.org/)、[Jasmine](https://jasmine.github.io/)、[Karma](https://karma-runner.github.io/latest/index.html)
|
||
- **数据获取**：[GraphQL](https://graphql.org/)、[tRPC](https://trpc.io/)、[TanStack Query](https://tanstack.com/query/v3/)、[swr](https://swr.vercel.app/)
|
||
- **集成测试**：[Cypress](https://www.cypress.io/)、[Selenium](https://www.selenium.dev/)、[Puppeteer](https://pptr.dev/)、[WebdriverIO](https://webdriver.io/)、[Playwright](https://playwright.dev/)
|
||
- **语言工具**：[Babel](https://babeljs.io/)、[TypeScript](https://www.typescriptlang.org/)、[Flow](https://flow.org/)、[ESLint](https://eslint.org/)
|
||
- **编译工具（可选）**：[webpack](https://webpack.js.org/)、[Vite](https://vitejs.dev/)、[Parcel](https://parceljs.org/)、[Gulp](https://gulpjs.com/)、[Rollup](https://rollupjs.org/)、[Browserify](https://browserify.org/)
|
||
- **软件包管理（可选）**：[npm](https://www.npmjs.com/)、[Yarn](https://yarnpkg.com/)、[pnpm](https://pnpm.io/)
|
||
|
||
### 示例
|
||
|
||
这是我们的简历的“技能”部分的示例：
|
||
|
||
- **语言**：HTML、CSS、JavaScript、TypeScript
|
||
- **技术**：React、Next.js、Tailwind CSS、Jest、Storybook、Cypress、React Query、Yarn、webpack
|
||
|
||
这恰好是用于构建 GreatFrontEnd 的技术堆栈。 您的“语言”项目下应该有 HTML、CSS、JavaScript，否则可能存在大问题。
|
||
|
||
## 项目部分
|
||
|
||
前端领域随着新的 JavaScript 框架和 CSS 方法的不断出现而不断发展。 在简历中列出项目表明您热爱这个领域，为了跟上最新的前端技术而付出了额外的努力，尤其是如果它们没有在你的工作中使用，这是一个巨大的正面信号。 列出每个项目所使用的技术，特别是如果它们是公司使用的现代技术。 这有助于提高简历的 ATS 排名并留下更深的印象。 在可能的情况下，将代码放在 GitHub 上，并梳理 README 以包括产品的截图。 将项目代码和现场网站的链接添加到简历中。
|
||
|
||
开源贡献，尤其是对复杂代码库的非微小更改，被视为技术能力的标志。 如果您已经创建或是开源项目的维护者，则更好。
|
||
|
||
## 总结
|
||
|
||
虽然[面试手册的通用软件工程师简历提示](https://www.techinterviewhandbook.org/resume/)对前端工程师来说基本上已经足够了，但上述技巧将帮助您提升前端工程师简历并将其提到更高的层次。
|