YouTube Clone - HTML & CSS Practice Project

A frontend clone of the YouTube homepage created using HTML and CSS. This project serves as a practice exercise to improve web development skills, particularly in structuring layouts and styling with CSS.

Table of Contents

• Features
• Technologies Used
• Project Structure
• Learning Outcomes
• Acknowledgements
• Disclaimer

Features

• Responsive Layout: Optimized for different screen sizes using CSS media queries.
• Header Section: Includes a menu icon, YouTube logo, search bar, and action icons.
• Video Grid: Displays videos in a grid layout with thumbnails, titles, and channel information.
• Footer Section: Contains additional links and information.

Technologies Used

• HTML5: Markup language for structuring content.
• CSS3: Styling and layout, utilizing Flexbox for alignment.

Project Structure

YouTube-Clone/
├── assets/
│   ├── icons/
│   │   ├── menu.png
│   │   ├── search.png
│   │   └── ...
│   ├── Thumbnails/
│   │   ├── video1.png
│   │   ├── video2.png
│   │   └── ...
│   ├── Channel_Logo/
│   │   ├── channel_logo.png
│   │   ├── channel2_logo.jpeg
│   │   └── ...
│   └── ...
├── index.html
└── style.css

index.html

: Main HTML file with the structure of the webpage.

• style.css: CSS file containing styles and layout.
• assets/: Directory with images and icons used in the project.

Learning Outcomes

• Practiced HTML5 semantic elements for better accessibility.
• Utilized CSS Flexbox and media queries for creating responsive layouts.
• Gained experience in cloning a website design.
• Improved understanding of aligning and styling elements.

Acknowledgements

• Icons and images are used for educational purposes.
• This project is not affiliated with or endorsed by YouTube or Google.

Disclaimer

This project is intended for educational purposes only.