I Cloned YouTube’s Homepage Using HTML & CSS! 🌐📘

Hey Devs! 👋

I recently took on a fun little challenge — cloning YouTube’s homepage using only HTML and CSS. No frameworks, no JavaScript — just good old markup and styling!

Why I Picked YouTube? 🤔

YouTube’s homepage has a clean, modern layout with multiple sections — navbar, sidebar, video grid, and more. Recreating it was the perfect way to practice my front-end basics and sharpen my eye for detail.

What I Learned 📚

Here are some cool things I picked up along the way:

• Semantic HTML: Organizing content with meaningful tags made styling and layout much smoother.
• Flexbox & CSS Grid: These were lifesavers for structuring the layout, especially the video grid.
• Header & Sidebar Design: Replicating the sticky header and vertical navigation gave me solid layout practice.
• Hover Effects & Styling: Little touches like hover states and spacing made the page feel more interactive.
• Responsiveness: I added basic media queries to make sure the layout didn't break on smaller screens.

Challenges Faced ⚙️

• Aligning the sidebar with the main content took some trial and error.
• Making the header responsive and fixed while keeping the layout intact was tricky at first.
• Tweaking margins and padding to match the real YouTube look — detail matters!

What’s Next? 🚀

Now that I’ve nailed the static layout, I’m planning to:

• Add JavaScript functionality for interactivity
• Try cloning other popular sites like Netflix or Instagram
• Eventually create my own custom UI designs to show off in my portfolio

Final Thoughts 💡

If you’re learning front-end development, I highly recommend cloning real websites. It boosts your skills, attention to detail, and confidence!

Thanks for reading!

Feel free to share your own clone projects in the comments — I’d love to check them out! 🔁💬

#HTML #CSS #WebDevelopment #Frontend #100DaysOfCode