Introduction

I keep a running list of every question I've been asked in a front-end interview at work and on contract calls. The list below is most of it. No multiple choice. No tidy options to pick from. Someone says a word like "closure" or "specificity" and waits for you to talk.

For example: "How does the event loop work in JavaScript?" or "What's the difference between relative and absolute positioning in CSS?"

Most interviewers I've sat across from will toss you a hint if you stall. The focus stays on whether you can explain the concept out loud. That is the muscle we are building here.

HTML questions

1. What is the difference between semantic and non-semantic HTML elements?
2. Why is the <meta charset="UTF-8"> tag important in HTML?
3. Explain the use of the <picture> tag and how it relates to responsive images.
4. What is the purpose of the <label> element, and how does it help with accessibility?
5. How do the hidden attribute and aria-hidden differ?
   (I got asked this in a screening call and froze. The answer they wanted: hidden removes it from layout, aria-hidden keeps it visual but hides it from screen readers.)
6. What is the difference between <section>, <div>, and <article>?
7. When should you use <header> and <footer> elements?
8. Explain the difference between an <iframe> and embedding content with fetch + rendering in JavaScript.
9. How do you preload fonts or critical assets in HTML?
10. What is lazy loading of images in HTML, and how is it supported in modern browsers?

CSS questions

1. How is CSS specificity calculated? (IDs, classes, elements, inline)
2. What's the difference between display: none and visibility: hidden?
3. How do rem and em units differ, and when should each be used?
4. Explain the CSS Box Model and how padding, border, and margin influence layout.
5. What is the difference between position: absolute, fixed, relative, and sticky?
6. What is a CSS custom property (variable), and how can it be used with fallback values?
7. Describe how flex and grid layouts differ and when you might choose one over the other.
8. What is the difference between transition and animation in CSS?
9. How does z-index stacking context work?
   (This one comes up a lot. The trap is forgetting that transform, opacity, and filter create new stacking contexts too, not just position plus z-index.)
10. What are CSS pseudo-classes and pseudo-elements? Give examples (e.g. :hover, ::after).

JavaScript questions

1. Explain a closure and provide a simple example.
   (I've been asked this in almost every JS interview I've taken. Have a 30-second answer ready, with a counter example, not a textbook definition.)
2. How does the this keyword behave in JavaScript? Name a few contexts.
3. What are the differences between == and ===?
4. What is hoisting (for variables and functions)?
5. How do Promises, async/await, and .then() chaining interrelate?
6. Explain event delegation and when you’d use it.
7. What is prototypal inheritance and how does it differ from classical inheritance?
8. What are the primitive types in JavaScript, and how do null, undefined, and undeclared differ?
9. What is the event loop in JavaScript and how do microtasks/macrotasks factor in?
10. How does error handling work with try/catch, Promises, and async/await?

React questions

1. What is the Virtual DOM and why does React use it?
2. What are props and state? How do they differ?
3. What are React hooks? Name some common ones (e.g. useState, useEffect).
4. Explain how useEffect works and what the dependency array does.
   (The follow-up I always get: "what happens if you leave the array out entirely?" Know that one cold.)
5. What is a controlled component vs an uncontrolled component in forms?
6. What is the purpose of the key prop when rendering lists?
7. What is memoization in React (React.memo, useMemo, useCallback)?
8. How would you handle side-effects or cleanup in functional components?
9. What is "lifting state up" and when would you do it?
10. How do you optimize performance in a React app (e.g., memoization, lazy loading, splitting bundles)?

System design questions

1. How would you design a scalable chat application?
   Consider message delivery, real-time updates (WebSockets or WebRTC), message persistence, typing indicators, and handling offline/online states. Think about scalability for thousands of users, and how to keep the UI responsive under heavy load.

2. What are the key considerations for building a responsive design?
   Beyond media queries, discuss flexible layouts, fluid typography, responsive images, mobile-first design, and collaboration with designers. Highlight trade-offs between pixel-perfect design and technical feasibility.

3. How would you implement a real-time collaboration feature?
   Think of Google Docs style editing. Talk about syncing changes, conflict resolution, Operational Transformation (OT) or CRDTs, WebSocket communication, and showing user presence in the UI.

4. What are the best practices for performance optimization in web applications?
   Cover initial load time, code-splitting, image optimization, caching, lazy loading, memoization, virtualization, and avoiding unnecessary re-renders in frameworks like React. Also mention how to measure performance (Lighthouse, Web Vitals).

5. How would you design a scalable image processing system?
   This involves uploading, storing, resizing, and serving images efficiently. Think about using CDNs, responsive image formats (WebP/AVIF), background processing, caching, and handling multiple devices with different resolutions.

6. How would you architect a design system to ensure consistency across multiple applications?
   Talk about component libraries, design tokens, theming, versioning, documentation, and governance. Explain how you'd balance flexibility for teams with strict consistency across products.

7. What strategies would you use to ensure accessibility (a11y) is built into a design system from the start?
   Cover semantic HTML, ARIA attributes, keyboard navigation, color contrast, screen reader support, and accessibility testing. Show that accessibility is not an afterthought but a baked-in principle.

8. How would you handle internationalization (i18n) and localization (l10n) in a large-scale front-end application?
   Consider dynamic language packs, date/time/number formatting, RTL (right-to-left) support, translations, fallback strategies, and performance when loading different locales.

9. How would you design a component library that balances flexibility with consistency?
   Discuss API design for components, composition vs configuration, prop-driven customization, theme support, and guardrails to prevent misuse. Show how to empower developers while avoiding "too much freedom."

10. What considerations would you keep in mind when integrating authentication and authorization into a front-end system?
    Mention secure token handling (JWT, cookies), protecting routes, role-based UI rendering, handling refresh tokens, login/logout UX, and protecting against vulnerabilities like XSS or CSRF.

How to use these questions

This is how I prep students before mock interviews. Don't memorize. Use the list as a diagnostic.

• If you can answer quickly and clearly, move on.
• If you struggle, mark the topic and come back to it after a real study session.
• Mix them into your daily prep so you stay sharp.

Next lesson, we'll walk through the live coding round, which is where most candidates I've watched actually lose the offer. See you there.