Web development
70 important interview questions.

Answer

When you enter a URL:

1. The browser checks its cache.
2. DNS resolves the domain name into an IP address.
3. The browser opens a connection to the server using TCP and, for HTTPS, TLS.
4. The browser sends an HTTP request.
5. The server processes the request and sends a response.
6. The browser parses the HTML, CSS and JavaScript.
7. It builds the DOM and CSSOM, calculates the layout and paints the page.
8. The page becomes interactive as JavaScript runs.

Answer

• HTML: defines the structure and content of a webpage.
• CSS: controls the design, layout, colours and responsiveness.
• JavaScript: adds functionality, interactions and dynamic behaviour.

Together, they form the foundation of frontend web development.

Answer

HTML5 is the modern version of HTML. It introduced semantic elements such as <header>, <footer>, <article> and <section>, native audio and video support, improved forms, and browser APIs such as Canvas and Web Storage.

Answer

• Block elements start on a new line and generally take the full available width. Examples: <div>, <p>, <section>.
• Inline elements take only the space they need and stay within the same line. Examples: <span>, <a>, <strong>.

Answer

Semantic HTML uses elements that clearly describe their purpose, such as <nav>, <main>, <article> and <footer>.

It improves accessibility, makes code easier to maintain and helps search engines understand the page content.

Answer

Meta tags give browsers and search engines information about a webpage. They go inside the <head> element.

Common examples:

• Description
• Viewport
• Character encoding
• Robots
• Open Graph metadata

They help with page descriptions, responsive layouts, indexing instructions and social sharing. A meta description can improve how a page appears in search results, but it is not a direct Google ranking factor.

Answer

• Class: can be used on many elements; commonly used for CSS styling and JavaScript selection.
• ID: should identify exactly one element on a page.

Example: class="button" can be used on several buttons, while id="login-form" identifies one particular form.

Answer

DOCTYPE tells the browser which HTML standard the document follows. In HTML5 it is written as:

<!DOCTYPE html>

It makes the browser render the page in standards mode instead of quirks mode.

Answer

HTML forms collect user information and submit it to a server using GET or POST requests.

Common input types: text, email, password, number, date, radio, checkbox, file and submit.

Forms can also use validation attributes such as required, min, max and pattern.

Answer

Web accessibility means designing websites that everyone can use, including people with disabilities.

ARIA (Accessible Rich Internet Applications) provides attributes that tell assistive technologies about roles, states and properties. Examples: aria-label, aria-expanded and role="dialog".

Use native semantic HTML wherever possible before adding ARIA.

Answer

• var: function-scoped and can be redeclared.
• let: block-scoped and can be reassigned.
• const: block-scoped and cannot be reassigned.

var name = "John";
let age = 25;
const country = "India";

In modern JavaScript, use const by default and let when the value needs to change.

Answer

Hoisting is JavaScript processing declarations before running the code.

• var declarations are hoisted and initialised with undefined.
• let and const are hoisted but can't be used before their declaration (the temporal dead zone).
• Function declarations can generally be called before their definition.

Answer

A closure is an inner function that remembers and uses variables from its outer scope, even after the outer function has finished.

function counter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const increment = counter();

console.log(increment()); // 1
console.log(increment()); // 2

Closures are used for data privacy, callbacks, event handlers and keeping state.

Answer

They describe how events travel through the DOM.

• Capturing: the event travels from the document root down to the target element.
• Bubbling: the event travels from the target element back up through its ancestors.

Event delegation uses bubbling to handle events on many child elements through one common parent.

Answer

• == compares values after converting types when needed.
• === compares both value and type, with no type conversion.

console.log(5 == "5");  // true
console.log(5 === "5"); // false

Strict equality (===) is generally preferred.

Answer

Arrow functions have shorter syntax and take this from the surrounding scope.

Regular functions get their own this, depending on how they are called, and can be used as constructors.

const add = (a, b) => a + b;

function multiply(a, b) {
  return a * b;
}

Answer

They control the this value of a regular function.

• call(): calls the function with arguments passed one by one.
• apply(): calls the function with arguments passed as an array.
• bind(): returns a new function with this fixed to a given value.

Answer

A Promise represents the eventual success or failure of an asynchronous operation. It has three states: pending, fulfilled and rejected.

async/await is a cleaner way to write Promise-based code:

