Scribd
Upload
2 views

HTML_CSS_JS_Questions

The document contains a comprehensive list of interview questions and answers related to HTML, CSS, and JavaScript, categorized into beginner, intermediate, and advanced levels. It covers fundamental concepts, differences between elements and properties, and advanced programming techniques. Each section provides clear definitions and examples to aid understanding.

Uploaded by

vaibhavcynoteck1010
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

HTML_CSS_JS_Questions

The document contains a comprehensive list of interview questions and answers related to HTML, CSS, and JavaScript, categorized into beginner, intermediate, and advanced levels. It covers fundamental concepts, differences between elements and properties, and advanced programming techniques. Each section provides clear definitions and examples to aid understanding.

Uploaded by

vaibhavcynoteck1010
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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.

You might also like