Top 30 Frontend Interview Questions and Answers

30 questions. Pick an answer, or open “Show the answer” to read it.

Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.

1. Question 1 of 30

   Why can a standard browser not execute a .jsx file directly without a build step?

   • aJSX requires a special MIME type that browsers refuse to load
   • bThe browser only runs JSX when React is loaded from a CDN
   • cJSX must first be transpiled into React.createElement or jsx function calls
   • dBrowsers strip out all custom XML attributes before parsing scripts
   Show the answer

   Answer: c · JSX must first be transpiled into React.createElement or jsx function calls

   JSX is syntax the JS engine does not understand, so a transpiler converts it to function calls first. Browsers never receive JSX; the CDN or MIME claims are irrelevant to the transpilation requirement.

   Read the full bite: What is JSX and how does the browser run it?

2. Question 2 of 30

   What is the primary advantage of Vue's progressive philosophy for a project starting small but potentially growing into a full SPA?

   • aIt provides a highly opinionated structure that guides all development decisions from the start.
   • bIt enables developers to integrate only the necessary parts of its ecosystem, scaling functionality as needed.
   • cIt offers a comprehensive, built-in suite of tools, eliminating the need for external libraries.
   • dIt mandates a complete frontend overhaul to ensure optimal performance and maintainability.
   Show the answer

   Answer: b · It enables developers to integrate only the necessary parts of its ecosystem, scaling functionality as needed.

   The progressive philosophy allows Vue to be adopted incrementally, starting with its core library for small enhancements and gradually integrating more of its ecosystem as the project's complexity grows. Option A is incorrect because Vue is designed to be less opinionated, offering flexibility rather than strict guidance from the outset.

   Read the full bite: Vue: The Progressive Framework Philosophy

3. Question 3 of 30

   What is the primary benefit of using createUseFetch over ad-hoc useFetch wrappers?

   • aIt removes the need for unplugin-vue-router and makes route generation deterministic.
   • bIt enables layouts to receive typed per-page parameters without provide/inject workarounds.
   • cIt lets you bake baseURL, interceptors, and server flags into reusable, fully typed composables that remain SSR-compatible.
   • dIt reduces dev-server route recalculation time by up to 28x when editing existing pages.
   Show the answer

   Answer: c · It lets you bake baseURL, interceptors, and server flags into reusable, fully typed composables that remain SSR-compatible.

   createUseFetch is designed to cut API boilerplate by embedding baseURL, interceptors, and server flags into reusable, fully typed composables that remain SSR-safe. Distractor B describes the Vue Router v5 upgrade's impact on dev-server performance, not fetch factories.

   Read the full bite: Nuxt 4.4 Adds Custom Fetch Factories and Router v5

4. Question 4 of 30

   Which of the following best describes how a design system enforces consistency at scale?

   • aIt establishes a governance process where designers review all product changes before release
   • bIt integrates reusable coded components, design tokens, and documentation across both design tools and code repositories
   • cIt documents visual standards in a style guide that designers and developers can reference manually
   • dIt provides a shared Figma file that serves as the single source of truth for all interface designs
   Show the answer

   Answer: b · It integrates reusable coded components, design tokens, and documentation across both design tools and code repositories

   A design system enforces consistency by uniting coded components, tokens, and documentation across design and engineering, not just through design assets. Calling it merely a shared Figma file is a common misconception because it misses the engineering adoption and version-controlled code that actually standardizes implementation.

   Read the full bite: What is a design system's purpose and how does it enforce consistency?

5. Question 5 of 30

   Four divs are set to width: 25%, 10px padding, and 1px border. Under the default box model, why does the last div wrap to a new line?

   • aThe declared width applies only to content, so padding and border add extra width.
   • bThe margin is included in the 25% width calculation.
   • cThe content area shrinks to keep the total at exactly 25%.
   • dThe browser default already includes padding in the 25% width.
   Show the answer

   Answer: a · The declared width applies only to content, so padding and border add extra width.

   Under the default content-box model, width applies only to the content area, so padding and border increase the rendered size beyond 25% and cause wrapping. Distractor D is wrong because content-box is the browser default, meaning padding is added outside the declared width rather than included in it.

   Read the full bite: Explain the CSS box model: content-box vs border-box

