YouTube Clone witn HTML and CSS

How to Build Responsive YouTube Clone with HTML and CSS

Hello Coders, In this article we are going to learn how to create YouTube UI Clone using HTML and CSS.

 

Well, Who doesn’t know YouTube? YouTube has become a part of our life now. Everything about YouTube makes us addictive to it. Its feature, UI Design and everything. So, In this article we are going to learn how to build the YouTube Home Page with HTML and CSS. We will try to make it exactly like that of the YouTube.

What are Google Font Icons?

If you are a web developer, You already know that google provides a huge library of fonts which we can import in our web project and use. But You may or may not heard about Google font Icons. Google Font Icons is also an huge library provided by the Google consisting of so many Icons which we can directly use in our project.

We will be using Icons from the Google Fonts Icons for this Project. You can see it in the above Image. Those Icons you see are coming straight from the google font Icons.

YouTube Clone using HTML and CSS | Source Code

Below, I have provided complete source code of HTML, CSS and JavaScript. Copy the below codes to build YouTube Clone. You can also download complete source code of this project by clicking on the download button at the bottom of this article.

How do I create YouTube Clone in HTML? HTML Source Code

Lets start with HTML, We will define the required html for our project. We will import the google font icons and link our local CSS File. Create an index.html File and Copy Paste the below Code.

How do I design YouTube Clone in CSS? CSS Source Code

Create an styles.css file. We will start it styling. Follow the below code from top to bottom and observe the changes it makes. To make it responsive, At the end I have added some media queries. 

 

 

 

See the Pen Untitled by kinza dogar (@kinza-dogar) on CodePen.