Top 50 Web Development Interview Questions with Answers (2026): Fresher to Full-Stack Expert

The browser performs a DNS lookup to resolve the domain to an IP address. It establishes a TCP connection (with a TLS handshake for HTTPS), sends an HTTP Request, receives an HTTP Response, and then parses the HTML to build the DOM, CSSOM, and finally renders the page.

💡 Why Interviewers Ask This: The ultimate baseline question — tests high-level understanding of networking, DNS, and client-server architecture.

Semantic HTML uses tags that convey the actual meaning of content (e.g., <article>, <header>, <nav>, <footer>) rather than generic presentational elements (e.g., <div>, <span>). It is crucial for SEO, Screen Reader Accessibility (a11y), and code maintainability.

💡 Why Interviewers Ask This: Proves you care about web standards, accessibility, and machine-readable content — not just visual appearance.

Every HTML element is a rectangular box with four layers: Content (text/image), Padding (inner spacing), Border (the edge line), and Margin (outer spacing from other elements). The box-sizing: border-box property includes padding and border within the stated width.

💡 Why Interviewers Ask This: The foundational concept of CSS layouts — you cannot debug alignment issues without mastering the box model.

Flexbox is a one-dimensional layout system — it aligns items in a single row or column. CSS Grid is a two-dimensional system — it handles rows and columns simultaneously for complex layouts. Use Flexbox for component-level alignment; use Grid for full page or section layouts.

💡 Why Interviewers Ask This: Tests modern CSS layout skills — interviewers want to know you use the right tool for the right job instead of relying on legacy float hacks.

Specificity is the algorithm browsers use to resolve CSS rule conflicts on the same element. It calculates a weight based on selector type: Inline styles (highest) > IDs > Classes/Attributes/Pseudo-classes > Elements (lowest). The !important declaration overrides all — it is an anti-pattern.

💡 Why Interviewers Ask This: Candidates who don't understand specificity resort to !important chains — a major code quality red flag.

RWD ensures web pages render well across all device sizes using three pillars: Fluid Grids (percentage-based widths), Flexible Images (max-width: 100%), and CSS Media Queries (@media (max-width: 768px)). The mobile-first approach writes base styles for mobile and progressively enhances for larger screens.

💡 Why Interviewers Ask This: Mobile traffic dominates the web — interviewers need to verify you build mobile-first layouts, not rigid desktop-only sites.

An id is unique — it can only be used once per HTML page (for anchor links or JS targeting). A class is reusable — it can be applied to multiple elements to apply shared styles. Using duplicate IDs breaks HTML validation and causes unpredictable JavaScript targeting.

💡 Why Interviewers Ask This: A fundamental syntax check — duplicate ID usage is an immediate HTML validation failure.

display: none removes the element from the document flow entirely — other elements fill its space, as if it doesn't exist. visibility: hidden makes the element invisible but it still occupies space in the layout — a “ghost element”.

💡 Why Interviewers Ask This: Tests understanding of how the browser constructs its render tree and how layout reflows work.

Pseudo-classes (single colon) target special element states: :hover, :focus, :nth-child(), :checked. Pseudo-elements (double colon) style specific parts of an element: ::before, ::after, ::placeholder.

💡 Why Interviewers Ask This: Tests ability to add interactivity and dynamic styling using pure CSS, without JavaScript.

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes (role, aria-label, aria-hidden, aria-expanded) added to elements to make dynamic content and advanced UI controls accessible to screen readers and assistive technologies.

💡 Why Interviewers Ask This: Accessibility is a legal requirement in many jurisdictions — it shows you build inclusive applications for all users.

var is function-scoped, hoisted, and initialized as undefined. let and const are block-scoped, hoisted but uninitialized — accessing them before declaration throws a ReferenceError (the Temporal Dead Zone, TDZ). const additionally cannot be reassigned.

💡 Why Interviewers Ask This: The ultimate JS fundamentals test — proves you understand scoping rules, memory phases, and hoisting behaviour.

A closure is a function that retains access to variables from its lexical (parent) scope even after the parent function has finished executing. The inner function “closes over” the outer variables. Used heavily in data privacy, factory functions, and event handlers.

💡 Why Interviewers Ask This: The most commonly asked JS concept. Closures underpin module patterns, React hooks, and virtually every callback-based API.

