HTML Interview Questions
1. What is HTML?
HTML stands for HyperText Markup Language. It is used to create the structure of a webpage. We use HTML to create headings, paragraphs, images, links, buttons, forms, tables and other elements.
2. What are semantic tags?
Semantic tags tell us what the content is about. Some examples are <header>, <nav>, <main>, <section>, <article> and <footer>.
For example, instead of using a <div> for navigation, we can use <nav>. It makes the code easier to understand and also helps accessibility and SEO.
3. What is the difference between div and span?
div is normally a block-level element and span is normally an inline element.
<div>This is a div</div>
<span>This is a span</span>
A div normally starts from a new line, while a span stays in the same line. But we can change their behavior using CSS.
4. What is the difference between id and class?
An id is normally used for one unique element, while a class can be used for multiple elements.
<div id="header"></div>
<div class="card"></div>
<div class="card"></div>
We use # to select an id and . to select a class in CSS.
CSS Interview Questions
5. What is the CSS Box Model?
The CSS box model explains how the size of an HTML element is calculated.
It contains:
Content → Padding → Border → Margin
For example:
.box {
padding: 20px;
border: 2px solid black;
margin: 10px;
}
Understanding the box model is very important because it helps us understand why an element is taking more or less space than expected.
6. What is CSS specificity?
Sometimes multiple CSS rules are applied to the same element. Specificity decides which rule gets higher priority.
A simple order to remember is:
Inline style > ID > Class > Element
For example:
p {
color: blue;
}
.text {
color: red;
}
If a paragraph has the text class, the class selector normally has higher specificity than the element selector.
This becomes especially important when we work with Bootstrap and try to override its styles.
7. What is Flexbox?
Flexbox is a CSS layout system used to arrange elements in a row or column.
.container {
display: flex;
}
Some important Flexbox properties are:
justify-content
align-items
flex-direction
flex-wrap
gap
Flexbox is very useful for creating navigation bars, cards, buttons and for centering elements.
8. What is the difference between justify-content and align-items?
This is one of the questions that can easily confuse beginners.
In the default flex-direction: row:
justify-content works on the main axis, which is normally horizontal.
align-items works on the cross axis, which is normally vertical.
For example:
.container {
display: flex;
justify-content: center;
align-items: center;
}
This can be used to center an element horizontally and vertically.
9. What is flex-wrap?
Normally, flex items try to stay in one line. If we want the items to move to the next line when there is not enough space, we use flex-wrap.
.container {
display: flex;
flex-wrap: wrap;
}
This is very useful when creating responsive card layouts.
10. What is the difference between relative and absolute positioning?
position: relative keeps the element in the normal document flow and can also create a positioning reference for its descendants.
position: absolute removes the element from the normal document flow and positions it relative to the nearest positioned ancestor.
A common example is:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
Here, the child is positioned relative to the parent.
11. What are media queries?
Media queries allow us to apply different CSS styles depending on conditions such as screen width.
For example:
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
This is one of the main techniques used to make websites responsive.
12. What is responsive web design?
Responsive web design means making a website work properly on different screen sizes like mobile, tablet and desktop.
We can use:
- Flexbox
- CSS Grid
- Media queries
- Relative units
- Responsive images
- Bootstrap's responsive grid
The main goal is that the website should adapt instead of creating a completely separate website for every device.
13. What is the difference between %, vw, em and rem?
These are different relative CSS units.
% is usually relative to another size such as the parent's size.
vw means viewport width.
em is relative to the font size of the relevant element or context.
rem is relative to the root HTML element's font size.
For example:
.box {
width: 50%;
font-size: 2rem;
}
We should choose the unit based on what we are trying to achieve instead of using one unit everywhere.
14. What is the difference between display: none, visibility: hidden and opacity: 0?
These three can make an element invisible, but they behave differently.
display: none removes the element from the layout.
visibility: hidden hides the element but its space is still reserved.
opacity: 0 makes the element completely transparent, but the element normally remains in the layout and can still interact with the user depending on other CSS.
This is a very common practical interview question.
Bootstrap Interview Questions
15. What is Bootstrap?
Bootstrap is a frontend framework that provides ready-made CSS classes and components.
For example, instead of writing all the CSS for a button ourselves, we can use:
<button class="btn btn-primary">
Click Me
</button>
Bootstrap helps us build websites faster, especially when creating responsive layouts.
16. What is the Bootstrap grid system?
Bootstrap uses a 12-column grid system.
For example:
<div class="row">
<div class="col-6">A</div>
<div class="col-6">B</div>
</div>
Here, each column takes 6 out of 12 columns, so we get two equal sections.
If we use col-2:
12 ÷ 2 = 6
So six col-2 elements can fit into one row when enough space is available.
17. What are container, row and col in Bootstrap?
These are commonly used together to create a Bootstrap layout.
<div class="container">
<div class="row">
<div class="col-6">
Content
</div>
<div class="col-6">
Content
</div>
</div>
</div>
container provides the main layout container.
row creates the row.
col-* controls how much width each column takes in the 12-column grid.
18. What are Bootstrap responsive classes?
Bootstrap provides responsive classes that allow an element to have different widths at different breakpoints.
For example:
<div class="col-12 col-md-6 col-lg-4">
This can mean:
- Small screens → 12 columns
- Medium screens → 6 columns
- Large screens → 4 columns
This makes responsive layouts much easier to create.
19. How can we override Bootstrap CSS?
We can write our own CSS after loading Bootstrap.
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="style.css">
Then we can write our custom style in style.css.
.my-button {
background-color: black;
}
If there is a conflict, CSS specificity, source order and sometimes !important can affect which style wins.
We should not use !important everywhere because it can make the CSS difficult to manage.
20. What is the difference between Bootstrap and CSS?
CSS is the actual styling language used to style webpages.
Bootstrap is a framework built mainly using CSS, along with JavaScript components.
With normal CSS, we write our own styles:
button {
background-color: blue;
padding: 10px 20px;
}
With Bootstrap, we can use ready-made classes:
<button class="btn btn-primary">
Click
</button>
So Bootstrap doesn't replace CSS completely. Understanding CSS is still important even when using Bootstrap.
