Front End Resume — Front End Specific Writing Tips, with Examples

To even get an interview for a Front End Engineer position, we have to submit a resume that passes the company's resume screening process. There are many existing resources out there to help you craft a good Software Engineer resume but few are tailored towards Front End Engineers. For general Software Engineer resume tips, refer to Tech Interview Handbook.

On this page, we provide some front end-specific tips to help Front End Engineers improve their resumes and get to the interview stage.

Basic Requirements​

• Preferably kept under one page if you have less than 5 years of experience, not exceeding two pages.
• Build using Microsoft Word, Google Docs, Pages, or LaTeX so that Applicant Tracking System (ATS) can parse the resumes. Avoid using design software.
• Submit in PDF format.

Formatting and Aesthetics​

Front End Engineers deal with user interfaces frequently and are expected to have a keen sense of design. It will reflect very poorly on you as a Front End Engineer if your resume isn't aesthetically pleasing.

• Use a single column format.
• Use common fonts which are available on most operating systems like Arial, Calibri, or Garamond. Avoid fancy fonts.
• Stick to a single or at most two fonts (one font for headings and another for the body).
• Minimum font size of 11px.

Your resume doesn't need to be super pretty and fancy, it just needs to look neat and visually pleasing. If you have cash to spare, the quickest way to create an aesthetically pleasing and ATS-friendly resume is to purchase resume templates from FAANG Tech Leads.

Work Experience Section​

The work experience section of your resume is the most important and should take up the majority of the space on your resume. It is important to highlight your contributions to your past or current employer's business goals in this section,

To improve ATS ranking of your resume, sprinkle "Front End" across your resume where possible. If your official title is "Software Engineer" but you have been doing a significant amount of front end development as part of your job, consider putting your title as "Front End Engineer" / "Front End Software Engineer" / "Software Engineer (Front End)" instead to improve the relevance.

It is common for people to make the mistake of not providing enough details about their experiences and achievements. To stand out, it is important to provide sufficient information about the scale, complexity, and impact of your experiences and achievements.

• Bad 👎: "Built a website with HTML, CSS, and JavaScript".
• Better 👍: "Built a performant e-commerce website that allowed users to browse from hundreds of items, add to their cart and checkout with PayPal. The site has 20k MAU, loads under 2 seconds and a Lighthouse score of 98. Technologies used: Next.js, React, GraphQL, CSS modules."

Here's a non-exhaustive list of front end-related technical achievements that are suitable to be mentioned:

• Product work: Elaborate on the features built within a product.
• Performance: Performance improvements made and the resulting gains in percentage. E.g. page load size, page load time, Lighthouse score improvements, etc.
• Testing: Number of tests written, how many critical flows they cover, % increase in test coverage.
• SEO: % or numerical reduction in SEO errors/warnings. This metric is easy to obtain if the company uses SEO tools like Ahrefs and Semrush.
• Accessibility (a11y): Number of a11y errors fixed, number of flows that were improved to meet WCAG AA/AAA level conformance, number of components where a11y improved.
• Tooling: Modernizing of technologies used in a code base, e.g. migrating a jQuery code base to React, improving typesafety by introducing TypeScript. Either describe the product or mention rough number of LOCs/engineers working on the code to give a better sense of the scale and complexity.

Skills Section​

The "Skills" section is a list of languages and technologies you possess and serves as a quick checklist/summary when ATS/recruiters/hiring managers read this section. At the minimum, you should have two list items for the "Languages" and "Technologies" categories:

Due to the huge number of different technologies that are required to build front end applications, you might find that you have many technologies to add into the skills section of your resume. However, do not add every technology! This dilutes the weight of the skills that actually matter. Prioritize the languages/technologies that:

1. Appear in the job listing​

If a skill appears in the job listing and you have experience with it, you should definitely add it in.

2. List only key technologies that influence the architecture​

Libraries like React heavily influence the other accompanying technology choices while libraries like Underscore/Lodash are architecture-agnostic and can easily be swapped out. Prioritize the former and omit small/utility libraries that are easily replaceable.

3. Widely known or are rapidly gaining popularity​

This shows that you keep up with the modern front end ecosystem. The company might also be considering moving towards that technology and if you are experienced in that it's a plus.

4. Demonstrate your breadth​

Listing all of React, Angular, and Vue (all front end view frameworks) is overkill even if you are indeed familiar with all of them. Few job listings will list more than one technology that serves the same purpose (and it's a red flag if they do). Adding too many technologies (especially of the same category) makes it harder for the reader to get a sense of your skills.

Try to list at least one and at most two technologies that belong to the following categories. Not all categories will apply to you, so only include the relevant ones. Popular examples are shown below.

• View: React, Angular, Vue, Svelte
• Rendering Frameworks: Next.js, Gatsby, Nuxt, SvelteKit
• State Management: Redux, Flux, Jotai, Zustand, Relay
• CSS: CSS Modules, Styled Components, Tailwind CSS, Sass, Less
• CSS Frameworks: Bootstrap, Material UI, Chakra UI, Bulma
• Unit Testing: Jest, Vitest, Storybook, Mocha, Jasmine, Karma
• Data Fetching: GraphQL, tRPC, TanStack Query, swr
• Integration Testing: Cypress, Selenium, Puppeteer, WebdriverIO, Playwright
• Language Tooling: Babel, TypeScript, Flow, ESLint
• Build Tools (optional): webpack, Vite, Parcel, Gulp, Rollup, Browserify
• Package Management (optional): npm, Yarn, pnpm

Example​

This would be how the "Skills" section on our resume looks like:

• Languages: HTML, CSS, JavaScript, TypeScript
• Technologies: React, Next.js, Tailwind CSS, Jest, Storybook, Cypress, React Query, Yarn, webpack

This is exactly the technology stack used to build GreatFrontEnd. You should definitely have HTML, CSS, JavaScript under your "Languages" item, otherwise there's something hugely wrong.

Projects Section​

The front end domain advances pretty fast with new JavaScript frameworks and CSS methodologies emerging every year. Having projects on your resume suggests that you are passionate about the field and put in the extra effort to up with latest front end technologies especially if they are not used at your job, which is a huge positive signal. List down the technologies used for each project especially if they are modern technologies that the company uses. It helps with ATS ranking and leaving a deeper impression on the reader. Where possible, put the code on GitHub and polish up the README with screenshots of the product. Add links to the project's code and live website into your resume.

Open source contributions, especially non-trivial changes to complex code bases are seen as a sign of technical competency. Even better if you have created or are a maintainer of open source projects.

Summary​

While Tech Interview Handbook's general Software Engineer resume tips are mostly sufficient for Front End Engineers, the tips above will help you to elevate your Front End Engineer resume and bring it to the next level.