Frontend Developer

Explain what happens between typing a URL and seeing a page, and write semantic, accessible HTML pages with working forms.

• How the Web Works

  Core

  The request and response cycle sits behind every page you will build, so it is the first thing to understand and the thing you will debug most.

  • Clients, servers and URLs
  • DNS lookups and domain names
  • HTTP methods and status codes
  • Request and response headers
  • HTTPS and why TLS matters
  • What hosting and CDNs do
  • MDN: How the web works
  • MDN: Overview of HTTP

• Browsers and DevTools

  Core

  Knowing how a browser turns HTML into pixels, and how to inspect each step, makes every later bug easier to find.

  • Parse, style, layout, paint steps
  • Inspect and edit the DOM
  • Read the Network panel
  • Use the Console for errors
  • Throttle network and CPU
  • Emulate mobile devices
  • Chrome DevTools docs
  • web.dev: How browsers work

• Semantic HTML

  Core

  Choosing the right element gives you structure, accessibility and search visibility before you write any CSS or JavaScript.

  • Heading levels and document outline
  • Landmarks: header, nav, main, footer
  • Links versus buttons
  • Lists, tables and figures
  • Useful alt text for images
  • The head and meta tags
  • Validating markup
  • MDN: HTML elements reference
  • web.dev: Learn HTML

• HTML Forms

  Core

  Forms are how users send data, and their built-in behavior is worth knowing well before any library takes over.

  • A label for every input
  • Input types and autocomplete
  • Built-in validation attributes
  • Fieldset and legend for groups
  • GET versus POST submission
  • Clear, accessible error messages
  • MDN: Web forms
  • web.dev: Learn Forms

• Accessibility Basics

  Core

  Building for keyboard, screen reader and low-vision users from day one is far cheaper than fixing it later, and many employers require it.

  • Who uses assistive technology
  • Keyboard access and focus order
  • Accessible names for controls
  • Color contrast requirements
  • ARIA only when HTML falls short
  • Quick screen reader check
  • W3C WAI: Introduction to accessibility
  • web.dev: Learn Accessibility

• Built-in Interactive Elements

  Recommended

  Modern HTML ships dialogs, disclosures and popovers that used to need a JavaScript library, so check the platform first.

  • details and summary disclosures
  • dialog with showModal()
  • The popover attribute
  • Lazy-loading images and iframes
  • picture and srcset for images
  • MDN: The dialog element
  • MDN: Popover API

Turn a design mockup into a responsive, themeable layout using current CSS and no framework.

• The Cascade and Box Model

  Core

  Most CSS confusion comes from specificity and sizing, so learn how the browser picks the winning rule and how big each box is.

  • Selectors and specificity
  • Cascade order and inheritance
  • Cascade layers with @layer
  • Box model and box-sizing
  • Units: rem, em, %, vw
  • Display types and normal flow
  • Margins, padding and collapsing
  • MDN: Introduction to the cascade
  • web.dev: Learn CSS

• Flexbox and Grid

  Core

  These two layout systems handle nearly every layout you will build, and knowing when to use each saves hours.

  • Flex direction, wrap and grow
  • Alignment with justify and align
  • gap for consistent spacing
  • Grid rows and columns
  • fr, minmax() and auto-fit
  • Named grid areas
  • Subgrid for aligned cards
  • Choosing flex or grid
  • MDN: CSS grid layout
  • MDN: Flexible box layout

• Responsive Design

  Core

  Users arrive on every screen size, so layouts must adapt to both the viewport and the space each component gets.

  • Mobile-first media queries
  • Fluid type and spacing with clamp()
  • Container queries and container units
  • Dynamic viewport units like dvh
  • User preference media queries
  • Testing at real device widths
  • MDN: Container queries
  • web.dev: Learn Responsive Design

• Custom Properties, Nesting and :Has()

  Core

  Current CSS covers much of what used to need Sass or JavaScript, and these features appear in every modern codebase.

  • Custom properties and fallbacks
  • Native CSS nesting
  • :has() for parent and state styling
  • :is() and :where() for grouping
  • Logical properties for any direction
  • Feature checks with @supports
  • MDN: Using custom properties
  • MDN: :has()

