INTERVIEW TOPICS / 65 GUIDES

Frontend interview guides and practice questions.

Pick a concept, learn the mental model, then explain and apply it under interview pressure.

JavaScript15 min study

Closures

Reason precisely about retained lexical scope, callbacks, and encapsulation.

Intermediatescopefunctions

JavaScript11 min study

Event loop

Trace tasks, microtasks, rendering opportunities, and async execution.

Advancedasyncbrowser

JavaScript12 min study

Debounce and throttle

Control high-frequency work with correct leading and trailing behavior.

Intermediateperformance

React10 min study

React reconciliation

Understand identity, keys, render trees, and state preservation.

Advancedrendering

React10 min study

React effects

Synchronize with external systems without creating fragile data flow.

Intermediatehooks

Browser internals7 min study

Browser rendering pipeline

Follow pixels from HTML parsing through layout, paint, and compositing.

Advancedbrowser

Performance7 min study

Core Web Vitals

Diagnose LCP, INP, and CLS with field and lab evidence.

Intermediateperformance

JavaScript10 min study

Execution context

Understand creation, execution, lexical environments, this binding, and the call stack behind every JavaScript invocation.

Beginnerfoundation

JavaScript10 min study

Scope and hoisting

Predict identifier resolution, declaration initialization, block scope, function scope, shadowing, and the temporal dead zone.

Beginnerfoundation

JavaScript11 min study

The this keyword

Resolve this from the call site across constructor, explicit, implicit, default, bound, and lexical arrow-function behavior.

Intermediatefoundation

JavaScript10 min study

Prototype chain

Trace property lookup, inheritance, classes, own properties, and shared behavior through JavaScript's prototype chain.

Intermediatefoundation

JavaScript10 min study

Promises

Compose asynchronous outcomes with settlement states, chaining, error propagation, combinators, and cancellation-aware design.

Intermediateasync

JavaScript10 min study

Async and await

Write structured asynchronous flows while preserving concurrency, failure semantics, cleanup, and response ordering.

Intermediateasync

JavaScript10 min study

Currying

Transform multi-argument functions into staged APIs and distinguish currying from partial application and binding.

Advancedfunctions

JavaScript10 min study

Memory management

Reason about reachability, garbage collection, retained objects, weak collections, and evidence-driven leak diagnosis.

Advancedperformance

TypeScript11 min study

Type narrowing

Refine unknown and union values safely with control-flow analysis, guards, predicates, discriminants, and exhaustive checks.

Intermediatetypes

TypeScript10 min study

Generics

Preserve relationships between types using inference, constraints, keyof, indexed access, mapped types, and conditional types.

Advancedtypes

React10 min study

React hooks

Model stateful React behavior with stable Hook ordering, render snapshots, refs, custom Hooks, and measured memoization.

Intermediatehooks

React8 min study

Suspense

Coordinate pending UI, progressive reveal, transitions, streaming, caching, and error boundaries with Suspense.

Advancedrendering

CSS11 min study

CSS layout

Build resilient layouts with normal flow, intrinsic sizing, Flexbox, Grid, containing blocks, and overflow control.

Beginnerlayout

Accessibility7 min study

Accessibility tree

Understand how HTML becomes roles, names, states, and relationships consumed by assistive technologies.

Intermediatea11y

Testing7 min study

Testing strategy

Choose test boundaries by risk, cost, and confidence while asserting behavior through user-visible contracts.

Intermediatetesting

HTML8 min study

Semantic HTML

Choose elements by meaning so browsers, assistive technology, and developers understand the page structure.

Beginnersemanticsaccessibility

HTML8 min study

Forms and validation

Build forms with correct labels, validation boundaries, submission behavior, and accessible error feedback.

Intermediateformsvalidation

JavaScript10 min study

DOM events and delegation

Understand capture, target, bubbling, default actions, and scalable event delegation.

Intermediatedomevents

JavaScript10 min study

JavaScript modules

Organize code with static imports, live bindings, encapsulation, and predictable loading boundaries.

Intermediatemodulesbundling

React10 min study

State modeling with reducers

Model related state transitions explicitly so impossible UI states become harder to represent.

Intermediatestatereducers

React9 min study

Context and render performance

Share stable cross-cutting values without turning every state change into a broad rerender.

Advancedcontextperformance

React9 min study

SSR and hydration

Understand server-rendered HTML, client hydration, mismatch causes, and the boundary between server and client work.

Advancedssrhydration

TypeScript9 min study

Discriminated unions

Represent mutually exclusive states with a shared tag and get exhaustive narrowing from the compiler.

Intermediatetypesstate-modeling

CSS10 min study

Cascade, specificity, and layers

Predict which declaration wins using origin, importance, layer, specificity, scope, and source order.

Intermediatecascadespecificity

CSS10 min study

Responsive design and container queries

Design components that adapt to available space, content pressure, input method, and user preferences.

Intermediateresponsivecontainer-queries

Networking8 min study

HTTP caching

Control freshness and revalidation with Cache-Control, validators, shared caches, and versioned assets.

Advancedhttpcaching

Security14 min study

Frontend security basics

Defend browser surfaces against XSS, CSRF, unsafe dependencies, clickjacking, and accidental data exposure.

Advancedsecurityxsscsrf

Performance8 min study

Web Workers and the main thread