6. Question 6 of 30

   What key elements elevate a component library into a full design system?

   • aReusable coded components, design tokens, documentation, and governance processes
   • bA versioned npm package with semantic versioning and automated testing
   • cA one-time build of standardized buttons and inputs for all teams
   • dA Figma library paired with CSS custom properties for theming
   Show the answer

   Answer: a · Reusable coded components, design tokens, documentation, and governance processes

   A design system is engineering infrastructure that combines reusable components with design tokens, documentation, and governance. Option B describes only a mature component library, which is a common misconception that omits the tokens, docs, and processes required for a true system.

   Read the full bite: What is a design system and its primary engineering components?

7. Question 7 of 30

   How does Turbopack's Server Fast Refresh in Next.js 16.2 differ from the previous server-side reload behavior?

   • aIt clears require.cache for changed files while preserving untouched node_modules, cutting overhead by about two-thirds.
   • bIt applies tree-shaking to dynamic imports during reload so that only used exports are invalidated instead of the full module graph.
   • cIt reloads only the changed module and leaves the rest of the server process intact, rather than clearing the require.cache for the entire import chain.
   • dIt moves server compilation into Web Workers with corrected origins to isolate changes from the main Node.js process.
   Show the answer

   Answer: c · It reloads only the changed module and leaves the rest of the server process intact, rather than clearing the require.cache for the entire import chain.

   Turbopack now surgically reloads only the changed module while leaving the server process intact, replacing the old behavior of clearing require.cache for the changed file and its entire import chain. Option A is tempting because it mentions require.cache and node_modules, but the old system actually cleared untouched node_modules in the import chain, and the new approach avoids chain-wide cache clearing entirely.

   Read the full bite: Next.js 16.2 brings 67-100% faster server Fast Refresh

8. Question 8 of 30

   Atlassian confirmed DESIGN.md improves AI output over zero context, but what key limitation did they identify compared to their structured model?

   • aIt increases token costs and cannot express the depth of nested enterprise components
   • bIt requires dedicated MCP servers to parse brand tokens before AI agents can use them
   • cIt works best for large enterprises and struggles to scale down to small greenfield projects
   • dIt is incompatible with open-source workflows and can only be used with Google's Stitch tool
   Show the answer

   Answer: a · It increases token costs and cannot express the depth of nested enterprise components

   Atlassian found that DESIGN.md's flat Markdown approach, while portable, burns more tokens and cannot encode nested components or complex state logic. Option B is wrong because DESIGN.md is explicitly designed to be dropped into prompts without MCP infrastructure, unlike Atlassian's structured stack.

   Read the full bite: Atlassian: DESIGN.md trades depth for portability

9. Question 9 of 30

   Which change to Vue's template parser in 3.4 is primarily responsible for its 2× speed improvement?

   • aIt delegates parsing to htmlparser2 while keeping the old regex-based tokenizer
   • bIt replaced recursive descent and heavy regex with a single-pass state-machine tokenizer
   • cIt added look-ahead caching to the existing recursive descent approach
   • dIt skips source-map generation during single-file component compilation
   Show the answer

   Answer: b · It replaced recursive descent and heavy regex with a single-pass state-machine tokenizer

   The card states the parser was rewritten from a recursive descent approach relying on heavy regex to a state-machine tokenizer based on htmlparser2 that iterates only once. Option A is tempting because it mentions htmlparser2, but the old regex-based tokenizer was fully replaced, not retained.

   Read the full bite: Vue 3.4 Cuts Build Times 44%, Stabilizes defineModel

10. Question 10 of 30

    What is the primary risk when React teams adopt TypeScript without standardized prop and hook typing patterns?

    • aStackBlitz and Gitpod environments fail to compile forwarded refs
    • bCode review slows due to style debates and type safety erodes from inconsistent patterns
    • cComponentProps forces manual re-declaration of all HTML element props
    • dReact's built-in type definitions become incompatible with custom hooks
    Show the answer

    Answer: b · Code review slows due to style debates and type safety erodes from inconsistent patterns

    The card warns that poor typing leads to verbose code, suppressed errors, and code review debates about style rather than logic. Option C is wrong because ComponentProps is introduced to eliminate verbose manual re-declaration, not require it.

    Read the full bite: Matt Pocock's Free React TypeScript Tutorial

