HTML, CSS, and JavaScript Interview Questions for
Beginners
HTML Questions
1. What is HTML?
Answer: HTML (HyperText Markup Language) is the standard markup language used to create web
pages. It describes the structure of a webpage using elements represented by tags.
Follow-up Question: Can you name some common HTML tags?
Answer: Common HTML tags include <html>, <head>, <title>, <body>, <h1> to <h6>, <p>, <a>,
<img>, <div>, <span>, <ul>, <ol>, <li>, and <table>.
2. What is the purpose of the <head> tag in HTML?
Answer: The <head> tag contains meta-information about the HTML document, such as the document
title, character set, stylesheets, and scripts.
Follow-up Question: What is the role of the <title> tag within the <head> tag?
Answer: The <title> tag defines the title of the HTML document, which is displayed on the browser's
title bar or tab.
3. What are the semantic elements in HTML5?
Answer: Semantic elements in HTML5 provide meaning to the web page content. Examples include
<header>, <nav>, <section>, <article>, <aside>, and <footer>.
Follow-up Question: Why are semantic elements important?
Answer: Semantic elements improve the accessibility and SEO of web pages by providing clear structure
and meaning to the content.
4. What is the difference between <div> and <span>?
Answer: <div> is a block-level element used to group larger sections of content, while <span> is an
inline element used to group small pieces of content within a block.
Follow-up Question: Can you provide an example of using both <div> and <span>?
Answer:
<div>
<p>This is a paragraph.</p>
<span>This is a span within a div.</span>
</div>
5. How do you create a hyperlink in HTML?
Answer: You create a hyperlink using the <a> tag with the href attribute. For example:
<a href="[Link] Example</a>
Follow-up Question: How can you open a link in a new tab?
Answer: You can open a link in a new tab by adding the target="_blank" attribute to the <a> tag. For
example:
<a href="[Link] target="_blank">Visit Example</a>
6. What are HTML forms used for?
Answer: HTML forms are used to collect user input and submit it to a server for processing.
Follow-up Question: Can you name some common form elements?
Answer: Common form elements include <input>, <textarea>, <select>, <option>, <button>,
and <label>.
CSS Questions
1. What is CSS?
Answer: CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of an
HTML document, including its layout, colors, fonts, and overall look and feel.
Follow-up Question: How do you include CSS in an HTML document?
Answer: CSS can be included in an HTML document in three ways: inline styles using the style
attribute, internal styles using the <style> tag within the <head>, and external styles using the <link>
tag to reference an external CSS file.
2. What is the difference between classes and IDs in CSS?
Answer: Classes and IDs are both used to apply styles to elements, but IDs are unique within a page and
are denoted by #, whereas classes can be reused on multiple elements and are denoted by ..
Follow-up Question: Can an element have both a class and an ID?
Answer: Yes, an element can have both a class and an ID. For example:
<div id="unique" class="common"></div>
3. What is the box model in CSS?
Answer: The box model describes the structure of an element as a rectangular box, consisting of the
content, padding, border, and margin.
Follow-up Question: How would you adjust the space between elements using the box model?
Answer: You can adjust the space between elements by modifying the margin and padding properties in
CSS.
4. What are pseudo-classes in CSS?
Answer: Pseudo-classes are used to define the special state of an element. For example, :hover
applies a style when the user hovers over an element.
Follow-up Question: Can you give an example of using a pseudo-class?
Answer:
a:hover {
color: red;
}
5. What is Flexbox in CSS?
Answer: Flexbox is a CSS layout module designed to provide a more efficient way to lay out, align, and
distribute space among items in a container.
Follow-up Question: Can you give an example of a simple Flexbox layout?
Answer:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
padding: 10px;
background-color: lightblue;
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
6. How do you make a website responsive?
Answer: You can make a website responsive by using responsive design techniques, such as flexible grid
layouts, media queries, and flexible images.
Follow-up Question: Can you provide an example of a media query?
Answer:
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
JavaScript Questions
1. What is JavaScript?
Answer: JavaScript is a scripting language used to create and control dynamic content on websites, such
as interactive forms, animations, and responsive navigation menus.
Follow-up Question: How do you include JavaScript in an HTML document?
Answer: JavaScript can be included in an HTML document using the <script> tag. It can be embedded
directly within the HTML or referenced as an external file.
2. What is the difference between var, let, and const in JavaScript?
Answer: var is function-scoped and can be re-declared. let is block-scoped and cannot be re-declared
within the same block. const is block-scoped and cannot be re-assigned after its initial assignment.
Follow-up Question: Why might you choose let or const over var?
Answer: let and const provide better control over variable scope and help prevent bugs related to
variable re-declaration and re-assignment.
3. What are functions in JavaScript and how do you define one?
Answer: Functions are reusable blocks of code designed to perform a specific task. They can be defined
using the function keyword followed by a name, parameters, and a block of code.
Example:
function greet(name) {
return "Hello, " + name;
}
Follow-up Question: Can you define an anonymous function? How is it different from a named function?
Answer: An anonymous function is a function without a name, often used as a callback or assigned to a
variable. Example:
const greet = function(name) {
return "Hello, " + name;
};
4. What is the DOM in JavaScript?
Answer: The DOM (Document Object Model) is a programming interface for HTML documents. It
represents the page structure as a tree of nodes, allowing JavaScript to manipulate the content and
structure of web pages.
Follow-up Question: How do you select an element from the DOM?
Answer: You can select elements using methods like getElementById, getElementsByClassName,
getElementsByTagName, querySelector, and querySelectorAll.
5. What are event listeners in JavaScript?
Answer: Event listeners are functions that execute in response to specific events, such as clicks, mouse
movements, or key presses. They can be added to elements using the addEventListener method.
Example:
[Link]("myButton").addEventListener("