Move CPU-heavy work off the UI thread while managing serialization, cancellation, and result delivery.

Advancedworkersperformance

Accessibility8 min study

Keyboard and focus management

Create predictable keyboard interaction, visible focus, modal focus containment, and sensible restoration.

Intermediatekeyboardfocus

Browser internals10 min study

Same-origin policy and CORS

Reason about origin boundaries, credentialed requests, preflight, and what CORS actually protects.

Intermediatesecuritynetworking

Browser internals10 min study

Client-side storage

Choose between cookies, localStorage, sessionStorage, and IndexedDB by lifetime, size, and exposure.

Intermediatestoragebrowser

Networking11 min study

REST, GraphQL, and WebSockets

Match an API style to the actual data-fetching and real-time shape of the problem.

Intermediatenetworkingapi-design

Security11 min study

Authentication: sessions vs. tokens

Compare cookie-based sessions and token-based auth by storage, revocation, and cross-origin behavior.

Advancedsecurityauth

Testing11 min study

Mocking, test doubles, and async tests

Use the right test double at the right boundary and eliminate flakiness instead of waiting around it.

Intermediatetestingasync

CSS12 min study

CSS animations and transitions

Animate state changes and sequences using compositor-friendly properties and respect for reduced motion.

Intermediatecssanimation

React13 min study

React performance optimization

Diagnose unnecessary renders with the Profiler before reaching for memo, useMemo, or useCallback.

Advancedperformancerendering

TypeScript13 min study

Utility types and type vs. interface

Transform existing types with built-in utilities and choose between type and interface deliberately.

Intermediatetypesutility-types

CSS12 min study

The CSS box model

Reason precisely about content, padding, border, and margin — and how box-sizing changes what 'width' means.

Beginnercssfundamentals

Networking12 min study

HTTP methods, status codes, and idempotency

Use the right method and status code deliberately, and reason correctly about what idempotency actually guarantees.

Beginnerhttpnetworking

JavaScript16 min study

Equality and type coercion

Predict == vs === behavior, deep vs shallow equality, and the specific rules NaN and Object.is change.

Beginnerfundamentalstypes

JavaScript15 min study

JavaScript design patterns

Recognize module, singleton, observer, and factory patterns as solutions to specific structural problems, not decoration.

Intermediatepatternsarchitecture

React15 min study

Component composition patterns

Share behavior across components with children, render props, and compound components instead of prop-drilling or duplication.

Advancedcompositionpatterns

React14 min study

Controlled vs. uncontrolled components

Decide who owns form input state — React or the DOM — and avoid mixing the two models in one input.

Intermediateformsstate

Performance13 min study

Code splitting and lazy loading

Ship only the JavaScript a route or interaction actually needs, and measure the real trade-off in extra requests.

Intermediateperformancebundling

Accessibility13 min study

ARIA widget patterns and color contrast

Apply an established interaction pattern for custom widgets and meet contrast ratios that keep text and UI perceivable.

Intermediatea11yaria

HTML16 min study

Images, media, and responsive assets

Let the browser choose the right image per device with srcset, sizes, and picture, and load media without hurting Core Web Vitals.

Intermediateimagesperformancehtml

CSS18 min study

Custom properties and theming

Use CSS custom properties as the mechanism behind runtime theming, and avoid treating them like preprocessor variables.

Intermediatecssthemingcustom-properties

Browser internals17 min study

Service workers, caching, and offline support

Intercept requests with a service worker and choose a caching strategy per resource to support offline use without serving stale data.

Advancedservice-workerofflinepwa

Testing13 min study

Testing React components

Render components in a test DOM and assert on user-visible behavior, not internal state, using accessible queries.

Intermediatetestingreact

Testing14 min study

End-to-end testing

Drive a real browser through complete user journeys against a full build, and invest in determinism over coverage.

Advancedtestinge2e

Testing13 min study

Visual and snapshot testing

Diff a rendered screenshot or serialized output against an approved baseline to catch appearance and layout changes.

Intermediatetestingvisual

Security13 min study

Content Security Policy and security headers

Use browser-enforced response headers as a defense-in-depth layer that limits XSS blast radius, framing, and API exposure.

Advancedsecuritycspheaders

Security14 min study

Dependency and supply-chain security

Limit the damage any npm package or third-party script can do if it is malicious, compromised, or buggy.

Advancedsecuritydependenciessupply-chain

Networking14 min study

HTTP/2, HTTP/3, and connection performance

Understand multiplexing, header compression, and QUIC, and which HTTP/1-era frontend optimizations are now anti-patterns.

Advancednetworkinghttp2performance

Networking14 min study

Client-side data fetching patterns

Design when requests start, how they cache, dedupe, and revalidate — separate from which API or protocol is used.

Intermediatenetworkingdata-fetchingcaching

Performance13 min study

Image and asset optimization

Ship the right format and dimensions at the right compression, deliver and cache efficiently, and prioritize the LCP image.

Intermediateperformanceimagesassets

Performance14 min study

Web font loading performance

Control the flash of invisible or unstyled text and its layout-shift cost with font-display, preload, and fallback metrics.

Intermediateperformancefonts

Performance15 min study

Interaction responsiveness and INP

Measure and fix how long the page takes to visually respond to input — input delay, handler work, and the next paint.

Advancedperformanceinpresponsiveness