📅 Date: March 5, 2026
🧠 Mood: The Builder 🛠️
🔥 Topic: Web Dev Day 7: Building a YouTube Video Grid Clone
🧩 Putting the Puzzle Together
For the past week, I have been learning layout technologies in isolation. I learned Flexbox to align items in a single row. I learned CSS Grid to build two-dimensional matrices. And I learned Media Queries to prevent my designs from looking like a broken mess on mobile phones.
But theory is useless if you can't build anything with it. Today, I decided to test myself. The goal was simple but intimidating: Recreate the YouTube homepage layout from scratch using only HTML and CSS. No external frameworks like Bootstrap or Tailwind. Just raw code.
📸 The Final Result
After a few hours of debugging and tweaking pixels, here is what I managed to build.
SahilTube
🏗️ The Architecture Behind the Code
Breaking down a complex UI like YouTube requires you to think in boxes. I divided the entire project into two main components: The Navbar and the Video Grid.
1. The Navbar (Flexbox Territory)
The top navigation bar has three main sections: The Logo (left), the Search Bar (center), and the User Profile (right). This is the perfect use case for Flexbox. By setting the navbar container to display: flex; and using justify-content: space-between;, the browser automatically pushed the logo to the far left and the profile to the far right, leaving the search bar perfectly centered.
2. The Video Cards (CSS Grid Territory)
For the actual videos, I wrapped all the individual video cards inside a main <main class="video-grid"> container. Using CSS Grid, I was able to define exactly how many columns I wanted. But more importantly, I used Media Queries to make it fully responsive.
On a mobile phone, the CSS forces a 1-column layout. On a tablet, it switches to 2 columns. And on a wide desktop monitor, it gracefully expands to 4 columns (as seen in my screenshot above).
🎯 What I Learned
Building this project gave me an immense confidence boost. It proved that I finally understand how structure and layout work on the modern web. Now that I have mastered the "skeleton" (HTML) and the "skin" (CSS), it is almost time to dive into the "brain"—JavaScript.
No comments:
Post a Comment