Top 35 Web Development Interview Questions & Answers for Freshers (2026)

You have spent months learning HTML, CSS, JavaScript, and a framework. You have built projects. You have pushed code to GitHub. You have polished your resume. Now the interview is scheduled.

The interviewer asks the first question. "Explain the difference between let, const, and var

Your mind goes blank. You used all three in your projects. But explaining the difference clearly, concisely, and confidently under pressure is completely different from using them in code. The interview does not go well. Not because you lack knowledge, but because you never practiced articulating that knowledge.

This scenario happens to thousands of freshers every hiring season. Technical interviews test not just what you know, but how well you can explain what you know. Preparation is not just about learning concepts. It is about learning to communicate concepts.

This guide covers 35 web development interview questions that freshers commonly face in 2026. Each question includes a clear answer explained in simple language. The questions span HTML, CSS, JavaScript, React, backend development, databases, and general web concepts.

Semantic HTML uses elements that describe their meaning rather than just their appearance. Elements like <header>, <nav>, <article>, <section>, and <footer> communicate structure to browsers, search engines, and assistive technologies

A <div> tells the browser nothing about what it contains. An <article> tells the browser, search engine, and screen reader that the content is a self-contained piece of content. This semantic meaning matters for accessibility, SEO, and code maintainability.

Search engines use semantic structure to understand content hierarchy and importance. Screen readers use it to help visually impaired users navigate. Other developers use it to understand the code structure quickly. Semantic HTML is not optional decoration. It is foundational to building accessible, maintainable websites.

A <div> is a generic container with no semantic meaning. Use it when no other element fits the purpose. It is the default container when structure is needed but meaning is not.

A <section> represents a thematic grouping of content, typically with a heading. A page might have a features section, a pricing section, and a contact section. Each <section> groups related content under a common theme.

A <section> represents a thematic grouping of content, typically with a heading. A page might have a features section, a pricing section, and a contact section. Each <section> groups related content under a common theme.

The distinction matters for document outline and accessibility. Using the right element communicates structure that generic containers cannot.

All three load JavaScript, but they do so at different times relative to HTML parsing.

A plain <script> tag blocks HTML parsing immediately. The browser stops building the page, downloads the script, executes it, and then continues parsing. This can delay page rendering if scripts are large or slow to download.

<script defer> downloads the script in the background while HTML parsing continues. The script executes only after HTML parsing is complete, in the order the scripts appear. This is ideal for scripts that need the full DOM to be available.

<script async> downloads the script in the background while HTML parsing continues. But the script executes as soon as it finishes downloading, even if HTML parsing is not complete. The execution order is unpredictable. This is ideal for independent scripts like analytics or ads that do not depend on DOM structure.

For most application scripts, defer is the best choice. It provides predictable execution order and does not block rendering

Data attributes are custom attributes that store additional information on HTML elements. They use the data- prefix followed by a descriptive name. For example, <button data-user-id="123">Delete User</button>.

Data attributes allow embedding data directly in HTML that JavaScript can access. This is useful for connecting DOM elements to specific data records, configuring component behavior, or storing state that belongs with the element.

JavaScript accesses data attributes through the dataset property. element.dataset.userId returns "123" from the example above. The naming converts from hyphenated HTML to camelCase JavaScript.

Data attributes should not be used for critical application data or sensitive information. They are visible in the page source and accessible to anyone. They are best for UI-related configuration that belongs with the element.

HTML5 provides built-in form validation through attributes that run before JavaScript validation.

The required attribute marks a field as mandatory. The form will not submit if required fields are empty. The type attribute provides built-in validation for email, URL, number, date, and other formats. The min, max, minlength, and maxlength attributes constrain input values.

The pattern attribute allows custom validation using regular expressions. For example, pattern="[0-9]{10}" validates a 10-digit phone number

These attributes provide client-side validation without JavaScript. However, they should always be supplemented with server-side validation. Client-side validation improves user experience by providing immediate feedback. Server-side validation ensures data integrity because client-side validation can be bypassed.

The CSS box model describes how every HTML element is rendered as a rectangular box with four components.

The content area holds the actual content like text or images. Padding surrounds the content and creates space inside the element. Border surrounds the padding and creates a visible boundary. Margin surrounds the border and creates space outside the element

The default box-sizing: content-box means the width property applies only to the content area. Padding and border are added on top. Setting width: 200px with padding: 20px and border: 2px creates a total width of 244px.

