Interview questions in Frontend Dev
What is JSX and how does the browser run it?
JSX is XML-like syntax compiled to React.createElement calls; it differs from HTML via className and camelCase; browsers never see JSX, only transpiled JS.
Explain Vue as a progressive framework and build-step differences
Tests incremental adoptability. Strong answers define progressive as layer-by-layer adoption, describe script-tag HTML enhancement, and contrast it with compiled SFC SPA toolchains. Red flag: calling Vue lightweight rather than incrementally adoptable.
Declare a string name and an array of lucky numbers in TypeScript
Declare the name with a lowercase string type and the lucky numbers as number[] or Array<number>.
Explain the CSS box model: content-box vs border-box
Tests if you understand how width maps to rendered size. Good answers contrast content-box (350px + 10px border = 370px) with border-box (stays 350px) and note that four width:25% items break under content-box. Red flag: saying border-box includes margin.
What out-of-the-box Angular features require manual setup in Vue or Svelte?
Tests whether you understand framework scope tradeoffs. A strong answer cites first-party routing, forms, dependency injection, and Signals, then contrasts them with Vue or Svelte's add-on ecosystem.
Explain what TypeScript's type inference is and show an inferred variable declaration
This tests whether you understand TypeScript deduces types without annotations. A strong answer defines inference as deriving types from values and gives an example like let x = 3 inferring number. A red flag is claiming explicit types are required.
Explain props in React and how parent components pass data to children
Define props as the single object argument; show destructuring; stress immutability and downward flow; note defaults.
What color wins when an ID and class rule conflict?
Red wins; an ID scores 1-0-0 while a class scores 0-1-0, so the ID rule beats the class rule.
What is the primary end-user benefit of Svelte's compiler-first approach?
Tests if you connect compiler architecture to user-facing performance. Strong answer: build-time work shrinks bundles and reduces browser overhead for faster loads on slow devices. Red flag: answering with developer ergonomics instead of runtime performance.
What is noImplicitAny and why is it best practice?
State that noImplicitAny errors when inference fails, forcing explicit types instead of plain any.
What are the two main ways to define a component in React?
Tests fluency in function and class syntax. Outline: show a function returning an h1; show a class with render() returning an h1; note functions are the React 19 default. Red flag: offering arrow vs function declaration as the two ways, or omitting render().
How do class and ID selectors differ in specificity and use case?
IDs are 1-0-0 and meant for unique elements; classes are 0-1-0 and reusable.
Compare and contrast Vue 3 and Svelte reactivity systems
Tests runtime versus compile-time trade-offs. Contrast Vue 3 Proxy interception with Svelte compile-time assignment transforms. Vue tracks dependencies dynamically during effects; Svelte resolves them at build. Red flag: claiming both use runtime Proxies.
Explain the difference between any and unknown, and demonstrate type-safe narrowing
This tests your grasp of TypeScript top types: any disables checking while unknown forces narrowing. A strong answer defines both, accepts unknown, and uses typeof or a type guard before operating. Red flag: saying they are equivalent or relying on as casts.
What is the purpose of React's key prop and index key risks?
This tests React reconciliation. Keys give stable identity to match components across renders and preserve state. Indices break on reorder or delete, causing state bugs. A red flag: saying keys are only for performance or indices are harmless.
Describe the full CSS cascade precedence order
This tests deep cascade knowledge beyond specificity. A strong answer lists the six origins in order, notes !important reverses them, then layers, specificity, and source order.
Why is DI central to Angular architecture versus Vue's module system?
Tests architectural grasp of inversion of control. Angular DI enables hierarchical injectors, tree-shakable providers, and runtime substitution without direct imports unlike Vue modules. Red flag: calling DI mere convenience or claiming Vue matches Angular DI.
How do you type and guard a string-or-string-array argument?
Tests union typing and runtime narrowing. Annotate as string | string[], then branch with Array.isArray(). Strong answers note typeof returns "object" for arrays and that assertions bypass safety.
Describe two patterns for conditional rendering in JSX
First, early return with if/else for branches; second, ternary or logical AND inside JSX for inline toggles.
What is margin collapsing? Give a sibling scenario and prevention.
This tests understanding of vertical margin combination in normal flow. A strong answer defines collapsing, gives a sibling paragraph example where the larger margin wins, and names a block formatting context or padding as prevention.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles