Looking for HTML interview questions, CSS interview questions, or JavaScript interview questions for your upcoming tech interview? You've come to the right place. This comprehensive guide covers 25+ real-world interview questions that hiring managers actually ask in 2026.
Whether you're a fresher preparing for your first web developer interview or an experienced professional looking to switch jobs, this guide has everything you need. We've included basic, intermediate, and advanced questions covering HTML5, CSS3, and modern JavaScript concepts.
What You'll Learn:
- Essential HTML interview questions and answers
- CSS interview questions for freshers and experienced developers
- JavaScript basic interview questions and advanced concepts
- Real-world examples and practical code snippets
- Tips for answering technical questions confidently
HTML Interview Questions
1. What is HTML and why do we use it?
Answer: HTML stands for HyperText Markup Language. It's the standard language for creating web pages and web applications. Think of HTML as the skeleton or structure of a website.
Why we use HTML:
- It creates the basic structure of web pages
- It displays content like text, images, videos, and links
- It works with CSS for styling and JavaScript for interactivity
- Every website you visit uses HTML as its foundation
Simple Example:
html
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph written in HTML.</p>
</body>
</html>
2. What is the difference between HTML and HTML5?
Answer: HTML5 is the latest version of HTML with many new features that make web development easier and more powerful.
Key Differences:
HTML (older versions):
- Limited multimedia support (needed plugins like Flash)
- Used <div> for everything
- No offline storage options
- Limited form controls
HTML5 (modern version):
- Built-in audio and video support without plugins
- Semantic tags like <header>, <footer>, <article>, <section>
- Local storage and session storage for saving data
- New input types like email, date, color, range
- Canvas for drawing graphics
- Better mobile support
Practical Example:
html
<!-- Old HTML way -->
<div id="header">...</div>
<div id="navigation">...</div>
<!-- HTML5 way -->
<header>...</header>
<nav>...</nav>
3. Explain the difference between block-level and inline elements.
Answer: This is one of the most common HTML interview questions for freshers.
Block-level elements:
- Take up the full width available
- Always start on a new line
- You can set width and height
- Examples: <div>, <p>, <h1>, <section>, <header>
Inline elements:
- Only take up as much width as needed
- Stay on the same line
- Width and height don't work on them
- Examples: <span>, <a>, <strong>, <img>, <button>
Visual Example:
html
<!-- Block elements -->
<div>This is a block element</div>
<div>This starts on a new line</div>
<!-- Inline elements -->
<span>This is inline</span>
<span>This stays on the same line</span>
4. What are semantic HTML tags and why are they important?
Answer: Semantic HTML tags clearly describe their meaning and purpose to both the browser and the developer. They tell you what kind of content is inside them.
Why They're Important:
- Better SEO (search engines understand your content better)
- Improved accessibility for screen readers
- Easier code maintenance
- Cleaner and more readable code
Common Semantic Tags:
- <header> - Top section of a page or section
- <nav> - Navigation links
- <main> - Main content of the page
- <article> - Self-contained content
- <section> - Thematic grouping of content
- <aside> - Side content like sidebars
- <footer> - Bottom section
- <figure> and <figcaption> - Images with captions
Example:
html
<article>
<header>
<h1>Understanding Semantic HTML</h1>
<time datetime="2026-01-15">January 15, 2026</time>
</header>
<p>This article explains semantic HTML...</p>
<footer>
<p>Written by John Developer</p>
</footer>
</article>
5. What is the purpose of the DOCTYPE declaration?
Answer: The DOCTYPE declaration tells the web browser which version of HTML the page is written in. It must be the very first line in your HTML document.
Why It's Important:
- Ensures the browser renders the page correctly
- Prevents the browser from switching to "quirks mode"
- Helps with cross-browser compatibility
HTML5 DOCTYPE (Simple and Modern):
html
<!DOCTYPE html>
Old HTML4 DOCTYPE (Complicated):
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.brillicaservices.com">
The HTML5 version is much simpler and is what you should always use in 2026.
6. Explain the difference between <div> and <span> tags.
Answer:
<div> (Division):
- Block-level element
- Used to group larger sections of content
- Creates a new line before and after
- Good for layout structure
<span>:
- Inline element
- Used to style small portions of text
- Doesn't create new lines
- Good for styling specific words or phrases
Practical Example:
html
<div class="container">
<p>This is a paragraph with <span class="highlight">highlighted text</span> in the middle.</p>
</div>
7. What are HTML attributes and give examples?
Answer: HTML attributes provide additional information about HTML elements. They are always written in the opening tag and usually come in name-value pairs.
Common Attributes:
- class - Assigns a class name for CSS styling
- id - Unique identifier for an element
- src - Source file for images, scripts, etc.
- href - Link destination for anchor tags
- alt - Alternative text for images
- style - Inline CSS styling
- title - Tooltip text on hover
- data-* - Custom data attributes
Examples:
html
<!-- Image with attributes -->
<img src="photo.jpg" alt="Profile Photo" width="300" height="200" title="My Profile">
<!-- Link with attributes -->
<a href="https://example.com" target="_blank" rel="noopener">Visit Website</a>
<!-- Div with multiple attributes -->
<div id="main-content" class="container" data-user-id="12345">
Content here
</div>
8. What is the difference between id and class attributes?
Answer: This is a very popular HTML CSS JavaScript interview question.
id Attribute:
- Must be unique on the page (only one element can have a specific id)
- Used for selecting a single element
- Has higher CSS specificity
- Can be used as URL anchors (#section1)
- Selected with # in CSS
class Attribute:
- Can be used on multiple elements
- One element can have multiple classes
- Used for styling groups of elements
- Lower CSS specificity than id
- Selected with . in CSS
Example:
html
<!-- ID - unique identifier -->
<div id="header">Main Header</div>
<!-- Class - can be reused -->
<p class="error-message">Error 1</p>
<p class="error-message">Error 2</p>
<!-- Multiple classes -->
<button class="btn btn-primary btn-large">Click Me</button>
CSS Styling:
css
/* ID selector */
#header {
background-color: blue;
}
/* Class selector */
.error-message {
color: red;
}
9. What are meta tags and why are they important?
Answer: Meta tags provide metadata about the HTML document. They don't appear on the page but give important information to browsers and search engines.
Why They're Important:
- Help with SEO (Search Engine Optimization)
- Control how your page appears in search results
- Set character encoding
- Make your site mobile-friendly
- Control social media previews
Essential Meta Tags:
html
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Mobile responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO description -->
<meta name="description" content="Learn HTML, CSS, and JavaScript interview questions">
<!-- Keywords for SEO -->
<meta name="keywords" content="HTML, CSS, JavaScript, interview questions">
<!-- Author information -->
<meta name="author" content="Your Name">
<!-- Social media preview (Open Graph) -->
<meta property="og:title" content="Interview Questions Guide">
<meta property="og:description" content="Complete guide for web development interviews">
<meta property="og:image" content="preview-image.jpg">
</head>
10. Explain the HTML form and its important attributes.
Answer: HTML forms collect user input and send it to a server for processing. They're essential for login pages, contact forms, search boxes, and surveys.
Important Form Attributes:
action - Where to send the form data method - How to send data (GET or POST) name - Form identifier target - Where to display the response
Example Form:
html
<form action="/submit-form" method="POST" name="contactForm">
<!-- Text input -->
<label for="name">Name:</label>
<input type="text" id="name" name="username" required>
<!-- Email input -->
<label for="email">Email:</label>
<input type="email" id="email" name="user_email" required>
<!-- Password -->
<label for="password">Password:</label>
<input type="password" id="password" name="user_password" required>
<!-- Textarea -->
<label for="message">Message:</label>
<textarea id="message" name="user_message" rows="4"></textarea>
<!-- Radio buttons -->
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<!-- Checkbox -->
<input type="checkbox" id="subscribe" name="newsletter">
<label for="subscribe">Subscribe to newsletter</label>
<!-- Submit button -->
<button type="submit">Submit Form</button>
</form>
11. What are the new input types in HTML5?
Answer: HTML5 introduced many new input types that make forms more user-friendly and provide better validation without JavaScript.
New HTML5 Input Types:
- email - Email validation
- tel - Phone number
- url - Website URL
- number - Numeric input with up/down arrows
- range - Slider control
- date - Date picker
- time - Time picker
- datetime-local - Date and time picker
- month - Month and year picker
- week - Week picker
- color - Color picker
- search - Search box
Practical Examples:
html
<!-- Email with automatic validation -->
<input type="email" placeholder="Enter your email" required>
<!-- Number with min, max, and step -->
<input type="number" min="1" max="100" step="5" value="10">
<!-- Date picker -->
<input type="date" min="2026-01-01" max="2026-12-31">
<!-- Range slider -->
<input type="range" min="0" max="100" value="50">
<!-- Color picker -->
<input type="color" value="#ff0000">
<!-- Search box -->
<input type="search" placeholder="Search...">
12. What is the difference between <link> and <a> tags?
Answer:
<link> Tag:
- Used in the <head> section
- Links external resources like CSS files, fonts, icons
- Doesn't create a clickable link
- Not visible to users
<a> Tag (Anchor):
- Used in the <body> section
- Creates clickable hyperlinks
- Visible to users
- Navigates to other pages or sections
Examples:
html
<head>
<!-- Link tag for CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Link tag for favicon -->
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- Anchor tag for clickable links -->
<a href="https://example.com">Visit Example</a>
<!-- Anchor tag for email -->
<a href="mailto:contact@example.com">Email Us</a>
<!-- Anchor tag for phone -->
<a href="tel:+1234567890">Call Us</a>
</body>
13. What is the purpose of the alt attribute in images?
Answer: The alt attribute provides alternative text for images. It's one of the most important attributes for accessibility and SEO.
Why Alt Text is Important:
- Accessibility - Screen readers read alt text to visually impaired users
- SEO - Search engines use alt text to understand images
- Fallback - Shows text if the image fails to load
- Context - Provides context about the image content
How to Write Good Alt Text:
- Describe the image clearly and concisely
- Keep it under 125 characters
- Don't start with "image of" or "picture of"
- For decorative images, use empty alt: alt=""
Examples:
html
<!-- Good alt text -->
<img src="golden-retriever.jpg" alt="Golden retriever playing in park">
<!-- Bad alt text -->
<img src="golden-retriever.jpg" alt="Image">
<img src="golden-retriever.jpg" alt="IMG_1234.jpg">
<!-- Decorative image (no meaningful content) -->
<img src="decorative-line.png" alt="">
<!-- Logo with link -->
<a href="/">
<img src="logo.png" alt="Company Name Home">
</a>
14. Explain the difference between <script>, <script async>, and <script defer>.
Answer: This is a common interview question on HTML CSS JavaScript, especially for experienced developers.
Regular
<script>:
- Blocks HTML parsing
- Executes immediately when encountered
- Can slow down page loading
<script async>:
- Downloads in background while HTML parses
- Executes immediately when downloaded
- Good for independent scripts like analytics
- Order of execution is not guaranteed
<script defer>:
- Downloads in background while HTML parses
- Executes after HTML is fully parsed
- Maintains execution order
- Best for scripts that need the full DOM
Visual Flow:
html
<!-- Regular script - blocks everything -->
<script src="script.js"></script>
<!-- Async - downloads and runs independently -->
<script src="analytics.js" async></script>
<!-- Defer - downloads but waits for HTML -->
<script src="main.js" defer></script>
Best Practice in 2026:
html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<!-- CSS in head -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Your content here -->
<!-- Scripts at the end with defer -->
<script src="main.js" defer></script>
</body>
</html>
15. What is the difference between localStorage and sessionStorage?
Answer:
localStorage:
- Data persists even after browser is closed
- No expiration date
- Storage limit: 5-10MB (varies by browser)
- Shared across all tabs of same origin
- Must be manually cleared
sessionStorage:
- Data deleted when browser tab is closed
- Separate for each tab
- Storage limit: 5-10MB
- Not shared between tabs
- Automatically cleared on tab close
Practical Example:
javascript
// localStorage - survives browser restart
localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('theme', 'dark');
// Get data from localStorage
let username = localStorage.getItem('username');
console.log(username); // "JohnDoe"
// Remove specific item
localStorage.removeItem('theme');
// Clear all localStorage
localStorage.clear();
// sessionStorage - gone when tab closes
sessionStorage.setItem('cartItems', '5');
let items = sessionStorage.getItem('cartItems');
// Remove from sessionStorage
sessionStorage.removeItem('cartItems');
16. What are data attributes and how do you use them?
Answer: Data attributes (data-*) allow you to store custom data directly in HTML elements without using non-standard attributes or extra properties in the DOM.
Why Use Data Attributes:
- Store custom information on elements
- No need for hidden inputs or JavaScript objects
- Easy to access with JavaScript
- Valid HTML5 code
HTML Example:
html
<!-- Product card with data attributes -->
<div class="product"
data-product-id="12345"
data-price="29.99"
data-category="electronics"
data-in-stock="true">
<h3>Wireless Mouse</h3>
<button onclick="addToCart(this)">Add to Cart</button>
</div>
<!-- User profile with data -->
<div class="user-profile"
data-user-id="789"
data-role="admin"
data-joined-date="2024-01-15">
Profile Content
</div>
Accessing with JavaScript:
javascript
// Get the product element
let product = document.querySelector('.product');
// Method 1: Using dataset
console.log(product.dataset.productId); // "12345"
console.log(product.dataset.price); // "29.99"
console.log(product.dataset.inStock); // "true"
// Method 2: Using getAttribute
console.log(product.getAttribute('data-product-id')); // "12345"
// Setting data attributes
product.dataset.discount = "10";
// or
product.setAttribute('data-discount', '10');
17. What is the iframe tag and when should you use it?
Answer: An iframe (inline frame) embeds another HTML page within the current page. It creates a separate browsing context inside your page.
Common Uses:
- Embedding YouTube videos
- Embedding Google Maps
- Displaying external content
- Embedding social media posts
- Payment gateways
Basic Syntax:
html
<!-- Simple iframe -->
<iframe src="https://example.com" width="600" height="400"></iframe>
<!-- YouTube video embed -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope"
allowfullscreen>
</iframe>
<!-- Google Maps embed -->
<iframe
src="https://www.google.com/maps/embed?..."
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
Important Attributes:
- src - URL of the page to embed
- width and height - Size of iframe
- frameborder - Border around iframe (0 or 1)
- sandbox - Security restrictions
- loading="lazy" - Lazy load for better performance
Security Considerations:
html
<!-- Secure iframe with sandbox -->
<iframe
src="untrusted-site.com"
sandbox="allow-scripts allow-same-origin">
</iframe>
18. Explain the difference between <strong> vs <b> and <em> vs <i>.
Answer: These pairs look similar visually but have different semantic meanings.
<strong> (Semantic):
- Indicates important text
- Screen readers emphasize it
- SEO-friendly
- Has meaning
<b> (Presentational):
- Just makes text bold
- No special meaning
- Purely visual
- Old-fashioned approach
<em> (Semantic):
- Indicates emphasized text
- Screen readers stress it
- Has semantic meaning
<i> (Presentational):
- Just makes text italic
- No special meaning
- Purely visual
Practical Example:
html
<!-- Semantic (Better for SEO and accessibility) -->
<p><strong>Warning:</strong> This action cannot be undone.</p>
<p>I <em>really</em> need to finish this project.</p>
<!-- Presentational (Just visual styling) -->
<p><b>Product Name:</b> Wireless Mouse</p>
<p><i>Italic text</i> for style only.</p>
<!-- Correct usage -->
<article>
<h1><strong>Breaking News:</strong> Major Update Released</h1>
<p>The update includes <em>significant</em> improvements.</p>
<p><b>Product Details:</b> Available in <i>three colors</i>.</p>
</article>
Best Practice: Use <strong> and <em> for meaningful emphasis, use <b> and <i> for purely visual styling.
19. What is the purpose of the target attribute in anchor tags?
Answer: The target attribute specifies where to open the linked document.
Common Values:
_self (default):
- Opens in same tab/window
- Default behavior if target is not specified
_blank:
- Opens in new tab/window
- Most commonly used
- Should include rel="noopener noreferrer" for security
_parent:
- Opens in parent frame
- Used with iframes
_top:
- Opens in full window body
- Breaks out of all frames
Examples:
html
<!-- Opens in same tab -->
<a href="about.html" target="_self">About Us</a>
<!-- Opens in new tab (secure way) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Visit Example
</a>
<!-- Opens in parent frame -->
<a href="page.html" target="_parent">Parent Frame</a>
<!-- Opens in full window -->
<a href="page.html" target="_top">Top Window</a>
<!-- Named target (opens in specific window/frame) -->
<a href="page.html" target="myWindow">Open in My Window</a>
Security Best Practice:
html
<!-- Always use rel="noopener noreferrer" with target="_blank" -->
<a href="https://external-site.com"
target="_blank"
rel="noopener noreferrer">
External Link
</a>
20. What are semantic HTML5 multimedia elements?
Answer: HTML5 introduced native support for audio and video without needing plugins like Flash.
Video Element:
html
<video width="640" height="360" controls poster="preview.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<!-- Fallback text -->
Your browser doesn't support video playback.
</video>
Video Attributes:
- controls - Shows play, pause, volume controls
- autoplay - Starts playing automatically
- loop - Repeats the video
- muted - Mutes the audio
- poster - Image shown before video plays
- preload - How the video should be loaded
Audio Element:
html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser doesn't support audio playback.
</audio>
Complete Example with JavaScript Control:
html
<video id="myVideo" width="640" height="360">
<source src="video.mp4" type="video/mp4">
</video>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<script>
let video = document.getElementById('myVideo');
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
</script>
CSS Interview Questions (25+ Questions)
21. What is CSS and what are the different ways to add CSS to HTML?
Answer: CSS (Cascading Style Sheets) is used to style and design HTML elements. It controls colors, fonts, layouts, spacing, and animations.
Three Ways to Add CSS:
1. Inline CSS (Directly in HTML element):
html
<p style="color: red; font-size: 18px;">This is inline CSS</p>
- Highest priority
- Hard to maintain
- Use only for quick testing
2. Internal CSS (Inside <style> tag in <head>):
html
<head>
<style>
p {
color: blue;
font-size: 16px;
}
.highlight {
background-color: yellow;
}
</style>
</head>
- Good for single-page styling
- Keeps styles organized
3. External CSS (Separate .css file):
html
<head>
<link rel="stylesheet" href="styles.css">
</head>
Styles.css:
css
p {
color: green;
font-size: 16px;
}
.highlight {
background-color: yellow;
}
- Best practice for multiple pages
- Reusable and maintainable
- Caches for better performance
22. Explain the CSS Box Model.
Answer: The CSS Box Model is fundamental to understanding layout. Every HTML element is basically a box with four parts.
Four Parts of Box Model:
- Content - The actual content (text, images)
- Padding - Space between content and border
- Border - Line around padding
- Margin - Space outside border
Practical Example:
css
.box {
width: 300px; /* Content width */
height: 200px; /* Content height */
padding: 20px; /* Space inside */
border: 5px solid black; /* Border line */
margin: 30px; /* Space outside */
}
/* Total width = 300 + 20 + 20 + 5 + 5 + 30 + 30 = 410px */
/* Total height = 200 + 20 + 20 + 5 + 5 + 30 + 30 = 310px */
Box-sizing Property:
css
/* Default behavior */
.box-standard {
box-sizing: content-box; /* Width = content only */
}
/* Modern approach (better) */
.box-border {
box-sizing: border-box; /* Width = content + padding + border */
width: 300px; /* Total width stays 300px */
}
Best Practice:
css
/* Apply to all elements */
* {
box-sizing: border-box;
}
23. What is the difference between display: none and visibility: hidden?
Answer: Both hide elements but work differently.
display: none;
- Completely removes element from page flow
- Takes up no space
- Like the element doesn't exist
- Affects layout of other elements
visibility: hidden;
- Hides element but keeps its space
- Takes up space on the page
- Other elements don't move
- Element is invisible but still there
Practical Example:
html
<div class="container">
<div class="box">Box 1</div>
<div class="box display-none">Box 2 (display: none)</div>
<div class="box">Box 3</div>
</div>
<div class="container">
<div class="box">Box 1</div>
<div class="box visibility-hidden">Box 2 (visibility: hidden)</div>
<div class="box">Box 3</div>
</div>
CSS:
css
.display-none {
display: none; /* Box 3 moves up to where Box 2 was */
}
.visibility-hidden {
visibility: hidden; /* Box 3 stays in place, empty space remains */
}
When to Use:
- Use display: none when you want other elements to move up
- Use visibility: hidden when you want to keep the layout
24. What is Flexbox and why is it used?
Answer: Flexbox (Flexible Box Layout) is a modern CSS layout system used to create flexible and responsive layouts easily.
It helps align items horizontally or vertically without using floats.
Use cases:
Centering items
Creating responsive navigation bars
Equal-height cards
Example:
css
.container {
display: flex;
justify-content: center;
align-items: center;
}
25. What is CSS Grid and how is it different from Flexbox?
Answer: CSS Grid is a two-dimensional layout system (rows + columns), while Flexbox is one-dimensional (row or column).
Grid Example:
css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
Use Grid when layout needs rows + columns;
Use Flexbox when layout flows in a single direction.
26. What is the difference between padding and margin?
Padding: Inside space between content and border
Margin: Outside space around the element
css
[ margin ]
[ border ]
[ padding ]
[ content ]
Trick:
Padding = inside, Margin = outside
27. What are pseudo-classes and pseudo-elements?
Pseudo-class: Applies styling to a specific state
Example:
css
button:hover {
background: blue;
}
Pseudo-element: Styles a part of an element
Example:
css
p::first-letter {
font-size: 40px;
}
28. What is specificity in CSS?
Specificity decides which CSS rule wins when multiple rules apply.
Priority Order (low → high):
- Element selectors (p, h1)
- Class selectors (.btn)
- ID selectors (#header)
- Inline styles
- !important (highest)
Example:
css
p { color: blue; }
#text { color: red; }
ID wins → text becomes red.
Additional JavaScript Interview Questions
29. What is the difference between let, var, and const?
var – function-scoped, can be re-declared
let – block-scoped, cannot be re-declared
const – block-scoped, value cannot be changed
Example:
javascript
let x = 10;
const y = 20;
var z = 30;
30. What is the DOM in JavaScript?
DOM = Document Object Model
It represents HTML as a tree structure so JavaScript can manipulate it.
Example:
javascript
document.getElementById("title").innerText = "Hello!";
31. What is an event listener?
Event listeners let JavaScript run code when something happens.
Example:
javascript
button.addEventListener("click", function () {
alert("Button clicked!");
});
32. What is the difference between == and === ?
== compares values (loose comparison)
=== compares values + data types (strict comparison)
Example:
javascript
"5" == 5 // true
"5" === 5 // false
33. What is a callback function?
A callback is a function passed as an argument to another function.
Example:
javascript
function greet(name, callback) {
callback();
console.log("Hello " + name);
}
greet("John", function() {
console.log("Welcome!");
});
34. What is asynchronous JavaScript?
JavaScript is single-threaded but can run asynchronous tasks using:
- setTimeout
- Promises
- async/await
- API calls
Example:
javascript
setTimeout(() => console.log("Done"), 1000);
35. What are Promises in JavaScript?
A Promise handles asynchronous operations.
Example:
javascript
let p = new Promise((resolve, reject) => {
resolve("Success");
});
p.then(res => console.log(res));
36. What is async/await in JavaScript?
It is a cleaner way to work with Promises.
Example:
javascript
async function fetchData() {
let response = await fetch("https://api.com/data");
let data = await response.json();
console.log(data);
}
37. What is hoisting in JavaScript?
JavaScript moves variable and function declarations to the top before execution.
Example:
javascript
console.log(a);
var a = 10;
Result → undefined (because declaration is hoisted)
38. What is the difference between null and undefined?
undefined → variable declared but no value
null → intentionally empty value set by programmer
Example:
javascript
let x; // undefined
let y = null; // null
Conclusion
Preparing for web development interviews becomes much easier when you understand the core concepts of HTML, CSS, and JavaScript. These 22+ interview questions and answers cover the basics to advanced topics that companies frequently ask in 2026. Whether you are a fresher starting your coding journey or an experienced developer upgrading your skills, these questions will help you build confidence and improve your technical knowledge.
Remember, the key to cracking any interview is practice — try writing small codes, build mini projects, and revise these concepts regularly. With the right preparation and clarity, you can easily succeed in your next HTML, CSS, and JavaScript interview.