11. Question 11 of 30

    How does VitePress 1.0 optimize documentation sites for both search engine indexing and fast subsequent page navigation?

    • aIt pre-fetches all site chunks during the initial load to eliminate any later network requests.
    • bIt generates static HTML at build time for SEO, then hydrates into a Vue 3 SPA for instant client-side navigation.
    • cIt relies entirely on client-side rendering with dynamic meta tags injected after Vue mounts to satisfy crawlers.
    • dIt renders each page on-demand via SSR and caches at the CDN edge to avoid build-time generation.
    Show the answer

    Answer: b · It generates static HTML at build time for SEO, then hydrates into a Vue 3 SPA for instant client-side navigation.

    VitePress produces static HTML at build time for search indexing and fast initial loads, then hydrates into a Vue SPA so subsequent navigation feels instant without full page reloads. Distractor D is tempting because the framework does pre-fetch chunks, but only for links visible in the viewport rather than the entire site at once.

    Read the full bite: VitePress 1.0 replaces VuePress for docs

12. Question 12 of 30

    What is the fundamental nature of a React Component?

    • aA custom, reusable HTML tag that simplifies web page structure.
    • bA class definition used to manage application-wide data and state.
    • cA separate file that holds all the styling rules for a specific UI element.
    • dA JavaScript function that returns a description of UI using JSX.
    Show the answer

    Answer: d · A JavaScript function that returns a description of UI using JSX.

    The card explicitly states, "A React component is a JavaScript function that returns a piece of UI" and that it returns "JSX" to describe the UI. While components are analogous to custom HTML tags, their core implementation is a JavaScript function.

    Read the full bite: React Components: Your UI Building Blocks

13. Question 13 of 30

    Why is Angular v22's stabilization of Signal Forms, Angular Aria, and Asynchronous Reactivity APIs considered more significant than a routine version bump for large teams?

    • aIt provides production-ready primitives that reduce custom accessibility work and create clear migration targets away from legacy reactive forms
    • bIt automatically migrates legacy reactive forms and removes all experimental flags from Angular core
    • cIt guarantees that code written during the developer preview will require zero changes to work in v22 stable
    • dIt immediately deprecates template-driven forms and renders all existing RxJS-based form logic obsolete
    Show the answer

    Answer: a · It provides production-ready primitives that reduce custom accessibility work and create clear migration targets away from legacy reactive forms

    Stabilization means these APIs are now maintained long-term and safe to adopt, giving teams a clear path away from legacy reactive forms while reducing custom accessibility boilerplate. Distractor B is tempting because stable APIs imply safety, but the card emphasizes future maintenance and reduced risk, not that every preview API remained unchanged.

    Read the full bite: Angular v22 stabilizes Signal Forms, Aria, Asynchronous Reactivity APIs

14. Question 14 of 30

    How did SvelteKit 2.61 change the argument passed to an enhance callback?

    • aIt now receives raw FormData instead of any wrapped object
    • bIt now receives a destructured object with form, data, and a live() stream
    • cIt now receives an async iterable of server-sent submission events
    • dIt now receives a copy of the form remote function instance with a submit() API
    Show the answer

    Answer: d · It now receives a copy of the form remote function instance with a submit() API

    The card states that enhance callbacks now receive a copy of the form remote function instance exposing its own submit() API, replacing the old destructured object. Option B is tempting because it mixes the old callback shape with the new live() query feature, but live() is unrelated to enhance arguments.

    Read the full bite: SvelteKit 2.61 breaks remote functions, adds live queries

