Top 30 Easy Frontend Dev Interview Questions and Answers for Freshers

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

   Which approach correctly applies Vue's progressive philosophy to a legacy server-rendered page?

   • aSelecting Vue because it has a small bundle size compared to other frameworks
   • bDropping in a CDN script tag to enhance one form, then migrating that component to a Vite SFC later
   • cRewriting the entire site as a compiled SPA before adding Vue to a single component
   • dAvoiding the CDN approach because Vue loses reactivity without a build step to compile templates
   Show the answer

   Answer: b · Dropping in a CDN script tag to enhance one form, then migrating that component to a Vite SFC later

   Vue is progressive because it supports incremental adoption, letting you enhance one element with a CDN script and later scale to a compiled SFC project. Option A is a common misconception because progressive refers to layer-by-layer adoptability, not a small bundle size.

   Read the full bite: Explain Vue as a progressive framework and build-step differences

2. Question 2 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?

3. Question 3 of 30

   Which TypeScript snippet correctly declares a string name and a numeric array using proper primitive and array type annotations?

   • aconst userName: string = "Alice"; const luckyNumbers: number[] = [7, 13, 21]
   • bconst userName: String = "Alice"; const luckyNumbers: Number[] = [7, 13, 21]
   • cconst userName: string = "Alice"; const luckyNumbers: [number] = [7, 13, 21]
   • dconst userName = "Alice"; const luckyNumbers = [7, 13, 21]
   Show the answer

   Answer: a · const userName: string = "Alice"; const luckyNumbers: number[] = [7, 13, 21]

   TypeScript requires lowercase string and number for primitive type annotations, and number[] correctly types an array of numbers. Option B is wrong because uppercase String and Number refer to rare built-in wrapper object types rather than the primitive value types used for standard annotations.

   Read the full bite: Declare a string name and an array of lucky numbers in TypeScript

4. Question 4 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

5. Question 5 of 30

   Which built-in Angular module is specifically designed for handling user input and validation, a capability that Vue and Svelte projects typically address through external libraries such as VeeValidate or FormKit?

   • aTemplate-driven and reactive forms
   • bSignal-based change detection
   • cState management with NgRx
   • dHierarchical dependency injection
   Show the answer

   Answer: a · Template-driven and reactive forms

   Angular ships template-driven and reactive forms with built-in validators as a first-party module, while Vue and Svelte generally rely on community libraries like VeeValidate or FormKit for equivalent functionality. NgRx is the most tempting distractor because it is a third-party state management library, not a built-in Angular feature.

   Read the full bite: What out-of-the-box Angular features require manual setup in Vue or Svelte?

6. Question 6 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

7. Question 7 of 30

   When you write let message = 'hello' without a type annotation, what is the resulting compile-time behavior?

   • aTypeScript infers string and later rejects message = 42 with a type error
   • bThe compiler requires an explicit : string annotation before the code will compile
   • cThe variable is implicitly given the any type, allowing later assignment of any value
   • dTypeScript defers type checking until runtime to see how the variable is used
   Show the answer

   Answer: a · TypeScript infers string and later rejects message = 42 with a type error

   TypeScript analyzes the right-hand side to infer string, so reassigning a number later causes a compile-time error. Distractor A is wrong because omitting an annotation does not default to any; the compiler deduces a specific static type instead.

   Read the full bite: Explain what TypeScript's type inference is and show an inferred variable declaration

8. Question 8 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?

9. Question 9 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?

10. Question 10 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?

11. Question 11 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?

12. Question 12 of 30

    You need to generate deployable files to upload to a web server. Why should you use ng build instead of ng serve?

    • ang serve produces production-optimized bundles by default, while ng build uses development settings
    • bng serve writes files to disk just like ng build, but only includes development source maps
    • cng build writes the compiled output to the dist/ folder, while ng serve keeps the build in memory and starts a dev server
    • dng build automatically starts a local server on port 4200, while ng serve requires a separate web server
    Show the answer

    Answer: c · ng build writes the compiled output to the dist/ folder, while ng serve keeps the build in memory and starts a dev server

    ng build writes static files to the dist/ folder for deployment, while ng serve keeps output in memory and runs a dev server. Many beginners incorrectly think ng serve also writes files to disk, but it never produces disk output.

    Read the full bite: ng serve purpose and fundamental difference from ng build

13. Question 13 of 30

    During a normal page navigation in the same browser tab, which object is replaced while the other persists?

    • aNeither object is replaced; both remain intact for the lifetime of the tab.
    • bOnly the document object is replaced; the window object persists as the tab container.
    • cBoth window and document are replaced because they both represent the loaded page.
    • dOnly the window object is replaced because it holds the page-specific content.
    Show the answer

    Answer: b · Only the document object is replaced; the window object persists as the tab container.

    The window object represents the browser tab and global execution context, so it persists across navigation, while the document is the in-memory DOM representation of a specific page and is rebuilt. Claiming both are replaced is a common misconception that treats window and document as the same page-level entity rather than as container versus content.

    Read the full bite: What is the fundamental difference between window and document?

