All work

Full Stack Development

Netflix Home Page — Layout Rebuild

A close rebuild of the Netflix home page to get Grid and Flexbox properly into my hands.

Year
2024
Role
Practice build
Tools
HTML5, CSS3, CSS Grid, Flexbox

Where it started

Reading about Grid is not the same as owing someone a layout that matches a reference at every width.

What I did

  • Rebuilt the section-based page structure with Grid, and the horizontal card rows with Flexbox.
  • Matched image placement, overlay gradients and card scale-on-hover against the original.
  • Checked every breakpoint against the reference instead of trusting how it looked on my screen.

What changed

Pixel-close at the widths I tested. More usefully, I stopped guessing which of Grid or Flexbox a layout wants.

Code on GitHub