async function getData() {
  try {
    const response = await fetch("/api/users");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

Answer

• setTimeout(): runs a callback once after a delay.
• setInterval(): runs a callback repeatedly at roughly the given interval.

Both return a timer ID that can be cancelled with clearTimeout() or clearInterval().

Answer

• Debounce: runs a function only after events have stopped for a set time.
• Throttle: limits how often a function can run while events keep firing.

Use debounce for search inputs and throttle for scroll or resize handlers.

Answer

They help build complex applications from reusable components, with tools for UI updates, state, routing and organising large codebases.

React is a UI library; Angular is a full application framework.

Answer

The Virtual DOM is an in-memory copy of the UI. React uses it to work out what changed between renders and then updates only those parts of the real DOM.

It helps organise efficient updates, though real performance still depends on the app and how it renders.

Answer

• Controlled: form values are managed through React state.
• Uncontrolled: form values are managed by the DOM and read using refs.

Controlled components are useful when you need validation or instant state updates.

Answer

• Props: data passed from a parent component to a child.
• State: data managed inside a component (or by a state-management library).

Props are read-only for the component that receives them. State is updated through its setter.

Answer

The lifecycle is the stages of a component's life. In class components, common lifecycle methods are:

• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()

In function components, hooks such as useEffect() handle side effects and cleanup.

Answer

The dependency array controls when an effect runs.

useEffect(() => {
  console.log("Runs after every render");
});

useEffect(() => {
  console.log("Runs after initial mount");
}, []);

useEffect(() => {
  console.log("Runs when count changes");
}, [count]);

An effect can return a cleanup function to remove subscriptions, timers or event listeners.

Answer

React Context shares data across components without passing props through every level. Common uses:

• Theme
• Logged-in user details
• Language preference
• Shared app settings

For complex or frequently changing global state, a dedicated state-management library may be a better fit.

Answer

• Code splitting
• Lazy loading
• Image optimisation
• Avoiding unnecessary re-renders
• Caching
• Minifying CSS and JavaScript
• Using a CDN
• Optimising API requests
• Measuring with browser performance tools

Answer

Code splitting breaks the app bundle into smaller chunks. Instead of downloading all the code at once, users download only what the current page or feature needs, which can make the first load faster.

Answer

• SSR: the HTML is generated on the server and sent to the browser.
• CSR: JavaScript runs in the browser and builds the UI.

SSR can show content sooner and help search engines. CSR suits highly interactive apps. Modern frameworks can combine both.

Answer

REST uses many endpoints for different resources. GraphQL lets clients ask for exactly the data they need through a single endpoint using queries.

Answer

• SQL databases use relational tables with structured schemas. Examples: MySQL, PostgreSQL, Microsoft SQL Server.
• NoSQL databases support other data models — documents, key-value pairs, graphs. Examples: MongoDB, Redis, Cassandra.

SQL suits relational data and complex queries. NoSQL suits other data models and some large-scale distributed workloads.

Answer

• Primary key: uniquely identifies each record in a table.
• Foreign key: refers to a primary (or unique) key in another table, creating a relationship.

Example: a users table has user_id as its primary key; an orders table uses user_id as a foreign key.

Answer

An index is an extra data structure that helps the database find rows without scanning the whole table. It gives:

• Faster searches
• Better query performance
• Efficient filtering and sorting

But indexes use storage and can slow down INSERT, UPDATE and DELETE operations.

Answer

SQL injection is when an attacker puts malicious SQL into an application's input, which can let them read, change or delete data.

Prevent it by:

• Using parameterised queries
• Using prepared statements
• Validating input
• Giving the database user only the permissions it needs
• Never building SQL by concatenating user input into strings

Answer

XSS is when an attacker injects malicious scripts into pages that other users view. Common types: stored, reflected and DOM-based XSS.

Prevent it by:

• Escaping untrusted output
• Sanitising HTML when you must allow it
• Using a Content Security Policy
• Avoiding unsafe DOM manipulation
• Using your framework's built-in protections

Answer

HTTPS is HTTP secured with TLS (the successor to SSL). TLS provides:

• Encryption
• Data integrity
• Server authentication through digital certificates

This stops attackers from reading or changing data while it travels between browser and server.

Answer

GET retrieves data from a server. POST sends data to a server, usually to create something or trigger an action.

• GET parameters usually go in the URL; POST data usually goes in the request body.
• GET requests should be safe and are often cacheable; POST requests generally aren't cached.

POST isn't automatically secure — you still need HTTPS to protect data in transit.

Answer

Git is a distributed version control system for tracking changes to code. It lets developers:

• Track changes
• Create branches
• Collaborate with a team
• Merge code
• Undo unwanted changes
• Keep the full project history

Common commands:

git init
git clone
git add .
git commit -m "Initial commit"
git push
git pull
git branch
git merge

Answer

• Development: where developers build and test new features.
• Staging: a copy of production used for final testing.
• Production: the live environment real users use.

Keeping them separate reduces deployment risk and keeps the live app stable.