Frontend Developer Interview Questions 2026: HTML, CSS, Performance

⏱️5 min read · 1,015 words

Frontend developer interview questions in 2026 cover HTML semantics, CSS layout, JavaScript performance, React patterns, accessibility, and web performance optimization. This guide covers the most commonly asked questions for frontend and UI developer roles.

HTML/CSS Questions

1. What is the difference between inline, block, and inline-block elements?

<!-- Block elements: take full width, start on new line -->
<!-- Examples: div, p, h1-h6, ul, ol, li, section, article -->
<p>This paragraph takes full width</p>

<!-- Inline elements: only take needed width, don't break flow -->
<!-- Examples: span, a, strong, em, img, button -->
<p>Click <a href="#">this link</a> here</p>

<!-- Inline-block: inline positioning but block-like box model -->
<span style="display:inline-block; width:100px; height:40px">
  Has dimensions like a block but flows inline
</span>

2. Explain CSS specificity and the cascade

/* Specificity (higher wins): */
/* [inline styles], [IDs], [classes/attrs/pseudo-classes], [elements/pseudo-elements] */

/* 0,0,0,1 — element selector */
p { color: black; }

/* 0,0,1,0 — class selector */
.paragraph { color: blue; }

/* 0,0,1,1 — class + element */
p.paragraph { color: green; }

/* 0,1,0,0 — ID selector */
#main { color: red; }

/* 1,0,0,0 — inline style */
/* <p style="color: purple"> */

/* !important overrides everything (avoid!) */
p { color: orange !important; }

/* Same specificity: LAST declaration wins (cascade) */
.btn { color: blue; }
.btn { color: red; }  /* red wins — defined later */

3. How does box-sizing affect layout?

/* content-box (default): width = content only */
/* Total width = width + padding + border */
.element {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 2px solid;
  /* Actual width: 244px (200 + 40 + 4) */
}

/* border-box: width INCLUDES padding and border */
.element {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid;
  /* Actual width: 200px (as specified) */
}

/* Best practice: apply globally */
*, *::before, *::after {
  box-sizing: border-box;  /* almost every project should do this */
}

JavaScript Performance Questions

4. What causes layout thrashing and how do you avoid it?

// Layout thrashing: alternating reads and writes to the DOM
// Each read after a write forces browser to recalculate layout

// BAD: reads and writes interleaved
for (const element of elements) {
  const height = element.offsetHeight;  // READ — forces layout
  element.style.height = height * 2 + 'px';  // WRITE
  // Next iteration reads cause recalculation! 60x per 60fps frame = jank
}

// GOOD: batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight);  // all reads
elements.forEach((el, i) => {
  el.style.height = heights[i] * 2 + 'px';  // all writes
});

// Even better: avoid layout properties in animation
// Use transform instead of top/left/width/height
element.style.transform = 'translateX(100px)';  // compositor only, no layout

// requestAnimationFrame for animations
function animate() {
  // All reads and writes here are batched by browser
  requestAnimationFrame(animate);
}

5. Explain critical rendering path optimization

<!-- Block rendering: CSS in <head> (sync), render-blocking JS -->
<head>
  <!-- CSS blocks rendering — must be in head, must be small/inlined for critical CSS -->
  <link rel="stylesheet" href="critical.css" />
  <!-- Non-critical CSS: load async -->
  <link rel="preload" href="non-critical.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
</head>

<!-- Defer/async JS to not block HTML parsing -->
<script defer src="app.js"></script>    <!-- executes after HTML parsed -->
<script async src="analytics.js"></script>  <!-- executes ASAP, non-blocking -->

<!-- Preload important resources -->
<link rel="preload" href="hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://api.example.com">

<!-- Priority hints for images -->
<img src="hero.jpg" fetchpriority="high" loading="eager" />  <!-- LCP image -->
<img src="below-fold.jpg" loading="lazy" />                   <!-- others -->

6. What is the difference between localStorage, sessionStorage, and cookies?

Feature	localStorage	sessionStorage	Cookies
Persistence	Until manually cleared	Until tab closes	Until expires/cleared
Storage size	5-10 MB	5 MB	4 KB
Sent to server	No	No	Yes, with every request
Access	Client-side JS only	Client-side JS only	Client + server
Use for	Theme, preferences	Temp session data	Auth tokens (HttpOnly!)

7. What are Core Web Vitals and how do you optimize them?

LCP (Largest Contentful Paint) <2.5s: Optimize hero image (preload, WebP, proper sizing)
INP (Interaction to Next Paint) <200ms: Minimize JS on main thread, use scheduler API
CLS (Cumulative Layout Shift) <0.1: Set explicit width/height on images, avoid dynamic content injection above fold

<!-- LCP optimization: preload hero image -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="Hero">

<!-- CLS fix: always set image dimensions -->
<img src="photo.jpg" width="400" height="300" alt="Photo">
<!-- Or use aspect-ratio CSS -->
.image-container {
  aspect-ratio: 4 / 3;
}

8. What is code splitting and why does it matter?

// Without code splitting: one huge bundle = slow initial load

// With dynamic imports (Webpack/Vite auto-split):
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />  // only loaded when rendered!
    </Suspense>
  );
}

// Route-based splitting in Next.js (automatic)
// Each page is automatically split into its own chunk
// Only the current page's code loads

Frontend interviews test breadth (HTML, CSS, JS, performance, accessibility) and React depth. Know CSS specificity and layout properties cold, explain the event loop clearly, demonstrate performance optimization knowledge (CRP, Core Web Vitals, code splitting), and show accessibility awareness. Build real projects that demonstrate these skills — theoretical knowledge alone won’t get you the job.