How to write an effective CV
A Frontend CV works when it clearly communicates your real stack, product context, focus on UX/accessibility, and measurable results on performance and quality.
First page: what a recruiter should understand in 10 seconds
Give an immediate snapshot of seniority, frameworks, and product context.
- Role and seniority (Junior/Mid/Senior) + real years of experience.
- Main frameworks (React/Next.js, Vue) and TypeScript.
- Context: web app, e-commerce, dashboard, B2B/B2C, design systems.
- Differentiators: accessibility (WCAG), performance (Core Web Vitals), testing.
Writing: short, verifiable bullet points
6-10 strong bullets per role beat long paragraphs.
- Use action verbs: built, implemented, optimized, refactored, standardized.
- Mention real outcomes: improved CWV, reduced UI regressions, increased component reuse.
- Use numbers only if real and defendable (e.g., -35% load time, +X Lighthouse score).
ATS keywords (without forcing them)
Include keywords that match common job descriptions.
- React, Next.js, Vue, TypeScript, semantic HTML, CSS/Sass/Tailwind
- Design systems, component libraries, Storybook
- Accessibility, WCAG, ARIA, keyboard navigation
- Core Web Vitals, Lighthouse, performance optimization
- Testing: Jest, Testing Library, Cypress
- REST/GraphQL integration, state management
Professional summary
Your summary (3-5 lines) should quickly state: experience, stack, product type, and one clear strength (UX, performance, or accessibility).
Recommended structure (simple and effective)
A formula that works for most Frontend profiles.
- Who you are + years of experience (or junior profile).
- Stack (React/Next/Vue, TypeScript) and product types (e-commerce, dashboards, SaaS).
- Your differentiator: performance, accessibility, design systems, quality/testing.
- Optional: one real outcome (CWV improvement, fewer regressions, component reuse).
Ready-to-use examples (customize)
Copy and adapt to your profile.
- “Frontend Developer with 6+ years in React/Next.js and TypeScript. I build responsive, accessible UI and have experience with design systems and Core Web Vitals optimization (LCP/CLS/INP).”
- “Frontend Engineer specializing in Vue and component libraries: I deliver consistent, tested interfaces, integrating REST/GraphQL APIs while optimizing performance and UX in digital products.”
Work experience
This is where you win or lose. For Frontend, experience should describe real UI work, technical choices, quality, and impact on UX/performance.
Strong bullet points: what to include
A strong list covers: UI, data, quality, performance, collaboration.
- Components and design systems: reuse, consistency, documentation.
- State management and data fetching: caching, invalidation, loading/error states.
- Accessibility: WCAG/ARIA and focus/keyboard handling.
- Performance: code splitting, lazy loading, image/font optimization, CWV.
- Testing: unit/component and E2E tests, reduced regressions.
- Collaboration: code reviews, pairing, alignment with design/backend.
“Real-world” bullet examples (no made-up results)
Replace with your context.
- “Built reusable, documented components for a design system, improving UI consistency and delivery speed.”
- “Improved LCP/CLS through image lazy loading, font strategy, and bundle reduction, increasing perceived performance.”
- “Introduced E2E tests for critical flows (login/checkout), reducing post-release UI regressions.”
Key projects and portfolio
In frontend, projects matter when they demonstrate quality: accessibility, performance, component architecture, and deployment. 2-4 strong projects beat 10 empty demos.
What makes a project CV-worthy
Reviewers look for technical maturity and UX attention.
- Clear README: goal, stack, how to run, architecture decisions.
- Performance: CWV/Lighthouse awareness and strategies (images/fonts/bundles).
- Accessibility: keyboard navigable components and proper ARIA roles.
- Testing: at least basic tests and/or E2E for one key flow.
- Deployment: demo link (Vercel/Netlify) when possible.
Examples of effective projects
Typical ideas that showcase frontend skills.
- Next.js e-commerce: SEO, performance, product pages, filters, demo checkout.
- Dashboard: charts, filters, dataset handling, rendering optimization.
- Design system: accessible component library + Storybook + tokens.
- PWA: offline caching, installability, performance, and UX.
Technical skills and soft skills
In 2026, production-ready skills stand out: accessibility, performance, quality, collaboration. Group skills and stay relevant.
Hard skills (hands-on) for Frontend
Technical skills recruiters expect to see.
- Semantic HTML, modern CSS, responsive design, component architecture.
- JavaScript/TypeScript, React/Next.js, Vue, routing and rendering strategies.
- State management and data fetching (React Query/Redux; Vuex/Pinia).
- Performance: code splitting, lazy loading, CWV, Lighthouse.
- Accessibility: WCAG, ARIA, keyboard navigation, focus management.
- Testing: Jest, Testing Library, Cypress.
Soft skills (that really matter in Frontend)
Don’t list adjectives: tie them to real situations.
- Designer collaboration: translating requirements and enforcing design system consistency.
- Technical communication: explaining trade-offs (performance vs features, UX vs complexity).
- Ownership: maintaining components, reducing tech debt, preventing regressions.
- Problem solving: cross-browser debugging and handling production issues.
2026-valued skills (only if real)
Include only if you’ve actually used them.
- Design tokens and theming (CSS variables), dark mode.
- Complex accessible components (modal, dropdown, combobox) with focus trapping.
- SSR/SSG and SEO optimization with modern frameworks (Next).
- Frontend observability: error tracking and performance monitoring (approach).
Education
For Frontend, projects and technical quality often matter most. Keep education essential and add only relevant courses.
Degree
List degree/diploma and institution. With experience, avoid excessive detail.
Useful, credible courses
A few targeted courses are better than an endless list.
- Advanced JavaScript/TypeScript (if applied in projects).
- Accessibility (WCAG) and inclusive design.
- Performance and Core Web Vitals.
- UX basics and design systems (when aligned with the role).
Languages
In frontend roles, English is often needed for documentation, issues, and collaboration. Use realistic levels and describe what you can do.
How to list them credibly
A realistic level plus a practical note beats an “excellent” you can’t defend.
- Use CEFR (A1-C2) or basic/intermediate/advanced consistently.
- If you use it: “reading technical documentation and communicating via tickets/calls” (if true).
Frontend KPIs and metrics
Frontend KPIs relate to performance, UX quality, and stability: CWV, error rates, conversion, regressions. Use the right language without inventing numbers.
Commonly tracked indicators
Not always formally shared, but often monitored with tools and dashboards.
- Core Web Vitals: LCP, CLS, INP (and TTFB where relevant).
- Load time and perceived performance (Lighthouse, RUM).
- Client-side error rate (JS errors) and crash-free sessions.
- UI regression rate (post-release bugs) and test coverage on critical flows.
- Product metrics: conversion, drop-off, retention (when shared with the team).
How to add them without “throwing numbers”
If you lack data, describe actions and context; if you have it, only use real defendable metrics.
- “Improved CWV by optimizing images/fonts and reducing bundle size.”
- “Reduced UI regressions by introducing E2E tests for critical flows.”
- If you have real numbers: use them only if defendable (e.g., -35% load, +X Lighthouse).
Typical tools and stacks
Showing familiarity with real tools reduces perceived risk (faster onboarding).
Tools you can mention (avoid brands if you prefer)
Describe what you actually used.
- Frameworks: React/Next, Vue/Nuxt (if used).
- Tooling: Vite/Webpack, ESLint, Prettier, pnpm/npm/yarn.
- UI: Tailwind/CSS Modules/Sass, Storybook, design tokens.
- Testing: Jest, Testing Library, Cypress/Playwright.
- API: REST/GraphQL, auth/session handling.
- Performance/quality: Lighthouse, profiling, browser devtools.
When to name specific tools
Only if you remember them and they are truly relevant.
- If the job posting requires a tool (e.g., Next.js, Cypress), naming it helps.
- If you don’t remember an internal tool name, describe its function and context.
ATS format and layout
An ATS-friendly CV is readable for both software and hiring managers. Simplicity and clarity win.
Recommended format
Practical guidelines that work in most cases.
- 1 page for junior profiles; 1-2 pages for mid/senior.
- Standard sections: Summary, Experience, Projects, Skills, Education, Languages, Certifications.
- Short bullets (1-2 lines) and keywords in the text.
- Clean PDF, standard fonts, no complex graphics or extreme layouts.
What to avoid (common ATS issues)
These can break parsing or reduce readability.
- Text inside images, icons, or progress bars.
- Extreme columns and overly “creative” layouts.
- Complex tables for experience and technologies.
Mistakes to avoid
These are the mistakes that can get a Frontend CV rejected even with experience.
Too generic or only buzzwords
Writing “React, UX, performance” without context doesn’t communicate value.
- Add what you built: design systems, e-commerce, dashboards, complex forms.
- Add how: accessibility, testing, CWV improvements, API integration.
Inflated or unprovable skills
Frontend skills are validated in interviews and portfolios.
- Avoid listing too many frameworks if you don’t actually use them.
- Don’t claim “advanced accessibility” if you can’t handle focus/ARIA patterns.
No evidence of quality and production readiness
Modern frontend values testing, performance, and maintainability.
- Mention tests and processes (code review, CI) if real.
- Show attention to performance and regression prevention.
- Highlight collaboration and ownership of components.
Junior / entry-level Frontend CV
If you’re junior, show solid fundamentals: components, HTML/CSS, JS/TS, and your ability to turn design into UI, with attention to accessibility and quality.
What to include instead of work experience
Projects and activities that demonstrate practical skills.
- Projects with components and routing: at least one complete app (mini e-commerce or dashboard).
- Baseline accessibility: semantic HTML, focus handling, form validation.
- Well-maintained repo: README, run scripts, deployed demo.
- At least minimal testing for one flow and lint/format tooling.
Junior summary: ready example
A concrete example without inventing experience.
- “Junior Frontend profile: I build responsive UI with React/Vue and TypeScript, focusing on semantic HTML, baseline accessibility, and performance. Comfortable with Git, code reviews, and projects using lint/tests for more reliable releases.”
Skills to list (junior)
Pick coherent, defendable skills.
- Responsive HTML/CSS, modern JS, basic TypeScript.
- Components, simple state management, fetch APIs and error handling.
- Git, debugging with DevTools, basic testing.
- Attention to accessibility and semantics.
Career switch CV (from other roles)
If you come from design, QA, backend, marketing, or support, connect transferable skills and show projects that prove real frontend capabilities.
How to leverage previous experience
Translate your past into meaningful frontend signals.
- From UX/UI: focus on design systems, usability, handoff, and pixel-perfect execution.
- From QA: focus on quality, testing, regression prevention.
- From backend: focus on API integration, auth, error handling.
- From support/ops: focus on debugging, incident handling, and communication.
What you need to be credible
2-3 complete projects beat a long list of courses.
- A project with a design system and accessible components.
- A performance/SEO project (Next.js) with CWV attention.
- A deployed demo and a clear README.
Cover letter
If required, keep it short and concrete: stack, product type, 1-2 proof points (project or result), and availability.
6-line structure (it really works)
Perfect for tech applications: direct and fluff-free.
- 1 line: role and why you’re applying.
- 1-2 lines: stack and what you can do (UI, performance, accessibility, testing).
- 1 line: proof (project/real result).
- 1 line: why that company (product/stack/mission).
- 1 line: close and interview availability.
Short example (copyable)
Customize with company and availability.
- “I’m applying for the Frontend Developer role at [Company]. I have experience with React/Next.js (and/or Vue) and TypeScript building responsive, accessible UI, with strong attention to Core Web Vitals and testing (Jest/Cypress). In [project/context], I contributed to improving performance and UI consistency through reusable components and load-time optimizations. I’m particularly interested in [specific reason tied to product/stack]. I’d be happy to discuss my background in an interview.”
