YouTube Clone

A static front-end clone of the YouTube homepage built with HTML and CSS.

Features

• Fixed header with logo, search bar, and action icons
• Collapsible sidebar with navigation links and subscriptions list
• Sticky filter chips row (All, Live, Gaming, Music, etc.)
• Responsive video grid with embedded YouTube videos
• Dark theme matching YouTube's UI

Folder Structure

Make sure your project folder is organized exactly like this so all images load correctly:

├── index.html
├── style.css
├── logo.png
├── menu.png
├── search.png
├── micro.png
├── profile.png
└── assets/
    └── images/
        ├── shorts.png
        ├── subscription.png
        ├── library.png
        ├── menu.png
        └── channel.png

Required Images

These image files must be added before the page will display correctly.

Root folder

Filename	Used for
logo.png	YouTube logo in header
menu.png	Hamburger menu icon in header
search.png	Search button icon
micro.png	Voice search (microphone) icon
profile.png	Create / notification / profile buttons

assets/images/ subfolder

Filename	Used for
shorts.png	Shorts icon in sidebar
subscription.png	Subscriptions list icons in sidebar
library.png	Library icon in sidebar
menu.png	Three-dot menu icon on video cards
channel.png	Channel avatar icon on video cards

How to Run

1. Make sure all images listed above are placed in their correct locations.
2. Open index.html directly in any web browser — no build step or server required.

Tech Used

• HTML5
• CSS3 (CSS variables, Flexbox, Grid)
• Embedded YouTube iframe videos

Notes

• This is a static front-end clone for learning/practice purposes only.
• Video data (titles, views, channel names) is hardcoded and not pulled from a real API.
• Filter chips and sidebar items are non-functional placeholders (UI only).