YouTube Clone

• 

  Website Overview

• 

  Code for the Site

• 

  Topics

• 

  Navbar

• 

  Sidebar

Inspiration

The main intent behind this project was to learnf concepts like Flexbox and Grid system of CSS. I did project-based learning.

You can view this website here.

Screenshots

The project looks exactly like YouTube. And it has pseudo classes same as YouTube too. I wanted to make frontend clone of YouTube, and the goal is reached.

What it does

YouTube clone made with pure HTML and CSS. This website is best viewed on desktops. You can search your query on the search bar in the navbar, and it will redirect you to actual search results. So works like actual YouTube, made only with HTML and CSS, no backend involved.

How we built it

Made with HTML5 and CSS. For Navbar, Topics and Sidebar, I used CSS Flexbox property. For Videos section, I used CSS Grid to make it somewhat responsive. Also the Thumbnails of the custom videos are synchronized with actual YouTube database. Other filler videos and thumbnails render random images from the internet upon every refresh.

Challenges we ran into

Using Grid was the main challenge for the project. I experimented with various properties such as

grid-template-columns
column-gap
row-gap
repeat(4, 1fr)
@media

Also, three main flexboxes(navbar, topics and sidebar) were difficult to implement. The sidebar flexbox is NESTED inside grid, so it was really hard to contain it in a specific width. For that I used

flex-direction: column;
width: 80%;
display: flex;
grid-row: 1/9;
column-gap: 0;
row-gap: 0;
overflow: auto;

Accomplishments that we're proud of

I am really proud of making this website. I showed it to my friends, and once they thought that it was actual YouTube homepage. They were tricked for a moment. The fact that I could make it exactly like YouTube developers did(on desktop viewports -_-), is a big accomplishment for me.

What's next for YouTube Clone

I will try to make this website responsive with media queries. This is really important for this project. After that, it can be viewed on any screen size and will behave exactly like original YouTube does.

Built With

• css3
• html5
• javascript