15. Question 15 of 30

    An Angular app suffers from both excessive backend requests during username checks and bloated bundles from legacy ngIf/ngFor usage. Which paired approach best resolves both issues?

    • aDebounce async validators in Signal Forms and migrate structural directives to Control Flow syntax
    • bReplace Signal Forms with RxJS reactive forms and wrap templates in @defer blocks
    • cUse synchronous validators only and convert all components to standalone
    • dAdd client-side HTTP caching and enable production build optimizations
    Show the answer

    Answer: a · Debounce async validators in Signal Forms and migrate structural directives to Control Flow syntax

    The correct paired approach is debouncing Signal Forms async validators to stop redundant backend calls and migrating legacy structural directives to Control Flow syntax for bundle and runtime gains. The most tempting distractor suggests using only synchronous validators and standalone components, but synchronous validators cannot check username availability against a backend, and standalone components do not replace legacy ngIf or ngFor directives.

    Read the full bite: Angular 21.1 ships with Signal Forms debounce patterns

16. Question 16 of 30

    Which sequence correctly describes the CSS Cascade's tie-breaking process for style conflicts?

    • aImportance, then Specificity, then Source Order
    • bSpecificity, then Origin and Importance, then Source Order
    • cOrigin and Importance, then Specificity, then Source Order
    • dSource Order, then Specificity, then Origin and Importance
    Show the answer

    Answer: c · Origin and Importance, then Specificity, then Source Order

    The cascade first considers the rule's origin and importance (e.g., !important declarations). If still a tie, it then compares the specificity of the selectors. Finally, if all else is equal, the rule defined later in the code (source order) wins.

    Read the full bite: CSS Cascade: How Browsers Resolve Style Conflicts

17. Question 17 of 30

    When using Vue 3.5's stable reactive props destructure, what must you do to keep a destructured prop reactive when passing it to watch or a composable?

    • aConvert it to a ref using toRef()
    • bUse withDefaults as a fallback wrapper
    • cPass it directly; destructured props retain reactivity automatically
    • dWrap the variable in a getter function
    Show the answer

    Answer: d · Wrap the variable in a getter function

    Vue 3.5 requires wrapping destructured props in getters when passing them to watch or composables to preserve reactivity. Passing them directly severs the reactive link, and withDefaults is the old boilerplate this feature replaces.

    Read the full bite: Vue 3.5 cuts reactivity memory 56%, adds lazy hydration

18. Question 18 of 30

    When upgrading to SvelteKit 2.56, which behavior change affects existing client-side query refresh logic?

    • aClient-side refreshes are now automatically sorted by object keys to stabilize caching
    • bQuery refreshes now require explicit server permission before executing
    • cQueries must now be awaited exclusively within the new run() method
    • dQuery refreshes now return a boolean indicating submission validity instead of data
    Show the answer

    Answer: b · Query refreshes now require explicit server permission before executing

    The card states that client-requested query refreshes now require explicit server permission rather than executing automatically. Option D is tempting because a boolean return was indeed added, but that change applies to form submissions, not query refreshes.

    Read the full bite: SvelteKit 2.56 overhauls remote functions, adds TypeScript 6.0

19. Question 19 of 30

    What is the fundamental nature of JSX in a React application?

    • aIt allows developers to write raw HTML directly within JavaScript files for browser interpretation.
    • bIt is a new, standalone programming language for defining user interfaces.
    • cIt is a specialized string format that React parses directly into DOM elements.
    • dIt is a syntax extension that a build tool converts into standard JavaScript function calls.
    Show the answer

    Answer: d · It is a syntax extension that a build tool converts into standard JavaScript function calls.

    The card explains that JSX is a "syntax extension" that "gets compiled into plain JavaScript objects" by a "compiler (like Babel)" into "React.createElement() function calls." Option C is incorrect because the card explicitly states JSX is "not a string, nor is it HTML."

    Read the full bite: JSX: Putting HTML Inside Your JavaScript Components

20. Question 20 of 30

    A child component needs to change a value it received from its parent. What is the correct React pattern?

    • aDeclare a local state variable with the same name to override the prop
    • bMutate the prop directly inside the child component
    • cCall a callback function passed down from the parent via props
    • dUse React's built-in two-way binding to sync the value automatically
    Show the answer

    Answer: c · Call a callback function passed down from the parent via props

    Props are immutable and flow one-way from parent to child, so the child must invoke a callback prop to request that the parent update the data. Mutating a prop directly breaks React's rendering assumptions and will not trigger a re-render.

    Read the full bite: Explain props in React and how parent components pass data to children

