🎥 MyTube — YouTube-like Interface (HTML + CSS)

A simple, responsive YouTube-inspired web interface built entirely with HTML and CSS (no JavaScript).
It visually simulates the YouTube layout, featuring a header, sidebar, video grid, and suggestion panel.

---

🌐 Live Demo

🔗 Live on Render: https://my-youtube-interface.onrender.com

--

🧱 Project Structure

mytube-interface/ │ ├── index.html # Main HTML page ├ └── README.md # Project documentation

---

🚀 Features

• 🎨 Clean UI: Minimal YouTube-like interface design
• 📱 Responsive Layout: Adjusts for desktop and tablet screens
• 🧭 Functional Navigation Bar: Search input, menu icon, and profile avatar placeholders
• 🧩 Sidebar Menu: Links to Home, Trending, Subscriptions, Library, etc.
• 🖼️ Video Grid Section: Displays thumbnail cards with metadata (title, creator, views)
• 💬 Up Next Sidebar: Shows recommended video cards

---

🧠 Design Details

This interface was designed to mimic YouTube’s structure using:

• HTML5 semantic elements (header, main, nav, aside, article)
• CSS Grid and Flexbox for responsive layout
• Accessible attributes (role, aria-label) for screen readers
• No JavaScript — Purely static front-end project

---

⚙️ Deployment

This project is deployed on Render as a static site.

🔧 Steps to Deploy on Render

1. Push your project to GitHub.
2. Go to Render Dashboard.
3. Click "New Web Service" → "Static Site".
4. Connect your GitHub repo.
5. Set:
   • Build Command: N/A (since it's static)
   • Publish Directory: . (root)
6. Click Deploy.

Render will automatically host your static HTML/CSS project and provide a public URL.

---

🧩 Future Enhancements

You can extend this front-end by integrating a NestJS backend API for:

• Video uploads and metadata
• User authentication
• Comments and likes
• Search and analytics

(Example: MyTube API - NestJS Backend)

---

🧑‍💻 Author

Kareem Idris
📧 [ Email] idrisolalekann@gmail.com 🌐 [GitHub Profile] https://github.com/Lecksikerm

---

📜 License

This project is released under the MIT License.

Feel free to clone, modify, and use it for personal or educational purposes.

---

⭐ Show Support

If you found this useful, consider starring ⭐ the repository or sharing it with others.