This is a YouTube clone built using HTML and CSS. It replicates the core UI of YouTube, including the navbar, sidebar, and video grid layout. The project is focused on practicing frontend development, layout design, and responsive styling.
- HTML5 (structure)
- CSS3 (styling)
- Flexbox (header, navbar, sidebar alignment)
- CSS Grid (video grid layout)
- Responsive Design (media queries for different screen sizes)
- Fixed header with search bar
- Sidebar navigation menu
- Horizontal scrollable category navbar
- Video cards layout (YouTube-style grid)
- Tooltips on hover elements
- Notification badge UI
- Media queries for different screen sizes:
- 2 columns (small screens)
- 3 columns (medium screens)
- 4 columns (large screens)
position: fixed(header & sidebar)position: absolute(video time badge, notifications)- Hover effects (buttons, sidebar links)
- Smooth tooltip transitions
- z-index layering for UI stacking
- Horizontal scrolling navbar (overflow-x)
- Flex shrinking control (
flex-shrink: 0) - Inset shadow styling (search bar)
- Rounded UI elements (buttons, profile pictures)
- YouTube-like homepage UI
- Fully responsive layout
- Sticky header and sidebar
- Interactive hover tooltips
- Clean video grid system
- Modern UI spacing and alignment
youtube-clone/
├── channel-picture/ # User/Channel profile images
├── icons/ # SVG or PNG icons for buttons/UI
├── styles/ # CSS directory
│ ├── general.css # Global resets and typography
│ ├── header.css # Styles for the top navigation bar
│ ├── sidebar.css # Styles for the left-hand navigation
│ └── video.css # Styles for video cards and grid
├── thumbnails/ # Preview images for the video list
├── index.html # Main entry point
└── README.md # Project documentation
cd YouTube-Clone
Open index.html in your browser.
Ashraful Islam Ullas