YouTube Clone - Static Front-End Demo

A complete static front-end YouTube clone built with HTML, CSS, and JavaScript for teaching purposes.

📁 File Structure

youtube-clone/
├── index.html      # Main HTML structure
├── style.css       # All styling and layout
├── script.js       # Interactive functionality
└── README.md       # This file

🎨 Features

• YouTube-like Design: Classic red, white, and black color scheme
• Responsive Layout: Works on desktop, tablet, and mobile
• Navbar: Logo, search bar, and profile icon
• Video Grid: 6 video cards with thumbnails and details
• Hover Effects: Cards lift up with shadow on hover
• Like Button Toggle: Click to toggle between 👍 Like and ❤️ Liked
• Clean Code: Fully commented for teaching purposes

🚀 How to Run

1. Open index.html in any modern web browser
2. No server required - just double-click the file!

💡 Learning Points

HTML

• Semantic structure with nav, main, sections
• Data attributes for JavaScript interaction
• Proper accessibility with alt text

CSS

• CSS Grid for responsive video layout
• Flexbox for navbar alignment
• Hover effects and transitions
• Media queries for mobile responsiveness
• Sticky positioning for navbar

JavaScript

• DOM manipulation
• Event listeners
• Data attribute handling
• Event bubbling prevention
• Toggle functionality

🎯 Teaching Use

Perfect for:

• Live coding demonstrations
• Beginner web development courses
• Understanding layout systems (Grid/Flexbox)
• JavaScript interactivity basics
• Responsive design principles

📝 Customization Ideas

• Add more video cards
• Change color scheme
• Add a sidebar with categories
• Implement search functionality
• Add video player modal
• Create a "Watch Later" feature

---

Built with ❤️ for teaching web development