📺 YouTube Clone with API

A fully responsive YouTube homepage clone built using HTML, CSS, Tailwind CSS, and JavaScript. The project fetches and displays video data dynamically using an API, simulating a real video streaming platform UI.

---

🚀 Live Demo

🔗 youtube-clone-api-js.netlify.app

---

🛠️ Tech Stack

• HTML5
• CSS3
• Tailwind CSS
• JavaScript (Vanilla JS)
• YouTube API

---

✨ Features

• 🎥 Dynamic Video Feed: Loads video cards with thumbnails, titles, and channel info using API.
• 📱 Responsive Layout: Optimized for all screen sizes using Tailwind's utility classes.
• 🔄 Component-Based UI: Clean structure for each video card, easily extendable.
• 🧭 Sticky Sidebar & Header: Navigation bar and side sections styled similarly to YouTube.
• 🌙 Modern Design: Hover animations, spacing, and font hierarchy using Tailwind.

---

📁 Folder Structure

/
├── index.html
├── style.css
├── /js
│   └── script.js
├── /assets
│   └── images, icons, logos
└── README.md

---

🧠 What I Learned

• Working with fetch API and handling JSON responses
• Structuring responsive layouts using Tailwind CSS
• DOM manipulation and dynamic content generation
• Clean UI practices and mobile-first design principles

---

📌 Future Improvements

• Add search functionality
• Create video detail page with playable embedded video
• Implement dark/light theme toggle
• Include category filter using API queries

---

📬 Connect With Me

Feel free to connect with me on LinkedIn or view more projects on my GitHub.

---

Built with ❤️ by Mehul Nawal