Event Bubbling: when an event fires on a child element, it bubbles up through its ancestor chain. Event Delegation exploits this by attaching one listener to a parent element to handle events from all its children (including dynamically added ones) — far more efficient than attaching listeners to each child.

💡 Why Interviewers Ask This: Tests ability to write performant DOM manipulations — one listener on <ul> beats 1,000 listeners on <li> elements.

A Promise represents the eventual completion/failure of an async operation, chained with .then() and .catch(). async/await is syntactic sugar over Promises, allowing asynchronous code to be written in a synchronous, top-down format — dramatically improving readability and error handling with try/catch.

💡 Why Interviewers Ask This: Tests ability to write clean, modern asynchronous code and handle API responses without callback hell.

this is dynamically scoped based on call site, not declaration site. In a method: refers to the owner object. In a regular function: refers to the global object (window / undefined in strict mode). Arrow functions lexically inherit this from their enclosing scope.

💡 Why Interviewers Ask This: this causes notorious bugs. Understanding call site context versus lexical context is critical for debugging React class components and event handlers.

A Shallow Copy duplicates top-level properties, but nested objects still share references to the original — mutating them affects the original. A Deep Copy creates a completely independent clone of all nested structures. Use structuredClone() (modern) or JSON.parse(JSON.stringify()) (limited).

💡 Why Interviewers Ask This: Indirect state mutation is a major source of bugs in React and Redux. You must know pass-by-value vs. pass-by-reference.

== (loose equality) performs Type Coercion before comparing — 1 == '1' is true. === (strict equality) compares both value and type without coercion — 1 === '1' is false. Best practice: always use === to prevent unpredictable coercion bugs.

💡 Why Interviewers Ask This: A fundamental JS quirk — type coercion is one of the language's most notorious sources of silent, hard-to-debug bugs.

The DOM is the browser's programming interface for an HTML document. It represents the page as a tree of nodes, allowing JavaScript to dynamically access, modify, add, and delete content, structure, and styles (document.querySelector, element.style, innerHTML).

💡 Why Interviewers Ask This: You cannot manipulate a webpage with JavaScript if you don't understand the DOM tree structure and node types.

Debouncing delays function execution until the user stops firing an event for a set duration — ideal for search inputs (wait until typing stops). Throttling limits execution to once per interval regardless of how many times the event fires — ideal for scroll/resize handlers.

💡 Why Interviewers Ask This: Essential UI performance optimization techniques — prevents browser freezing during rapid event firing.

AJAX (Asynchronous JavaScript and XML) is a technique for sending/receiving data from a server asynchronously without reloading the page — now implemented via fetch() or XMLHttpRequest. JSON (JavaScript Object Notation) is the standard lightweight text format used to transmit that data.

💡 Why Interviewers Ask This: Tests understanding of how single-page applications fetch live backend data without full page reloads.

The Virtual DOM is a lightweight, in-memory JavaScript representation of the actual DOM. On state change, React creates a new Virtual DOM tree, diffs it against the previous (Reconciliation / Diffing Algorithm), and computes the minimal set of precise updates to apply to the Real DOM, minimising expensive reflows and repaints.

💡 Why Interviewers Ask This: This is React's core engine. You must understand how frameworks batch DOM manipulations to optimize performance.

useState allows functional components to declare and hold local reactive state. useEffect performs side effects (data fetching, subscriptions, manual DOM changes) — its dependency array controls when it runs: empty [] = mount only, [dep] = when dep changes, no array = every render.

💡 Why Interviewers Ask This: Hooks are the modern React standard. Understanding dependency arrays and stale closures inside useEffect is non-negotiable.

An SPA loads a single HTML page on the initial request. Subsequent content updates are rendered dynamically via JavaScript and AJAX, without full page reloads. Navigation is handled by a client-side router (React Router) that maps URLs to components.

💡 Why Interviewers Ask This: SPAs are the standard for modern web apps. You must understand client-side routing, history API, and the trade-off of slower initial load vs. fast subsequent navigation.

Prop Drilling is passing data through multiple nested component layers that don't need the data — it only serves as a relay. Avoid it using: React Context API (built-in, global state), Redux (enterprise-scale, predictable), or Zustand (lightweight, modern).

💡 Why Interviewers Ask This: Tests ability to structure scalable component architectures and choose appropriate state management tools.

💡 Why Interviewers Ask This: Tests architectural decision-making — different projects need different rendering strategies for SEO and performance trade-offs.

