A pixel-perfect front-end clone of YouTube’s homepage built using only HTML and CSS.
This project focuses on layout mastery, responsive grid systems, and clean UI structure.

View Live Site

• 📌 Fixed navigation header
• 📂 Sidebar with icon navigation
• 🔍 Search bar with tooltip interactions
• 🎥 Responsive video grid layout
• ⏱ Video duration overlay
• 🔔 Notification badge
• 🧭 Clean spacing and alignment system

• HTML5
• CSS3 (Flexbox + Grid)
• Google Fonts (Roboto)

├── index.html
├── Styles/
│   ├── general.css
│   ├── header.css
│   ├── sidebar.css
│   └── video.css
├── thumbnails/
└── favicon.png

• Desktop: 3-column video grid
• Tablet: 2-column grid
• Fixed sidebar + sticky header layout

• Real-world UI cloning
• Layout engineering with Flexbox & Grid
• Positioning (fixed, absolute, relative)
• Component-based CSS structure
• Pixel-perfect spacing discipline

Nazmus Sakib
Computer Science & Engineering
Jagannath University, Dhaka

Drop a star and fork it.
UI grind never stops.

• Main Layout: index.html
• Base Styling: general.css
• Header System: header.css
• Sidebar Nav: sidebar.css
• Video Grid: video.css