The alternative box-sizing: border-box means the width property includes content, padding, and border. The same settings create a total width of 200px. Most modern CSS resets set box-sizing: border-box globally because it makes sizing more intuitive

Flexbox and Grid are both layout systems, but they solve different problems.

Flexbox is a one-dimensional layout system. It arranges items in a single row or single column. Use Flexbox for navigation bars, button groups, card rows where items wrap naturally, and centering content.

Grid is a two-dimensional layout system. It arranges items in rows and columns simultaneously. Use Grid for page layouts, complex component structures, and any layout where you need control over both axes.

Flexbox is content-first. The items determine how the layout adjusts. Grid is layout-first. The container defines the structure, and items are placed into it.

They are not competitors. They are complementary. Most real-world layouts use both. Grid for the overall page structure. Flexbox for component-level arrangement within grid cells.

Specificity determines which CSS rule applies when multiple rules target the same element.

Specificity is calculated as a weight. Inline styles have the highest specificity. ID selectors have the next highest. Class selectors, attribute selectors, and pseudo-classes come next. Element selectors and pseudo-elements have the lowest specificity.

When specificity is equal, the cascade determines the winner. Later rules override earlier rules. This is why CSS files are typically structured from general to specific.

The !important declaration overrides normal specificity rules. It should be used sparingly because it makes CSS harder to maintain. If you need !important, it usually indicates a specificity problem that should be fixed structurally.

CSS custom properties, also called CSS variables, are values that can be defined once and reused throughout a stylesheet.

