YouTube Clone
Day One. July 13, 2025. The Foundation of Everything.
The very first project. YouTube's full UI in raw HTML and CSS — no framework, no API, no dependencies. Custom @CreativelyNanda thumbnails: poetry, code, lookbook, identity. The channel name was already there on day one.
Serving
Foundation for WatchSankofa
Market
CSS mastery that underlies every design system
Problem
YouTube's UI as research for what to improve
Result
July 13, 2025: the first commit. The empire started here.
What needed solving
Before building WatchSankofa, you have to understand what you're improving upon. Every layout decision was studied: the sidebar hierarchy, the card grid, the metadata density.
How I built it
Full YouTube UI in raw HTML/CSS — no framework, no API. Custom thumbnails with the @CreativelyNanda channel identity already established. CSS Grid for the video card layout, Flexbox for component alignment.
Built on July 13, 2025 — the very first day. Running locally at 127.0.0.1:5500 in pure HTML and CSS with no framework, no API, no dependencies. The YouTube clone was not a tutorial exercise. It was UI reverse engineering conducted with a specific question in mind: what does YouTube get wrong for African creators? Every layout decision was studied: the sidebar hierarchy, the card grid, the metadata density. The custom thumbnails told the whole story before the story had been written: @CreativelyNanda, a poetry short film, a coding journey, a personal essay on identity, a style lookbook. The channel name was already there on day one. This is where everything started. This is the proof that fundamentals matter — the developer who can build YouTube's UI in raw CSS understands the web.
What This Taught Me
- 1
Fundamentals before frameworks: CSS Grid and Flexbox mastery enables every design system that comes after
- 2
Clone to learn, not to copy: the YouTube clone is research for WatchSankofa
- 3
The thumbnails knew who she was going to become before the company existed
- 4
July 13, 2025: day one. The empire started here.
HTML5
Semantic component structure — no framework
CSS3
All layout and styling
CSS Grid
Video card grid layout
Flexbox
Component alignment
Vanilla JavaScript
Minimal interactivity
# YouTube Clone > Day One. July 13, 2025. The Foundation of Everything. ## Project Context **Category:** Foundation · Frontend · CSS **Status:** Completed · 2025 **Author:** Nandawula Regine Kabali-Kagwa — East London, South Africa **Company:** Mirembe Muse (Pty) Ltd · Reg: 2026-005658 ## Stack ``` HTML5 # Semantic component structure — no framework CSS3 # All layout and styling CSS Grid # Video card grid layout Flexbox # Component alignment Vanilla JavaScript # Minimal 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: https://github.com/Nanda-Regine/CreativelyNanda-Youtube-clone - Portfolio: https://creativelynanda.co.za/projects/youtube-clone --- Built from East London, South Africa · Nine months · Zero to production
More Projects
Interested in similar work?
Let's discuss how I can build something like this for your business.
Let's Talk