Both are React performance hooks. useMemo caches the returned value of an expensive computation. useCallback caches the function definition itself — preventing unnecessary re-renders of child components that receive the function as a prop (since a new function reference on every render fails referential equality checks).

💡 Why Interviewers Ask This: Tests ability to optimise React render performance and prevent infinite render loops.

One-way Data Flow (React): data passes from parent to child via props; explicit event handlers (onChange) update parent state — making data flow predictable and traceable. Two-way Binding (Angular/Vue v-model): automatically synchronises the UI input and underlying state simultaneously — faster to write, harder to debug.

💡 Why Interviewers Ask This: Highlights understanding of how different frameworks handle state mutation and predictability.

Strict unidirectional flow: UI dispatches an Action (a plain object with type and payload) → Reducer (pure function) evaluates it and returns a completely new State → UI re-renders from the new state. Middleware (Redux Thunk/Saga) handles async side effects between dispatch and reducer.

💡 Why Interviewers Ask This: Redux is a staple in enterprise apps — you must understand strict unidirectional state mutation and pure reducers.

A React Fragment groups multiple children without adding an extra DOM node (like a superfluous <div>). This is important when the parent context has strict child requirements (e.g., table rows, CSS flex/grid children).

💡 Why Interviewers Ask This: A clean DOM knowledge check — confirms you keep the DOM lightweight and understand React's single-root constraint.

Hydration is the process where a framework (Next.js, Nuxt) sends server-rendered, static HTML to the browser for a fast initial paint, and then JavaScript “attaches” event listeners and reactive behavior to that static HTML — making the page fully interactive without discarding the initial render.

💡 Why Interviewers Ask This: Hydration bridges SSR performance and SPA interactivity — critical for understanding Next.js App Router and meta-frameworks.

Node.js is a runtime that executes JavaScript outside the browser using V8. It handles concurrency through an Event-Driven, Non-Blocking I/O model via a single-threaded Event Loop. I/O operations (file reads, DB queries, network) are offloaded to the OS; the Event Loop picks up the callback when complete — efficiently handling thousands of concurrent requests.

💡 Why Interviewers Ask This: Differentiates users of Node.js from those who understand its architecture under the hood — critical for diagnosing CPU-blocking bottlenecks.

REST maps resources to endpoints (/users, /posts) — can lead to over-fetching (too much data) or under-fetching (too many requests). GraphQL exposes a single endpoint and lets the client request exactly the data structure it needs — ideal for complex, nested, or mobile-bandwidth-sensitive data.

💡 Why Interviewers Ask This: Tests API design skills and the ability to evaluate data payload trade-offs in modern network architectures.

💡 Why Interviewers Ask This: The absolute vocabulary of backend APIs. Confusing PUT vs PATCH is an immediate red flag.

CORS is a browser security mechanism restricting web pages from making HTTP requests to a different origin (domain, protocol, or port). The backend must send Access-Control-Allow-Origin headers to explicitly permit cross-origin requests. Preflight OPTIONS requests are sent for non-simple requests.

💡 Why Interviewers Ask This: CORS is the most common frontend-to-backend connection error — you must know how to debug and configure server headers.

Middleware functions have access to req, res, and next in Express's request-response pipeline. They execute sequentially and are used for: logging (Morgan), JSON parsing (express.json()), authentication (JWT verification), and error handling. Calling next() passes control to the next middleware.

💡 Why Interviewers Ask This: Middleware is the entire architectural foundation of Express.js and most server-side frameworks.

User logs in → server generates a cryptographically signed JWT containing user claims. Client stores it (HttpOnly cookie preferred over LocalStorage for security) and sends it in the Authorization: Bearer <token> header for subsequent requests. Server verifies the signature — no database session lookup needed → stateless authentication.

💡 Why Interviewers Ask This: JWT is the industry standard for securing stateless REST APIs and microservices.

A Monolith bundles all logic into a single deployable codebase — simpler to develop and deploy but harder to scale. Microservices split features into independently deployable services communicating via APIs — better for massive scale, independent deployments, and team autonomy, but with higher operational complexity.

💡 Why Interviewers Ask This: Tests architectural trade-off thinking — knowing when a monolith is actually better (early stages) vs. when microservices are justified.

