4-Day Intensive HTML & CSS Interview Checklist
This checklist contains a day-by-day study & hands-on routine to prepare for Fresher Frontend (HTML &
CSS) interviews. Each day lists topics, timed blocks, mini-projects, and focused interview questions. Tick
items as you complete them. Links are included for quick reference. Estimated daily time is shown for
realistic pacing.
Day 1 — HTML Fundamentals & Accessibility (Estimated: 6–7 hours)
■ HTML document structure: <!doctype>, html, head, body, meta viewport
■ Semantic tags: header, nav, main, article, section, aside, footer
■ Text & media: headings, lists, anchors, img alt rules, picture element & srcset concept
■ Forms & validation: form, label, input types, required, pattern
■ Accessibility basics: ARIA roles, aria-label, aria-describedby, keyboard navigation
■ SEO basics: meta description, Open Graph tags
Mini-project: Semantic Blog Layout + Accessible Contact Form
Quick references:
MDN — Semantic HTML
WebAIM — Forms & Accessibility
MDN — Using the viewport meta tag
Day 2 — CSS Core Fundamentals (Estimated: 6–7 hours)
■ Box model: content, padding, border, margin, box-sizing
■ Units: px, em, rem, %, vw/vh — when to use each
■ Display types & flow: block, inline, inline-block, visibility
■ Selectors & specificity: cascading, id vs class vs element, !important
■ Positioning: static, relative, absolute, fixed, sticky, z-index and stacking contexts
■ Typography & colors: font-size, line-height, contrast, CSS variables
Mini-project: Card Grid Demo + Sticky Header & Modal
Quick references:
CSS-Tricks — Box Model
MDN — CSS Positioning
Day 3 — Layouts & Responsive (Flexbox, Grid, Media Queries)
(Estimated: 7–8 hours)
■ Flexbox: justify-content, align-items, flex shorthand, wrapping
■ CSS Grid: grid-template, grid areas, minmax(), auto-fill/auto-fit
■ Responsive design: mobile-first media queries, breakpoints strategy
■ Responsive images: srcset, sizes, loading='lazy'
■ Deciding when to use Flexbox vs Grid
Mini-project: Responsive Dashboard + Magazine Layout + E-Commerce Product Page
Quick references:
CSS-Tricks — A Guide to Flexbox
MDN — CSS Grid Layout
web.dev — Responsive images
Day 4 — Advanced CSS, Performance & Mocks (Estimated: 6–8 hours)
■ Animations & transitions: transition, @keyframes, use transform & opacity for perf
■ Performance: critical CSS, render-blocking resources, lazy loading, LCP, CLS
■ Cross-browser & feature detection: @supports, Can I Use, autoprefixer
■ SASS & BEM basics: variables, partials, naming conventions
■ DevTools practice: layout inspector, performance panel, Lighthouse audits
Mini-project: Microinteraction Library + Optimized Landing Page
Quick references:
web.dev — Critical Rendering Path & Performance
Can I Use — Feature support
MDN — CSS Animations
Focused Interview Question Bank (study these aloud):
Study topics include: semantic HTML, forms & ARIA, box model, positioning, Flexbox, Grid, responsive
images, media queries, selectors & specificity, CSS performance, animations (use transform/opacity),
debugging with DevTools, and accessibility testing tools. For full question list see the Frontend Interview
Handbook and MDN pages linked above.
Generated checklist — follow the schedule, deploy mini-projects, and practice timed coding tasks. Good
luck!
