Are HTML/CSS questions common in frontend interviews?

Yes. Even React-heavy roles test CSS fundamentals. If you cannot center a div or explain the box model, it raises concerns about your foundation. Most interviews include at least one or two HTML/CSS questions.

Should I know CSS frameworks like Tailwind for interviews?

Know vanilla CSS first. Tailwind knowledge is a bonus but interviewers test fundamentals. If you only know Tailwind utility classes and cannot write a media query, that is a problem.

Do I need to know CSS animations?

Basic transitions (hover effects, opacity changes) are worth knowing. Complex keyframe animations are rarely tested at junior level. Know the transition property and transform for common effects.

HTML and CSS Interview Questions

HTML questions

Q: What is semantic HTML and why does it matter?

Semantic HTML uses elements that describe their content: <header>, <nav>, <main>, <article>, <footer>, <section>. These give meaning to screen readers and search engines. A <div> tells the browser nothing about what it contains. A <nav> says "this is navigation".

Q: What is the difference between <div> and <span>?

<div> is a block-level element (takes full width, starts on a new line). <span> is inline (flows with text). Use <div> for layout containers, <span> for styling a piece of text within a paragraph.

Q: What does the DOCTYPE declaration do?

<!DOCTYPE html> tells the browser to use standards mode instead of quirks mode. Without it, browsers fall back to quirks mode where CSS behaves differently (box model, line height, table sizing). Always include it at the top of every HTML file.

The box model

Q: Explain the CSS box model.

Every element is a box made up of four layers: content, padding, border, and margin. By default (box-sizing: content-box), the width you set applies to the content only, and padding and border are added on top.

Most developers set box-sizing: border-box globally so that width includes padding and border. This makes layout math predictable:

*, *::before, *::after {
  box-sizing: border-box;
}

Q: What is the difference between margin and padding?

Padding is space inside the element (between the content and the border). Margin is space outside the element (between the border and neighboring elements). Padding takes the element's background colour. Margin is always transparent.

Q: What is margin collapse?

When two vertical margins touch, they collapse into the larger of the two instead of adding together. A 20px bottom margin meeting a 30px top margin produces 30px of space, not 50px. This only happens vertically, not horizontally.

Flexbox and grid

Q: When do you use flexbox vs grid?

Flexbox is one-dimensional: it handles either a row or a column. Grid is two-dimensional: it handles rows and columns together. Use flexbox for navigation bars, card rows, and centering. Use grid for full page layouts, dashboards, and anything that needs alignment across both axes.

Q: Center a div horizontally and vertically.

/* Flexbox approach */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Grid approach */
.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Q: What does flex: 1 mean?

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. It makes the element grow to fill available space. If two siblings both have flex: 1, they share the space equally.

Responsive design and accessibility

Q: How do you make a website responsive?

Use the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
Use relative units (rem, em, %, vw/vh) instead of fixed pixels for layout
Use media queries to adjust layout at breakpoints
Use flexbox or grid for fluid layouts
Make images responsive with max-width: 100%; height: auto;

Q: What are basic accessibility practices?

Use semantic HTML elements
Add alt text to images
Ensure sufficient colour contrast (at least 4.5:1 for normal text)
Make interactive elements keyboard-accessible
Use aria-label when the visual label is insufficient for screen readers
Do not rely on colour alone to convey information