Capstone: Netflix Landing Page

Introduction

Capstone: Netflix landing page synthesizes hero billboard layout, dark-first tokens, responsive typography, email capture form styling, and Core Web Vitals discipline. You will deliver production-grade CSS that passes axe, achieves Lighthouse performance ≥ 90, and survives visual regression across mobile, tablet, and desktop breakpoints — the same bar Netflix marketing pages target.

Business problem

Business pressure: Signup landing pages are top-of-funnel — LCP on hero background, CLS on form injection, and contrast on CTA directly affect trial starts. CSS must work before JavaScript hydrates promo banners.

• Conversion: Hero readability over cinematic imagery without sacrificing brand.
• Global: RTL-ready layout and locale-specific copy length tolerance.
• Perf: Hero image is LCP — CSS must reserve space and avoid blocking paint.

Why this feature exists

Capstone goal: Prove you can ship marketing CSS with token discipline, not one-off page hacks that break the next campaign.

• Skills tested: Layered hero, fluid type, form a11y, responsive grid, perf budgets.
• Rejected shortcut: Full-screen background-image hero without dimensions — fails CLS audit.

Browser rendering perspective

Rendering plan: Hero uses min-height + aspect-ratio fallback; gradient overlay via pseudo-element (no extra DOM); CTA animations on opacity only; font-display: swap on brand face.

• LCP: img.hero with fetchpriority=high; CSS width/height 100% inside ratio box.
• Paint: Overlay gradient on ::after — single layer promotion avoided.

Internal browser workflow

Build workflow: Tokens in tokens.css → component CSS → PostCSS autoprefixer → critical CSS extract for above-fold → Percy/Chromatic snapshots at 375/768/1280 → axe CI gate.

• CI: stylelint + max CSS bytes check on critical bundle.

Feature deep dive

Page structure: Full-viewport hero with centered stack (logo, headline, subcopy, email form); feature row below fold on 3-column grid; footer minimal.

.hero {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  position: relative;
  color: #fff;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent 60%);
  pointer-events: none;
}
.hero__content { position: relative; z-index: 1; max-width: 40rem; text-align: center; }
.hero__title { font-size: clamp(2rem, 5vw, 3.5rem); }

Syntax

Form styling contract: Visible labels, focus rings, error states without color-only cues.

.signup { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.signup input {
  min-width: min(100%, 20rem);
  padding: 0.75rem 1rem;
  border: 1px solid #555;
  border-radius: 4px;
}
.signup input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.signup button {
  background: var(--color-brand, #e50914);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
}

Examples

Breakpoint behavior: Mobile stacks form vertically; tablet keeps inline form; desktop adds feature grid 3-col; hero text max-width prevents line length > 75 chars.

• 375px: Single column, 16px horizontal padding token.
• 1280px: Feature grid gap increases via --space-lg token.

Real-world use

Reference: Netflix marketing pages use dark surfaces, high-contrast CTAs, and minimal chrome — your capstone mirrors that restraint (no gratuitous animation).

Real production example

Acceptance criteria: LCP < 2.5s on 4G throttled; CLS < 0.1; contrast ratio ≥ 4.5:1 on form labels and button text; keyboard path through entire signup flow.

• Visual regression: 3 breakpoints snapshotted in CI.
• a11y: axe zero critical violations.

Enterprise use case

Portfolio value: Demonstrates marketing CSS with engineering rigor — interviewers at streaming companies expect CWV literacy on landing pages.

Accessibility considerations

A11y requirements: lang on html; h1 single; form labels associated; error text linked via aria-describedby; reduced motion disables hero ken-burns if implemented.

• Trap: Placeholder as label — fail; use visible label or aria-label with care.

Performance considerations

Perf budget: Critical CSS < 14KB; no @import; hero image WebP with explicit dimensions; preload only hero + one font weight.

• Audit: Document unused CSS % from Coverage tab — target < 30% on landing route.

SEO considerations

SEO: Semantic h1/h2 hierarchy; text in HTML not image-only hero headlines; mobile-friendly tap targets ≥ 44px.

Scalability considerations

Reuse: Structure tokens and hero component for reuse on regional campaign variants — swap --color-brand per campaign via data attribute.

Common production issues

Common failures: Hero text unreadable on light photo — fix overlay contrast. iOS zoom on input font-size < 16px — use 16px minimum. Form wraps awkwardly at 320px — test min-width.

• Debug: Simulate slow 3G + delayed hero image — CLS should stay 0.

Debugging guide

Debug checklist: Lighthouse → Performance + Accessibility; Elements → check contrast; Rendering → paint flashing for unnecessary repaints on scroll.

/* Quick CLS test — delay hero image in DevTools Network */
img.hero { aspect-ratio: 16/9; width: 100%; max-height: 100dvh; object-fit: cover; }

Best practices

• Token file for color, space, type, radius.
• clamp() for hero headline — no breakpoint-only font-size jumps.
• Reserve hero dimensions before image load.
• focus-visible on all interactive elements.
• Visual regression CI at 375/768/1280.

Anti-patterns

• background-image hero as LCP without size reservation.
• outline: none on inputs without replacement.
• Fixed px widths on form — breaks i18n long translations.

Trade-offs

• Gradient overlay vs darker image: Overlay preserves art direction flexibility.
• 100dvh vs 100vh: dvh fixes mobile browser chrome — test both Safari and Chrome.

Architecture review questions

• What is your LCP element and how does CSS stabilize it?
• Does signup work keyboard-only with visible focus?
• Are tokens used for all colors and spacing?
• What is your critical CSS byte budget?

Hands-on exercise

Capstone deliverable — Netflix landing page: Build a complete responsive landing page from scratch (HTML + CSS only, optional minimal JS for form validation).

• Phase 1 — Tokens: Create tokens.css with brand, surface, text, space (4/8/16/24/32), radius, focus-ring. Document token API in README.
• Phase 2 — Hero: Full-viewport hero with img LCP element, gradient overlay, clamp headline, subcopy, email signup form with visible labels and :focus-visible styles.
• Phase 3 — Features: Below-fold 3-column feature grid collapsing to 1 column at 768px; use gap tokens; no horizontal scroll at 320px.
• Phase 4 — Quality gates: Run Lighthouse (Perf ≥ 90, A11y ≥ 95, CLS < 0.1); run axe DevTools; capture Percy/Chromatic screenshots or manual before/after at 375/768/1280.
• Phase 5 — Write-up: One-page ADR explaining hero overlay choice, dvh usage, and one trade-off you rejected (e.g. video background).
• Submission: Git repo with src/, README, lighthouse.json export, axe screenshot, 3 viewport screenshots.

Staff engineer notes

• Marketing CSS is still production CSS — CWV and a11y are not optional.
• Interviewers ask why you chose img over background for LCP — know the answer.
• Tokenize early — campaigns change colors, not architecture.

Common pitfalls

• Forgetting 16px input font on iOS — zoom frustration.
• Hero ken-burns animation causing constant paint — disable for reduced motion.

Try it yourself

Edit the CSS panel — the preview updates live. Use DevTools Performance and Accessibility panels to validate.

Summary

Netflix landing capstone: dark hero, tokenized signup funnel, responsive feature grid, and documented quality gates — the portfolio piece that proves marketing CSS engineering maturity.

Key takeaways

• Landing page capstone proves CWV + a11y + token discipline together.
• Hero LCP requires explicit dimensions and img element semantics.
• Deliver CI artifacts — Lighthouse JSON and visual snapshots — not just code.