YouTube Clone

A static replica of YouTube's user interface, crafted using HTML and CSS. This project emphasizes responsive design and layout techniques to mirror YouTube's appearance.

Features

• Responsive Layout: Adapts to various screen sizes using Flexbox and Grid.
• Navigation Bar: Includes styled icons and menus for navigation.
• Video Thumbnails: Displays video previews with titles and channel information.
• Channel Avatars: Features channel pictures alongside video thumbnails.
• Search Bar: Styled search input similar to YouTube's design.

Project Structure

• HTML Files:

  • youtube.html: Main page replicating YouTube's layout.

• Directories:

  • styles/: Contains CSS files for styling the pages.
  • icons/: Includes icon images used in the navigation bar.
  • thumbnails/: Holds images for video thumbnails.
  • channel-pictures/: Contains images for channel avatars.

How to View

1. Clone the repository:

   git clone https://github.com/Luffy-456/youtube-clone.git

2. Navigate to the project directory:

   cd youtube-clone

3. Open youtube.html in your preferred web browser to view the YouTube clone interface.

Learning Outcomes

• Gained proficiency in using Flexbox and Grid for responsive layouts.
• Enhanced understanding of HTML structuring and CSS styling.
• Practiced replicating complex web interfaces with static files.

Future Enhancements

• Implement interactivity with JavaScript (e.g., dropdown menus, modal dialogs).
• Add a functional search bar with filtering capabilities.
• Integrate a backend to handle dynamic content and user interactions.

Contribution

Contributions are welcome! Feel free to fork the repository, make enhancements, and submit a pull request.