14. Question 14 of 30

    What does create-vue's practice of asking about Pinia and Vitest reveal about Vue's overall framework design?

    • aVue prefers to keep its runtime core small and let developers opt into official ecosystem tools only when needed.
    • bVue considers Pinia and Vitest to be community plugins outside the official ecosystem.
    • cVue treats these choices as reversible runtime settings that can be changed without altering the project skeleton.
    • dVue relies on the legacy Vue CLI to handle dependencies because create-vue cannot manage them automatically.
    Show the answer

    Answer: a · Vue prefers to keep its runtime core small and let developers opt into official ecosystem tools only when needed.

    This reflects Vue's intentional design as a lean runtime with an opt-in ecosystem, keeping bundle sizes down and avoiding forced opinions. Distractor D is tempting because it suggests flexibility, but the prompts are one-time scaffolding decisions that permanently shape the project skeleton and lockfile, not runtime toggles.

    Read the full bite: Why does create-vue ask about Pinia and Vitest during scaffolding?

15. Question 15 of 30

    When creating lighter and darker shades of a single brand color, why is HSL typically preferred over HEX?

    • aHSL separates lightness from hue, allowing you to adjust shade with one value.
    • bRGB and HSL are functionally identical, so the choice is purely stylistic.
    • cHSL is more compact than HEX, reducing the size of your CSS files.
    • dHEX does not support transparency, so it cannot create subtle shade variations.
    Show the answer

    Answer: a · HSL separates lightness from hue, allowing you to adjust shade with one value.

    HSL keeps hue and saturation separate from lightness, so you can darken or lighten a color by adjusting a single percentage. Option D is a common misconception—modern HEX supports transparency in eight-digit notation, and D ignores that HSL reorganizes color data to make lightness adjustments intuitive.

    Read the full bite: Set paragraph text blue and background light grey, compare HEX, RGB, HSL

16. Question 16 of 30

    In a browser script, what distinguishes a top-level var declaration from let or const?

    • alet and const are not globally scoped, unlike var
    • bvar creates a property on the global Window object, while let and const do not, though all three are globally scoped
    • cvar is hoisted to the Window object, while let and const are not hoisted
    • dAll three create Window properties, but only var allows reassignment via window.x
    Show the answer

    Answer: b · var creates a property on the global Window object, while let and const do not, though all three are globally scoped

    var creates a writable property on the global Window object, while let and const are globally scoped without becoming Window properties. Option A is a tempting misconception because let and const are indeed globally scoped; they simply do not pollute the global object.

    Read the full bite: What happens when you declare var globally versus let or const?

17. Question 17 of 30

    Which approach correctly uses a custom WOFF2 font file to style all headings?

    • aCreate an @font-face rule with only a font-family descriptor, then reference that name in the heading font-family stack
    • bDefine @font-face with a custom font-family name and a src descriptor, then apply that custom name via font-family on heading selectors
    • cSet font-family: 'headings.woff2' on the h1-h6 selectors so the browser downloads and uses the file directly
    • dDeclare @font-face with a src URL, which immediately applies the font to every heading without any extra rules
    Show the answer

    Answer: b · Define @font-face with a custom font-family name and a src descriptor, then apply that custom name via font-family on heading selectors

    Custom fonts require a two-step process: an @font-face rule declares the font with a family name and src URL, and a separate selector applies that family name to elements. Option C confuses the file path with the family name, Option D wrongly assumes @font-face auto-applies, and Option A omits the src descriptor which makes the rule invalid.

    Read the full bite: How do you declare a custom font and apply it to headings?

18. Question 18 of 30

    You place a helper component named utils.svelte inside src/routes/dashboard/. What is true about its routing behavior?

    • aIt does not create a route because SvelteKit requires the plus prefix for route files
    • bIt is ignored unless it exports a load function from +page.js
    • cIt automatically creates a public page at /dashboard/utils
    • dIt only works if the folder is renamed to [utils] with brackets
    Show the answer

    Answer: a · It does not create a route because SvelteKit requires the plus prefix for route files

    SvelteKit only treats files starting with + as route files, so utils.svelte is ignored for routing and does not create a page. Option C reflects the common misconception that any .svelte file inside src/routes automatically becomes a public route.

    Read the full bite: How does src/routes determine routing in SvelteKit?