They are defined using the --variable-name syntax, typically on the :root selector for global scope. For example, :root { --primary-color: #0066ff; }. They are used with the var() function: color: var(--primary-color);.

They are defined using the --variable-name syntax, typically on the :root selector for global scope. For example, :root { --primary-color: #0066ff; }. They are used with the var() function: color: var(--primary-color);.

Unlike preprocessor variables from Sass or Less, CSS custom properties are dynamic. They can be updated at runtime through JavaScript, enabling theme switching and responsive adjustments.

All three make elements invisible, but they do so differently.

display: none removes the element from the document flow entirely. The element does not take up space. It does not respond to events. Screen readers skip it. The layout adjusts as if the element does not exist.

visibility: hidden keeps the element in the document flow. It still takes up space. It does not respond to events. Screen readers skip it. The layout does not change. The element is invisible but its space is preserved.

opacity: 0 makes the element fully transparent but fully present. It takes up space. It responds to events like clicks. Screen readers still read it. The element is invisible but fully functional.

The choice depends on what should happen to the space and whether the element should remain interactive.

All three declare variables, but they differ in scope, hoisting, and mutability.

var has function scope or global scope. A var declared inside a block like an if statement is accessible outside that block. var variables are hoisted and initialized with undefined before execution. var allows redeclaration of the same variable name.

let has block scope. A let declared inside an if block is only accessible within that block. let variables are hoisted but not initialized. Accessing them before declaration throws a ReferenceError. let does not allow redeclaration in the same scope.

const has the same scope and hoisting behavior as let. But const variables must be initialized at declaration and cannot be reassigned. The value is not immutable if it is an object. Object properties can still be modified.

Modern best practice is to use const by default, let when reassignment is needed, and avoid var entirely due to its confusing scoping behavior.

A closure is created when a function remembers and accesses variables from its outer scope even after the outer function has finished executing.

Consider a function that returns another function. The inner function references a variable from the outer function. When the outer function completes and the inner function is returned, the inner function retains access to the outer function's variables.

Closures enable data privacy. Variables in the outer function are not accessible from outside, but the inner function can access them. This is the basis for module patterns and factory functions.

Closures also enable function factories. A function can generate other functions with specific behavior based on the arguments passed to the factory.

Closures are everywhere in JavaScript. Event handlers, callbacks, and React hooks all rely on closures.

JavaScript is single-threaded, meaning it can only execute one piece of code at a time. The event loop manages how asynchronous operations execute without blocking the main thread.

The call stack executes synchronous code. When an asynchronous operation like setTimeout or a fetch request is encountered, it is handed off to the browser's Web APIs. The main thread continues executing synchronous code.

When the asynchronous operation completes, its callback is placed in the callback queue. The event loop checks if the call stack is empty. If it is, the event loop moves callbacks from the queue to the call stack for execution.

This architecture enables non-blocking behavior. Long-running operations like network requests do not freeze the UI because the main thread continues executing while the operation is pending.

Microtasks, including Promise callbacks and async/await, have higher priority than macrotasks like setTimeout. The microtask queue is emptied before the event loop moves to the macrotask queue.

Both are comparison operators, but they differ in type handling.

== performs loose equality with type coercion. If the two values have different types, JavaScript attempts to convert one or both to a common type before comparison. This leads to surprising results: "5" == 5 is true because the string is coerced to a number.

== performs loose equality with type coercion. If the two values have different types, JavaScript attempts to convert one or both to a common type before comparison. This leads to surprising results: "5" == 5 is true because the string is coerced to a number.

Promises represent the eventual result of an asynchronous operation. A Promise is an object that will be in one of three states: pending, fulfilled, or rejected.

When a Promise is created, it starts in the pending state. If the asynchronous operation succeeds, the Promise transitions to fulfilled with a value. If the operation fails, the Promise transitions to rejected with an error.

The .then() method handles fulfillment. The .catch() method handles rejection. The .finally() method runs regardless of the outcome.

Promises solve the callback hell problem of nested asynchronous callbacks. Instead of deeply nested functions, Promises chain linearly.

async/await is syntactic sugar over Promises. An async function always returns a Promise. The await keyword pauses execution until a Promise settles. The result is asynchronous code that reads like synchronous code.

All three are higher-order functions that operate on arrays without mutating the original.

map transforms each element and returns a new array of the same length. Each element is passed through a transformation function, and the result becomes the corresponding element in the new array.

filter selects elements based on a condition and returns a new array containing only the elements that pass. The testing function returns true or false for each element.

reduce accumulates all elements into a single value. The reducer function receives an accumulator and the current element, returning the updated accumulator. The final accumulated value is returned. Reduce can sum numbers, flatten arrays, group objects, or perform any accumulation.

Event delegation is a technique where a single event listener is attached to a parent element instead of attaching listeners to each child element.

When an event occurs on a child element, it bubbles up through the DOM. The parent's listener catches the event. The event.target property identifies which child element originally triggered the event.

Event delegation reduces memory usage because fewer listeners are needed. It automatically handles dynamically added elements. A new child element added after the listener is attached will still trigger the delegated listener.

The pattern is particularly useful for lists, tables, and other collections where individual listeners would be inefficient.

Both represent absence of value, but they indicate different kinds of absence

undefined is JavaScript's default for missing values. A declared variable without an assignment is undefined. A function without a return statement returns undefined. An object property that does not exist is undefined.

null is an intentional absence of value. A developer assigns null to indicate that something exists but currently has no value. It is an explicit signal.

The practical difference is intent. undefined usually means something was forgotten or missed. null means the absence is intentional.

this refers to the execution context of a function. The value of this depends on how the function is called, not where it is defined.

In a regular function call, this refers to the global object in non-strict mode, or undefined in strict mode. In a method call, this refers to the object that owns the method. In an event handler, this refers to the element that received the event.

Arrow functions do not have their own this. They inherit this from the enclosing scope. This is often the desired behavior for callbacks and React components

The call, apply, and bind methods can explicitly set this for a function call.

Synchronous programming executes operations sequentially. Each operation completes before the next begins. If an operation takes a long time, the entire program waits.

Asynchronous programming allows operations to execute concurrently. A long-running operation starts, and the program continues executing other code. When the operation completes, a callback or Promise handles the result.

The practical difference is responsiveness. Asynchronous programming prevents blocking. A synchronous network request freezes the UI until the response arrives. An asynchronous request allows the UI to remain responsive.

JavaScript uses asynchronous programming extensively for network requests, file operations, timers, and event handling.

The virtual DOM is a lightweight JavaScript representation of the actual DOM. React uses it to optimize updates.

When a component's state changes, React creates a new virtual DOM tree. It compares this new tree with the previous tree using a diffing algorithm. It identifies the minimum set of changes needed. It applies only those changes to the actual DOM.

Direct DOM manipulation is expensive. The virtual DOM allows React to batch updates and minimize actual DOM operations. The diffing process in JavaScript is faster than repeated DOM operations.

The virtual DOM is not faster than manual DOM manipulation for simple applications. Its advantage is consistency and correctness at scale. React's declarative model ensures the UI matches the state, with the virtual DOM handling the optimization.

Hooks are functions that allow functional components to use React features like state and lifecycle methods without class components.

The most common hooks are useState for state management, useEffect for side effects, useContext for context consumption, useRef for mutable references, and useMemo and useCallback for performance optimization.

Hooks were introduced in React 16.8 to solve problems with class components. Class components made code reuse difficult. Logic was scattered across lifecycle methods. The this binding created confusion.

Hooks enable cleaner, more reusable code. Custom hooks can encapsulate logic and share it across components. The functional component model is simpler and more consistent.

useEffect runs side effects in functional components. Side effects include data fetching, subscriptions, manual DOM manipulation, and timers.

The hook takes two arguments. A function containing the side effect. An array of dependencies that determines when the effect runs.

If the dependency array is empty, the effect runs once after the first render. If dependencies are provided, the effect runs after the first render and whenever any dependency changes. If no dependency array is provided, the effect runs after every render.

The cleanup function returned from the effect runs before the next effect execution and before component unmount. This prevents memory leaks from subscriptions and timers.

Both optimize performance by memoizing values, but they memoize different things.

useMemo memoizes the result of a computation. It takes a function and a dependency array. The function runs when dependencies change. The result is cached between renders. Use it for expensive calculations.

useCallback memoizes the function itself. It takes a function and a dependency array. The same function reference is returned when dependencies do not change. Use it when passing callbacks to memoized child components.

The distinction matters when passing values to children wrapped in React.memo. A new function reference on every render breaks memoization. useCallback preserves the reference.

Prop drilling is passing data through multiple levels of components that do not need the data, just to reach a deeply nested component that does.

A grandparent component holds state. A parent component receives the state as props and passes it down without using it. A child component receives the state and actually uses it. The parent component is unnecessarily involved.

Prop drilling creates maintenance challenges. Changes to the data shape require updating every component in the chain. Unrelated components become coupled.

Solutions include React Context for global or shared state, state management libraries like Redux or Zustand for complex applications, and component composition to avoid deep nesting. The right solution depends on the specific situation.

REST is an architectural style for building APIs that use HTTP methods and resources.

Resources are identified by URLs. Each resource has a unique URL that represents it. /users represents the collection. /users/123 represents a specific user.

HTTP methods define operations. GET retrieves resources. POST creates new resources. PUT or PATCH updates existing resources. DELETE removes resources

Statelessness is a core principle. Each request contains all information needed to process it. The server does not store client state between requests.

Responses use appropriate status codes. 200 for success. 201 for created. 400 for bad request. 401 for unauthorized. 404 for not found. 500 for server error.

Middleware is a function that sits between the incoming request and the final route handler.

Each middleware function receives the request, response, and a next function. It can modify the request or response, end the request-response cycle, or call next to pass control to the next middlewar

Middleware is used for cross-cutting concerns that apply to multiple routes. Authentication checks. Logging. Request parsing. Error handling. CORS configuration. Rate limiting.

In Express, middleware is added with app.use() for global middleware or directly in route definitions for route-specific middleware.

Authentication and authorization are related but distinct security concepts.

Authentication verifies identity. It answers the question "Who are you?" The user provides credentials like username and password. The system verifies the credentials match. Authentication establishes that the user is who they claim to be.

Authorization determines permissions. It answers the question "What can you do?" After authentication, authorization checks whether the identified user has permission to access a resource or perform an action.

Authentication typically happens first. Authorization follows. Common authentication methods include JWT tokens, session cookies, and OAuth. Authorization is implemented through roles, permissions, and access control lists.

JWT, or JSON Web Token, is a compact, URL-safe token format used for authentication and information exchange.

A JWT consists of three parts separated by dots. The header contains metadata about the token type and signing algorithm. The payload contains claims about the user like ID, role, and expiration time. The signature verifies the token's integrity.

When a user logs in, the server generates a JWT and sends it to the client. The client stores the token and includes it in subsequent requests, typically in the Authorization header. The server verifies the signature and extracts user information from the payload.

JWTs are stateless. The server does not store session information. The token itself contains what the server needs. This enables horizontal scaling because any server instance can verify the token

The payload is encoded but not encrypted. Anyone with the token can read the payload. Sensitive information should not be included.

SQL databases are relational. Data is stored in tables with predefined schemas. Tables relate through foreign keys. SQL is used for queries. Examples include MySQL, PostgreSQL, and SQLite. SQL databases excel at complex queries, transactions, and data integrity.

NoSQL databases are non-relational. Data is stored in various formats including documents, key-value pairs, graphs, and column families. Schemas are flexible. Examples include MongoDB, Redis, and Cassandra. NoSQL databases excel at horizontal scaling, flexible schemas, and high write volumes.

The choice depends on requirements. Structured data with complex relationships favors SQL. Unstructured data or rapidly changing schemas favor NoSQL. Many applications use both

HTTP, Hypertext Transfer Protocol, is the foundation of data communication on the web. It defines how clients and servers exchange information. Requests contain a method, URL, headers, and optional body. Responses contain a status code, headers, and body

HTTPS is HTTP over TLS/SSL encryption. It encrypts all data exchanged between client and server. It verifies server identity through certificates. It prevents eavesdropping, tampering, and man-in-the-middle attacks.

HTTPS is now standard practice. Search engines rank HTTPS sites higher. Browsers show warnings for non-HTTPS sites. Any site handling user data should use HTTPS.

CORS, Cross-Origin Resource Sharing, is a browser security mechanism that controls which web origins can access resources from another origin.

By default, browsers block JavaScript from making requests to a different origin than the one that served the page. This is the same-origin policy. It prevents malicious sites from reading sensitive data from other sites.

CORS allows servers to opt into cross-origin access. The server sends CORS headers in its response. The Access-Control-Allow-Origin header specifies which origins are allowed. The browser checks this header and blocks or allows the response accordingly.

CORS is a browser enforcement, not a server security measure. The server still receives the request. The browser blocks the response from being read by JavaScript

Client-side rendering means the browser builds the page using JavaScript. The server sends a minimal HTML shell and a JavaScript bundle. The browser executes the JavaScript, which fetches data and builds the DOM.

Server-side rendering means the server builds the full HTML page and sends it to the browser. The browser receives a complete page ready to display. JavaScript may still be loaded for interactivity.

Client-side rendering provides a smooth app-like experience after initial load but can be slow initially. Server-side rendering provides fast initial load and better SEO but may feel less responsive for highly interactive applications

Modern frameworks support both. Next.js and similar frameworks allow hybrid approaches where some pages render on the server and others on the client.

Responsive web design ensures websites work well on all screen sizes from mobile phones to desktop monitors.

The primary techniques are fluid grids, flexible images, and media queries. Fluid grids use relative units like percentages instead of fixed pixels. Flexible images scale within their containers. Media queries apply different styles based on viewport characteristics.

Modern CSS has enhanced responsive capabilities. Flexbox and Grid provide responsive layout primitives. The clamp() function enables fluid typography. Container queries allow responsive design based on container size rather than viewport size.

Mobile-first design is standard practice. Design for small screens first, then enhance for larger screens. This ensures the most constrained experience receives attention and the design scales naturally

Accessibility means ensuring websites are usable by people with disabilities including visual, auditory, motor, and cognitive impairments.

Semantic HTML provides structure that screen readers understand. Alt text on images describes visual content. Keyboard navigation ensures all interactive elements are reachable without a mouse. Color contrast ensures readability. Focus management helps users understand where they are on the page.

ARIA attributes provide additional information when semantic HTML is insufficient. Roles, states, and properties communicate interactive behavior to assistive technologies

Accessibility is not optional. It is a legal requirement in many jurisdictions. It is also good business. Accessible websites serve more users and often rank better in search engines.

Reading questions and answers is a starting point. Effective preparation requires active practice.

Build projects that apply the concepts. Nothing reinforces understanding like actual implementation. When you have built something with closures or implemented responsive design, explaining it becomes natural

Practice explaining concepts aloud. Record yourself answering questions. Listen for clarity and confidence. The ability to articulate technical concepts clearly is as important as the knowledge itself.

Review your projects and be prepared to explain decisions. Why did you choose a particular framework? What challenges did you face? How would you improve the implementation? These project-based questions appear in nearly every interview.

Practice coding problems. Many interviews include live coding. Platforms like LeetCode and HackerRank provide practice problems. Focus on understanding patterns rather than memorizing solutions

Web development interviews test both knowledge and communication. The 35 questions covered in this guide span the core topics that freshers face. HTML semantics, CSS layout, JavaScript fundamentals, React concepts, backend principles, and general web knowledge

The key to interview success is not memorizing answers. It is understanding concepts deeply enough to explain them clearly under pressure. Every question in this guide has an underlying concept. Master the concept, and you can handle any variation of the question

Preparation takes time. Start early. Practice consistently. Review your projects. Explain concepts aloud. The effort invested in preparation pays off in confidence during the interview and competence in the job that follows.

If you are preparing for a digital marketing career, SkillsYard's Digital Marketing Program covers SEO, social media marketing, performance marketing, content strategy, analytics, and more through practical projects that build both knowledge and portfolio

Sometimes structured learning with mentorship accelerates preparation more than self-study alone. If you are still exploring whether this path fits your goals, a free demo session is an easy way to see if practical digital marketing training aligns with your career direction.