Interview questions in Frontend Dev, page 3
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.
How do you configure Angular CLI dev server proxying?
Tests Angular CLI proxying to bypass CORS locally. Good answer: create proxy.conf.json with target and path, register it in angular.json serve options as proxyConfig, then restart ng serve.
Describe the difference between DOMContentLoaded and window.load
This tests critical rendering path knowledge. DOMContentLoaded fires after HTML parsing and deferred scripts, while load waits for all subresources; use the former to bind UI early.
Explain useEffect dependency array behavior for [], [deps], and omitted
It tests reactive dependency tracking. Omitting re-runs every render; [] runs on mount with cleanup on unmount; [deps] re-runs when Object.is detects change. Red flag: claiming [] means 'run once' without mentioning cleanup or stale values.
Explain em, rem, px and why rem is preferred for font sizing
This tests CSS unit semantics and accessibility. px is absolute; em compounds against its parent; rem is root-relative and predictable. rem respects user browser font settings without nesting issues.
Explain Vite dependency pre-bundling, startup speed, and CommonJS handling
This tests whether you understand Vite's ESM-first dev server constraints. Pre-bundling converts CJS/UMD to ESM and collapses multi-file ESM deps into single modules to stop 600+ request waterfalls.
Describe event delegation and implement a single ul click handler in TypeScript
Add one listener to the ul, use event.target plus closest to find the li, and type it as MouseEvent.
What will count be after three setCount calls in a row?
Tests React state batching and stale closures. Answer: count is 1 because all three calls read the same closed-over value of 0. Fix: pass an updater function setCount(c => c + 1) three times so React queues each update.
Which CSS background properties make a hero image cover its container?
Tests background-size keywords and aspect-ratio behavior. Lead with cover, note it fills the container by cropping while preserving ratio, unlike contain. Red flag: recommending 100% 100% or explicit lengths, which stretch and distort the image.
Describe two key Angular CLI production build optimizations
Tests whether you know architect targets and concrete production optimizations. Strong answers name two of: dead code elimination and minification, hashed filenames for cache busting, or disabled source maps.
Explain DOM event capturing and bubbling with addEventListener
Tests DOM event propagation and addEventListener phase selection. Core: capture moves root-to-target, bubble moves target-to-root, useCapture or options.capture sets it. Red flag: saying events only bubble or confusing stopPropagation with preventDefault.
How do you fetch data with useEffect and prevent memory leaks?
This tests useEffect async lifecycle and cleanup. A good answer places fetch inside useEffect, uses an ignore flag or AbortController to block state updates after unmount, and includes deps. A red flag is skipping cleanup and letting a late response set state.
Create a vertical black gradient overlay on a background image
Use linear-gradient with rgba black stops, layer it over the image via stacked backgrounds or a pseudo-element.
What is a SvelteKit adapter and how do adapter-static and adapter-node differ?
Tests your grasp of SvelteKit's deployment abstraction. A strong answer outlines how adapters compile the app for a target platform, contrasting adapter-static's CDN-ready HTML with adapter-node's server-side request handler for Node environments.
What are the key differences between NodeList and HTMLCollection?
Tests DOM snapshot vs live binding: querySelectorAll returns a static NodeList, getElementsByTagName returns a live HTMLCollection. Strong answers note childNodes is a live NodeList and warn against caching length during DOM mutation.
What is the purpose of the useEffect cleanup function?
Explain cleanup prevents memory leaks by clearing timers or unsubscribing when dependencies change or on unmount.
What is font-display and how do swap and block differ?
This tests knowledge of the font display timeline. Swap shows fallback immediately then swaps in custom font, while block hides text for a short block period before fallback. A red flag is claiming swap prevents layout shift or that block is superior.
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