|
1 | 1 | # YouTube-Clone |
2 | | -A simple YouTube homepage clone built with HTML & CSS for practicing responsive web design. |
| 2 | +A responsive YouTube clone UI built using HTML, CSS, Bootstrap 5, and Font Awesome, featuring a navbar with search, sidebar categories, explore section, and video cards with local video playback. |
3 | 3 |
|
4 | | -A simple YouTube Homepage Clone built using HTML and CSS. This project focuses on practicing front-end design skills by replicating YouTube’s basic layout. |
| 4 | +# YouTube Clone – Frontend Project |
| 5 | +This project is a static frontend clone of YouTube built using HTML5, CSS3, Bootstrap 5, and Font Awesome. The interface includes a responsive navigation bar, sidebar with categories, and a dynamic content section displaying videos as cards. Each video card contains a thumbnail, title, and description, with support for local video playback. |
5 | 6 |
|
6 | | -# 🔹 Features |
| 7 | + # Key Features: |
7 | 8 |
|
8 | | -Responsive design for desktop & mobile |
| 9 | +Responsive Bootstrap 5 layout with grid system. |
9 | 10 |
|
10 | | -Navbar with logo, search bar, and profile icons |
| 11 | +Navigation bar with search functionality and sign-in button. |
11 | 12 |
|
12 | | -Sidebar menu (Home, Trending, Subscriptions, Library, etc.) |
| 13 | +Sidebar menu including sections like Home, Shorts, Subscriptions, History, Playlists, etc. |
13 | 14 |
|
14 | | -Video grid layout with thumbnails, titles, and channel details |
| 15 | +Explore section with trending categories (Music, Gaming, News, Sports, etc.). |
15 | 16 |
|
16 | | -Clean and structured UI using Flexbox & CSS Grid |
| 17 | +Video cards with thumbnails and titles, linking to locally stored .mp4 files. |
17 | 18 |
|
18 | | -# 🛠️ Tech Stack |
| 19 | +Icons integrated using Font Awesome 6. |
19 | 20 |
|
20 | | -HTML5 – For website structure |
| 21 | +Custom scrollbar hidden using CSS. |
21 | 22 |
|
22 | | -CSS3 – For styling and responsive layout |
| 23 | +# Tech Stack: |
23 | 24 |
|
24 | | -# 📌 Learning Outcomes |
| 25 | +HTML5 |
25 | 26 |
|
26 | | -Hands-on practice with HTML & CSS |
| 27 | +CSS3 |
27 | 28 |
|
28 | | -Understanding page layouts using Flexbox & Grid |
| 29 | +Bootstrap 5 |
29 | 30 |
|
30 | | -Improved skills in responsive design and UI/UX concepts |
| 31 | +Font Awesome 6 |
31 | 32 |
|
32 | 33 |
|
33 | 34 | 📷 Preview |
|
0 commit comments