19. Question 19 of 30

    Which accurately describes the return values of getElementById and getElementsByClassName?

    • aThe first returns a NodeList; the second returns a static Array.
    • bBoth return a NodeList that updates automatically when the DOM changes.
    • cThe first returns an Element or null; the second returns a live HTMLCollection.
    • dBoth return a live HTMLCollection.
    Show the answer

    Answer: c · The first returns an Element or null; the second returns a live HTMLCollection.

    getElementById returns a single Element or null, while getElementsByClassName returns a live HTMLCollection that automatically reflects DOM mutations. Option D is tempting because both methods query the DOM, but getElementById never returns a collection.

    Read the full bite: How do you select by ID and class, and what is returned?

20. Question 20 of 30

    Which pattern correctly wires a text input as a controlled component using useState?

    • aInitialize useState with an empty string at the top level, bind the input value to the state variable, and update it via onChange by calling the setter with event.target.value.
    • bDeclare the state variable with useState inside a useEffect hook so it runs after mount, bind value to the state, and mutate the variable directly in the onChange handler.
    • cCall useState inside an if block to avoid unnecessary renders, set the input value to the state variable, and update it by assigning event.target.value directly to the state variable.
    • dInitialize useState with null at the top level, leave the input uncontrolled by omitting the value attribute, and call the setter inside onChange to update the state.
    Show the answer

    Answer: a · Initialize useState with an empty string at the top level, bind the input value to the state variable, and update it via onChange by calling the setter with event.target.value.

    The correct pattern requires calling useState at the top level with an empty string, binding the input value to state, and updating via the setter in onChange. Option C is tempting because it mentions binding value, but calling useState conditionally violates the Rules of Hooks and direct mutation prevents React from re-rendering.

    Read the full bite: How do you use useState to track user input?

21. Question 21 of 30

    What happens to a useEffect's cleanup and setup when a value in its dependency array changes?

    • aReact runs the previous cleanup with old values first, then runs setup with the new values
    • bReact runs setup with the new values first, then runs the previous cleanup with old values
    • cReact checks if the dependency array itself is a new reference to decide whether to re-run
    • dCleanup only runs when the component unmounts, so only setup runs with the new values
    Show the answer

    Answer: a · React runs the previous cleanup with old values first, then runs setup with the new values

    React always runs the previous effect's cleanup with the old dependency values before running the new setup when a dependency changes. The most tempting distractor is wrong because cleanup is not reserved for unmount; it runs whenever dependencies change to prevent stale subscriptions or leaks.

    Read the full bite: Explain useEffect dependency array behavior for [], [deps], and omitted

22. Question 22 of 30

    What makes rem more predictable than em when sizing text in nested components?

    • arem references the root font size and avoids parent-level compounding
    • bBrowser zoom ensures px and em scale equally well for accessibility
    • crem and em both calculate from the same parent reference point
    • drem is limited to font properties while em applies to any length
    Show the answer

    Answer: a · rem references the root font size and avoids parent-level compounding

    rem is always calculated from the root font-size, preventing nested elements from multiplying their size as em does. Distractor D is tempting but wrong because em references its direct parent, not the root, leading to unpredictable compounding in nested trees.

    Read the full bite: Explain em, rem, px and why rem is preferred for font sizing

23. Question 23 of 30

    When defining a User object shape for an external API that third-party modules may need to augment, why is an interface conventionally preferred over a type alias?

    • aType aliases cannot describe object shapes with optional or readonly properties.
    • bInterfaces are erased differently during compilation, leaving a smaller runtime footprint.
    • cInterfaces support declaration merging, so multiple modules can safely contribute to the same User definition.
    • dThe choice is purely stylistic, as both constructs handle extension identically.
    Show the answer

    Answer: c · Interfaces support declaration merging, so multiple modules can safely contribute to the same User definition.

    Interfaces are preferred because they support declaration merging, which lets separate files or plugins augment the User shape without conflicting definitions. The runtime performance claim is a common misconception because both constructs are fully erased during compilation and have zero runtime cost.

    Read the full bite: Define a User object shape: interface vs type alias?

24. Question 24 of 30

    Which of the following would violate encapsulation in a reusable Button component?

    • aAccepting a variant prop to control visual style
    • bForwarding native click events to the parent
    • cProviding a class or style prop for consumer style overrides
    • dUsing a slot for the button's text label
    Show the answer

    Answer: c · Providing a class or style prop for consumer style overrides

    Exposing a class or style prop creates an escape hatch that breaks encapsulation by letting consumers override internal styles, making the component unmaintainable at scale. Variant, slots, and native event forwarding are all encouraged practices for a clean, composable API.

    Read the full bite: Design the public API for a reusable Button component

