This is a responsive clone of the YouTube homepage, built using only HTML and CSS—no JavaScript, no frameworks. It mimics the layout of YouTube's interface including the header, sidebar, and video grid. This project was part of my front-end learning practice.
✅ Fixed responsive header with search bar, icons, and profile
✅ Collapsible-style sidebar with hover effects
✅ Fully responsive video grid layout
✅ Tooltip animations for icons
✅ Structured clean layout using CSS Grid and Flexbox
✅ Styled video previews with author, views, and duration overlays
- HTML5 – semantic structure
- CSS3 – for styling
- Flexbox & CSS Grid – for layout control
- Media Queries – for responsiveness
- Google Fonts (Roboto) – for typography
- How to build a full webpage layout using only HTML and CSS
- Using Flexbox and CSS Grid to create responsive designs
- Creating a fixed header and sticky sidebar layout like YouTube
- Designing clean video preview cards with author info and video stats
- How to structure a real-world project with multiple CSS files for modular design
- Improving visual appearance with hover effects and tooltip animations
- Organizing images and styles into proper folders for clarity and maintenance
- Add JavaScript functionality for real search bar behavior and sidebar toggle
- Add dark mode toggle using only CSS or with JavaScript
- Improve mobile responsiveness (better layout for small screens)
- Add more pages like a video watch page or user profile
- Enhance accessibility using proper alt tags, ARIA labels, and keyboard navigation
- Deploy the site using GitHub Pages and share a live demo link
- Add animations to hover states and transitions for a smoother UI