In this article
CSS: specificity and the cascade
For how a timed build round runs from start to finish, see the machine coding rounds guide.
What is CSS specificity and how is it calculated?
Specificity is the weight browsers use in the cascade to decide which CSS declaration applies to an element when several rules compete. It is calculated from the selector: each ID selector adds 1-0-0, each class, attribute selector or pseudo-class adds 0-1-0, and each type selector or pseudo-element adds 0-0-1 (MDN Web Docs, Specificity, accessed October 2026). Compare the three columns from left to right.1 The pseudo-class :where() and the universal selector * add nothing, while :is(), :not() and :has() take the weight of their most specific argument. Specificity also only decides after origin, !important, cascade layers and inline styles have been considered.
Why it is asked: it separates people who fix styles with trial and error from people who can explain which rule wins. Read the full explanation: MDN Web Docs, Specificity.
Which rule wins, #nav a or .menu .item a?
The selector #nav a wins, assuming neither declaration is !important or in a different cascade layer; if the weights tie, the later rule wins. It weighs 1-0-1 (one ID, one type selector), while .menu .item a weighs 0-2-1 (two classes, one type selector), and the ID column is compared first, so one ID outweighs two classes.1 To override the winner, write a selector of higher weight or restructure the rules, rather than piling on more selectors by guesswork.
Why it is asked: it turns a definition into a calculation you can do aloud. Read the full explanation: MDN Web Docs, Specificity.
JavaScript: scope and closures
What is a closure in JavaScript?
A closure is a function bundled together with references to its surrounding state, which MDN calls the lexical environment (MDN Web Docs, Closures, accessed October 2026). In practice an inner function can read the variables of the function around it. MDN's makeFunc example returns an inner function that still reads the outer variable name after the outer call has finished.
Why it is asked: closures sit under callbacks, event handlers and private state. Read the full explanation: MDN Web Docs, Closures.
Are closures only created when a function is returned?
No. MDN says closures are created every time a function is created, at function creation time. Returning the inner function is only the case where the effect is easiest to see. A nested function has access to the variables declared in its outer scope whether or not it ever leaves that scope, so a callback passed to another function is a closure too.
Why it is asked: it catches the common half-understanding of closures. Read the full explanation: MDN Web Docs, Closures.
What can a closure capture?
A closure can capture variables from block, function and module scopes, because it keeps a reference to its lexical environment, not a copy of the values (MDN Web Docs, Closures). The practical result is that the function sees the variable's current value when it runs, not the value it had when the function was created.
Why it is asked: it leads straight into the loop-callback bug questions. Read the full explanation: MDN Web Docs, Closures.
What is the difference between var, let and const for scope?
Blocks are treated as scopes only for variables declared with let or const; class declarations are block-scoped too. A let or const is hoisted but cannot be read before its declaration runs (the temporal dead zone), while a var read early gives undefined. MDN shows a const declared inside a block throwing ReferenceError: x is not defined when read outside that block, while var is not block-scoped and so does not behave that way (MDN Web Docs, Closures, accessed October 2026). Prefer const, use let when a value changes, and avoid var in new code.
Why it is asked: scope is the base of most bug questions. Read the full explanation: MDN Web Docs, Closures.
What does this refer to in JavaScript?
The value of this depends on how a function is called, not where it is written. A method call gives this the object before the dot, a plain call gives it a default value that differs between strict and sloppy mode, and bind(), call() and apply() set it explicitly. An arrow function has no this of its own and uses the one from its surrounding scope (MDN Web Docs, this). Objects also inherit properties through their prototype chain, which is the usual follow-up.
Why it is asked: lost this is a classic bug in event handlers and callbacks. Read the full explanation: MDN Web Docs, this.
Knowing it is half the job. Saying it is the other half.
Interview Clozo is an AI interview copilot for real interview rounds: it hears the question and puts a strong answer on your screen, and you say it in your own words. See the features or how it works.
Start Free Trial →JavaScript: the event loop and asynchronous code
Is JavaScript single-threaded?
Yes, in the sense that matters for an interview. MDN describes an agent as a thread, which means the interpreter can process only one statement at a time (MDN Web Docs, execution model, accessed October 2026). Each agent has one thread. Web Workers run code in separate agents, so a page can use more than one thread, but your main-page script and the Document Object Model (DOM) share one (MDN Web Docs, Using Web Workers). Waiting for something slow does not freeze the page, because the result arrives later as a callback task added to a queue.
Why it is asked: it checks that you do not confuse one thread with blocking code. Read the full explanation: MDN Web Docs, execution model.
What is the difference between the call stack and the task queue?
The call stack is the structure that holds the functions currently running, and it is last-in, first-out: the most recent call finishes first. The queue holds tasks waiting to run (MDN's execution model calls them jobs), and it is first-in, first-out: earlier tasks run before later ones (MDN Web Docs, execution model). The event loop moves work from the queue onto the stack.
Why it is asked: it tests whether you can draw the machine behind async code. Read the full explanation: MDN Web Docs, execution model.
How does the event loop work?
The event loop is the mechanism that works through the queue of waiting work, running one task at a time on the agent's single thread. A task is a callback such as a setTimeout() callback or an event handler, queued when the asynchronous action completes (MDN Web Docs, execution model). The loop takes one task, runs it to completion, then drains the whole microtask queue, including microtasks added meanwhile, before it takes the next task (MDN Web Docs, microtask guide). Promise then() handlers run as microtasks.
Why it is asked: it explains most ordering puzzles. Read the full explanation: MDN Web Docs, execution model.
What is a callback, and why does asynchronous code use them?
A callback is a function passed in to run later. MDN states that the code executing after an asynchronous action completes is always provided as a callback function (MDN Web Docs, execution model, accessed October 2026). The examples it lists are the promise then() handler, the setTimeout() callback and the event handler. Each runs later, when its trigger happens.
Why it is asked: it links closures to asynchronous code. Read the full explanation: MDN Web Docs, execution model.
Does asynchronous code block the page?
Waiting does not, but computing can. MDN describes the event-loop model as one where waiting on fetch or IndexedDB leaves the thread free for other work, including user input (MDN Web Docs, execution model). The exception follows from the single thread: a long synchronous loop holds the thread, so a queued click handler waits until the loop ends.
Why it is asked: it separates waiting from computing. Read the full explanation: MDN Web Docs, execution model.
In what order does this code print?
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('sync');It prints sync, promise, timeout. The synchronous line runs first. The promise handler is a microtask, which runs once the stack is empty and before control returns to the event loop, so it goes before the timer callback. The timer callback is a task in the task queue, which runs after the microtask. The order was computed in a small simulation of the stack and the two queues, not by running a JavaScript engine.1
Text description of the diagram
- The promise handler is a microtask, which runs once the stack is empty.
- The timer callback is a task in the task queue, which runs after the microtask.
Why it is asked: it is the standard output-ordering question. Read the full explanation: MDN Web Docs, microtask guide.
What is a microtask?
A microtask is a short function that runs after the function or program that created it exits, only when the JavaScript stack is empty, and before control returns to the event loop (MDN Web Docs, microtask guide, accessed October 2026). The queueMicrotask() function creates one directly. This is why a promise callback overtakes a timer even when the timer delay is zero.
Why it is asked: it tests the detail that decides ordering puzzles. Read the full explanation: MDN Web Docs, microtask guide.
How do you keep a page responsive during a long calculation?
Name the cause first: one thread handles one statement at a time, so a long synchronous loop blocks clicks and rendering until it ends. Profile it in the browser's performance panel first. Then move work bound by the central processing unit (CPU) to a Web Worker, which runs in a separate agent and thread (MDN Web Docs, Using Web Workers). When the work must touch the page's elements, split it into smaller pieces and schedule each next piece with a callback such as setTimeout(), which queues a task and lets waiting events run in between (MDN Web Docs, execution model).
Why it is asked: it turns the event loop into a practical fix. Read the full explanation: MDN Web Docs, Using Web Workers.
HTML, the DOM and accessibility
Why does semantic HTML matter for accessibility?
Semantic HTML is markup whose elements describe the meaning of the content, such as <nav>, <button> and <h1>, instead of only its look (MDN Web Docs, Semantics). Browsers and assistive technology such as screen readers use that meaning, and a real <button> also brings keyboard focus and activation for free, which a clickable <div> does not.
Why it is asked: it shows whether you build for every user, not only mouse users. Read the full explanation: MDN Web Docs, Semantics.
What is event bubbling, and what is event delegation?
Event bubbling is the way an event fired on an element then travels up through its ancestors, so a parent can react to a click on a child. Event delegation is a pattern that uses it: attach one listener to a parent and check event.target to see which child was hit (MDN Web Docs, Event bubbling). It needs fewer listeners and also covers children added later. stopPropagation() halts the travel, so use it sparingly.
Why it is asked: it tests your model of how the page's elements and events connect. The page's elements form a tree called the Document Object Model (DOM), and events travel along that tree. Read the full explanation: MDN Web Docs, Event bubbling.
Browser and performance
What are debounce and throttle, and how do you write a debounce?
Debounce delays a function until calls have stopped for a set time, which suits a search box that should fetch once the user pauses. Throttle lets a function run at most once per interval, which suits scroll handlers. A debounce keeps a timer id in a closure: each call runs clearTimeout() on it, then starts a new setTimeout() that calls the real function.
Why it is asked: it is a very common build question and combines closures with timers. Read the full explanation: MDN Web Docs, Closures.
How does the browser turn HTML and CSS into pixels?
The browser parses HTML into the DOM and CSS into a style tree, combines them into a render tree, computes the size and position of each box (layout), then paints it (MDN Web Docs, Critical rendering path). Changing geometry triggers layout and then paint again, so batch DOM writes and avoid reading layout values between them.
Why it is asked: it underlies every performance answer. Read the full explanation: MDN Web Docs, Critical rendering path.
What is cross-site scripting (XSS) and how do you prevent it?
Cross-site scripting (XSS) is an attack in which a page runs a script an attacker supplied, usually through unescaped user input (MDN Web Docs, Cross-site scripting). Treat user input as text: set textContent rather than innerHTML, escape output, and add a Content Security Policy as a second layer.
Why it is asked: it shows you think about security when you handle input. Read the full explanation: MDN Web Docs, Cross-site scripting.
Design and build rounds
How do you answer a frontend system design question?
Work in a fixed order and say it aloud. Clarify what the interface must do and for whom. Sketch the components and who owns each piece of state. Describe the data the browser fetches and how it is cached. Then cover loading and error states, accessibility, and performance trade-offs. A strong answer names a decision and the alternative you rejected, not a list of technologies.
Why it is asked: it shows whether you design for users and constraints, not only for code. Read the full explanation: MDN Web Docs, Critical rendering path for the performance part. The class-design round is a different interview, covered in low level design interview questions and answers.
What do you do in a frontend machine-coding round?
You build a small working component or feature, such as a list with filtering, in a fixed time slot. A strong answer shows a plan before typing, a working version first, then edge cases such as empty and failed states, with the state kept in one clear place. Rehearse by timing yourself on small builds, and talk through each choice as you make it.
Why it is asked: it shows how you work when the problem is open. Read the full explanation: machine coding rounds: the complete guide.
Follow-up questions
What are the frontend interview questions for freshers?
Entry-level rounds usually concentrate on fundamentals: the CSS and JavaScript topics above, and building a small piece of interface from a clear brief. A least recently used (LRU) cache is also a common JavaScript build question, for example a memoised fetch, so an LRU cache in Python is a worked routine for writing a small, tested data structure under time pressure, which you then repeat in JavaScript.
What frontend interview questions are asked for experienced developers?
Expect the same topics with more demand for trade-offs and ownership: why a design holds up, what breaks at scale, and how you would test and measure it. Practise stepwise problem solving with event and log processing problems, where each stage adds a requirement to working code.
Does each company ask its own frontend interview questions?
Public lists of company questions on forums and video channels are reported by candidates and vary by team and year, so treat them as practice, not as a prediction. Prepare the topics above, and for timed online assessments see the CodeSignal in-memory database assessment, level by level.
Do frontend interviews ask about React?
Framework questions depend on the role, so check the job description. For React, interviewers typically probe state and props, when a component re-renders, and the rules of hooks: call hooks only at the top level of a component or custom hook, not in loops or conditions (react.dev, Rules of Hooks). Expect a question on keys in lists and on how React keeps state tied to a component's position in the tree (react.dev, Preserving and Resetting State). The topics above, closures, scope and the event loop, sit underneath any framework. Rendered output is a tree, and a common build question walks a nested tree, the same recursion as nested list weight sum.
- Specificity is calculated from IDs, then classes, then types, compared left to right.
- A closure is a function plus its lexical environment, created whenever a function is created.
- Blocks are scopes only for
letandconst. - JavaScript runs one statement at a time; asynchronous completion arrives as queued callbacks.
- Synchronous code runs first, then microtasks, then tasks such as timer callbacks.
Sources
- Closures (MDN Web Docs) — MDN Web Docs (Mozilla), 26 Oct 2026
- JavaScript execution model (MDN Web Docs) — MDN Web Docs (Mozilla), 26 Oct 2026
- Using microtasks in JavaScript with queueMicrotask() (MDN Web Docs) — MDN Web Docs (Mozilla), 26 Oct 2026
- Specificity (MDN Web Docs) — MDN Web Docs (Mozilla), 26 Oct 2026
- Using Web Workers (MDN Web Docs) — MDN Web Docs (Mozilla), 26 Oct 2026
- Event bubbling (MDN Web Docs) — MDN Web Docs (Mozilla), 26 Oct 2026
- this (MDN Web Docs) — MDN Web Docs (Mozilla), 26 Oct 2026
- Critical rendering path (MDN Web Docs) — MDN Web Docs (Mozilla), 26 Oct 2026
- Cross-site scripting (MDN Web Docs glossary) — MDN Web Docs (Mozilla), 26 Oct 2026
- Semantics (MDN Web Docs glossary) — MDN Web Docs (Mozilla), 26 Oct 2026
- Rules of Hooks (react.dev) — React documentation (Meta), 26 Oct 2026
- Preserving and Resetting State (react.dev) — React documentation (Meta), 26 Oct 2026
