Interviewers often mix HTML semantics, CSS layout, and debugging stories. Use this lesson as a revision sheet—answer aloud before reading solutions.
Rapid-fire topics
- DOCTYPE, charset, viewport,
lang. - Semantic elements vs generic
div. - Specificity, cascade,
box-sizing. - Flex vs grid; mobile-first media queries.
- Accessibility: labels, focus, alt text, landmarks.
- Performance basics: image dimensions, lazy loading, CSS file caching.
Behavioral angle
Prepare one story: “I fixed a layout bug by inspecting the DOM, found an unexpected display:flex from a utility class, and reduced selector specificity.” Concrete beats buzzwords.
Important interview questions and answers
- Q: Explain the cascade in 30 seconds.
A: Origin and importance first, then specificity, then source order; inherited properties flow down the DOM tree unless overridden. - Q: How do you make a layout responsive without a framework?
A: Fluid widths, flex/grid, `minmax()` tracks, and `min-width` media queries with mobile-first defaults. - Q: What is progressive enhancement?
A: Ship usable HTML content first, then layer CSS and JavaScript enhancements. - Q: Difference between `em` and `rem`?
A: `em` is relative to the element’s font size (compounding); `rem` is relative to the root font size. - Q: How do you prevent layout shift for images?
A: Provide width/height or `aspect-ratio`, reserve space, use appropriate formats/sizes.
Practice MCQ
Use the quiz on this lesson—several questions are marked harder to mirror interview depth.
Interview prep
- Explain specificity with a real example.
Name selectors involved, which rule wins, and how you would refactor to lower specificity (classes vs IDs vs inline).
- How do you structure CSS for a design system?
Mention tokens, component blocks/modifiers, documentation, states (hover/focus/disabled), and accessibility acceptance per component.