21. Question 21 of 30

    Which statement correctly explains why an ID selector beats a class selector when they conflict?

    • aThe class rule wins because its CLASS column score of 1 is greater than the ID column score of 0
    • bThe class rule wins if it appears later, since source order overrides specificity when selectors differ
    • cThe ID rule wins because the specificity algorithm compares the ID column first, and 1-0-0 outranks 0-1-0
    • dThe ID rule wins because specificity is a single integer score and an ID is worth 100 points versus 10 for a class
    Show the answer

    Answer: c · The ID rule wins because the specificity algorithm compares the ID column first, and 1-0-0 outranks 0-1-0

    Specificity is a three-column value scored as ID-CLASS-TYPE, so an ID's 1-0-0 always beats a class's 0-1-0 before the CLASS column is ever evaluated. The most tempting distractor claims the later class wins, but source order only breaks ties when specificity is equal.

    Read the full bite: What color wins when an ID and class rule conflict?

22. Question 22 of 30

    An HTML div element has id="main" and class="active". Which CSS rule will apply its color?

    • a#main { color: blue; }
    • bdiv.active { color: purple; }
    • cdiv#main { color: red; }
    • d.active { color: green; }
    Show the answer

    Answer: c · div#main { color: red; }

    The rule div#main has a specificity score of 1-0-1 (one ID, one type selector), which is higher than #main (1-0-0), .active (0-1-0), and div.active (0-1-1) when comparing the scores from left to right. The ID column takes precedence over the class and type columns.

    Read the full bite: CSS Specificity: The Browser's Tie-Breaking Rule

23. Question 23 of 30

    Which scenario best highlights the core value proposition of a design system?

    • aA single developer building a static landing page for a one-off marketing campaign.
    • bA startup needing to quickly prototype and test several different UI concepts for a new product idea.
    • cA large enterprise with multiple product teams maintaining various digital applications across different platforms.
    • dA graphic designer creating a comprehensive brand guideline document for print and digital assets.
    Show the answer

    Answer: c · A large enterprise with multiple product teams maintaining various digital applications across different platforms.

    The card states that a design system is essential when "multiple teams are working across different products or channels" to manage complexity at scale, ensuring consistency and speeding up production. Option C directly aligns with this, while option D describes only a part of a design system (a style guide) and options A and D describe scenarios where a design system's full investment might be overkill or not its primary benefit.

    Read the full bite: A Design System is a Shared Toolbox, Not Just a Sticker Sheet

24. Question 24 of 30

    Which accurately describes the two primary ways to define a React component?

    • aArrow functions and function declarations, with arrow functions being the modern standard
    • bComponents defined with state and components defined without state, which dictates the syntax required
    • cFunction components and class components, with function components being the standard for new React 19 code
    • dClass components and function components, but class components are deprecated and removed in React 19
    Show the answer

    Answer: c · Function components and class components, with function components being the standard for new React 19 code

    Function components and class components are the two distinct definition paradigms, and function components are the React 19 default. Arrow functions and function declarations are merely alternate syntaxes for the same function component paradigm, not separate ways to define components.

    Read the full bite: What are the two main ways to define a component in React?

25. Question 25 of 30

    How does Svelte's compiler-first design most directly improve the end-user experience compared to virtual DOM frameworks?

    • aIt shifts work to build time, producing smaller bundles and less browser CPU work for faster page loads.
    • bIt removes every byte of framework runtime code, so apps run without any JavaScript overhead.
    • cIt pre-computes virtual DOM diffs at build time to speed up reconciliation in the browser.
    • dIt allows developers to write less boilerplate, making UI code easier to read and maintain.
    Show the answer

    Answer: a · It shifts work to build time, producing smaller bundles and less browser CPU work for faster page loads.

    Svelte's compiler generates imperative vanilla JavaScript at build time, which shrinks bundles and eliminates virtual DOM diffing overhead for end users. Option D describes a developer experience benefit, not a user-facing performance improvement.

    Read the full bite: What is the primary end-user benefit of Svelte's compiler-first approach?

