HTML & CSS ⚡ Recently updatedUpdated on Jun 30, 2026 — this content may still be evolving.

HTML & CSS: Topics Not to Miss

Check off each topic before your interview.

HTML Fundamentals

• Semantic tags: header, nav, main, article, section, footer, aside
• Heading hierarchy (h1–h6) — one h1 per page
• Forms: label, input types, textarea, select, button
• Form validation attributes: required, pattern, min, max
• Links vs buttons — when to use which
• alt text on images
• meta viewport tag for responsive
• script loading: defer vs async
• Data attributes (data-*)

CSS Fundamentals

• Box model: content, padding, border, margin
• box-sizing: border-box
• Specificity and cascade
• Selectors: element, class, ID, attribute, pseudo-class, pseudo-element
• Inheritance (what inherits, what doesn’t)
• CSS variables (--custom-property)

Layout

• Flexbox: container + item properties
• CSS Grid: grid-template-columns, gap, fr unit
• When Flexbox vs Grid
• Positioning: relative, absolute, fixed, sticky
• Centering techniques (flex, grid, margin auto)
• z-index and stacking context

Responsive Design

• Mobile-first media queries
• Common breakpoints (not device-specific — content-based)
• Fluid layouts: %, fr, max-width
• clamp() for fluid typography
• Responsive images: srcset, sizes

Modern CSS

• Transitions and animations
• @keyframes
• CSS custom properties for theming
• prefers-color-scheme for dark mode
• prefers-reduced-motion for accessibility

Accessibility Basics

• Semantic HTML as first accessibility tool
• Keyboard navigation and focus states
• Color contrast (WCAG AA: 4.5:1 for text)
• ARIA when HTML isn’t enough (not as first resort)
• Don’t remove focus outlines without replacement

Performance

• Critical CSS concept
• Font loading: font-display: swap
• Minimize render-blocking CSS
• Avoid expensive properties in animations (use transform, opacity)

Tools & Practices

• BEM or consistent naming convention
• DevTools: inspect, computed styles, responsive mode
• CSS reset/normalize awareness
• Preprocessors vs native CSS (know the difference)

Self-test: Can you build a responsive navbar + card grid + footer layout in 30 minutes without a framework? If not, do mini-tasks.md first.