• Color and Typography

  Recommended

  Readable type and accessible color do more for a UI than any effect, and modern color functions make theming simpler.

  • oklch() for predictable color
  • color-mix() for tints and shades
  • light-dark() for two themes
  • Checking contrast ratios
  • Web fonts and font-display
  • Variable fonts
  • Line length and vertical rhythm
  • MDN: oklch()
  • MDN: light-dark()

• Positioning and Stacking

  Recommended

  Sticky headers, menus and tooltips depend on positioning, and stacking context bugs come up constantly on the job.

  • Relative, absolute, fixed, sticky
  • z-index and stacking contexts
  • Overflow and scroll containers
  • Anchor positioning for popovers
  • Transforms that avoid layout shifts
  • MDN: Stacking context
  • MDN: CSS anchor positioning

Write interactive pages in plain JavaScript that fetch data, handle errors and update the DOM without a framework.

• Language Core

  Core

  Every framework is JavaScript underneath, so solid basics pay off in each stage that follows.

  • Primitives, objects and references
  • let, const and block scope
  • Equality, truthiness and coercion
  • map, filter and reduce
  • Destructuring, spread and rest
  • Optional chaining and nullish coalescing
  • Template literals and string methods
  • MDN: JavaScript Guide
  • MDN: Array reference

• Functions, Closures and This

  Core

  React hooks and event handlers are built on closures, so understanding scope explains many confusing bugs later.

  • Declarations versus arrow functions
  • Lexical scope and closures
  • How this gets its value
  • Prototypes and classes
  • Copying instead of mutating
  • Higher-order functions
  • MDN: Closures
  • MDN: this

• DOM and Events

  Core

  Working with the DOM directly shows you what frameworks automate and helps when you need to step outside them.

  • Query and create elements
  • Update text, attributes and classes
  • addEventListener and event objects
  • Bubbling, capturing and delegation
  • preventDefault on forms and links
  • Reading forms with FormData
  • MDN: Document Object Model
  • MDN: Introduction to events

• Asynchronous JavaScript

  Core

  Network calls, timers and user input all happen asynchronously, and most frontend bugs involve timing.

  • The event loop and task queue
  • Promises and chaining
  • async and await
  • Promise.all and Promise.allSettled
  • Cancelling work with AbortController
  • Debouncing and throttling input
  • MDN: Asynchronous JavaScript
  • MDN: Using promises

• Fetch and Working with APIs

  Core

  Most frontend apps are clients for APIs, so you need to request data, handle failures and show every possible state.

  • GET and POST with fetch
  • JSON bodies and headers
  • Checking response.ok and status
  • Loading, error and empty states
  • REST resource conventions
  • Ignoring stale responses
  • MDN: Using the Fetch API

• Modules and Error Handling

  Core

  Splitting code into modules and failing gracefully is how small scripts grow into apps you can maintain.

  • import and export syntax
  • Named versus default exports
  • Dynamic import() for lazy code
  • try, catch and finally
  • Custom Error classes
  • Global error and rejection handlers
  • MDN: JavaScript modules
  • MDN: try...catch

• Useful Browser APIs

  Recommended

  The platform already solves many common needs, so check the built-in APIs before installing a package.

  • localStorage and sessionStorage
  • URL and URLSearchParams
  • Intl for dates and numbers
  • IntersectionObserver for lazy work
  • Clipboard and History APIs
  • structuredClone for deep copies
  • MDN: Web Storage API
  • MDN: Intl

Set up a professional project with Git, a package manager, Vite, linting and strict TypeScript, and deliver changes through pull requests.

• Git and GitHub

  Core

  Every team uses version control, and a clean history with small pull requests is often the first thing a reviewer sees.

  • Commits, staging and clear messages
  • Branches, merge and rebase
  • Resolving merge conflicts
  • Pull requests and code review
  • Keeping secrets out with .gitignore
  • Undoing with restore, revert, reset
  • Pro Git book
  • GitHub Docs: Pull requests

• npm and Pnpm

  Core

  Package managers install dependencies and run your scripts, and misunderstanding them is a common cause of broken builds.

  • package.json fields and scripts
  • Semantic versioning ranges
  • Lockfiles and reproducible installs
  • dependencies versus devDependencies
  • Running tools with npx
  • Vetting a package before installing
  • npm Docs: package.json
  • npm Docs: Semantic versioning

