https://github.com/davidoadetayo/youtube-clone

🎥 A static YouTube clone built with HTML, CSS & JS. Features linked video thumbnails, a static search bar & a partially responsive layout.
https://github.com/davidoadetayo/youtube-clone

css-flex css-grid frontend-web html responsive-design static-site ui-clone youtube

Last synced: 10 months ago
JSON representation

🎥 A static YouTube clone built with HTML, CSS & JS. Features linked video thumbnails, a static search bar & a partially responsive layout.

• Host: GitHub
• URL: https://github.com/davidoadetayo/youtube-clone
• Owner: davidoadetayo
• Created: 2025-06-11T11:30:20.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2025-06-20T21:50:15.000Z (10 months ago)
• Last Synced: 2025-06-20T22:24:14.955Z (10 months ago)
• Topics: css-flex, css-grid, frontend-web, html, responsive-design, static-site, ui-clone, youtube
• Language: HTML
• Homepage: https://davidoadetayo.github.io/youtube-clone/
• Size: 598 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# YouTube Clone 🎥

This is a static YouTube clone built using **HTML**, **CSS**, and **JavaScript**. It replicates the basic layout and structure of YouTube, including video thumbnails, navigation elements, and a search bar.

---

## 🚀 Features

- 🎬 Linked video thumbnails

- 🔍 Static search bar (UI only, not functional)

- 🖥️ Clean and structured layout inspired by YouTube

- 📱 Partially responsive for different screen sizes

---

## 📸 Preview

![Screenshot of YouTube Clone](./preview.png)  

---

## 📁 Project Structure

📂 youtube-clone/

├── 📁 assets/

│   ├── 📁 styles/

│   │   └── style.css

│   │

│   ├── 📁 images/

│   │   ├── 📁 thumbnails/

│   │   ├── 📁 icons/

│   │   └── 📁 channel-logo/

│   │

│   └── 📁 js/

│       └── script.js

│

├── index.html

├── README.md

├── .hintrc

└── preview.png

---

## 💡 Notes

- This is a **static frontend project** for design and layout practice.

- The search bar is **not functional** and used only for UI purposes.

- The layout is **partially responsive** and may not display correctly on all mobile screens.

---

## 🛠️ Technologies Used

- HTML5

- CSS3

- JS

---

## 📌 To Do

- [ ] Make the layout fully responsive

- [ ] Add real search functionality

- [ ] Improve accessibility and add transitions

- [ ] Refactor CSS for scalability

---

## 📄 License

This project is open-source and available for educational and personal use.

---

## 👨‍💻 Author

**David Adetayo**  

Created as part of frontend development learning and practice.