Web Interview Playbook

Search is available after the site is built (`npm run build && npm run preview`).

HTML & CSS Interview Preparation

HTML and CSS interviews test whether you can build real, accessible, responsive UIs — not whether you’ve memorized every CSS property.

What Interviewers Look For

  • Semantic HTML (not div soup)
  • Layout skills (Flexbox, Grid — not just Bootstrap classes)
  • Responsive design thinking
  • Basic accessibility awareness
  • CSS specificity and cascade understanding

Files in This Section

FilePurpose
topics-not-to-miss.mdMust-know concepts checklist
interview-questions.md25+ questions with full answers
common-mistakes.mdWhat students get wrong
mini-tasks.mdHands-on coding challenges
revision-sheet.mdOne-page cram before interview
mock-interview.md45-minute practice flow

Study Order

  1. topics-not-to-miss.md — identify gaps
  2. interview-questions.md — 5 questions/day, out loud
  3. mini-tasks.md — build 3 layouts without frameworks
  4. mock-interview.md — practice with a friend
  5. revision-sheet.md — day before interview

Time Estimate

  • Minimum viable prep: 3–4 days
  • Solid prep: 1 week (with mini-tasks)

Project Connection

Be ready to explain how you styled your project: layout approach, responsive breakpoints, any accessibility considerations.

Interactive

Flexbox Playground

Flip one flex property at a time and watch the layout respond — the fastest way to internalize the main/cross axis.

flex-direction
justify-content
align-items
flex-wrap
items
1
2
3
4
5
6
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

CSS Specificity Calculator

Type two competing selectors and see the (IDs, classes, elements) scores battle — and why source order breaks ties.

110
013

Left wins. Compare left-to-right: one ID beats any number of classes; one class beats any number of elements.

Scores are (IDs, classes+attributes+pseudo-classes, elements+pseudo-elements). Simplified: :not()/:is()/:has() wrappers count zero but their arguments count; :where() counts zero entirely; comma lists score as their highest selector; inline styles and !important sit outside this comparison.

Box Model Explorer

Drag the sliders and flip box-sizing to see exactly where width goes — the classic border-box interview question, live.

box-sizing
margin
border
padding
content 200px
content 200pxvisible box 250pxtotal footprint 280px
.box {
  box-sizing: content-box;
  width: 200px;   /* content: 200px */
  padding: 20px;
  border: 5px solid;  /* visible box: 250px */
  margin: 15px;  /* total footprint: 280px */
}

CSS Grid Playground

Flip between fr, minmax(), and auto-fit tracks — every item shows its real pixel width, so the fr math finally clicks. Then lay out a whole page with named areas.

mode
grid-template-columns
items
align-items
1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

Study materials