• Vite and Build Tools

  Core

  A dev server and bundler turn modern source code into files browsers load quickly, and Vite is the usual choice for React apps outside a meta-framework.

  • What a bundler does
  • Dev server and hot module replacement
  • Environment variables and modes
  • Static assets and the public folder
  • Production build and preview
  • Path aliases and plugins
  • Vite: Getting started
  • Vite: Env variables and modes

• ESLint and Prettier

  Core

  Automated linting and formatting catch bugs early and end style debates in code review.

  • ESLint flat config setup
  • TypeScript and React lint rules
  • Prettier for consistent formatting
  • Format on save in the editor
  • Checks in a pre-commit hook
  • ESLint: Configuration files
  • Prettier docs

• TypeScript Fundamentals

  Core

  TypeScript is the default for professional React work, and its checks catch mistakes before your users do.

  • Primitive, array and object types
  • Type aliases and interfaces
  • Union and literal types
  • Narrowing with typeof, in, guards
  • Typing functions and return values
  • Strict mode in tsconfig
  • unknown instead of any
  • TypeScript: Everyday types
  • TypeScript: Narrowing

• Generics and Utility Types

  Core

  Generics and utility types let you type reusable functions, hooks and API responses without repeating yourself.

  • Generic functions and constraints
  • Partial, Pick, Omit and Record
  • keyof, typeof and indexed access
  • Discriminated unions for UI states
  • The satisfies operator
  • Typing data from external APIs
  • TypeScript: Generics
  • TypeScript: Utility types

• Working with AI Coding Assistants

  Recommended

  Most teams now use AI tools every day, and the skill employers look for is checking and correcting their output, not only generating it.

  • Give context: files, types, errors
  • Read every generated line
  • Ask for tests, then run them
  • Spot invented APIs and packages
  • Keep secrets out of prompts
  • Know when to write it yourself

Build interactive, typed React apps with well-placed state, forms, effects and reusable components.

• Components, JSX and Props

  Core

  Components are the unit of every React codebase, so start by learning to split a UI into small, pure pieces.

  • JSX rules and expressions
  • Function components and props
  • children for composition
  • Conditional rendering patterns
  • Lists and stable keys
  • Keeping rendering pure
  • Typing props with TypeScript
  • React: Describing the UI
  • React: Thinking in React

• State and Events

  Core

  State drives what users see, and most React bugs come from where state lives or how it gets updated.

  • useState and state snapshots
  • Updater functions for next state
  • Immutable object and array updates
  • Lifting state to a shared parent
  • Deriving values instead of storing
  • useReducer for complex updates
  • React: Managing state
  • React: Updating objects in state

• Effects and Synchronization

  Core

  Effects connect React to systems outside it, and knowing when not to use one matters just as much.

  • Effects sync with external systems
  • Dependency arrays and cleanup
  • Why effects run twice in development
  • No effects for derived data
  • Race conditions when fetching
  • useEffectEvent for non-reactive logic
  • React: Synchronizing with Effects
  • React: You might not need an Effect

• Forms and Actions

  Core

  React 19 Actions handle pending states, errors and optimistic updates for forms with much less code than hand-rolled handlers.

  • Controlled versus uncontrolled inputs
  • Passing a function to form action
  • useActionState for results and errors
  • useFormStatus for pending buttons
  • useOptimistic for instant feedback
  • Accessible inline validation
  • React: useActionState
  • React: The form component

• Context, Custom Hooks and Composition

  Core

  Sharing logic and data without long prop chains keeps a growing app readable and easy to change.

  • Composition before reaching for context
  • Context for theme, auth and locale
  • Reading context with useContext or use
  • Extracting custom hooks
  • Compound components pattern
  • Splitting context to limit re-renders
  • React: Passing data with context
  • React: Reusing logic with custom Hooks

• Refs, Portals and the DOM

  Core

  Focus management, measurements and third-party widgets need direct DOM access, and refs give it to you without fighting React.

  • useRef for DOM nodes
  • Refs for mutable values
  • ref as a regular prop
  • Managing focus in dialogs
  • createPortal for overlays
  • Wrapping non-React libraries
  • React: Manipulating the DOM with refs
  • React: createPortal

• Rendering, Suspense and Performance

  Recommended

  Knowing why components re-render and how Suspense and transitions work helps you keep large apps responsive.

  • What triggers a re-render
  • React Compiler automatic memoization
  • When memo and useMemo still help
  • useTransition and useDeferredValue
  • Suspense and lazy loading
  • Activity for keeping hidden state
  • Profiling with React DevTools
  • React: React Compiler
  • React: Suspense

