Top 50 Web Development Interview Questions (HTML, CSS, JS, React, Node) 2026

It tells the browser which version of HTML the page uses. Without it, browsers fall into quirks mode, which can render the page differently across browsers. It goes at the very top of an HTML document. It is small but essential.

Block elements take the full width available and start on a new line. Div, p, h1. Inline elements take only the width they need and stay in the same line. Span, a, img. Knowing this is fundamental for layout. Inline-block is a hybrid that stays inline but respects width and height.

Elements that describe their meaning. Header, nav, main, article, section, footer. Instead of div for everything. They improve accessibility for screen readers. They help search engines understand page structure. They make code easier to read. Using them is not about being fancy. It is about being professional.

Div is a block-level container. Span is an inline container. Use div for grouping larger sections. Use span for wrapping small bits of text or inline content. The difference is display behavior. That is it.

Use label elements linked to inputs with for and id attributes. Use proper input types. Email, tel, number. Not just text for everything. Add aria attributes where needed. Provide clear error messages. Accessible forms are usable by everyone, including people using screen readers.

Custom attributes prefixed with data dash. They store extra information on HTML elements without using non-standard attributes. You access them in JavaScript with dataset. They are useful for storing IDs, states, or configuration that JavaScript needs.

Both store data in the browser. localStorage persists until explicitly cleared. sessionStorage clears when the browser tab closes. Both are limited to about 5MB. Neither sends data to the server with every request, unlike cookies.

It controls how a page displays on mobile devices. It tells the browser to set the viewport width to the device width. Without it, mobile browsers render the page at a desktop width and shrink it. Responsive design depends on it.

Both load scripts without blocking HTML parsing. Async executes the script as soon as it downloads, which can be out of order. Defer waits until HTML parsing is complete and executes scripts in order. Use defer when script order matters. Use async for independent scripts.

Scripts that run in the background without blocking the main thread. They handle heavy computations without freezing the user interface. They cannot access the DOM directly. They communicate with the main thread through messages.

Every element is a box. Content, padding, border, margin. Content is the actual content. Padding is space inside the border. Border is the edge. Margin is space outside. Box-sizing border-box includes padding and border in the element's width. Content-box does not. Knowing this prevents layout surprises.

Flexbox is the modern answer. Display flex, justify-content center, align-items center on the parent. Grid also works. Display grid, place-items center. These are the clean methods. The old ways with absolute positioning and negative margins still work but are less maintainable.

Flexbox is one-dimensional. It handles layout in a row or a column. Grid is two-dimensional. It handles layout in rows and columns simultaneously. Use Flexbox for components and small layouts. Use Grid for page-level layouts. They complement each other.

Relative positions an element relative to its normal position. Absolute positions an element relative to its nearest positioned ancestor. Fixed positions an element relative to the viewport. It stays in place during scrolling. Each has specific use cases.

Tools that extend CSS with variables, nesting, mixins, and functions. Sass and Less are the main ones. They make CSS more maintainable for large projects. The code compiles to regular CSS. Modern CSS has adopted many preprocessor features like variables and nesting, reducing the need.

Em is relative to the font size of the parent element. Rem is relative to the font size of the root element, usually the html tag. Rem is more predictable because it does not compound through nested elements. Use rem for consistent spacing. Use em when you want sizing relative to a specific context.

A CSS feature that applies styles based on device characteristics like screen width. It is the foundation of responsive design. You define breakpoints where the layout changes. Mobile-first design starts with small screens and adds complexity for larger ones.

Z-index controls the stacking order of positioned elements. Higher values appear on top. But z-index only works within the same stacking context. A new stacking context is created by elements with certain properties like opacity, transform, or a z-index other than auto. Stacking context is one of those concepts that confuses everyone at first.

Visibility hidden hides the element but it still takes up space in the layout. Display none removes the element completely from the layout. The space collapses. Use visibility hidden for temporary hiding without layout shift. Use display none when the element should not affect layout.

Variables in CSS. Defined with double dash prefix. Accessed with var. They allow consistent values across a stylesheet. Change a color in one place and it updates everywhere. They can be updated dynamically with JavaScript. They are more powerful than preprocessor variables because they work at runtime.

Var is function-scoped and hoisted. It can be redeclared. Let is block-scoped and not hoisted in the same way. It cannot be redeclared in the same scope. Const is also block-scoped and cannot be reassigned. For objects and arrays, the reference cannot change but the contents can. Use const by default. Use let when you need reassignment. Avoid var.

JavaScript moves declarations to the top of their scope during compilation. Variables declared with var are hoisted and initialized as undefined. Let and const are hoisted but not initialized. Accessing them before declaration throws an error. Function declarations are fully hoisted. Understanding hoisting prevents weird bugs.

Undefined means a variable has been declared but not assigned a value. Null is an intentional absence of value. Undefined is the default. Null is explicit. They are equal with loose equality but not strict equality. Using null signals intent. Undefined usually means something was forgotten.

A function that remembers the variables from the scope where it was created, even after that scope has closed. It is used for data privacy, creating function factories, and maintaining state. It is one of the most powerful concepts in JavaScript. It is also one of the most common interview questions.

