YouTube Landing Page Clone – HTML/CSS Project

Overview

This project is a static recreation of the YouTube landing page built using HTML5 and CSS. It was one of my first web development projects and served as an opportunity to learn how to structure a webpage, style it with CSS, and use hyperlinks to simulate navigation. The layout mimics the real YouTube homepage, featuring thumbnails, video titles, channel icons, and a styled navigation sidebar and header.

Followed SuperSimpleDev HTML & CSS Full Course - Beginner to Pro

https://www.youtube.com/watch?v=G3e-cpL7ofc&t=5913s

Features

• YouTube-style landing page layout with sidebar, header, and video grid
• Implemented a responsive grid layout for video thumbnails using CSS
• Hyperlinked video thumbnails and titles to simulate navigation
• Used Flexbox and CSS Grid to arrange navigation elements, sidebar, and main content
• Learned how to style hover effects, spacing, typography, and basic media responsiveness
• CSS modularized into separate files: general layout, header, sidebar, and video grid
• Organized file structure for maintainability and scalability

Technologies Used

• HTML
• CSS

What I Learned

• How to structure a web page using HTML elements like <header>, <nav> and <section>.
• Using CSS Flexbox and Grid for layout
• Styling buttons, thumbnails, text, and hover effects
• Styling and organizing components using separate stylesheets
• Creating clickable elements with <a> tags around images and text
• Understanding box model, padding, margin, and layout responsiveness
• Managing a clean, organized project structure with assets grouped by type

Project Structure

• index.html
• styles/
  • general.css
  • header.css
  • sidebar.css
  • video.css
• thumbnails/
  • thumbnail-1.webp
  • thumbnail-2.webp
  • ...
• channel-pictures/
  • channel-1.jpeg
  • channel-2.jpeg
  • ...
• icons/
  • home.svg
  • search.svg
  • explore.svg
  • ...
• README.md

How to Run

1. Clone this repository.
2. Open youtube.html in any web browser.
3. Click on any video thumbnail or title to simulate navigation.

Screenshots

Full Screen Layout

Medium Screen Layout

Smaller Screen Layout

Future Improvements

• Make the layout fully responsive for mobile and tablet screens
• Add a functional search bar and sidebar filtering
• Introduce basic interactivity using JavaScript

---

Note: This was a beginner-level project and part of my self-learning journey in frontend web development.