Sarkari Result

India's Most Trusted Education Portal

Latest Jobs Results Admit Cards Answer Keys Current Affairs

🌐 Web Technologies Interview Questions 2026

HTML5, CSS3, JavaScript ES6+, and responsive web design interview questions.

All (20) 🟢 Easy 🟡 Medium 🔴 Hard
1
What is the difference between HTML, CSS, and JavaScript?
Easy ▼
HTML (HyperText Markup Language):
  • Defines the STRUCTURE and content of web pages
  • Uses tags like <div>, <p>, <h1>, <form>
  • The skeleton of a webpage


CSS (Cascading Style Sheets):
  • Controls the PRESENTATION and layout
  • Colors, fonts, spacing, animations
  • The skin/clothes of a webpage


JavaScript:
  • Adds BEHAVIOR and interactivity
  • DOM manipulation, events, API calls
  • The muscles/brain of a webpage
2
What is the difference between block and inline elements in HTML?
Easy ▼
Block Elements:
  • Take full width available
  • Always start on a new line
  • Can contain inline and block elements
  • Examples: <div>, <p>, <h1-h6>, <ul>, <table>, <section>


Inline Elements:
  • Only take as much width as needed
  • Do NOT start on a new line
  • Should only contain inline elements
  • Examples: <span>, <a>, <strong>, <em>, <img>, <input>


CSS override: display: block | inline | inline-block | flex | grid
3
What is the CSS Box Model?
Easy ▼
Every HTML element is a box. The CSS Box Model describes the space an element takes.

From inside to outside:
  • Content: Actual text/image
  • Padding: Space inside the border (between content and border)
  • Border: Surrounds padding
  • Margin: Space outside the border (between elements)


Total width = content + padding-left + padding-right + border-left + border-right

box-sizing: border-box — makes width include padding and border (recommended for modern layouts).
4
What is CSS Flexbox? Name the main properties.
Easy ▼
Flexbox (Flexible Box Layout) is a 1D layout system for arranging items in rows or columns.

Container Properties:
  • display: flex — activates flexbox
  • flex-direction: row | column | row-reverse | column-reverse
  • justify-content: flex-start | flex-end | center | space-between | space-around
  • align-items: stretch | center | flex-start | flex-end | baseline
  • flex-wrap: nowrap | wrap | wrap-reverse


Item Properties:
  • flex: grow shrink basis
  • align-self: override container alignment for this item
  • order: visual order of items
5
What is CSS Grid? How is it different from Flexbox?
Medium ▼
CSS Grid: 2D layout system (rows AND columns simultaneously).
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 20px;
}

Flexbox vs Grid:
  • Flexbox: 1D — either row OR column
  • Grid: 2D — row AND column simultaneously
  • Flexbox: Content-first (items decide layout)
  • Grid: Layout-first (you define the grid)
  • Use Flexbox for navigation, cards, small components
  • Use Grid for page-level layout
6
What is the difference between localStorage, sessionStorage, and cookies?
Medium ▼
localStorage:
  • Persists forever (until manually cleared)
  • ~5-10 MB storage
  • Not sent to server
  • Accessible across tabs/windows


sessionStorage:
  • Persists only for current tab/session
  • ~5 MB storage
  • Cleared when tab closes
  • Not shared between tabs


Cookies:
  • Sent to server with every request
  • ~4 KB max
  • Can set expiry date
  • Used for authentication, sessions
  • Can be HTTP-only (not accessible via JS)
7
What is the difference between GET and POST HTTP methods?
Easy ▼
GET:
  • Requests data from server
  • Parameters in URL (query string)
  • Can be bookmarked, cached, browser history
  • Limited data (URL length limit ~2000 chars)
  • Not secure for sensitive data
  • Idempotent (multiple requests = same result)


POST:
  • Submits data to server
  • Data in request body (not visible in URL)
  • Not cached, not bookmarked
  • No size limit (theoretically)
  • More secure for sensitive data
  • Not idempotent
8
What is AJAX? How does it work?
Medium ▼
AJAX (Asynchronous JavaScript and XML) allows web pages to update content without reloading the full page.

How it works:
  1. JavaScript sends HTTP request to server in background
  2. Server processes request and sends response (JSON/XML/HTML)
  3. JavaScript updates DOM with the response


Modern AJAX using Fetch API:
fetch("https://api.example.com/users")
.then(res => res.json())
.then(data => {
console.log(data);
document.getElementById("result").innerHTML = data.name;
})
.catch(err => console.error(err));
9
What is the DOM? How do you manipulate it with JavaScript?
Easy ▼
DOM (Document Object Model): A tree-like representation of an HTML document. JavaScript can read and modify the DOM to dynamically change content.

Selecting Elements:
document.getElementById("id") // single element
document.querySelector(".class") // first match
document.querySelectorAll("p") // all matches (NodeList)

Modifying:
el.innerHTML = "New Content";
el.textContent = "Plain text";
el.style.color = "red";
el.classList.add("active");
el.setAttribute("href", "https://...");

Creating elements:
const div = document.createElement("div");
div.textContent = "Hello";
document.body.appendChild(div);
10
What are semantic HTML5 elements? Give examples.
Easy ▼
Semantic HTML uses meaningful tags that describe their purpose, improving readability and SEO.

Semantic Elements:
  • <header> — Page/section header
  • <nav> — Navigation links
  • <main> — Main content
  • <article> — Self-contained content
  • <section> — Thematic grouping
  • <aside> — Sidebar/related content
  • <footer> — Page/section footer
  • <figure> / <figcaption> — Images with captions


