Learning path
Frontend Engineer learning path: everything to study, topic by topic
Comprehensive Frontend Engineer assessment covering web fundamentals, component architecture, performance optimization, testing strategies, modern tooling, and advanced browser capabilities. Evaluates the full spectrum from HTML/CSS/JS foundations through micro-frontends and browser internals.
Short answer
To learn Frontend Engineer, work through 7 modules and 34 topics in the order they build on each other. It starts with Web Fundamentals, then moves on to Component Architecture and Performance & UX. Use the map as a checklist, or measure your level and study only what is missing.
What you will study
Topics are grouped by module. Open one to see its objectives and key concepts.
1 · Web Fundamentals5 topics
HTML Semantics & Accessibility
Semantic HTML5 elements, ARIA roles and attributes, landmark regions, accessible forms, screen reader behavior, and document outline
Objectives
- Select appropriate semantic HTML elements for content structure
- Apply ARIA attributes to enhance accessibility
Key concepts
- semantic elements
- ARIA roles
- ARIA attributes
- landmark regions
- accessible forms
- document outline
- screen reader navigation
- alt text
CSS Layout & Responsive Design
Flexbox, CSS Grid, responsive design with media queries, container queries, fluid typography, mobile-first approach, and layout best practices
Objectives
- Build responsive layouts using Flexbox and Grid
- Apply mobile-first responsive design principles
Key concepts
- flexbox
- CSS Grid
- media queries
- container queries
- fluid typography
- mobile-first
- box model
- position properties
JavaScript DOM & Events
DOM manipulation, event delegation, event propagation (bubbling/capturing), custom events, MutationObserver, and performance considerations for DOM operations
Objectives
- Manipulate the DOM efficiently with vanilla JavaScript
- Implement event delegation for dynamic content
Key concepts
- DOM traversal
- event delegation
- event bubbling
- event capturing
- custom events
- MutationObserver
- DOM performance
- requestAnimationFrame
Browser APIs & Storage
localStorage, sessionStorage, IndexedDB, Fetch API, AbortController, Geolocation, Intersection Observer, Resize Observer, and Clipboard API
Objectives
- Choose the appropriate storage mechanism for different use cases
- Leverage modern browser APIs for enhanced user experiences
Key concepts
- localStorage
- sessionStorage
- IndexedDB
- Fetch API
- AbortController
- Intersection Observer
- Resize Observer
- Clipboard API
Web Security (CORS/CSP/XSS)
Cross-Origin Resource Sharing, Content Security Policy, XSS prevention, CSRF protection, input sanitization, cookie security, and Subresource Integrity
Objectives
- Configure CORS headers for secure cross-origin requests
- Implement CSP to prevent XSS attacks
Key concepts
- CORS headers
- preflight requests
- Content Security Policy
- XSS vectors
- CSRF tokens
- input sanitization
- HttpOnly cookies
- Subresource Integrity
2 · Component Architecture5 topics
Component Design Patterns
Presentational vs container components, compound components, render props, higher-order components, hooks extraction, and composition over inheritance
Objectives
- Choose the right component pattern for a given use case
- Refactor components to improve reusability and separation of concerns
Key concepts
- presentational components
- container components
- compound components
- render props
- HOCs
- custom hooks
- composition
- single responsibility
State Management Strategies
Local state, lifted state, Context API, Redux/Zustand/Jotai, server state (React Query/SWR), URL state, and choosing the right state solution
Objectives
- Select the appropriate state management approach for different data types
- Avoid unnecessary global state by colocating state near its consumers
Key concepts
- local state
- global state
- server state
- URL state
- Redux
- Zustand
- React Query
- state colocation
Props vs State vs Context
Data flow patterns, prop drilling solutions, Context performance pitfalls, state derivation, controlled vs uncontrolled components, and data normalization
Objectives
- Identify when to use props, state, or context for data management
- Prevent unnecessary re-renders caused by context changes
Key concepts
- prop drilling
- context splitting
- derived state
- controlled components
- uncontrolled components
- data normalization
- selector patterns
- context performance
Design System Implementation
Design tokens, component library architecture, theming systems, variant APIs, documentation with Storybook, and cross-platform consistency
Objectives
- Architect a scalable design system with tokens and variants
- Document components effectively for team consumption
Key concepts
- design tokens
- component variants
- theming
- Storybook
- style encapsulation
- CSS-in-JS
- CSS Modules
- component API design
Micro-Frontend Architecture
Module federation, single-spa, shared dependencies, routing integration, team ownership boundaries, deployment independence, and communication patterns
Objectives
- Design micro-frontend architecture with clear team boundaries
- Evaluate trade-offs between integration strategies
Key concepts
- module federation
- single-spa
- shared dependencies
- runtime integration
- build-time integration
- team boundaries
- independent deployment
- cross-app communication
3 · Performance & UX5 topics
Core Web Vitals (LCP/CLS/INP)
Largest Contentful Paint optimization, Cumulative Layout Shift prevention, Interaction to Next Paint measurement, and field data vs lab data analysis
Objectives
- Diagnose and fix Core Web Vitals regressions
- Distinguish between field and lab performance metrics
Key concepts
- LCP
- CLS
- INP
- TTFB
- field data
- lab data
- Lighthouse
- CrUX
- performance budgets
Bundle Optimization & Code Splitting
Tree shaking, code splitting with dynamic imports, lazy loading routes, chunk strategies, bundle analysis, and dependency optimization
Objectives
- Implement code splitting strategies to reduce initial bundle size
- Analyze and optimize bundle composition
Key concepts
- tree shaking
- code splitting
- dynamic import()
- React.lazy
- route-based splitting
- bundle analyzer
- chunk naming
- preloading
Image & Asset Optimization
Modern image formats (WebP, AVIF), responsive images, lazy loading, CDN strategies, font loading optimization, and resource hints
Objectives
- Serve optimized images with modern formats and responsive sizing
- Implement resource hints for critical asset loading
Key concepts
- WebP
- AVIF
- srcset
- sizes attribute
- loading=lazy
- font-display
- preload
- preconnect
- CDN caching
Rendering Strategies (SSR/SSG/ISR)
Server-side rendering, static site generation, incremental static regeneration, streaming SSR, React Server Components, and hydration strategies
Objectives
- Choose the right rendering strategy based on content and performance requirements
- Implement streaming SSR for improved TTFB and FCP
Key concepts
- SSR
- SSG
- ISR
- streaming SSR
- hydration
- selective hydration
- React Server Components
- edge rendering
Runtime Performance Profiling
Chrome DevTools Performance tab, React Profiler, flame charts, memory leaks, jank detection, long tasks, and rendering performance optimization
Objectives
- Profile and diagnose runtime performance bottlenecks
- Optimize rendering performance to eliminate jank
Key concepts
- Performance tab
- flame charts
- React Profiler
- memory leaks
- long tasks
- requestIdleCallback
- virtualization
- debounce/throttle
4 · Testing & Quality5 topics
Unit Testing (Jest/Vitest)
Test runners, assertions, mocking, spying, snapshot testing, coverage reports, test organization, and testing pure functions and utilities
Objectives
- Write effective unit tests with proper mocking and assertions
- Organize test suites for maintainability
Key concepts
- test runners
- assertions
- mocking
- spying
- snapshot testing
- coverage
- test isolation
- parameterized tests
Component Testing (Testing Library)
React Testing Library philosophy, querying by role/label, user-event simulation, async testing, testing hooks, and avoiding implementation details
Objectives
- Test components from the user's perspective using Testing Library
- Avoid brittle tests that depend on implementation details
Key concepts
- getByRole
- getByLabelText
- user-event
- waitFor
- findBy queries
- testing hooks
- accessibility-first testing
- act() warnings
E2E Testing (Playwright/Cypress)
End-to-end test architecture, page object model, test fixtures, network mocking, parallel execution, CI integration, and flaky test prevention
Objectives
- Design maintainable E2E test suites with page objects and fixtures
- Integrate E2E tests into CI pipelines with stability strategies
Key concepts
- page object model
- test fixtures
- network interception
- parallel execution
- retry strategies
- CI integration
- visual snapshots
- cross-browser testing
Visual Regression Testing
Screenshot comparison, component-level visual tests, Chromatic/Percy integration, threshold configuration, cross-browser visual consistency, and Storybook interaction tests
Objectives
- Implement visual regression testing to catch unintended UI changes
- Configure thresholds and workflows for visual review
Key concepts
- screenshot comparison
- pixel diffing
- Chromatic
- Percy
- Storybook
- threshold tuning
- responsive snapshots
- interaction testing
Accessibility Auditing (WCAG 2.2)
WCAG 2.2 conformance levels, axe-core integration, automated a11y testing, manual testing procedures, screen reader testing, and remediation strategies
Objectives
- Integrate automated accessibility testing into the development workflow
- Perform manual accessibility audits and prioritize remediation
Key concepts
- WCAG 2.2 levels
- axe-core
- jest-axe
- Lighthouse accessibility
- screen reader testing
- keyboard navigation
- color contrast
- focus management
5 · Modern Tooling4 topics
Build Tools (Vite/Webpack)
Vite dev server and build pipeline, Webpack configuration, loaders and plugins, HMR, environment variables, and build optimization strategies
Objectives
- Configure Vite or Webpack for a production frontend application
- Troubleshoot build issues and optimize build performance
Key concepts
- Vite
- Webpack
- esbuild
- HMR
- loaders
- plugins
- dev server
- production build
- environment variables
TypeScript in Frontend
Component prop typing, generic components, discriminated unions for state, type-safe event handlers, API response typing, and strict mode configuration
Objectives
- Type React components and hooks with TypeScript effectively
- Use discriminated unions and generics for type-safe state management
Key concepts
- component props typing
- generic components
- discriminated unions
- type-safe events
- API response types
- strict mode
- utility types
- declaration files
Monorepo & Package Management
Monorepo tools (Nx, Turborepo), workspace configuration, package boundaries, shared libraries, versioning strategies, and dependency management
Objectives
- Set up and manage a frontend monorepo with proper package boundaries
- Leverage task caching and dependency graphs for efficient builds
Key concepts
- Nx
- Turborepo
- workspace configuration
- package boundaries
- shared libraries
- changesets
- task caching
- dependency graph
CI/CD for Frontend
GitHub Actions/GitLab CI for frontend, preview deployments, build caching, deployment strategies (blue-green, canary), feature flags, and rollback procedures
Objectives
- Design CI/CD pipelines optimized for frontend build and deployment
- Implement safe deployment strategies with rollback capabilities
Key concepts
- GitHub Actions
- preview deployments
- build caching
- CDN invalidation
- blue-green deployment
- canary releases
- feature flags
- rollback
6 · Advanced Frontend5 topics
Animation & Motion Design
CSS transitions and animations, Web Animations API, Framer Motion, GSAP, performance-safe animations (transform/opacity), and reduced motion preferences
Objectives
- Implement performant animations that leverage compositor-only properties
- Respect user motion preferences with prefers-reduced-motion
Key concepts
- CSS transitions
- CSS animations
- Web Animations API
- Framer Motion
- GSAP
- transform/opacity
- will-change
- prefers-reduced-motion
Offline-First & PWA
Service Workers, Cache API, offline strategies (cache-first, network-first), Web App Manifest, push notifications, background sync, and installability
Objectives
- Implement offline-first strategies using Service Workers and Cache API
- Configure a Progressive Web App for installability and push notifications
Key concepts
- Service Workers
- Cache API
- cache-first
- network-first
- stale-while-revalidate
- Web App Manifest
- push notifications
- background sync
WebSockets & Real-Time
WebSocket API, Socket.IO, Server-Sent Events, real-time state synchronization, reconnection strategies, presence indicators, and optimistic updates
Objectives
- Implement real-time features using WebSockets with proper error handling
- Choose between WebSockets and SSE based on communication requirements
Key concepts
- WebSocket API
- Socket.IO
- Server-Sent Events
- reconnection
- heartbeat
- presence
- optimistic updates
- message queuing
Web Workers & Threading
Dedicated Workers, Shared Workers, structured cloning, Transferable objects, Comlink, OffscreenCanvas, and parallelizing CPU-intensive operations
Objectives
- Offload CPU-intensive tasks to Web Workers to keep the main thread responsive
- Use Transferable objects and Comlink for efficient worker communication
Key concepts
- Dedicated Workers
- Shared Workers
- structured cloning
- Transferable objects
- Comlink
- OffscreenCanvas
- postMessage
- worker pools
Browser Internals & Rendering Pipeline
Critical rendering path, DOM/CSSOM construction, layout/paint/composite phases, GPU acceleration, layer promotion, reflow vs repaint, and V8 optimization hints
Objectives
- Explain the browser rendering pipeline from HTML parsing to pixels on screen
- Optimize code to minimize layout thrashing and forced reflows
Key concepts
- critical rendering path
- DOM construction
- CSSOM
- layout
- paint
- composite
- GPU layers
- reflow vs repaint
- V8 hidden classes
7 · Expert Frontend5 topics
Web Performance Engineering
Systematically measuring and optimizing Core Web Vitals, long tasks, and rendering performance for production web applications
Objectives
- Build a systematic performance measurement strategy using field data and lab data
- Diagnose and fix LCP, CLS, and INP regressions in production applications
Key concepts
- Core Web Vitals
- LCP optimization
- CLS reduction
- INP
- long tasks
- main thread scheduling
- PerformanceObserver
- Real User Monitoring
Frontend Security at Depth
Implementing comprehensive frontend security: CORS policies, Subresource Integrity, strict CSP, clickjacking defense, and supply chain security
Objectives
- Design a defense-in-depth frontend security posture combining CSP, SRI, and trusted types
- Identify and mitigate supply chain risks in frontend dependency trees
Key concepts
- CORS misconfiguration
- Subresource Integrity
- strict-dynamic CSP
- clickjacking
- X-Frame-Options
- trusted types
- supply chain risks
Micro-Frontend Architecture Patterns
Designing production micro-frontend architectures: routing shells, shared state, styling isolation, and team independence
Objectives
- Design a micro-frontend architecture that enables independent team deployments
- Evaluate Module Federation vs build-time vs iframe isolation trade-offs for a given context
Key concepts
- routing shell
- Module Federation
- Web Components isolation
- shared state bus
- CSS shadow DOM
- deployment independence
- version contracts
Frontend Observability & RUM
Implementing frontend observability: Real User Monitoring, error tracking, distributed tracing to backend, and performance dashboards
Objectives
- Design a frontend observability stack covering errors, performance, and distributed tracing
- Correlate browser-side RUM data with backend traces to diagnose full-stack issues
Key concepts
- Real User Monitoring
- error tracking
- session replay
- frontend distributed tracing
- OpenTelemetry for browser
- performance dashboards
- field data vs lab data
Accessibility at Scale
Building scalable accessibility programs: automated auditing systems, component library a11y standards, and inclusive design governance
Objectives
- Establish an automated accessibility testing pipeline that prevents a11y regressions
- Embed accessibility standards into a component library to enforce WCAG 2.2 compliance at scale
Key concepts
- WCAG 2.2 AAA
- axe-core automation
- ARIA design patterns
- screen reader testing
- keyboard navigation
- component library a11y standards
- a11y regression testing
Levels: Junior, Mid, Senior, and Expert
Explain it in your own words
Graded by AI · no account · 1 questionNo options to guess from: you write, the AI grades against the topic's rubric and tells you what level your answer reads at.
Already studying Frontend Engineer?
The assessment measures topic by topic, and your plan skips what you already know.
Open to read. An account is only needed to be measured.
Frequently asked questions
Where should I start studying Frontend Engineer?
Start with Web Fundamentals: HTML Semantics & Accessibility, CSS Layout & Responsive Design, and JavaScript DOM & Events. The map orders topics by what they depend on, so each one prepares the next.
How long does a full Frontend Engineer assessment take?
A full assessment of this path takes about 55 minutes. Study time depends on where you start; a diagnostic shows which topics you can skip.
Do I need an account to use this page?
No. The map, objectives and key concepts are open. You only need an account to be measured, get your gap by topic and receive a plan.