Completed2024Frontend · CSS

YouTube Clone

Faithful Recreation of YouTube's Interface

A faithful recreation of YouTube's interface using HTML and CSS, showcasing layout skills, component-based thinking, and responsive design mastery.

View Live GitHub

Demo Recording

Serving

Learner developers

Market

SheCodes certification

Problem

Complex CSS layout challenge

Result

Full YouTube interface recreated without JavaScript

The Problem

What needed solving

Recreate YouTube's complex interface — sidebar, video grid, header navigation — using only HTML and CSS to demonstrate advanced layout capability.

The Solution

How I built it

Delivered a responsive YouTube interface clone with functional sidebar, video grid, search bar, and navigation. Used CSS Grid for the video card layout and BEM methodology for clean CSS organisation.

Tech Stack & Decision Rationale

HTML5

Semantic component structure

CSS3

All layout and styling

CSS Grid

Video card grid layout

Flexbox

Component alignment

BEM Methodology

Scalable CSS naming

README.md — youtube-clone

📄 README.md

# YouTube Clone
> Faithful Recreation of YouTube's Interface

## Project Context
**Category:** Frontend · CSS
**Status:** Completed · 2024
**Author:** Nandawula Regine Kabali-Kagwa — East London, South Africa

## Stack
```
HTML5                          # Semantic component structure
CSS3                           # All layout and styling
CSS Grid                       # Video card grid layout
Flexbox                        # Component alignment
BEM Methodology                # Scalable CSS naming
```

## 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

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

## Links
- 🌐 Live:   https://youtube-clone-nanda.vercel.app
- 🐙 GitHub: https://github.com/creativelynanda/youtube-clone
- 🏗️ Portfolio: https://creativelynanda.co.za/projects/youtube-clone

---
Built from East London, South Africa · 5th Industrial Revolution

More Projects

Beta

StokvelOS

Revolutionary Community Finance Platform for 11M South Africans

View project Live

K53 Drill Master

AI-Powered Driving Test Prep Tackling South Africa's 60% Failure Rate

View project Live

True Access App

Geolocation Accessibility Mapping for 2.8M Disabled South Africans

View project

View All Projects

Interested in similar work?

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

Let's Talk