Benefits: Better SEO, accessibility, readability, and screen reader support.
11
What is responsive web design? What techniques are used?
Easy ▼
Responsive Web Design makes websites look good on ALL screen sizes (mobile, tablet, desktop).

Key Techniques:
  • Meta viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • CSS Media Queries: Apply styles based on screen width
  • Fluid Grids: Use % instead of fixed pixels
  • Flexible Images: max-width: 100%
  • Flexbox/CSS Grid


Media Query Example:
@media (max-width: 768px) {
.sidebar { display: none; }
.main { width: 100%; }
}
12
What is the difference between null and undefined in JavaScript?
Medium ▼
undefined:
  • Variable declared but NOT assigned a value
  • Function returns nothing
  • Missing function argument
  • typeof undefined === "undefined"


null:
  • Explicitly assigned to indicate "no value"
  • Intentional absence of object value
  • typeof null === "object" (historical bug in JS)


let a; // undefined
let b = null; // null (intentional)

a == b // true (loose equality)
a === b // false (strict equality)

console.log(undefined + 1); // NaN
console.log(null + 1); // 1
13
What are JavaScript Promises? Explain async/await.
Medium ▼
Promise: Represents a value that may be available now, in the future, or never. States: pending, fulfilled, rejected.

const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Data!"), 1000);
});
promise.then(data => console.log(data));

async/await (cleaner syntax for Promises):
async function fetchData() {
try {
const response = await fetch("/api/users");
const data = await response.json();
console.log(data);
} catch(err) {
console.error("Error:", err);
}
}
fetchData();
14
What is the difference between let, const, and var in JavaScript?
Easy ▼
var:
  • Function-scoped (not block-scoped)
  • Hoisted to top (initialized as undefined)
  • Can be re-declared and re-assigned
  • Avoid using in modern JS


let:
  • Block-scoped
  • Hoisted but NOT initialized (temporal dead zone)
  • Cannot be re-declared, can be re-assigned


const:
  • Block-scoped
  • Cannot be re-declared OR re-assigned
  • Object/array properties CAN still be mutated


Rule: Always prefer const. Use let only when reassignment needed. Avoid var.
15
What is event bubbling and event capturing in JavaScript?
Hard ▼
Event Propagation has 3 phases:
  1. Capture phase: Event travels from window → target element (top-down)
  2. Target phase: Event reaches the target element
  3. Bubble phase: Event travels from target → window (bottom-up)


Event Bubbling (default): Click on child → event bubbles UP to parent → grandparent.
// Use third argument false (or omit) for bubbling
div.addEventListener("click", handler, false);

Event Capturing:
div.addEventListener("click", handler, true);

Stop propagation:
event.stopPropagation();
16
What is CORS? Why is it important?
Hard ▼
CORS (Cross-Origin Resource Sharing): A security mechanism that controls how web pages can request resources from a different origin (domain, protocol, or port).

Same-origin policy: By default, browsers block cross-origin requests.

CORS Headers (server sets these):
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

Why important: Prevents malicious websites from reading data from other sites using a user's credentials.

Preflight request: Browser sends OPTIONS request first to check if cross-origin request is allowed.
17
What is the difference between a class and ID selector in CSS?
Easy ▼
ID Selector (#):
  • Targets ONE unique element per page
  • Higher specificity (100 points)
  • Use for unique elements (header, main-nav)

#header { background: blue; }
<div id="header"></div>

Class Selector (.):
  • Can be used on MULTIPLE elements
  • Lower specificity (10 points)
  • Use for reusable styles (btn, card)

.btn { padding: 10px 20px; }
<button class="btn btn-primary"></button>
<a class="btn"></a>

Specificity order: !important > inline > ID > class > element
18
What is the Virtual DOM and how does React use it?
Hard ▼
Real DOM: The actual HTML document tree. Updating it is slow (repaints + reflows).

Virtual DOM: A lightweight JavaScript copy of the Real DOM kept in memory by React.

How React uses it:
  1. State changes → React updates Virtual DOM
  2. React compares new Virtual DOM with previous (diffing algorithm)
  3. Only the CHANGED parts are updated in the Real DOM (reconciliation)


Benefits:
  • Faster UI updates
  • Batch DOM updates
  • Predictable rendering


Similar concepts: Vue also uses Virtual DOM; Angular uses change detection.
19
What are CSS pseudo-classes and pseudo-elements?
Medium ▼
Pseudo-classes (:): Select elements based on their state.
a:hover { color: red; } /* on mouse over */
a:visited { color: purple; } /* visited link */
input:focus { border: 2px solid blue; }
li:first-child { font-weight: bold; }
li:nth-child(2n) { background: #f0f0f0; } /* even rows */

Pseudo-elements (::): Style specific PARTS of an element.
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
.btn::before { content: "→ "; }
.btn::after { content: " ←"; }
::selection { background: yellow; }
20
What is HTTP vs HTTPS? What is SSL/TLS?
Medium ▼
HTTP (HyperText Transfer Protocol):
  • Data transmitted in plain text
  • Port 80
  • No encryption — anyone can intercept


HTTPS (HTTP Secure):
  • HTTP over SSL/TLS encryption
  • Port 443
  • Data is encrypted in transit
  • Server identity verified via certificates
  • Essential for login, payment pages


SSL/TLS: SSL (older, deprecated). TLS is the modern standard. Both provide:
  • Encryption (data privacy)
  • Authentication (server identity)
  • Data integrity (no tampering)


SEO benefit: Google ranks HTTPS sites higher.