26. Question 26 of 30

    What is the primary benefit of Svelte's architecture as a compiler, rather than a traditional runtime framework?

    • aIt generates highly optimized, vanilla JavaScript during the build process, eliminating the need for a runtime library in the browser.
    • bIt enables dynamic loading of components at runtime, significantly reducing the initial bundle size.
    • cIt allows developers to write components using a more declarative syntax than imperative JavaScript.
    • dIt provides built-in server-side rendering capabilities, which are absent in most other frameworks.
    Show the answer

    Answer: a · It generates highly optimized, vanilla JavaScript during the build process, eliminating the need for a runtime library in the browser.

    The card emphasizes that Svelte shifts work from runtime to compile time, generating efficient vanilla JavaScript and avoiding a large runtime library, which leads to smaller bundles and improved performance. While Svelte does offer a declarative syntax (option C), this is a feature of many frameworks and not the primary benefit of its *compiler* architecture.

    Read the full bite: Svelte: A Compiler, Not Just a Framework

27. Question 27 of 30

    An element has both id='banner' and class='active'. If #banner sets margin-top: 10px and .active sets margin-top: 20px, which value applies?

    • a10px, because IDs must be unique in the HTML document
    • b10px, because an ID selector has higher specificity than a class selector
    • c20px, because multiple classes can outweigh a single ID
    • d20px, because the class rule appears later in the stylesheet
    Show the answer

    Answer: b · 10px, because an ID selector has higher specificity than a class selector

    An ID selector contributes 1-0-0 to specificity while a class contributes 0-1-0, so #banner wins even if .active appears later. IDs being unique in the DOM is an HTML constraint, not the reason the cascade favors the ID selector.

    Read the full bite: How do class and ID selectors differ in specificity and use case?

28. Question 28 of 30

    Which statement accurately describes a core principle of how React components should handle props?

    • aA child component can directly modify the props it receives to update its UI.
    • bProps facilitate a one-way data flow, allowing data to be passed from parent to child components.
    • cOnly primitive data types like strings and numbers can be passed as props to a component.
    • dProps are primarily used for managing a component's internal state that changes over time.
    Show the answer

    Answer: b · Props facilitate a one-way data flow, allowing data to be passed from parent to child components.

    The card states that props establish a 'clear, one-way data flow from parent components to child components.' This ensures predictability and reusability. Option A is incorrect because a component should never modify the props it receives; that's what state is for.

    Read the full bite: React Props: Arguments for Your Components

29. Question 29 of 30

    An element has width: 200px, padding: 20px, and border: 5px. What is its final rendered width with box-sizing: content-box?

    • a200px
    • b210px
    • c240px
    • d250px
    Show the answer

    Answer: d · 250px

    With box-sizing: content-box, the specified width (200px) applies only to the content area. The padding (20px on each side) and border (5px on each side) are then added outside this content, resulting in a total width of 200 + (2*20) + (2*5) = 250px. Option A (200px) would be the result if box-sizing: border-box were used.

    Read the full bite: CSS Box Model: Every Element is a Box

30. Question 30 of 30

    During a 10 MB video upload that requires server processing after transfer, which frontend approach most effectively prevents abandoned sessions and duplicate submissions?

    • aA determinate progress bar with percentage and bytes transferred, explicit phase labels for uploading and processing, dynamic time estimates, and chunked error recovery offering retry or resume
    • bAn indeterminate spinner on the submit button and a success toast once the server responds
    • cDisplaying a static 'about 30 seconds remaining' message and using a browser alert if the connection drops
    • dDisabling the submit button during transfer and showing a progress bar that completes when the last byte leaves the browser
    Show the answer

    Answer: a · A determinate progress bar with percentage and bytes transferred, explicit phase labels for uploading and processing, dynamic time estimates, and chunked error recovery offering retry or resume

    Option A is correct because it combines granular progress, distinct phase labels, dynamic time estimates, and resilient error handling to close the gulf of evaluation. Option D is tempting because it shows a progress bar and prevents duplicate clicks, but it wrongly conflates the network transfer with overall completion and hides server-side processing from the user.

    Read the full bite: How would you show system status during a multi-megabyte file upload?