Synchronous code executes line by line, blocking further execution until the current line finishes. Asynchronous code starts a task and moves on, handling the result later with callbacks, promises, or async/await. Asynchronous code prevents the user interface from freezing during slow operations like network requests.

An object representing the eventual completion or failure of an asynchronous operation. It has three states. Pending, fulfilled, rejected. You handle results with then and catch. Promises replaced callback hell. They are the foundation of modern async JavaScript.

Syntactic sugar on top of Promises. Async makes a function return a Promise. Await pauses execution until a Promise resolves. It makes asynchronous code read like synchronous code. It is cleaner and easier to reason about than chaining then calls. Error handling uses try and catch.

Double equals performs type coercion before comparison. It tries to convert values to the same type. Triple equals checks strict equality without coercion. Both value and type must match. Always use triple equals unless you have a specific reason to use double equals. The coercion rules are confusing and lead to bugs.

Instead of attaching event listeners to individual elements, attach one listener to a parent element. Use event.target to determine which child triggered the event. It is more efficient for many elements. It works for dynamically added elements. It is a fundamental pattern.

Both iterate over arrays. ForEach executes a function for each element but returns undefined. Map returns a new array with the results of calling the function on each element. Use forEach for side effects like logging. Use map when you want to transform data.

A syntax for extracting values from arrays or objects into distinct variables. It makes code cleaner. Instead of multiple lines accessing properties, you extract in one line. It works for function parameters, making it clear what properties a function expects.

Three dots that expand an iterable into individual elements. It is used for copying arrays, merging objects, and passing arguments to functions. It creates shallow copies. Nested objects are still referenced, not copied. It is one of the most useful additions to modern JavaScript.

All set the this value of a function. Call invokes the function immediately with arguments passed individually. Apply invokes the function immediately with arguments passed as an array. Bind returns a new function with this permanently set, to be called later. Bind is the one I use most often.

When an event occurs on an element, it first runs handlers on the outermost ancestor during the capturing phase, then on the target element, then bubbles up to the outermost ancestor. Bubbling is the default. Event.stopPropagation stops the chain. Understanding this prevents unexpected handler firing.

Document Object Model. A tree representation of the HTML document. JavaScript can access and manipulate it. Elements, attributes, text content. All can be read and changed. The DOM is the bridge between HTML and JavaScript.

A JavaScript library for building user interfaces. It uses a component-based architecture. The UI is built from reusable pieces. It uses a virtual DOM for efficient updates. It has a massive ecosystem and community. It is the dominant frontend tool in the job market.

Class components use ES6 classes with lifecycle methods. Functional components use functions with hooks. Functional components are simpler, shorter, and the modern standard. Hooks replaced the need for class components in almost all cases. New code should use functional components.

Functions that let functional components use state and other React features. useState for local state. useEffect for side effects. useContext for consuming context. useRef for referencing DOM elements or storing mutable values. useMemo and useCallback for performance optimization. Hooks are the core of modern React.

A hook for performing side effects. Data fetching, subscriptions, manually changing the DOM. It runs after render. The dependency array controls when it re-runs. An empty array means run once on mount. Specific dependencies mean run when those values change. No array means run after every render. Cleanup functions prevent memory leaks.

A lightweight copy of the real DOM kept in memory. When state changes, React updates the virtual DOM first, compares it with the previous version, and calculates the most efficient way to update the real DOM. This is faster than manipulating the real DOM directly. It is the secret behind React's performance.

A syntax extension that looks like HTML but is actually JavaScript. It makes writing UI components more intuitive. It compiles to React.createElement calls. You can embed JavaScript expressions in curly braces. It is not required for React but is universally used.

Props are data passed from parent to child. They are read-only. State is data managed within a component. It can change over time. Props configure a component. State makes a component interactive. A component re-renders when its state changes or when it receives new props.

A way to share data across the component tree without passing props through every level. It solves prop drilling. You create a context, provide a value at a high level, and consume it anywhere below. It is built into React. For complex global state, libraries like Redux or Zustand are alternatives.

A library for handling navigation in React applications. It maps URLs to components. It enables multi-page experiences in a single-page application. BrowserRouter, Routes, Route, Link. It is the standard for React routing.

Use React.memo to prevent unnecessary re-renders. Use useMemo and useCallback to memoize values and functions. Lazy load components with React.lazy and Suspense. Avoid anonymous functions in render. Use keys correctly in lists. Profile with React DevTools before optimizing. Premature optimization is a trap.

Controlled components have their form data managed by React state. Every change updates state. Uncontrolled components manage their own state internally using refs. Controlled gives more control and is the recommended approach. Uncontrolled is useful for simple cases or integrating with non-React code.

A JavaScript runtime built on Chrome's V8 engine. It allows JavaScript to run on the server. It is event-driven and non-blocking, making it efficient for I/O-heavy tasks. It enables full stack development with one language. It has a massive package ecosystem with npm.

A minimal web framework for Node. It simplifies building APIs and web applications. Routing, middleware, request handling. It is unopinionated, meaning it does not force a specific structure. It is the most popular Node framework.

Functions that run between the request and the response. They can modify the request and response objects, end the request-response cycle, or call the next middleware. Used for logging, authentication, parsing request bodies, handling errors. Middleware is the backbone of Express applications.