HTTP Long-Polling keeps a request open until data is available, then immediately re-opens — high latency, high overhead. WebSockets establish a persistent, full-duplex, bi-directional connection — the server can push data to the client instantly with minimal overhead. Used for chat apps, live feeds, and collaborative tools.

💡 Why Interviewers Ask This: Tests understanding of real-time communication protocols in modern web applications.

💡 Why Interviewers Ask This: You must choose the right database based on the application's data shape, query patterns, and scaling needs.

OAuth 2.0 is an authorization framework for delegated, third-party access. Flow: user clicks “Login with Google” → redirected to Auth Server → user grants permission → app receives an Authorization Code → app exchanges code for an Access Token → app calls APIs on user's behalf.

💡 Why Interviewers Ask This: SSO is ubiquitous — you must understand delegated authorization flows and the difference between authentication and authorisation.

XSS occurs when attackers inject malicious JavaScript into a legitimate site, which executes in victims' browsers (stealing sessions, redirecting users). Prevent with: escape/sanitise all user input, implement a Content Security Policy (CSP) header, use frameworks (React) that escape JSX text by default, and avoid dangerouslySetInnerHTML.

💡 Why Interviewers Ask This: XSS is the #1 frontend security vulnerability. Demonstrates a security-first engineering mindset.

CSRF tricks an authenticated user's browser into executing an unwanted action on a trusted site by exploiting their active session cookies (e.g., forged form submission). Prevent with: Anti-CSRF Tokens (random, server-validated), setting cookies to SameSite=Strict, and verifying the Origin header.

💡 Why Interviewers Ask This: Tests understanding of how browsers automatically attach cookies to cross-origin requests — a critical backend security concept.

A CDN is a geographically distributed network of edge servers that cache static assets (images, CSS, JS) close to end-users. Benefits: dramatically reduced network latency, reduced origin server load, higher availability, and automatic DDoS mitigation. Examples: Cloudflare, AWS CloudFront, Vercel Edge Network.

💡 Why Interviewers Ask This: CDN implementation is mandatory for scaling any web application globally.

SQL Injection occurs when unsanitised user input is embedded directly in a SQL query and executed by the database — allowing data theft, modification, or deletion. Prevention: use Parameterised Queries (Prepared Statements) or ORMs (Prisma, Sequelize) that handle escaping automatically.

💡 Why Interviewers Ask This: The most infamous database vulnerability. Saying “Prepared Statements” immediately passes this question.

💡 Why Interviewers Ask This: Core Web Vitals directly impact Google SEO rankings — interviewers want developers who optimise for Lighthouse scores.

A Service Worker is a background JavaScript script acting as a network proxy — intercepting requests to enable advanced caching, offline access, and push notifications. A PWA (Progressive Web App) uses Service Workers, a Web App Manifest, and HTTPS to deliver a native app-like experience installable from the browser.

💡 Why Interviewers Ask This: Proves you can build resilient, offline-capable applications for poor network conditions.

A module bundler compiles your application's separate JS modules, SCSS, and assets into a few optimised static files for the browser — performing minification, code splitting, and tree shaking. Vite uses native ES Modules for instant Hot Module Replacement (HMR) in development and a Rollup-based production build.

💡 Why Interviewers Ask This: Understanding the build pipeline, bundling, and modern tooling is a senior-level trait.

Tree Shaking is a bundle-step optimisation that uses static analysis of ES6 import/export statements to detect and eliminate dead, unused code from the final JavaScript bundle. For example, importing import { Button } from 'component-lib' only bundles Button, not the entire library.

💡 Why Interviewers Ask This: Performance mindset — shows you understand why importing entire libraries bloats bundle size and slows first load.

Caching stores expensive query results or API responses in fast memory (Redis, Memcached, CDN) to avoid re-computing them. Cache Invalidation is the hard problem of determining when cached data is stale and must be purged — strategies include TTL expiry, event-driven invalidation, and cache versioning.

💡 Why Interviewers Ask This: “There are two hard things in CS: cache invalidation and naming things.” Tests system design maturity.

An API operation is idempotent if making multiple identical requests has the exact same effect as a single request. GET, PUT, DELETE are idempotent. POST is not — calling it twice creates two resources. Idempotency is critical for safe retries after network failures — e.g., ensuring a payment API isn't charged twice.

💡 Why Interviewers Ask This: Critical for building resilient microservices and payment APIs that safely handle real-world network failures.