Easy 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 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.
ng serve purpose and fundamental difference from ng build
Ng serve compiles in memory and serves via a dev server with live reload, while ng build writes output to dist/.
What is the fundamental difference between window and document?
Window is the browser tab and global scope; document is the object-oriented DOM representation of the loaded page.
Why does create-vue ask about Pinia and Vitest during scaffolding?
Tests knowledge of Vue's lean core and modular tooling. Good answers note that create-vue conditionally installs deps, scaffolds folders like src/stores or tests/, and pre-configures Vite so you skip manual wiring.
What happens when you declare var globally versus let or const?
Knowledge that var creates a Window property while let and const do not. A good answer notes var adds window.x, let/const do not pollute the global object, yet both are globally scoped.
Set paragraph text blue and background light grey, compare HEX, RGB, HSL
Set color and background-color; HEX is compact, RGB is explicit, HSL is intuitive for lightness/hue.
How does src/routes determine routing in SvelteKit?
Src/routes mirrors URLs, folders become paths, [slug] creates dynamic params, and +page.svelte renders pages.
How do you select by ID and class, and what is returned?
This tests basic DOM API knowledge and awareness of live collections. Use document.getElementById for IDs and document.getElementsByClassName for classes, which returns a live HTMLCollection. A red flag is calling the result a static Array or NodeList.
How do you use useState to track user input?
Initialize with useState at top level, bind input value to state, and update via onChange using setter.
How do you declare a custom font and apply it to headings?
This tests @font-face usage for custom web fonts. A good answer declares a font-family name and src URL inside @font-face, then applies that family to heading selectors.
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