150+ Technical Web Development Interview Questions
Welcome to the Web Design Mastery production interview preparation guide. This bank contains over 150 rigorous technical questions categorized across HTML, CSS, JavaScript, and Web Fundamentals, spanning Junior, Mid-Level, and Senior Frontend Architect interviews.
Category Distribution
| Track | Questions | Target Competency |
|---|---|---|
| HTML & Semantics | 25 Questions | HTML5 DOCTYPE, landmarks, forms, accessibility (ARIA), SEO, metadata |
| CSS Layouts & Internals | 40 Questions | Cascade, specificity, Flexbox, CSS Grid, stacking contexts, animations, BEM |
| JavaScript & Runtime | 60 Questions | Closures, execution context, this, Event Loop, Promises, Fetch, prototypes |
| Web Architecture & Fundamentals | 25 Questions | Critical Rendering Path, HTTP/2 & HTTP/3, CORS, caching, web security (XSS/CSRF) |
Interactive Interview Question Bank
Q1BeginnerHTML
▲What is the purpose of the <!DOCTYPE html> declaration?
Production Technical Answer:
The
Typical Interviewer Follow-Up: What specific CSS calculations behave differently in Quirks Mode?
Q2IntermediateHTML
▼Explain the difference between <article> and <section>.
Q3AdvancedHTML
▼What is the Golden Rule of WAI-ARIA?
Q4IntermediateCSS
▼How is CSS specificity calculated?
Q5AdvancedCSS
▼What establishes a new Stacking Context in CSS?
Q6IntermediateCSS
▼What is the difference between auto-fit and auto-fill in CSS Grid?
Q7IntermediateJavaScript
▼What is a Closure, and how does it retain memory of outer variables?
Q8AdvancedJavaScript
▼Explain the exact priority order of the JavaScript Event Loop.
Q9IntermediateJavaScript
▼How do call(), apply(), and bind() differ?
Q10IntermediateWeb Fundamentals
▼What is the Critical Rendering Path (CRP)?
Q11AdvancedWeb Fundamentals
▼Explain the mechanism of Cross-Origin Resource Sharing (CORS).
Q12AdvancedWeb Fundamentals
▼Why should sensitive JWT tokens not be stored in localStorage?
Detailed Section Breakdown
Track 1: HTML & Semantics (25 Questions)
- What are the differences between
inline,block, andinline-blockelements? - When should an image have
alt=""versus omitting thealtattribute? - How does the browser calculate layout dimensions when provided with
srcsetandsizes? - What is the semantic difference between
<strong>,<b>,<em>, and<i>? - How does
<dialog>handle focus trapping and keyboard accessibility? - Explain the function of
<link rel="canonical">. - What are Open Graph meta tags and why are they necessary?
- How does the HTML5 Constraint Validation API work natively?
- What is the difference between
<meter>and<progress>? - Why should form inputs always be bound to explicit
<label>tags? (And 15 additional scenario-based questions)
Track 2: CSS Layouts, Cascading & Architecture (40 Questions)
- Explain how the CSS Cascade algorithm decides between competing styles.
- What are CSS Cascade Layers (
@layer) and what architectural problem do they solve? - What is the difference between
flex-basis: autoandflex-basis: 0? - How do you create an auto-wrapping responsive grid without media queries?
- What properties trigger browser Layout (Reflow) versus Paint versus Compositing?
- Explain the CSS BEM (Block-Element-Modifier) naming convention.
- How does
:has()allow parent selection in modern CSS? - What is the difference between
:is()and:where()regarding specificity? - How does
clamp()enable fluid typography across viewports? - What is the purpose of
@media (prefers-reduced-motion: reduce)? (And 30 additional layout and debugging questions)
Track 3: JavaScript & Concurrency (60 Questions)
- What is the difference between
var,let, andconst? - Explain the Temporal Dead Zone (TDZ).
- How does the JavaScript Garbage Collector detect and reclaim memory?
- What is the difference between
Promise.all()andPromise.allSettled()? - How does Event Delegation leverage Event Bubbling?
- What is the difference between Debouncing and Throttling?
- Explain lexical
thisin arrow functions versus standard functions. - How does
async/awaitsyntactic sugar map to underlying Promises and Generators? - What happens if an unhandled Promise rejection occurs in production?
- What is prototypal inheritance and how does the Prototype Chain work? (And 50 additional coding and architectural questions)
Track 4: Web Fundamentals, Security & Performance (25 Questions)
- Describe the steps of a complete TCP 3-way handshake and TLS negotiation.
- What are the differences between HTTP/1.1, HTTP/2, and HTTP/3 (QUIC)?
- Explain the difference between Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF).
- What is Content Security Policy (CSP) and how does it mitigate XSS?
- How does browser caching work with
Cache-Control,ETag, andLast-Modified? (And 20 additional infrastructure and networking questions)