Completed2025Frontend · CSS · SheCodes Plus

Netflix Landing

Pixel-Perfect Design Precision Training — SheCodes Plus

Pixel-perfect CSS recreation of the Netflix landing page — a SheCodes Plus exercise in design precision. No source inspection. Forces understanding of how modern UIs are actually constructed. The discipline of visual accuracy in recreation translates directly to the discipline of visual accuracy in original design.

Demo Recording

Serving

Design precision foundation

Market

SheCodes Plus certification

Problem

CSS layout + visual accuracy mastery

Result

100% responsive, pixel-perfect recreation

The Problem

What needed solving

Design precision training: can you recreate pixel-perfect what you see? Without inspecting source. This forces real understanding of how layouts, gradients, and animations are constructed.

The Solution

How I built it

Full Netflix landing page in pure CSS. CSS Grid + Flexbox mastery demonstrated. Responsive at all breakpoints. FAQ accordion in pure CSS. SheCodes Plus certified.

Build Journey

Pixel-perfect CSS recreation of the Netflix landing page — a SheCodes Plus exercise in design precision. The challenge: recreate exactly what you see without inspecting the source. This forces understanding of how modern UIs are actually constructed: how Netflix achieves its card layout, how the hero gradient works, how the FAQ accordion is built in pure CSS. The discipline of visual accuracy in recreation translates directly to the discipline of visual accuracy in original design. Every pixel-perfect clone makes you a more precise original designer.

What This Taught Me

1
Design precision training: if you can recreate it exactly, you understand it completely
2
CSS is a capability, not a stepping stone — the developer who knows it deeply builds faster in any framework
3
SheCodes Plus: where the foundations were built

Tech Stack & Decision Rationale

HTML5

Semantic, accessible markup

CSS3

All layout and animation

Flexbox

Component alignment

CSS Grid

Section layouts

Vanilla JavaScript

Accordion interactivity

README.md — netflix-clone

📄 README.md

# Netflix Landing
> Pixel-Perfect Design Precision Training — SheCodes Plus

## Project Context
**Category:** Frontend · CSS · SheCodes Plus
**Status:** Completed · 2025
**Author:** Nandawula Regine Kabali-Kagwa — East London, South Africa
**Company:** Mirembe Muse (Pty) Ltd · Reg: 2026-005658

## Stack
```
HTML5                          # Semantic, accessible markup
CSS3                           # All layout and animation
Flexbox                        # Component alignment
CSS Grid                       # Section layouts
Vanilla JavaScript             # Accordion interactivity
```

## Architecture Notes
- All data mutations validated server-side via Next.js API routes
- Row-Level Security enforced at database level (Supabase)
- Mobile-first, PWA-ready, offline-tolerant where connectivity is unreliable
- PayFast integration for ZAR-native payments (no USD conversion)
- SEO-optimised: metadata, JSON-LD, canonical URLs, sitemap
- POPIA compliant — data minimisation + user consent by design

## Environment Variables
```env
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
ANTHROPIC_API_KEY=
NEXT_PUBLIC_PAYFAST_MERCHANT_ID=
NEXT_PUBLIC_PAYFAST_MERCHANT_KEY=
PAYFAST_PASSPHRASE=
RESEND_API_KEY=
```

## Links
- Live:   Coming soon — domain propagating
- GitHub: Private repository
- Portfolio: https://creativelynanda.co.za/projects/netflix-clone

---
Built from East London, South Africa · Nine months · Zero to production

More Projects

Beta

View All Projects

Interested in similar work?

Let's discuss how I can build something like this for your business.

Let's Talk