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.

Responsive YouTube Clone using HTML and CSS | Part 1 Video Tutorial

Adding Responsiveness to YouTube Clone | Part 2 Video Tutorial

In the above video tutorial, I have shown how to build it step by step. Even if you are a complete beginner you can build it by following through the video tutorial. I have explained each and everything in the video.

You may also like :

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. Or Copy the Below Codes.

Done! You can download the complete source code by clicking on download button below.

You may also like :

Download Code Files

Post a Comment

Previous Post Next Post