A YouTube clone Built With HTML and CSS

Content 🔗

1. Project Overview
2. Screenshots
3. Why I built this
4. what I learned building this project.
5. Tools and resources utilized
6. Author

1. Project Overview 😄

I embarked on this project with the ambitious goal of building a YouTube clone using only HTML and CSS. The journey turned out to be more rewarding than I could have imagined. Not only did I successfully create the app, but I also made it responsive, ensuring that it would seamlessly adapt to the user's browser window size. This project provided me with a deep dive into web page layout and positioning techniques, enriching my understanding of these essential elements.

---

check it out here

---

2. Screenshots 📷

Screenshot 1

A screenshot at Full screen

Screenshot 2

a screenshot at medium browser window

Screenshot 3

a screenshot at small browser window

3. Why I built this 🔨

This project was second of three that I developed to assess my comprehension of CSS and HTML before advancing to JavaScript. These projects allowed me to apply my understanding of these fundamental web development languages and gain hands-on experience in creating responsive web pages.

4. what I learned building this project.

• Creating the layout proved to be the most challenging aspect of this project especially the left nav. It taught me about the trade-offs between employing sticky and fixed position values on an element. The decision to use one or the other can ultimately make or break your layout.

• Tackling responsiveness with media queries: Mastering responsiveness through media queries, I gained proficiency in utilizing media queries and the display property to craft webpages that dynamically adjust based on the user's browser window size.

• Securing responsiveness through the Grid Layout: In addition to utilizing media queries for responsiveness, I incorporated the Grid Layout, employing a combination of autofit and minmax functions to create a responsive grid.

5. Tools and resources utilized 🔧

The following tools and resources where utilized in building this project.

• HTML5
• CSS3
• Images from pexels.com 🔗
• Color pallet from coolors.co 🔗
• Icons from icons8.con 🔗
• Resources from freecodecamp.org 🔗

Author 🖊️

Hi I'm Benedict, I'm learning to become a frontend developer. check out my blog where I'll be sharing my learning experiences, projects, and tips.

• Checkout it here 🔗

You can also connect with me on twitter

• Follow me 🔗