HTML, CSS, and JavaScript Interview Questions
HTML Questions
Beginner
Q: What does HTML stand for?
A: HyperText Markup Language.
Q: What is the purpose of the <head> tag?
A: To contain metadata and links to external resources (e.g., stylesheets, scripts).
Q: What is the difference between <div> and <span>?
A: <div> is a block-level element, whereas <span> is an inline element.
Q: What is the purpose of the alt attribute in the <img> tag?
A: To provide alternative text for the image if it fails to load or for accessibility.
Q: Write the basic structure of an HTML document.
A: <!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Welcome to HTML</h1>
</body>
</html>
Intermediate
Q: What is semantic HTML? Provide examples.
A: Semantic HTML uses elements that convey meaning. Examples include <article>,
<section>, <header>, <footer>, <main>.
Q: What is the purpose of the <meta> tag?
A: To provide metadata such as character encoding, viewport settings, and author
information.
Q: What does the data-* attribute do? Provide an example.
A: It allows custom data attributes. Example: <div data-user-id="123">John Doe</div>
Q: How do you include external JavaScript files in an HTML document?
A: Using the <script src="script.js"></script> tag.
Q: How does the <iframe> tag work? Provide an example.
A: It embeds another HTML document within the current one. Example: <iframe
src="https://example.com" width="600" height="400"></iframe>
Advanced
Q: What is the difference between <script> placed in <head> and <body>?
A: Scripts in <head> load before rendering content, potentially delaying it, while scripts in
<body> execute after content is rendered.
Q: Explain the concept of progressive enhancement in HTML.
A: It ensures basic functionality works in older browsers while adding advanced features
for newer ones.
Q: How does the <picture> tag improve responsive design?
A: It allows different images to be loaded based on conditions like screen size or resolution.
Q: What are the limitations of the <canvas> tag?
A: It does not retain drawing history and is purely pixel-based, making accessibility difficult.
Q: What is the difference between a name and id attribute?
A: name is used for form controls, while id uniquely identifies elements.
CSS Questions
Beginner
Q: What does CSS stand for?
A: Cascading Style Sheets.
Q: What are the different types of CSS?
A: Inline, internal, and external.
Q: What is the difference between relative and absolute positioning?
A: relative positions an element relative to its normal position; absolute positions it relative
to its nearest positioned ancestor.
Q: What is the z-index property?
A: It controls the stacking order of elements.
Q: Write the CSS to change the background color of all <p> tags to blue.
A: p { background-color: blue; }
Intermediate
Q: What are pseudo-classes? Provide examples.
A: Pseudo-classes define the special state of elements. Example: :hover, :focus, :nth-child(n).
Q: What is the difference between em and rem units?
A: em is relative to the parent element, while rem is relative to the root element.
Q: What is a media query? Provide an example.
A: It is used to apply styles based on device characteristics. Example:
@media (max-width: 768px) { body { font-size: 14px; } }
Q: What is the difference between inline, block, and inline-block elements?
A: inline doesn’t start on a new line; block does. inline-block allows inline placement with
block-like properties.
Q: How does the float property work?
A: It positions elements to the left or right, allowing other content to wrap around it.
Advanced
Q: What is the difference between position: sticky and position: fixed?
A: sticky toggles between relative and fixed based on scroll, while fixed is always relative to
the viewport.
Q: What is the difference between visibility: hidden and display: none?
A: visibility: hidden hides the element but keeps space reserved; display: none removes the
element and its space.
Q: What are CSS grid and flexbox used for?
A: Flexbox is for 1D layouts (rows/columns), while Grid is for 2D layouts.
Q: How do you achieve a responsive design using CSS?
A: By using media queries, relative units (%, em, rem), and responsive frameworks like
Bootstrap.
Q: What is the purpose of the content property in CSS?
A: It is used to insert content, typically with ::before or ::after pseudo-elements.
JavaScript Questions
Beginner
Q: What are the data types in JavaScript?
A: String, Number, Boolean, Undefined, Null, Symbol, Object.
Q: What is the difference between var, let, and const?
A: var is function-scoped, let and const are block-scoped; const cannot be reassigned.
Q: What is the output of console.log(typeof null)?
A: object.
Q: How do you declare a function in JavaScript?
A: function greet() { console.log("Hello!"); }
Q: What is an array in JavaScript? Provide an example.
A: It is a collection of elements. Example: let fruits = ['apple', 'banana', 'cherry'];
Intermediate
Q: What is the difference between == and ===?
A: == checks for value equality, while === checks for value and type equality.
Q: What are closures in JavaScript?
A: Functions that remember variables from their lexical scope.
Q: What is an IIFE? Provide an example.
A: Immediately Invoked Function Expression. Example: (function() { console.log('IIFE
executed'); })();
Q: What is the purpose of promises?
A: To handle asynchronous operations.
Q: What is the output of the following code? console.log(0.1 + 0.2 === 0.3);
A: false.
Advanced
Q: Explain the event loop in JavaScript.
A: It handles asynchronous operations by placing callbacks in a queue and executing them
when the call stack is empty.
Q: What is this in JavaScript?
A: It refers to the context in which a function is executed.
Q: What is hoisting in JavaScript?
A: Variables and functions are moved to the top of their scope during compilation.
Q: Explain how async/await works.
A: It simplifies promises, allowing asynchronous code to look synchronous.
Q: What is the difference between call, apply, and bind?
A: call: Invokes a function with arguments passed individually. apply: Invokes a function
with arguments passed as an array. bind: Returns a new function with a bound context.
