Fundamentals · Frontend Interview Prep

The bedrock. If any of these are shaky, everything above them wobbles in an interview. Master these first.

The platform

Topic	Difficulty	Time	Tags	Best Resources
How the web works (request → render)	🟢	30m	`#networking` `#basics`	MDN: how the web works ⭐
Semantic HTML	🟢	30m	`#html` `#a11y` `#seo`	web.dev: HTML ⭐
The DOM	🟢	45m	`#dom` `#basics`	javascript.info: DOM ⭐
DOM manipulation & traversal	🟢	45m	`#dom`	javascript.info ⭐
Event handling, bubbling & delegation	🟡	1h	`#dom` `#events`	javascript.info: bubbling ⭐
Virtual DOM	🟡	45m	`#dom` `#react`	React: rendering ⭐
Shadow DOM & Web Components	🟡	1h	`#dom` `#components`	MDN: web components ⭐
Forms & validation	🟡	45m	`#forms`	MDN: forms ⭐

Rendering & delivery

Topic	Difficulty	Time	Tags	Best Resources
Rendering strategies (CSR/SSR/SSG/ISR)	🟡	1h	`#rendering` `#seo`	web.dev: rendering on the web ⭐
Critical Rendering Path	🟡	1h	`#rendering` `#performance`	web.dev: CRP ⭐
Event Loop	🟡	1h	`#async` `#internals`	javascript.info: event loop ⭐
SEO fundamentals	🟡	1h	`#seo`	Google Search Central ⭐
Progressive Web Apps (PWA)	🟡	1h	`#pwa` `#offline`	web.dev: PWA ⭐
Progressive enhancement	🟡	30m	`#basics` `#a11y`	MDN ⭐
Responsive design	🟢	1h	`#css` `#responsive`	web.dev: responsive ⭐

Networking & storage

Topic	Difficulty	Time	Tags	Best Resources
HTTP fundamentals	🟢	45m	`#networking` `#http`	MDN: HTTP overview ⭐
HTTPS & TLS	🟡	45m	`#networking` `#security`	Cloudflare: HTTPS ⭐
REST & JSON APIs	🟢	45m	`#api`	MDN: REST ⭐
Fetch & AJAX	🟢	45m	`#fetch` `#api`	MDN: Fetch ⭐
CORS	🟡	45m	`#networking` `#security`	MDN: CORS ⭐
Caching (HTTP + browser)	🟡	1h	`#networking` `#performance`	MDN: HTTP caching ⭐
Browser storage (cookies/localStorage/IndexedDB)	🟡	1h	`#storage` `#offline`	web.dev: storage ⭐
Cookies (attributes, SameSite)	🟡	45m	`#storage` `#security`	MDN: cookies ⭐
Web APIs (Intersection/Resize/Mutation Observer)	🟡	1h	`#web-api`	MDN: Web APIs ⭐
Geolocation, Notifications, Clipboard APIs	🟢	45m	`#web-api`	MDN: Web APIs ⭐

Cross-cutting

Topic	Difficulty	Time	Tags	Best Resources
Accessibility basics	🟡	1h	`#a11y`	web.dev: accessibility ⭐
Performance basics (Core Web Vitals)	🟡	1h	`#performance`	web.dev: vitals ⭐
Security basics (XSS/CSRF overview)	🟡	1h	`#security`	OWASP top 10 ⭐
Internationalization (i18n) basics	🟡	45m	`#i18n`	MDN: Intl ⭐
Character encoding (UTF-8/Unicode)	🟢	30m	`#basics`	MDN: Unicode ⭐

🧩 Key Web APIs (must-know)

The browser APIs that power real features — and that interviewers expect you to reach for. Intersection Observer alone powers infinite scroll, lazy loading, scroll-spy, and viewport analytics.

API	Difficulty	Time	Tags	Best Resource
Intersection Observer (infinite scroll, lazy load)	🟡	45m	`#infinite-scroll` `#lazy` `#performance`	MDN ⭐ · News Feed flagship
Resize Observer	🟡	30m	`#layout` `#responsive`	MDN ⭐
Mutation Observer	🟡	30m	`#dom`	MDN ⭐
Performance Observer	🟡	30m	`#performance` `#metrics`	MDN ⭐
`requestAnimationFrame`	🟡	30m	`#animation`	MDN ⭐
`requestIdleCallback`	🟡	30m	`#scheduling` `#performance`	MDN ⭐
History API (SPA routing)	🟡	45m	`#routing` `#spa`	MDN ⭐
Page Visibility API	🟢	20m	`#performance` `#ux`	MDN ⭐
Clipboard API	🟢	20m	`#ux`	MDN ⭐
Web Share API	🟢	20m	`#ux` `#mobile`	MDN ⭐
File & Blob API (uploads)	🟡	45m	`#upload` `#files`	MDN ⭐
Drag & Drop API	🟡	45m	`#dnd`	MDN ⭐
Broadcast Channel (cross-tab sync)	🟡	30m	`#sync` `#tabs`	MDN ⭐
Notifications API	🟢	30m	`#pwa`	MDN ⭐
Geolocation API	🟢	20m	`#location`	MDN ⭐
Fullscreen API	🟢	20m	`#media`	MDN ⭐
Web Storage (local / session)	🟢	30m	`#storage`	MDN ⭐
IndexedDB (offline data)	🔴	1h	`#storage` `#offline`	MDN ⭐
Service Worker & Cache API	🔴	1.5h	`#pwa` `#offline`	MDN ⭐
Web Workers	🟡	1h	`#performance` `#threads`	MDN ⭐
WebSocket	🔴	1h	`#realtime`	MDN ⭐
Fetch & Streams	🟡	45m	`#networking`	MDN ⭐
Canvas API	🔴	1h	`#graphics`	MDN ⭐
Web Audio API	🔴	1h	`#media`	MDN ⭐
WebRTC	🔴	1h	`#realtime` `#video`	MDN ⭐
Navigation / scroll restoration	🟡	30m	`#routing` `#ux`	MDN ⭐

❓ Rapid-fire HTML & web fundamentals interview questions

Real HTML / web-fundamentals interview questions. Answer out loud, then verify above.

What is semantic HTML and why does it matter for SEO and a11y?
What happens when you type a URL and press Enter (end to end)?
What is the DOM? How does it differ from HTML?
Event bubbling vs capturing — explain event propagation.
What is event delegation?
localStorage vs sessionStorage vs cookies vs IndexedDB?
What are cookie attributes (HttpOnly, Secure, SameSite)?
What is CORS and how do you fix a CORS error?
CSR vs SSR vs SSG vs ISR — trade-offs for SEO and performance?
What is the critical rendering path?
How does HTTP caching work (Cache-Control, ETag)?
What is the difference between <script>, <script async>, and <script defer>?
What are Web Components and the Shadow DOM?
What is a PWA and what makes an app installable?
How do you make a site responsive? Mobile-first vs desktop-first?
What is progressive enhancement vs graceful degradation?
What is the difference between GET and POST?
What are data-* attributes?
What is the difference between id and class?
How does lazy loading of images/iframes work?

Related: 02-browser · 09-performance · 12-networking

Missing something? Add a row.

The platform #

Rendering & delivery #

Networking & storage #

Cross-cutting #

🧩 Key Web APIs (must-know) #

❓ Rapid-fire HTML & web fundamentals interview questions #