Build a consistent, accessible and themeable set of components that a team can reuse across many pages.

• Tailwind CSS V4

  Core

  Tailwind is the most common styling choice in new React projects, and v4 moves its configuration into plain CSS.

  • Utility-first mental model
  • Setup with the Vite or PostCSS plugin
  • Theme variables with @theme
  • Responsive and state variants
  • Dark mode variant options
  • Merging conditional class names
  • When to extract a component
  • Tailwind CSS: Styling with utility classes
  • Tailwind CSS: Theme variables

• CSS Modules and Other Approaches

  Recommended

  Plenty of existing codebases use CSS Modules or CSS-in-JS, so you should be able to read them and choose between approaches.

  • Locally scoped class names
  • CSS Modules in Vite and Next.js
  • Mixing modules with global styles
  • Runtime CSS-in-JS trade-offs
  • Styling limits with Server Components
  • Choosing an approach per project
  • Vite: CSS Modules
  • Next.js: CSS

• Design Tokens and Dark Mode

  Core

  Tokens give color, spacing and type a single source of truth, which makes theming and redesigns cheap.

  • Primitive versus semantic tokens
  • Spacing, type and radius scales
  • Tokens as CSS custom properties
  • prefers-color-scheme as the default
  • A persisted theme toggle
  • No wrong-theme flash on load
  • MDN: prefers-color-scheme
  • Tailwind CSS: Dark mode

• Component Libraries and Headless UI

  Core

  Teams rarely build dropdowns and dialogs from scratch, so learn to adopt tested primitives and adapt them to a brand.

  • Headless primitives: Radix, React Aria
  • shadcn/ui copy-in components
  • Styling variants and sizes
  • Customizing without forking
  • Build versus adopt decisions
  • Checking a library's accessibility
  • shadcn/ui docs
  • Radix Primitives: Introduction

• Accessible Interactive Patterns

  Core

  Menus, tabs and dialogs have expected keyboard behavior, and getting it right is a frequent interview and audit topic.

  • ARIA patterns for common widgets
  • Arrow-key focus in menus and tabs
  • Trapping and returning focus
  • Visible focus styles
  • Live regions for announcements
  • Large enough touch targets
  • W3C WAI: ARIA Authoring Practices patterns

• Animation and Motion

  Recommended

  Small, purposeful motion helps users follow changes, as long as it stays fast and respects reduced-motion settings.

  • Transitions and keyframes
  • Animating transform and opacity
  • @starting-style for entry effects
  • View Transitions API
  • Motion for React components
  • Honoring prefers-reduced-motion
  • Motion: React docs
  • MDN: View Transition API

• Design Systems and Frontend Architecture

  Optional

  Larger companies share components across many apps, which brings documentation, versioning and monorepos into the job.

  • Documenting components in Storybook
  • Publishing a versioned component package
  • Monorepo workspaces with pnpm
  • Syncing tokens from design tools
  • Visual regression checks
  • Micro-frontends and their costs
  • Storybook docs
  • pnpm: Workspaces

Build multi-screen apps that load, cache and change server data, keep each piece of state in the right place, and validate user input.

• Client-Side Routing

  Core

  Real apps have many screens, and a router ties URLs to layouts, data loading and navigation.

  • Route config and nested layouts
  • Dynamic segments and params
  • Links, navigation and redirects
  • Loaders and actions for data
  • Error and not-found routes
  • Route-level code splitting
  • React Router: Picking a mode
  • React Router docs

• Server State with TanStack Query

  Core

  Server data needs caching, refetching and invalidation, and TanStack Query handles that far better than hand-written effects.

  • Queries and query keys
  • staleTime versus gcTime
  • Mutations and cache invalidation
  • Optimistic updates with rollback
  • Pagination and infinite queries
  • Prefetching before navigation
  • Inspecting with Query Devtools
  • TanStack Query: Overview
  • TanStack Query: Query keys

• Client State with Zustand or Redux Toolkit

  Core

  Once server data is handled separately, a small store covers the UI state that remains, and many existing teams still run Redux.

  • Local, lifted, context or store
  • Zustand stores and selectors
  • Redux Toolkit slices and store
  • Never copy server data into stores
  • Persisting state across reloads
  • Reading older Redux code
  • Zustand: Introduction
  • Redux Toolkit: Getting started

