Topics/Web Development

Web Development

186 articles

Frontend Architecture, Modern APIs & Full-Stack Systems

Modern Web Development encompasses scalable frontend applications, efficient API protocol design, browser rendering engines, and resilient backend services.

Level: Foundational to Advanced
7 Core Subtopics

Track Curriculum

Subtopics & Modules

7 Modules Available
Module 01
3 Q&A
Beginner

Modern HTML5 & CSS Layouts

Flexbox, CSS Grid, custom properties, responsive container queries, and DOM semantics.

16 min readStart Guide
Module 02
3 Q&A
Intermediate

JavaScript Core & ES6+

Event loop, closures, prototypes, promises, async/await, and V8 engine execution.

24 min readStart Guide
Module 03
3 Q&A
Intermediate

React 19 & Next.js Architecture

Server Components, Fiber reconciler, Hooks, state management, and SSR/SSG rendering models.

28 min readStart Guide
Module 04
3 Q&A
Intermediate

Node.js & Server APIs

Event Emitter, streams, non-blocking I/O, Express middleware, and cluster threading.

22 min readStart Guide
Module 05
3 Q&A
Intermediate

RESTful & GraphQL API Design

HTTP verbs, status codes, OpenAPI schemas, GraphQL queries, mutations, and N+1 problem.

25 min readStart Guide
Module 06
3 Q&A
Advanced

Web Security & Authentication

JWT, Session cookies, OAuth 2.0 / OIDC, CORS, XSS, CSRF, and Content Security Policy.

26 min readStart Guide
Module 07
3 Q&A
Advanced

Web Performance & Optimization

Core Web Vitals (LCP, INP, CLS), code splitting, asset caching, lazy loading, and CDN routing.

24 min readStart Guide
Track Question Bank
21 Questions Across Modules

Interview Questions by Module Topic

Select a module to view its related questions, or explore all modules organized by seniority level

Filter by Module Topic:
01
Module Topic•3 Questions under this topic

Modern HTML5 & CSS Layouts

Full Guide & Mechanics

What is the CSS Box Model, and how does box-sizing: border-box solve layout calculation issues?

In-Depth Technical Answer

The CSS Box Model is the structural foundation of web layouts, composed of four concentric layers: Content (text/images), Padding (clear space around content), Border (frame enclosing padding), and Margin (external spacing separating elements). Under the default `box-sizing: content-box`, when you declare `width: 300px` with `padding: 20px` and `border: 2px solid`, the rendered width expands to 344px (300 + 40 + 4). This unexpected expansion frequently breaks grid columns and causes unwanted horizontal scrollbars. Setting `box-sizing: border-box` forces the browser to absorb padding and borders inside the declared width, so a 300px element stays exactly 300px wide.

Practical Code Examplebox_model_reset.css
Css
/* Standard modern CSS reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Example: Both boxes have identical 300px rendered widths */
.content-box-element {
  box-sizing: content-box;
  width: 256px; /* 256 + 40 + 4 = 300px */
  padding: 20px;
  border: 2px solid #3b82f6;
}

.border-box-element {
  box-sizing: border-box;
  width: 300px; /* stays exactly 300px */
  padding: 20px;
  border: 2px solid #10b981;
}

🔍 Code Mechanics (Css): With border-box, the content area automatically contracts to accommodate the 20px padding and 2px border, guaranteeing predictable layout math across responsive grids.

Senior Architectural TakeawayAlways apply `box-sizing: border-box` across all elements in your global reset to eliminate layout calculation bugs.
Explore full Modern HTML5 & CSS Layouts guide & diagrams

When should you choose CSS Grid over Flexbox, and how do Container Queries improve component modularity over Media Queries?

How does the Critical Rendering Path (Layout, Paint, Composite) execute, and how do you eliminate Layout Thrashing for 60fps animations?

02
Module Topic•3 Questions under this topic

JavaScript Core & ES6+

Full Guide & Mechanics

What is the difference between == and ===, and what is variable hoisting with the Temporal Dead Zone (TDZ)?

How does the JavaScript Event Loop prioritize Microtasks versus Macrotasks, and why can recursive Promises freeze the UI?

How do JavaScript Closures cause memory leaks in Single-Page Applications, and how do WeakMap and V8 Garbage Collection avoid them?

03
Module Topic•3 Questions under this topic

React 19 & Next.js Architecture

Full Guide & Mechanics

Why must state updates in React be immutable, and how do updater functions setState(prev => ...) solve race conditions?

How does the React Fiber Reconciler schedule work, and how does useTransition keep high-frequency inputs responsive?

How do React Server Components (RSC) fundamentally differ from SSR, and what does the streaming Flight wire format achieve?

04
Module Topic•3 Questions under this topic

Node.js & Server APIs

Full Guide & Mechanics

How does the Express middleware pipeline work, and how does error-handling middleware intercept unhandled exceptions?

Why should you use Node.js Streams instead of fs.readFile for file processing, and what is Backpressure?

How does libuv's Thread Pool interact with Node's single-threaded event loop, and how do you handle CPU-intensive tasks at enterprise scale?

05
Module Topic•3 Questions under this topic

RESTful & GraphQL API Design

Full Guide & Mechanics

What is the difference between PUT and PATCH in REST API design, and what makes an HTTP method idempotent?

What is the GraphQL N+1 Query Problem, and how does DataLoader solve it via batching and caching?

How do you implement distributed Idempotency Keys and Sliding-Window Rate Limiting in mission-critical APIs?

06
Module Topic•3 Questions under this topic

Web Security & Authentication

Full Guide & Mechanics

What is Cross-Site Scripting (XSS), and why are HttpOnly and SameSite cookies safer than localStorage for JWT storage?

How does Cross-Site Request Forgery (CSRF) work, and how do modern APIs defend against it using custom headers and Anti-CSRF tokens?

How does OAuth 2.0 Authorization Code Flow with PKCE secure Single-Page Applications against authorization code interception?

07
Module Topic•3 Questions under this topic

Web Performance & Optimization

Full Guide & Mechanics

What are Google's Core Web Vitals (LCP, INP, CLS), and how do explicit image dimensions eliminate Cumulative Layout Shift (CLS)?

How does Code Splitting with dynamic import() reduce initial bundle size, and how do you optimize chunk delivery with preload vs prefetch?

How do you architect an enterprise CDN Edge Caching strategy using Cache-Control, stale-while-revalidate, ETags, and Surrogate Keys?