Youtube-HTML-CSS-only/YouTube UI Clone

This is a YouTube homepage UI clone built using HTML and CSS. I first learned the concepts from a tutorial, then rebuilt the project from scratch without following along.

Live Demo

https://afifothaman.github.io/Youtube-HTML-CSS-only/

Repository

https://github.com/afifothaman/Youtube-HTML-CSS-only

Tutorial Used

https://www.youtube.com/watch?v=G3e-cpL7ofc

What I Practiced

• Layout using Flexbox and CSS Grid
• Structuring a full page with header, sidebar, and content
• Building reusable components like video cards
• Positioning elements (tooltips, overlays, icons)
• Making the layout adapt to different screen sizes

Tech Used

• HTML
• CSS

Notes

• Rebuilt from memory after finishing the tutorial
• Focused on understanding layout instead of copying
• Organized project structure for deployment

Folder Structure

Youtube-HTML-CSS-only/
├── index.html
├── styles/
├── icons/
├── thumbnails/
├── channel-pictures/

Next Steps

• Add JavaScript (sidebar toggle, search interaction)
• Improve mobile responsiveness
• Clean up UI and spacing