• The URL as State

  Recommended

  Filters, tabs and page numbers stored in the URL survive reloads and can be shared as links.

  • Search params for filters and sort
  • Pagination in the URL
  • Keeping inputs in sync with the URL
  • Push versus replace in history
  • Parsing and validating params
  • MDN: URLSearchParams
  • React Router: useSearchParams

• Form Libraries and Zod

  Core

  Large forms need field-level validation and typed data, and a schema library lets client and server share the same rules.

  • React Hook Form basics
  • Zod schemas for validation
  • Inferring types from schemas
  • Field and form-level errors
  • Validating API responses too
  • Multi-step and dynamic fields
  • Zod docs
  • React Hook Form: Get started

• Authentication in the Frontend

  Recommended

  Most apps have signed-in users, so you need to understand sessions, tokens and protected screens even when the backend owns the logic.

  • Cookie sessions versus bearer tokens
  • HttpOnly, Secure and SameSite cookies
  • Protected routes and redirects
  • Handling 401 and expired sessions
  • The OAuth sign-in redirect flow
  • Client checks are never enough
  • MDN: Using HTTP cookies

• Real-Time and Offline Data

  Optional

  Chat, live dashboards and field apps need push updates or offline support, which some teams expect you to handle early.

  • Polling, SSE or WebSockets
  • Reconnecting with backoff
  • Pushing updates into the query cache
  • Web app manifest basics
  • Service worker caching strategies
  • Offline fallback screens
  • MDN: WebSockets API
  • MDN: Progressive web apps

Build a Next.js 16 App Router app that mixes static, cached and dynamic rendering, changes data with Server Actions, and is ready for search engines.

• Rendering Strategies

  Core

  Choosing between client, server and static rendering affects speed, SEO and hosting cost, and interviewers often ask about it.

  • CSR, SSR and static generation
  • Hydration and what it costs
  • Time-based and on-demand revalidation
  • Streaming HTML with Suspense
  • Static shell with dynamic parts
  • Choosing a strategy per route
  • web.dev: Rendering on the Web

• Next.js App Router

  Core

  Next.js is the React framework named most often in job listings, and the App Router is how new Next.js apps are built.

  • Folders as routes
  • Layouts, pages and templates
  • Dynamic segments and awaited params
  • loading, error and not-found files
  • Link, prefetching and navigation
  • Route groups and private folders
  • proxy.ts for redirects and headers
  • Next.js: Layouts and pages
  • Next.js: Linking and navigating

• Server and Client Components

  Core

  Deciding what runs on the server and what ships to the browser is the central skill of modern React.

  • Server Components by default
  • use client marks the boundary
  • Serializable props across the boundary
  • Server children inside client components
  • Keeping secrets with server-only
  • Providers in client files
  • Next.js: Server and Client Components
  • React: Server Components

• Data Fetching and Caching

  Core

  Fetching on the server and caching the right parts is where most Next.js performance comes from.

  • Fetching in async Server Components
  • Parallel versus sequential requests
  • Suspense boundaries for streaming
  • Cache Components and use cache
  • cacheLife and cacheTag
  • Revalidating by path or tag
  • Next.js: Fetching data
  • Next.js: Caching

• Server Actions and Route Handlers

  Core

  Server Actions let forms change data without a separate API layer, and Route Handlers cover the cases that still need an endpoint.

  • use server functions
  • Forms that call Server Actions
  • Revalidating after a mutation
  • Auth checks inside every action
  • Route Handlers for webhooks and APIs
  • Validating inputs with Zod
  • Next.js: Mutating data
  • Next.js: Data security

• Metadata and SEO

  Recommended

  Search results and social previews bring people to public pages, and Next.js gives you typed APIs for both.

  • Static and generated metadata
  • Open Graph and share images
  • Sitemap and robots files
  • Canonical URLs and redirects
  • Structured data with JSON-LD
  • Checking pages in Search Console
  • Next.js: Metadata and OG images
  • Google Search Central: SEO starter guide

• Internationalization

  Optional

  Products that serve several countries need translated content and locale-aware formatting, which is painful to add late.

  • Locale detection and routing
  • Message catalogs and translation keys
  • Intl for dates, numbers, plurals
  • Right-to-left layout support
  • Localized metadata and URLs
  • Next.js: Internationalization