25. Question 25 of 30

    You define a function return type as Product[] | { message: string }. What is the critical next step before using the returned value?

    • aCast the result to any to simplify downstream code
    • bForce consumers to use type assertions or defensive checks on the union
    • cExport the union but let consumers decide how to narrow it
    • dUse a type guard such as Array.isArray to narrow the union
    Show the answer

    Answer: d · Use a type guard such as Array.isArray to narrow the union

    Using a type guard like Array.isArray lets TypeScript narrow the union inside each branch, giving exact types and autocomplete. Simply returning the union without narrowing forces consumers to deal with both shapes manually, a subtler error that hides bugs until runtime.

    Read the full bite: How do you type a function with two possible response shapes?

26. Question 26 of 30

    In which scenario is replacing prop drilling with React Context most justified?

    • aWhen a parent passes a prop directly to its immediate child
    • bWhen you want to eliminate all prop passing from your application
    • cWhen data must travel through several components that do not use it themselves to reach a deep descendant
    • dWhen a callback prop controls a form input's value
    Show the answer

    Answer: c · When data must travel through several components that do not use it themselves to reach a deep descendant

    Prop drilling is threading props through intermediate components that do not need the data to reach a deep descendant, which is the specific architectural pain that justifies Context. Eliminating all prop passing is wrong because doing so adds indirection, obscures data flow, and can trigger broad re-renders when shallow prop passing is still perfectly fine.

    Read the full bite: What is prop drilling in React?

27. Question 27 of 30

    When designing a reusable Card component that should wrap arbitrary content like headings, paragraphs, or buttons, why is using children preferable to using a dedicated body prop?

    • aBecause the Card can remain a presentational wrapper that does not need to know what markup it contains
    • bBecause children is handled by special React syntax that automatically optimizes re-renders for nested JSX
    • cBecause custom props like body cannot accept JSX values and are restricted to plain strings
    • dBecause children can only contain a single element, making the Card's output more predictable and easier to style
    Show the answer

    Answer: a · Because the Card can remain a presentational wrapper that does not need to know what markup it contains

    Using children lets the Card stay a layout wrapper while the parent decides the content, avoiding tight coupling. The tempting idea that body props only accept strings is wrong—custom props can technically receive JSX, but using them for composition forces the wrapper to know about specific content structures.

    Read the full bite: How does children work, and why is it fundamental to composition?

28. Question 28 of 30

    Which approach should a child component use when it needs to change data received from its parent via props?

    • aDeclare a two-way binding so the prop syncs back to the parent automatically.
    • bMutate the prop directly and let the parent detect the change.
    • cUse a global state store to overwrite the parent's original variable.
    • dEmit an event or invoke a callback to ask the parent to update the data.
    Show the answer

    Answer: d · Emit an event or invoke a callback to ask the parent to update the data.

    The child should treat props as read-only and request changes through events or callbacks, preserving unidirectional data flow and predictable state ownership. Directly mutating the prop (option B) breaks the explicit contract and makes debugging difficult because the parent loses control over its own state.

    Read the full bite: Primary mechanism for passing data from parent to child component

29. Question 29 of 30

    In CSS Grid, how does an auto-sized column behave compared to a 1fr column?

    • aIt behaves identically to 1fr unless minmax is applied
    • bIt always fills remaining space when paired with a fixed-width column
    • cIt divides leftover space proportionally like 1fr
    • dIt collapses to the content width and does not fight for leftover space
    Show the answer

    Answer: d · It collapses to the content width and does not fight for leftover space

    Auto tracks shrink-wrap to their content's intrinsic width and only absorb leftover space when no fr tracks compete. Distractor B is wrong because auto does not automatically fill remaining space like 1fr, a common misconception the card flags as a red flag.

    Read the full bite: CSS Grid: difference between 1fr and auto column sizing?

30. Question 30 of 30

    When a child must notify its parent of a new search query, which approach preserves proper encapsulation in Vue and Angular?

    • aThe child receives a callback prop in Vue or calls a parent method through dependency injection in Angular.
    • bThe child dispatches the value through a global event bus in Vue or uses [(ngModel)] two-way binding in Angular.
    • cThe child declares an event via defineEmits in Vue or @Output EventEmitter in Angular and emits the query upward.
    • dThe child directly assigns the new value to a property on the parent instance or shared service.
    Show the answer

    Answer: c · The child declares an event via defineEmits in Vue or @Output EventEmitter in Angular and emits the query upward.

    Emitting a named, typed event through defineEmits or @Output/EventEmitter keeps the parent in control of state and follows framework conventions. Option D is tempting because direct mutation seems efficient, but it violates unidirectional data flow and breaks component encapsulation.

    Read the full bite: How do you emit events from a child to parent component?