Master HTML5 and modern CSS with 100 essential interview questions and easy-to-understand answers. From HTML semantics, accessibility, forms, DOM, browser storage and Canvas/SVG to the CSS Box Model, Flexbox, Grid, positioning, responsive design, animations, performance optimization, Tailwind CSS and modern CSS features—this handbook brings the most important frontend concepts together in one practical guide.
Whether you're a beginner learning web development, a frontend developer preparing for an interview, a computer science student, or a software-engineering candidate preparing for placements, these 100 questions can help you strengthen both your fundamentals and your interview confidence.
📚 CHAPTER 1 — HTML FOUNDATIONS & DOCUMENT STRUCTURE
Questions 1–10
Q1. What does <!DOCTYPE html> do?
Answer:
<!DOCTYPE html> tells the browser that the document should be interpreted using the modern HTML standard.
In HTML5, it also helps the browser render the page in Standards Mode rather than legacy Quirks Mode.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Interview tip: Remember that DOCTYPE is a declaration, not a normal HTML element.
Q2. What is Semantic HTML and why is it important?
Answer:
Semantic HTML uses elements according to their meaning and purpose, rather than using generic containers for everything.
Instead of:
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>
you can use:
<header></header>
<nav></nav>
<main></main>
<footer></footer>
Semantic HTML can improve:
Accessibility
Document structure
Maintainability
Search-engine understanding
Screen-reader navigation
Q3. What is the difference between <div> and <span>?
Answer:
<div> is a generic block-level container, while <span> is a generic inline container.
<div>This is a block container.</div>
<p>This is <span>inline text</span> inside a paragraph.</p>
A <div> normally starts on a new line, whereas a <span> normally remains within the surrounding text flow.
Q4. What are HTML meta tags?
Answer:
Meta tags provide information about an HTML document to browsers, search engines and other user agents.
They are placed inside <head>.
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Learn HTML and CSS interview questions.">
Common uses include:
Character encoding
Viewport configuration
Page descriptions
Browser behavior
Other document-level metadata
Q5. What is the DOM?
Answer:
DOM stands for Document Object Model.
The browser converts an HTML document into a tree-like object structure that JavaScript can access and manipulate.
A simplified structure looks like:
Window
└── Document
└── html
├── head
└── body
├── header
└── main
JavaScript can use the DOM to add, remove or modify elements and content.
Q6. What is the difference between an HTML element and an HTML attribute?
Answer:
An element represents a component of an HTML document.
An attribute provides additional information about that element.
<a href="https://example.com" class="button">
Visit Website
</a>
Here:
<a> is the element.
href is an attribute.
class is an attribute.
"button" is the attribute value.
Q7. What is the difference between an id and a class?
Answer:
An id identifies a particular element, while a class can be reused across multiple elements.
<div id="header"></div>
<p class="text"></p>
<p class="text"></p>
CSS:
#header {
background: black;
}
.text {
font-size: 18px;
}
An id should generally be unique within a document. Classes are intended for reusable styling and grouping.
Q8. What is the purpose of the alt attribute?
Answer:
The alt attribute provides alternative text for an image.
<img src="laptop.jpg"
alt="Laptop computer on a desk">
It is particularly useful when:
The image cannot load.
A screen reader is interpreting the page.
The image needs a textual description.
For meaningful images, write concise and descriptive alternative text.
Q9. What is the difference between <b> and <strong>?
Answer:
<b> traditionally represents text that should be visually distinguished without adding special importance.
<strong> indicates that the content has strong importance.
<b>Important</b>
<strong>Warning: Save your work.</strong>
Similarly, <i> is generally stylistic, while <em> conveys emphasis.
Q10. What are void elements in HTML?
Answer:
Void elements do not contain child content and do not require closing tags.
Examples include:
<img>
<br>
<hr>
<input>
<meta>
<link>
For example:
<img src="photo.jpg" alt="Mountain">
📚 CHAPTER 2 — LINKS, MEDIA, TABLES & HTML STRUCTURE
Questions 11–20
Q11. What is an <iframe>?
Answer:
An <iframe> embeds another HTML document or external resource inside the current page.
<iframe
src="https://example.com"
title="Example content">
</iframe>
Common uses include embedded maps, videos and other external content.
Q12. What is a favicon?
Answer:
A favicon is the small icon associated with a website, commonly displayed in a browser tab.
<link rel="icon" href="/favicon.ico">
Q13. What is the difference between <link> and <a>?
Answer:
<link> generally declares a relationship between the current document and an external resource.
<link rel="stylesheet" href="styles.css">
<a> creates a clickable hyperlink.
<a href="/about">About Us</a>
Q14. What is the difference between absolute and relative URLs?
Answer:
An absolute URL contains the complete web address:
https://example.com/images/logo.png
A relative URL describes a resource relative to the current document:
images/logo.png
../images/logo.png
Relative paths are commonly useful when linking resources within the same website.
Q15. Why can target="_blank" require security considerations?
Answer:
When opening another page in a new browsing context, it is good practice to use:
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer">
Open Website
</a>
noopener prevents the opened page from accessing the opener through window.opener.
Q16. What are data-* attributes?
Answer:
data-* attributes allow developers to store custom data on HTML elements.
<button
data-product-id="123"
data-category="books">
Buy
</button>
JavaScript can access them through dataset:
button.dataset.productId;
Q17. What is the difference between <ol> and <ul>?
Answer:
<ol> creates an ordered list:
<ol>
<li>First</li>
<li>Second</li>
</ol>
<ul> creates an unordered list:
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
Use <ol> when sequence matters and <ul> when it does not.
Q18. How is an HTML table structured?
Answer:
A typical table uses:
<table> — table container
<tr> — table row
<th> — header cell
<td> — data cell
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alex</td>
<td>25</td>
</tr>
</table>
Q19. What are <thead>, <tbody> and <tfoot>?
Answer:
They divide a table into logical sections.
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Book</td>
<td>$20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$20</td>
</tr>
</tfoot>
</table>
This improves organization and can help assistive technologies understand table structure.
Q20. What is the difference between block, inline and inline-block elements?
Answer:
Block: Normally starts on a new line and can occupy available horizontal space.
Inline: Remains within the text flow and generally does not accept width and height in the same way as block-level boxes.
Inline-block: Flows inline while allowing width and height to be applied.
.block {
display: block;
}
.inline {
display: inline;
}
.inline-box {
display: inline-block;
}
📚 CHAPTER 3 — HTML STORAGE, GRAPHICS & ACCESSIBILITY
Questions 21–30
Q21. What is localStorage?
Answer:
localStorage provides client-side key-value storage that normally persists after the browser tab or window is closed.
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
It is suitable for non-sensitive client-side preferences and other appropriate data.
Q22. What is sessionStorage?
Answer:
sessionStorage stores key-value data associated with a browser tab's session.
sessionStorage.setItem("step", "2");
The data is generally cleared when that browsing session ends.
Q23. What is the difference between localStorage, sessionStorage and cookies?
Answer:
Feature
localStorage
sessionStorage
Cookies
Persistence
Usually persistent
Session/tab lifetime
Configurable
Sent automatically with HTTP requests
No
No
Yes, when applicable
Typical capacity
Larger than cookies
Larger than cookies
Small
JavaScript access
Yes
Yes
Usually yes unless HttpOnly
Common use
Preferences
Temporary session data
Server-related state
Do not store sensitive information in browser storage simply because it is convenient.
Q24. What is the difference between Canvas and SVG?
Answer:
Canvas uses a drawing surface where graphics are commonly rendered through JavaScript.
SVG represents graphics as vector elements that are part of the document structure.
Canvas is often useful for:
Games
Simulations
Pixel-based drawing
Frequent graphical updates
SVG is often useful for:
Logos
Icons
Scalable illustrations
Interactive vector graphics
Charts
Q25. What is ARIA?
Answer:
ARIA stands for Accessible Rich Internet Applications.
ARIA provides additional accessibility semantics for situations where native HTML does not adequately describe a custom interactive component.
Example:
<div
role="switch"
aria-checked="true"
tabindex="0">
Dark Mode
</div>
Whenever possible, prefer native semantic HTML before adding ARIA.
Q26. What is an ARIA role?
Answer:
An ARIA role communicates what an interface element represents to assistive technologies.
Examples include:
role="button"
role="dialog"
role="navigation"
role="tab"
However, a native <button> is generally preferable to creating a <div role="button"> when a normal button meets the requirement.
Q27. Why is accessibility important in HTML?
Answer:
Accessibility helps people with different abilities interact with websites.
Important practices include:
Semantic HTML
Descriptive image alternatives
Proper form labels
Keyboard accessibility
Logical heading structure
Appropriate focus behavior
Sufficient color contrast
Q28. What is the purpose of the lang attribute?
Answer:
The lang attribute identifies the primary language of a document.
<html lang="en">
This can help browsers, search engines and assistive technologies interpret the content appropriately.
Q29. What is the purpose of the title attribute?
Answer:
The title attribute can provide additional advisory information about an element.
<button title="Save your document">
Save
</button>
It should not be treated as a replacement for accessible labels or instructions.
Q30. Why should heading elements be used in logical order?
Answer:
Headings communicate the structure of a document.
<h1>Main Title</h1>
<h2>Chapter</h2>
<h3>Section</h3>
A logical heading hierarchy improves readability and helps assistive technologies navigate content.
📚 CHAPTER 4 — HTML FORMS & USER INPUT
Questions 31–40
Q31. What is the <form> element?
Answer:
<form> groups controls used to collect and submit user input.
<form action="/login" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email">
<button type="submit">Login</button>
</form>
Q32. What is the difference between GET and POST?
Answer:
GET commonly sends form data as part of the URL query string.
/search?query=html
POST sends the submitted data in the HTTP request body.
POST is commonly used when submitting larger or state-changing data.
Important: POST by itself does not make sensitive information secure. HTTPS is required to protect data in transit.
Q33. Why is the <label> element important?
Answer:
A label associates descriptive text with a form control.
<label for="email">Email Address</label>
<input id="email" type="email">
Clicking the label can activate or focus the associated control, improving usability and accessibility.
Q34. What is the difference between radio buttons and checkboxes?
Answer:
Radio buttons normally allow one selection within a group:
<input type="radio" name="plan" value="basic">
<input type="radio" name="plan" value="pro">
Checkboxes allow independent selections:
<input type="checkbox" name="feature" value="email">
<input type="checkbox" name="feature" value="sms">
Q35. What are HTML5 input types?
Answer:
HTML provides specialized input types such as:
<input type="email">
<input type="number">
<input type="date">
<input type="time">
<input type="tel">
<input type="url">
<input type="search">
They can provide appropriate browser validation and, on mobile devices, context-appropriate input interfaces.
Q36. What is the required attribute?
Answer:
required tells the browser that a field must contain an acceptable value before the form can be submitted.
<input
type="email"
required>
This provides native client-side validation.
Q37. What are min, max, minlength and maxlength?
Answer:
These attributes provide constraints for form controls.
<input
type="number"
min="1"
max="100">
For text:
<input
type="text"
minlength="3"
maxlength="30">
Q38. What is the <textarea> element?
Answer:
<textarea> creates a multi-line text input.
<textarea
name="message"
rows="5"
cols="30">
</textarea>
It is commonly used for comments, messages and descriptions.
Q39. What is the <select> element?
Answer:
<select> creates a dropdown selection control.
<select name="country">
<option value="bd">Bangladesh</option>
<option value="us">United States</option>
</select>
Q40. What is the <datalist> element?
Answer:
<datalist> provides suggested options for an input while still allowing the user to enter another value.
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
It differs from <select> because the input is not necessarily restricted to the listed suggestions.
📚 CHAPTER 5 — CSS FOUNDATIONS & THE BOX MODEL
Questions 41–50
Q41. What is CSS?
Answer:
CSS stands for Cascading Style Sheets.
It controls the visual presentation and layout of HTML documents.
h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
Q42. What are the three main ways to apply CSS?
Answer:
Inline CSS
Internal CSS
External CSS
External CSS is commonly preferred for maintainability:
<link rel="stylesheet" href="styles.css">
Q43. What is the CSS Box Model?
Answer:
Every CSS box can be understood through four major layers:
┌──────────────────────────────┐
│ MARGIN │
│ ┌────────────────────────┐ │
│ │ BORDER │ │
│ │ ┌──────────────────┐ │ │
│ │ │ PADDING │ │ │
│ │ │ ┌────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ └────────────┘ │ │ │
│ │ └──────────────────┘ │ │
│ └────────────────────────┘ │
└──────────────────────────────┘
The layers are:
Content
Padding
Border
Margin
Q44. What is the difference between content-box and border-box?
Answer:
With:
box-sizing: content-box;
the declared width normally applies to the content area, with padding and border added outside it.
With:
box-sizing: border-box;
the declared width includes content, padding and border.
A common global approach is:
*,
*::before,
*::after {
box-sizing: border-box;
}
Q45. What is margin collapse?
Answer:
Vertical margins of certain block-level elements can collapse rather than add together.
For example:
.box-one {
margin-bottom: 30px;
}
.box-two {
margin-top: 20px;
}
In a typical margin-collapsing situation, the resulting vertical separation may be 30px rather than 50px.
Margin collapsing has specific rules and does not occur in every layout context.
Q46. What is the difference between display: none and visibility: hidden?
Answer:
display: none;
removes the element from the layout.
visibility: hidden;
makes the element invisible while normally preserving its layout space.
Q47. What is CSS specificity?
Answer:
Specificity determines which competing CSS declaration has greater priority.
A simplified hierarchy is:
Inline styles
ID selectors
Class / attribute / pseudo-class selectors
Element / pseudo-element selectors
For example:
#title {
color: red;
}
.title {
color: blue;
}
The ID selector generally has greater specificity.
Q48. What is the difference between px, em and rem?
Answer:
px: A CSS pixel unit.
em: Relative to the relevant element's font size, with inheritance potentially causing compounding.
rem: Relative to the root element's font size.
Example:
html {
font-size: 16px;
}
.title {
font-size: 2rem;
}
Here, 2rem corresponds to 32px if the root font size is 16px.
Q49. What are CSS pseudo-classes?
Answer:
Pseudo-classes select elements according to their state or position.
Examples:
button:hover {}
input:focus {}
a:active {}
li:nth-child(2) {}
input:checked {}
They use a single colon.
Q50. What are CSS pseudo-elements?
Answer:
Pseudo-elements style a particular part of an element or generate virtual content.
Examples:
.card::before {
content: "";
}
.card::after {
content: "";
}
Other examples include:
::first-letter
::first-line
::placeholder
📚 CHAPTER 6 — FLEXBOX & CSS GRID
Questions 51–60
Q51. What is Flexbox?
Answer:
Flexbox is a CSS layout system designed primarily for arranging elements along one dimension: a row or a column.
.container {
display: flex;
}
It is especially useful for navigation bars, button groups, cards and component-level layouts.
Q52. What are the main axis and cross axis in Flexbox?
Answer:
The main axis is determined by flex-direction.
For:
flex-direction: row;
the main axis runs horizontally and the cross axis runs vertically.
justify-content controls alignment along the main axis, while align-items commonly controls alignment across the cross axis.
Q53. What is the difference between Flexbox and CSS Grid?
Answer:
Flexbox: Primarily one-dimensional layout.
Row OR Column
Grid: Two-dimensional layout.
Rows AND Columns
Flexbox is often useful for component-level alignment, while Grid is particularly useful for larger page or two-dimensional layouts.
Q54. What are the CSS positioning modes?
Answer:
The main position values are:
static
relative
absolute
fixed
sticky
Their general behavior:
static — normal positioning.
relative — remains in flow and can be visually offset.
absolute — removed from normal flow.
fixed — positioned relative to the viewport in typical cases.
sticky — combines normal-flow behavior with scroll-based sticking.
Q55. What does position: relative do?
Answer:
A relatively positioned element remains in normal document flow but can be offset using properties such as:
.box {
position: relative;
top: 10px;
}
It also commonly establishes a positioning reference for absolutely positioned descendan
ts.
Q56. What does position: absolute do?
Answer:
An absolutely positioned element is removed from normal document flow.
It is positioned relative to an appropriate containing block, often established by an ancestor such as:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
Q57. How can you perfectly center an element using Flexbox?
Answer:
.parent {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
This centers the child horizontally and vertically when the flex direction is the default row direction.
Q58. How can you center an element using absolute positioning?
Answer:
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This moves the element's center to the center of its positioning context.
Q59. What are flex-grow, flex-shrink and flex-basis?
Answer:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
flex-grow controls how an item can consume available positive free space.
flex-shrink controls how it can shrink when space is insufficient.
flex-basis establishes the initial main-axis size used during flex sizing.
They can be combined with the flex shorthand.
Q60. What does flex-wrap do?
Answer:
By default, flex items normally remain on one line.
.container {
display: flex;
flex-wrap: wrap;
}
allows items to move onto additional lines when necessary.
Available values include:
nowrap
wrap
wrap-reverse
📚 CHAPTER 7 — CSS GRID, SPACING & LAYOUT ARCHITECTURE
Questions 61–70
Q61. What is the fr unit in CSS Grid?
Answer:
fr represents a fraction of the available grid space.
grid-template-columns: 1fr 2fr 1fr;
The three tracks receive free space in a 1:2:1 ratio after accounting for relevant fixed sizes and gaps.
Q62. What is the difference between gap and margins in Grid/Flexbox?
Answer:
gap creates spacing between layout items.
.container {
display: grid;
gap: 20px;
}
Margins belong to individual boxes and can affect their outer relationships with surrounding content.
gap is often cleaner when the intention is specifically to create gutters between flex or grid items.
Q63. What is z-index?
Answer:
z-index controls the stacking order of elements within their relevant stacking contexts.
.modal {
position: fixed;
z-index: 1000;
}
A larger number does not automatically place an element above everything else because stacking contexts can isolate descendants.
Q64. What is a stacking context?
Answer:
A stacking context is a self-contained layering context used by the browser to determine how elements are painted relative to one another.
Properties and conditions such as certain positioned elements with z-index, transforms, opacity and other CSS features can establish stacking contexts.
A child with:
z-index: 999999;
cannot escape its parent's stacking context and automatically appear above an unrelated stacking context with a higher stacking level.
Q65. What does float do?
Answer:
float moves an element toward the left or right side of its containing block and allows surrounding inline content to flow around it.
.image {
float: left;
margin-right: 20px;
}
Floats were historically used for page layouts but are now less commonly used for modern layout systems because Flexbox and Grid provide more direct layout control.
Q66. What is a clearfix?
Answer:
A clearfix was traditionally used to ensure a container properly encloses floated descendants.
A classic technique is:
.clearfix::after {
content: "";
display: table;
clear: both;
}
Modern layout systems often reduce the need for clearfix techniques.
Q67. What does minmax() do in CSS Grid?
Answer:
minmax() specifies a minimum and maximum size for a grid track.
grid-template-columns:
repeat(auto-fit, minmax(220px, 1fr));
This is a powerful pattern for creating flexible responsive grids.
Q68. What do auto-fit and auto-fill do?
Answer:
They allow Grid to automatically create or fit tracks based on available space.
Example:
grid-template-columns:
repeat(auto-fit, minmax(220px, 1fr));
This can create responsive card layouts without requiring a large collection of media-query breakpoints.
Q69. What are named grid areas?
Answer:
CSS Grid allows developers to name layout regions.
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
Then:
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
Named areas can make complex layouts easier to understand.
Q70. What is subgrid?
Answer:
subgrid allows a nested grid to participate in the track sizing of its parent grid.
Conceptually:
.child {
display: grid;
grid-template-columns: subgrid;
}
It can be useful when nested components need to align with the parent grid's rows or columns.
📚 CHAPTER 8 — RESPONSIVE WEB DESIGN
Questions 71–80
Q71. What is mobile-first CSS?
Answer:
Mobile-first development starts with styles for smaller screens and progressively adds enhancements for larger screens.
.card {
padding: 1rem;
}
@media (min-width: 768px) {
.card {
padding: 2rem;
}
}
This approach can create a clear responsive progression.
Q72. What is the difference between responsive and adaptive design?
Answer:
Responsive design generally allows layouts to fluidly adapt to different screen sizes.
Adaptive design often uses predefined layouts or configurations for particular ranges or device contexts.
Modern websites frequently combine fluid techniques with breakpoints and component-level responsiveness.
Q73. What are vw, vh, vmin, vmax and dynamic viewport units?
Answer:
vw — percentage of viewport width.
vh — percentage of viewport height.
vmin — relative to the smaller viewport dimension.
vmax — relative to the larger viewport dimension.
Modern viewport units also include:
dvh
svh
lvh
These are particularly useful for handling changing mobile browser UI and viewport behavior.
Q74. What is the difference between width and max-width?
Answer:
width: 600px;
can force an element to remain 600px wide.
A more flexible approach is:
width: 100%;
max-width: 600px;
This allows the element to shrink on smaller screens while limiting its maximum width on larger screens.
Q75. How do you make images responsive?
Answer:
img,
video,
canvas {
max-width: 100%;
height: auto;
display: block;
}
height: auto helps preserve the intrinsic aspect ratio when width changes.
Q76. What are CSS custom properties?
Answer:
CSS custom properties are variables that can be reused throughout stylesheets.
:root {
--primary-color: #2563eb;
--surface: #ffffff;
--text: #111827;
}
.button {
background: var(--primary-color);
}
They can also be changed dynamically through CSS or JavaScript.
Q77. How can CSS detect dark-mode preferences?
Answer:
The prefers-color-scheme media feature can respond to the user's operating-system or browser preference.
@media (prefers-color-scheme: dark) {
:root {
--surface: #111827;
--text: #f9fafb;
}
}
Q78. How can you detect whether a device supports hover?
Answer:
Interaction media features can help distinguish pointer capabilities.
@media (hover: hover) and (pointer: fine) {
.card:hover {
transform: translateY(-4px);
}
}
This can prevent hover-only interactions from being unnecessarily applied to touch-oriented environments.
Q79. What is object-fit?
Answer:
object-fit controls how replaced content such as images and videos fits inside a defined box.
img {
width: 300px;
height: 200px;
object-fit: cover;
}
Common values include:
fill
contain
cover
none
scale-down
Q80. What does object-position do?
Answer:
object-position controls where the replaced content is positioned inside its box.
img {
object-fit: cover;
object-position: center top;
}
This is particularly useful when object-fit: cover crops part of an image.
📚 CHAPTER 9 — MODERN CSS, TYPOGRAPHY & INTERACTION
Questions 81–90
Q81. What does calc() do in CSS?
Answer:
calc() allows CSS to perform calculations involving compatible values.
.main {
width: calc(100% - 280px);
}
It is especially useful when combining percentages with fixed dimensions.
Q82. What are CSS feature queries?
Answer:
@supports checks whether the browser supports a CSS feature before applying the associated rules.
@supports (display: grid) {
.container {
display: grid;
}
}
This can be useful for progressive enhancement.
Q83. What is clamp() in CSS?
Answer:
clamp() defines a minimum, preferred and maximum value.
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
The value can grow fluidly while remaining within defined limits.
Q84. What is @font-face?
Answer:
@font-face allows a website to define and load a custom font.
@font-face {
font-family: "MyFont";
src: url("/fonts/myfont.woff2") format("woff2");
font-display: swap;
}
font-display: swap can allow fallback text to appear while the custom font loads.
Q85. What is unitless line-height?
Answer:
A unitless value scales according to the element's font size.
body {
line-height: 1.5;
}
This often provides flexible proportional spacing across different text sizes.
Q86. What is a CSS transition?
Answer:
A transition smoothly interpolates a property when its value changes.
.button {
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
.button:hover {
transform: translateY(-3px);
}
Transitions generally involve a change from one state to another.
Q87. What are CSS @keyframes animations?
Answer:
@keyframes defines multiple stages of an animation.
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.05);
}
}
.card {
animation: pulse 2s infinite alternate;
}
Unlike a simple transition, keyframe animations can define a multi-step timeline.
Q88. What is Sass/SCSS?
Answer:
Sass is a CSS preprocessor that adds features such as variables, nesting, mixins and functions.
Example SCSS:
$primary: #2563eb;
.button {
background: $primary;
&:hover {
opacity: 0.9;
}
}
SCSS is compiled into standard CSS that browsers can understand.
Q89. What is Tailwind CSS?
Answer:
Tailwind CSS is a utility-first CSS framework.
Instead of creating a custom semantic class for every visual component, developers compose utility classes.
For example:
<button class="px-4 py-2 rounded">
Submit
</button>
Tailwind can accelerate development when its utility-based workflow fits the project's needs.
Q90. What is the CSS :has() pseudo-class?
Answer:
:has() allows an element to be selected based on whether it contains a matching descendant or related condition.
Example:
form:has(input:invalid) {
border-color: red;
}
This enables relationships that previously often required JavaScript.
📚 CHAPTER 10 — BROWSER RENDERING, PERFORMANCE & MODERN CSS
Questions 91–100
Q91. What is the Critical Rendering Path?
Answer:
The Critical Rendering Path describes the browser's work to turn HTML, CSS and other resources into pixels on the screen.
A simplified flow is:
HTML
↓
DOM
↓
CSS
↓
CSSOM
↓
Render Tree
↓
Layout
↓
Paint
↓
Composite
Understanding this process helps developers reason about rendering performance.
Q92. What is Critical CSS?
Answer:
Critical CSS refers to the minimum CSS needed to render important above-the-fold content.
A site may inline a small amount of critical styling:
<style>
.hero {
display: block;
min-height: 300px;
}
</style>
and load less-critical CSS separately.
The exact strategy should be based on the site's rendering and performance requirements.
Q93. What is reflow or layout?
Answer:
Layout is the process in which the browser calculates the geometry and positions of elements.
Changing properties such as:
width
height
margin
padding
font-size
can require layout recalculation.
Repeatedly forcing layout information and then changing styles in JavaScript can contribute to performance problems commonly called layout thrashing.
Q94. What is repaint?
Answer:
Repaint occurs when the browser needs to redraw an element's visual appearance without necessarily recalculating its geometry.
Examples of properties that can trigger repaint include:
color
background-color
box-shadow
The exact rendering cost depends on the browser, property and surrounding page.
Q95. What is compositing and why are transforms often useful for animation?
Answer:
After layout and painting, browsers can composite rendered layers.
Animations involving properties such as:
transform
opacity
can often be handled efficiently by the rendering pipeline.
For example:
.box {
transform: translate3d(50px, 20px, 0);
}
However, GPU acceleration is not automatically guaranteed simply because translate3d() is used. Performance should be measured rather than assumed.
Q96. What is the difference between transform and top/left for animation?
Answer:
Changing top and left can require layout work depending on the element and layout context.
Using transforms:
transform: translateX(100px);
often allows movement to be handled later in the rendering pipeline and can be preferable for smooth animations.
Q97. What is a container query?
Answer:
A container query allows a component to respond to the size of its containing element rather than the entire viewport.
Example:
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
}
}
This is especially useful for reusable components placed in different layout contexts.
Q98. What is BEM in CSS?
Answer:
BEM stands for Block, Element, Modifier.
Example:
card
card__title
card__button
card--featured
CSS:
.card {}
.card__title {}
.card__button {}
.card--featured {}
BEM provides a naming convention that can make large stylesheets easier to organize.
Q99. What are some practical CSS performance best practices?
Answer:
Useful practices include:
Remove unused CSS where practical.
Minify production CSS.
Avoid unnecessarily complex selectors.
Load fonts efficiently.
Use modern image formats and appropriate dimensions.
Avoid excessive animations.
Prefer efficient animation properties.
Reduce unnecessary layout changes.
Use responsive images.
Measure performance with browser developer tools.
Avoid premature optimization—measure real bottlenecks first.
Q100. What are the most important modern HTML and CSS best practices for frontend developers?
Answer:
A strong modern frontend foundation combines good HTML structure, accessible interactions and maintainable CSS.
Key practices include:
Use semantic HTML.
Build keyboard-accessible interfaces.
Use meaningful image alternatives.
Associate form labels correctly.
Prefer native HTML controls where possible.
Use Flexbox and Grid appropriately.
Design mobile-first when it fits the project.
Use fluid sizing and responsive images.
Use CSS custom properties for reusable design tokens.
Use clamp(), Grid functions and container queries where appropriate.
Avoid unnecessary specificity.
Keep CSS organized and maintainable.
Optimize rendering and asset delivery.
Test across different viewport sizes.
Measure performance rather than relying on assumptions.
Consider accessibility from the beginning—not as an afterthought.
🎯 FINAL INTERVIEW REVISION CHECKLIST
Before your HTML & CSS interview, make sure you can confidently explain:
✅ HTML5 document structure
✅ Semantic HTML
✅ DOM
✅ Attributes
✅ Accessibility and ARIA
✅ Forms and validation
✅ GET vs POST
✅ Browser storage
✅ Canvas vs SVG
✅ CSS specificity
✅ Box Model
✅ content-box vs border-box
✅ Margin collapse
✅ display values
✅ Units such as px, em, rem, vw and vh
✅ Pseudo-classes and pseudo-elements
✅ Flexbox
✅ Grid
✅ fr, minmax() and gap
✅ Positioning
✅ Stacking contexts and z-index
✅ Responsive design
✅ Media queries
✅ CSS variables
✅ calc() and clamp()
✅ object-fit
✅ Transitions and animations
✅ Sass/SCSS
✅ Tailwind CSS
✅ BEM
✅ :has()
✅ Container queries
✅ Critical Rendering Path
✅ Reflow, repaint and compositing
✅ Frontend performance optimization
🚀 Ready to Level Up Your Frontend Interview Preparation?
Don't just memorize definitions. Practice explaining each concept in your own words, write small examples, and understand when and why a particular HTML or CSS technique should be used.
🚀 Your Dream Frontend Job Is One Handbook Away.
Stop guessing. Start preparing. Walk into that interview like a legend. 🏆
👉 Grab Your Copy Now:
🔗 https://buymeacoffee.com/kabir1989/e/577188
Study smart. Interview strong. Get hired. Let's go! 🔥
This 100-question handbook can serve as a practical revision companion for frontend development interviews, placements, web-development learning, coding preparation and modern CSS practice.
No comments:
Post a Comment