✅ Web Development Interview Topics

1. HTML (HyperText Markup Language)

HTML5 Elements (<header>, <footer>, <article>, <section>, etc.)

Forms and Input Types

Semantic HTML

Accessibility (ARIA)

Canvas and SVG

Sample Questions:

Q1. What are semantic HTML elements?

A: Semantic HTML elements are those that clearly describe their meaning in a human- and machine-
readable way. Examples: <article>, <section>, <header>, <footer>.

Q2. What is the difference between <div> and <section>?

A:

<div> is a generic container with no semantic meaning.

<section> defines a thematic grouping of content and adds semantic meaning.

2. CSS (Cascading Style Sheets)

CSS Flexbox and Grid

Pseudo-elements and Pseudo-classes

Media Queries and Responsive Design

Animations and Transitions

Specificity and Inheritance

Sample Questions:

Q1. What is the difference between em, rem, %, and px in CSS?

A:
px – Absolute size (fixed).

em – Relative to the font size of the parent element.

rem – Relative to the font size of the root element (html).

% – Relative to the parent element's size.

Q2. How does Flexbox differ from CSS Grid?

A:

Flexbox is for one-dimensional layouts (row or column).

Grid is for two-dimensional layouts (row and column).

3. JavaScript (ES6+)

Scope (Global, Block, Function)

Closures

Promises and Async/Await

Event Loop and Call Stack

this Keyword and Arrow Functions

DOM Manipulation

Prototype and Inheritance

map(), filter(), reduce()

Spread and Rest Operators

Modules (import/export)

Sample Questions:

Q1. What is the difference between let, const, and var?

A:
var – Function-scoped and hoisted.

let – Block-scoped, not hoisted.

const – Block-scoped, not hoisted, value cannot be reassigned.

Q2. What is a closure in JavaScript?

A: A closure is a function that retains access to its outer lexical scope even when the function is
executed outside of its original context.

javascript

Copy

Edit

function outer() {

let count = 0;

return function inner() {

count++;

console.log(count);

const counter = outer();

counter(); // 1

counter(); // 2

4. React.js

Functional vs Class Components

State and Props

Hooks (useState, useEffect, useContext)

Context API and Redux

Component Lifecycle

Higher-Order Components (HOC)

Sample Questions:

Q1. What is the difference between state and props in React?

A:

State – Local to the component and can be changed using setState() or useState.

Props – Data passed from parent to child component; read-only.

Q2. How does useEffect() work in React?

A:

useEffect() is a hook that runs side-effects in a functional component. It runs after the component
renders.

javascript

Copy

Edit

useEffect(() => {

console.log('Component rendered');

}, []);

5. Node.js

Event Loop and Non-blocking I/O

Express.js and Middleware

File System Module

Streams

REST APIs
Sample Questions:

Q1. What is the Event Loop in Node.js?

A:

The Event Loop allows Node.js to handle non-blocking I/O operations by offloading operations to the
system kernel.

Q2. What are Middleware functions in Express.js?

A:

Middleware functions have access to the request and response objects and the next function in the
application's request-response cycle.

javascript

Copy

Edit

app.use((req, res, next) => {

console.log('Middleware triggered');

next(); // Pass control to the next handler

});

6. MongoDB

Collections and Documents

CRUD Operations

Aggregation Framework

Indexing

Schema Design

Sample Questions:

Q1. What is the difference between find() and aggregate() in MongoDB?

find() – Retrieves documents based on a query.

aggregate() – Allows complex data processing using stages (like $match, $group).

Q2. What is an index in MongoDB?

A:

An index improves the efficiency of search queries by allowing MongoDB to locate data faster.

7. APIs and HTTP

REST and GraphQL

HTTP Methods (GET, POST, PUT, DELETE)

Status Codes (200, 404, 500, etc.)

CORS and Preflight Requests

Sample Questions:

Q1. What is the difference between REST and GraphQL?

A:

REST – Fixed endpoints, structured responses.

GraphQL – Single endpoint, flexible responses based on queries.

Q2. What is CORS? Why is it important?

A:

CORS (Cross-Origin Resource Sharing) allows a server to control which domains can access its
resources to prevent security risks.

8. Testing

Unit Testing (Jest)

Mocking and Spying

Sample Questions:

Q1. What is the difference between unit testing and integration testing?

A:

Unit Testing – Tests individual components or functions.

Integration Testing – Tests the interaction between multiple components.

9. Performance and Optimization

Lazy Loading

Code Splitting

Memoization

Debouncing and Throttling

Sample Questions:

Q1. What is the difference between Debouncing and Throttling?

A:

Debouncing – Executes a function after a delay (ignores intermediate calls).

Throttling – Ensures a function is executed at regular intervals.

javascript

Copy

Edit

// Debouncing Example

function debounce(fn, delay) {

let timer;
return (...args) => {

clearTimeout(timer);

timer = setTimeout(() => fn(...args), delay);

10. Security

CSRF (Cross-Site Request Forgery)

XSS (Cross-Site Scripting)

HTTPS and SSL/TLS

Content Security Policy

Sample Questions:

Q1. What is XSS and how to prevent it?

A:

XSS (Cross-Site Scripting) is a security vulnerability where malicious scripts are injected into websites.

Prevention:

Use innerText instead of innerHTML.

Sanitize user input.

🚀 Additional Tips:

✅ Focus on projects you’ve built – be ready to explain your thought process.

✅ Use the STAR method (Situation, Task, Action, Result) for behavioral questions.

✅ Be confident about fundamental concepts like closure, event loop, and promises.

✅ Practice coding challenges (LeetCode, HackerRank).