Here are 100 web development interview questions and answers, covering both front-end and back-end fundamentals, frameworks, tools, and best practices.
Internet & Web Fundamentals
1. What happens when you type a URL into a browser and press Enter?
The browser: (1) resolves the domain via DNS; (2) establishes a TCP connection (often with HTTPS/TLS handshake); (3) sends an HTTP request to the server; (4) the server processes the request and returns an HTTP response (HTML, CSS, JS, etc.); (5) the browser renders the HTML, parses CSS/JS, paints the page, and executes scripts.
2. What is the difference between the Internet and the World Wide Web?
The Internet is a global network of computers (hardware). The Web is a collection of documents and resources (pages, images, videos) accessible via URLs and HTTP, built on top of the Internet.
3. What is HTTP and how does it work?
HyperText Transfer Protocol – a request/response protocol where a client (browser) sends a request (GET, POST, etc.) to a server, and the server sends back a response with a status code, headers, and optional body. It’s stateless (each request is independent).
4. What is HTTPS, and why is it important?
HTTP over TLS/SSL. It encrypts data between browser and server, protecting against eavesdropping and tampering. It’s a must for any site handling sensitive data and is a positive ranking signal for SEO.
5. Explain the difference between a domain name and an IP address.
A domain name (e.g., example.com) is a human-friendly address. An IP address is a numeric label (e.g., 192.0.2.1) that identifies a device on a network. DNS translates domain names to IP addresses.
6. What is a CDN?
Content Delivery Network – a geographically distributed group of servers that caches static assets (images, CSS, JS) closer to users, reducing latency and improving load speed.
7. What is DNS?
Domain Name System – the phonebook of the Internet that translates domain names into IP addresses through a hierarchical resolution process.
8. What is a web server? Give examples.
Software that handles HTTP requests and serves static content (HTML, images). Examples: Nginx, Apache, IIS. Often acts as a reverse proxy for dynamic apps.
9. What is an API?
Application Programming Interface – a set of rules allowing different software to communicate. Web APIs (REST, GraphQL) enable front-end clients to request data from back-end services.
10. What is the difference between a static and dynamic website?
Static sites serve pre-built HTML files (same for all users). Dynamic sites generate HTML on the server per request, pulling data from a database and supporting user-specific content.
HTML
11. What is semantic HTML and why is it important?
Using HTML elements that convey meaning (e.g., <article>, <nav>, <section>) instead of just <div>. It improves accessibility (screen readers), SEO, and code readability.
12. Explain the difference between <div> and <span>.<div> is a block-level element (takes full width); <span> is an inline element (takes only necessary width). <div> is for grouping larger sections, <span> for styling inline text.
13. What are HTML5 new elements?<header>, <footer>, <article>, <section>, <nav>, <aside>, <video>, <audio>, <canvas>, and semantic form inputs like <input type="email">.
14. What is the purpose of the <meta> tag?
It provides metadata about the page (character set, description, viewport settings, SEO keywords) used by browsers and search engines.
15. What is the difference between localStorage and sessionStorage?localStorage persists data until explicitly cleared (survives browser restart). sessionStorage persists only for the duration of the page session (cleared when the tab closes). Both are client-side key-value stores.
16. How do you ensure web accessibility with HTML?
Use semantic elements, provide alt text for images, use <label> with inputs, ensure proper heading hierarchy, ARIA attributes where needed, and make the site keyboard-navigable.
17. What is the purpose of the alt attribute on an <img>?
It provides a text alternative if the image fails to load, and is used by screen readers. Essential for accessibility and SEO.
18. Explain the difference between <button> and <input type="button">.<button> can contain HTML content and is more flexible. <input type="button"> only accepts plain text. For custom styling and icons, <button> is preferred.
19. What is the defer and async attributes on a <script> tag?
Both load scripts without blocking HTML parsing. async executes the script as soon as it downloads (order not guaranteed). defer delays execution until after HTML parsing is complete, in order.
20. What is the Document Object Model (DOM)?
A programming interface for HTML/XML documents. It represents the page as a tree of objects (nodes), enabling JavaScript to manipulate content, structure, and styles dynamically.
CSS
21. What is the CSS Box Model?
Every element is a rectangular box: content, padding, border, margin. Understanding it is crucial for layout. box-sizing: border-box includes padding and border in the element’s width/height for easier sizing.
22. Explain CSS specificity.
A system that determines which CSS rule applies when multiple selectors target the same element: Inline styles > IDs > classes/attributes/pseudo-classes > elements/pseudo-elements. The more specific selector wins.
23. What is the difference between display: none and visibility: hidden?display: none removes the element from the document flow (space collapses). visibility: hidden hides the element but it still occupies its space.
24. What are CSS preprocessors? Name one.
Tools that extend CSS with variables, nesting, mixins, and functions. They compile into standard CSS. Examples: Sass, Less, Stylus.
25. How do you center a <div> horizontally and vertically?
Using Flexbox:
css
.container { display: flex; justify-content: center; align-items: center; }
Or Grid: place-items: center;
26. What is responsive web design?
An approach that makes web pages render well on all screen sizes and devices using fluid grids, flexible images, and CSS media queries.
27. What are media queries?
CSS feature that applies styles based on device characteristics like viewport width, height, or orientation. Example: @media (max-width: 768px) { ... }.
28. What is Flexbox?
A one-dimensional layout model for distributing space along a row or column, with powerful alignment and ordering capabilities.
29. What is CSS Grid?
A two-dimensional layout system for creating complex grid-based designs, controlling both rows and columns simultaneously.
30. What are pseudo-classes and pseudo-elements?
Pseudo-classes (:hover, :focus) style an element’s state. Pseudo-elements (::before, ::after) style a specific part of an element.
31. How does z-index work?
It controls the stacking order of positioned elements (those with position not static). Higher values appear on top. It only works within the same stacking context.
32. What is the rem unit?
A relative unit based on the root (<html>) element’s font size. More predictable than em (based on parent font size) for consistent typography scaling.
33. How do you optimize CSS performance?
Minimize reflows/repaints, use efficient selectors (avoid deep nesting), remove unused CSS, minify and bundle files, and use will-change sparingly.
34. What is a CSS reset or normalize?
A CSS reset removes default browser styling to create a consistent baseline. Normalize.css preserves useful defaults while correcting inconsistencies.
35. Explain the concept of mobile-first design in CSS.
Start styling for the smallest screen first, then add min-width media queries for larger screens. Ensures a solid base experience on mobile and progressive enhancement.
JavaScript
36. What is the difference between var, let, and const?var: function-scoped, hoisted, can be redeclared. let: block-scoped, can be reassigned, no hoisting in practice (TDZ). const: block-scoped, cannot be reassigned (but objects can be mutated).
37. What is hoisting?
JavaScript’s default behavior of moving declarations (not initializations) to the top of their scope. var declarations are hoisted and initialized undefined; let/const are hoisted but not initialized.
38. What is a closure?
A function that retains access to variables from its outer (enclosing) scope even after the outer function has returned. Commonly used for data privacy and callbacks.
39. What is the this keyword?
It refers to the object that is executing the current function. Its value depends on how a function is called (global, method, constructor, call/apply/bind, arrow functions inherit this from surrounding scope).
40. What are promises and how do they work?
Objects representing the eventual completion or failure of an asynchronous operation. States: pending, fulfilled, rejected. .then()/.catch() handle results; async/await is syntactic sugar on top.
41. What is async/await?
Syntactic sugar over promises. async functions return a promise; await pauses execution until the promise resolves, making asynchronous code read like synchronous code.
42. What is event delegation?
A technique where a single event listener is added to a parent element to manage events for multiple child elements, leveraging event bubbling. More efficient and handles dynamically added elements.
43. Explain the difference between == and ===?== (loose equality) performs type coercion before comparing. === (strict equality) compares both value and type without coercion. Always prefer ===.
44. What is the DOMContentLoaded event?
Fires when the initial HTML document has been completely parsed, without waiting for stylesheets, images, or subframes to finish loading. Faster than load.
45. What are arrow functions, and how do they differ from regular functions?
Shorter syntax, do not have their own this, arguments, or super. They inherit this from the enclosing scope. Cannot be used as constructors.
46. What is JSON?
JavaScript Object Notation – a lightweight data-interchange format, language independent, easy for humans and machines to read/write. Used extensively for API communication.
47. How does prototypal inheritance work?
Objects in JavaScript can inherit properties and methods from another object through the prototype chain. Every object has a [[Prototype]] that links to its prototype.
48. What is event bubbling and capturing?
Event propagation phases: capturing (from window down to target), target, bubbling (from target up to window). addEventListener third parameter true for capture, false (default) for bubble.
49. What are template literals?
Strings enclosed in backticks that allow embedded expressions (${expression}), multi-line strings, and tagged templates.
50. How do you handle errors in JavaScript?
Using try...catch blocks for synchronous code, and .catch() for promises. Global error handling with window.onerror or unhandledrejection event.
Front-End Frameworks & Libraries
51. What is React?
A JavaScript library for building user interfaces, developed by Facebook. It uses a component-based architecture, a virtual DOM for efficient updates, and JSX (JavaScript XML) for templating.
52. What is the Virtual DOM and how does it work?
A lightweight in-memory representation of the real DOM. When state changes, a new virtual DOM is created and compared (diffed) with the previous one. Only the differences are applied to the actual DOM, minimizing expensive DOM manipulations.
53. What are components in React?
Reusable, self-contained pieces of UI that manage their own state and accept inputs (props). They can be functional or class-based.
54. What is state in React?
Data that a component manages internally and can change over time. When state updates, the component re-renders. Managed via useState hook in functional components.
55. What are props?
Properties passed from a parent component to a child component. They are read-only and used to configure and pass data down the component tree.
56. What are hooks in React?
Functions that let functional components “hook into” React features like state (useState), lifecycle (useEffect), context (useContext), and more, without writing a class.
57. What is JSX?
JavaScript XML – a syntax extension for JavaScript that looks like HTML. It’s transformed into React.createElement() calls, making UI code more readable and intuitive.
58. What is the difference between a library and a framework?
A library (React) is a collection of functions you call; you control the flow. A framework (Angular) dictates the architecture and calls your code; you plug into it (inversion of control).
59. What is state management (like Redux) and when do you need it?
A centralized store for application state that can be accessed by any component. Needed when many components share complex, mutable state (e.g., user auth, shopping cart) and prop drilling becomes unmanageable.
60. What is a single-page application (SPA)?
A web app that loads a single HTML page and dynamically updates content as the user interacts, without full page reloads. Typically uses AJAX/fetch and client-side routing.
61. What are the benefits and drawbacks of SPAs?
Benefits: fast transitions, seamless UX, reduced server load. Drawbacks: slower initial load, SEO challenges (mitigated by SSR/SSG), heavy client-side processing.
62. What is Server-Side Rendering (SSR)?
The server generates the full HTML for a page on each request before sending it to the browser. Improves initial load and SEO for JavaScript-heavy apps (e.g., Next.js for React).
63. What is Static Site Generation (SSG)?
HTML pages are generated at build time rather than on each request. Results in fast performance and good SEO. Used by frameworks like Gatsby, Next.js, or Nuxt.
64. What is TypeScript?
A superset of JavaScript that adds static typing, interfaces, and other features. It helps catch errors at compile time and improves developer productivity on large codebases.
65. How does Angular differ from React?
Angular is a full-fledged MVC framework by Google (uses TypeScript, dependency injection, two-way binding). React is a UI library focused on the view layer (one-way data flow, JSX, flexibility in tools).
Backend & Server-Side
66. What is Node.js?
A JavaScript runtime built on Chrome’s V8 engine that allows JavaScript to run on the server side. Non-blocking, event-driven, ideal for I/O-heavy applications.
67. What is Express.js?
A minimal, flexible Node.js web application framework providing robust features for building APIs and web applications (routing, middleware, etc.).
68. What is middleware in Express?
Functions that have access to the request, response, and next middleware function. They execute in the order they are defined, used for logging, authentication, parsing, error handling.
69. What is REST?
Representational State Transfer – an architectural style for designing networked applications. It uses stateless HTTP methods (GET, POST, PUT, DELETE) to perform CRUD operations on resources identified by URLs.
70. What is GraphQL?
A query language for APIs developed by Facebook. Clients can request exactly the data they need in a single request, reducing over-fetching and under-fetching.
71. Explain CRUD operations.
Create (POST), Read (GET), Update (PUT/PATCH), Delete (DELETE) – the four basic functions for persistent storage.
72. What is authentication vs. authorization?
Authentication verifies who you are (login). Authorization determines what you are allowed to do (permissions).
73. What is JWT?
JSON Web Token – a compact, URL-safe token format used for securely transmitting information between parties as a JSON object. Commonly used for stateless authentication.
74. How do you secure a REST API?
Use HTTPS, implement authentication (JWT/OAuth), validate input, use rate limiting, set CORS properly, keep dependencies updated, and use proper error handling without exposing internals.
75. What is CORS?
Cross-Origin Resource Sharing – a browser mechanism that restricts web pages from making requests to a different domain than the one that served the web page. The server must include proper headers to allow it.
76. What is the difference between SQL and NoSQL databases?
SQL (MySQL, PostgreSQL): relational, structured schemas, tables, ACID compliant. NoSQL (MongoDB, Redis): non-relational, flexible schemas, document/key-value/graph models, often horizontally scalable.
77. What is a primary key and a foreign key?
Primary key: a unique identifier for each row in a table. Foreign key: a column that references a primary key in another table, establishing a relationship between tables.
78. What is an ORM?
Object-Relational Mapping – a technique that lets you interact with a database using objects and methods of a programming language instead of raw SQL. Examples: Sequelize, Prisma, TypeORM, Django ORM.
79. What is MVC architecture?
Model-View-Controller – a design pattern separating an application into three interconnected components: Model (data), View (UI), Controller (business logic), promoting organized, scalable code.
80. What is a reverse proxy?
A server that sits in front of web servers and forwards client requests. Nginx is common; it handles SSL termination, load balancing, caching, and serving static files.
Databases & Storage
81. What is normalization in databases?
The process of organizing data to reduce redundancy and dependency by splitting large tables into smaller, related tables. It follows normal forms (1NF, 2NF, 3NF).
82. What is an index in a database?
A data structure (often B-tree) that improves the speed of data retrieval operations on a table. Indexes make reads faster but writes slightly slower.
83. What is a JOIN in SQL?
A clause used to combine rows from two or more tables based on a related column. Types: INNER JOIN (matching rows), LEFT JOIN (all from left, matching from right), RIGHT JOIN, FULL OUTER JOIN.
84. What is ACID?
Atomicity, Consistency, Isolation, Durability – a set of properties guaranteeing reliable processing of database transactions.
85. What is caching and what tools are used?
Storing copies of data in a faster storage layer (memory) to serve future requests faster. Tools: Redis, Memcached, CDNs, browser caching.
Version Control & DevOps
86. What is Git?
A distributed version control system that tracks changes in source code, enabling collaboration, branching, and history management.
87. What is the difference between git merge and git rebase?merge combines branches creating a merge commit. rebase replays commits on top of another branch, resulting in a linear history. Rebase rewrites history (use with caution on shared branches).
88. What is a Git branching strategy (like Git Flow)?
A model defining branch roles: main (production), develop (integration), feature/*, release/*, hotfix/*. Helps teams manage releases and parallel development.
89. What is CI/CD?
Continuous Integration / Continuous Deployment – practices where developers frequently integrate code (auto build & test), and changes are automatically deployed to production. Tools: GitHub Actions, Jenkins, GitLab CI.
90. What is Docker?
A platform that packages an application and its dependencies into a lightweight, portable container that runs consistently across environments.
91. What is environment variables and why are they used?
Variables set outside the application code, used for configuration (database URLs, API keys, secrets) that change between environments (development, staging, production) without code changes.
Performance, Security & Best Practices
92. How do you optimize website performance?
Minimize HTTP requests, compress/optimize images (WebP), use lazy loading, minify CSS/JS, enable compression (gzip/Brotli), use a CDN, reduce server response time, implement efficient caching, and eliminate render-blocking resources.
93. What is lazy loading?
Deferring the loading of non-critical resources (images, iframes) until they are needed (e.g., when they enter the viewport). Reduces initial page load time.
94. What is XSS (Cross-Site Scripting)?
A security vulnerability where attackers inject malicious client-side scripts into web pages. Prevent by escaping user input, using Content Security Policy (CSP), and avoiding innerHTML.
95. What is CSRF (Cross-Site Request Forgery)?
An attack that tricks a user into performing unwanted actions on a site they’re authenticated on. Prevent with anti-CSRF tokens, SameSite cookies, and checking referrer/origin headers.
96. What is SQL Injection?
An attack where malicious SQL statements are inserted into an entry field. Prevent by using parameterized queries/prepared statements and ORM abstractions.
97. What is the difference between cookies, sessionStorage, and localStorage?
Cookies: small data sent with every HTTP request; can have expiration and HttpOnly/Secure flags. localStorage: persists indefinitely, bigger storage, client-side only. sessionStorage: cleared on tab close. Cookies are for server communication; the latter two are for client-side state.
98. What is a Content Security Policy (CSP)?
An HTTP header that restricts sources from which content (scripts, styles, images) can be loaded, mitigating XSS and data injection attacks.
99. Explain the importance of web accessibility (a11y).
It ensures people with disabilities can perceive, understand, navigate, and interact with the web. Legal requirements aside, it’s a fundamental right and improves usability for everyone.
100. How do you stay updated with web development?
I follow blogs (CSS-Tricks, Smashing Magazine), attend conferences/webinars, listen to podcasts, contribute to open-source, read documentation, and build side projects to experiment with new technologies.