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.
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.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- CSS File -->
<link rel="stylesheet" href="styles.css" />
<title>Final - Youtube UI Clone</title>
</head>
<body>
<!-- Header Starts -->
<div class="header">
<div class="header__left">
<i id="menu" class="material-icons">menu</i>
<img
src="https://www.youtube.com/about/static/svgs/icons/brand-resources/YouTube-logo-full_color_light.svg?cache=72a5d9c"
alt=""
/>
</div>
<div class="header__search">
<form action="">
<input type="text" placeholder="Search" />
<button><i class="material-icons">search</i></button>
</form>
</div>
<div class="header__icons">
<i class="material-icons display-this">search</i>
<i class="material-icons">videocam</i>
<i class="material-icons">apps</i>
<i class="material-icons">notifications</i>
<i class="material-icons display-this">account_circle</i>
</div>
</div>
<!-- Header Ends -->
<!-- Main Body Starts -->
<div class="mainBody">
<!-- Sidebar Starts -->
<div class="sidebar">
<div class="sidebar__categories">
<div class="sidebar__category">
<i class="material-icons">home</i>
<span>Home</span>
</div>
<div class="sidebar__category">
<i class="material-icons">local_fire_department</i>
<span>Trending</span>
</div>
<div class="sidebar__category">
<i class="material-icons">subscriptions</i>
<span>Subcriptions</span>
</div>
</div>
<hr />
<div class="sidebar__categories">
<div class="sidebar__category">
<i class="material-icons">library_add_check</i>
<span>Library</span>
</div>
<div class="sidebar__category">
<i class="material-icons">history</i>
<span>History</span>
</div>
<div class="sidebar__category">
<i class="material-icons">play_arrow</i>
<span>Your Videos</span>
</div>
<div class="sidebar__category">
<i class="material-icons">watch_later</i>
<span>Watch Later</span>
</div>
<div class="sidebar__category">
<i class="material-icons">thumb_up</i>
<span>Liked Videos</span>
</div>
</div>
<hr />
</div>
<!-- Sidebar Ends -->
<!-- Videos Section -->
<div class="videos">
<h1>Recommended</h1>
<div class="videos__container">
<!-- Single Video starts -->
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>
Top 5 Programming Languages to Learn in 2021 | Best Programming Languages to Learn
</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<!-- Single Video Ends -->
<!-- Single Video starts -->
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/YpTmcCBBdTE/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>Build A Password Generator with React JS - Beginners Tutorial</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<!-- Single Video Ends -->
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/46cXFUzR9XM/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnh53ZRIGnyzC28QrfuggCINb3cfNbNWo4Uc6qR9=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Bella Ciao Full Song | La Casa De Papel | Money Heist | Netflix India</h3>
<a href="">Netflix</a>
<span>10M Views • 11 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/d2na6sCyM5Q/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhESPVEatju_1yE-03-KLeSrnSLc5yy0RcvhPd5Lg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>DON'T EVER GIVE UP - Elon Musk (Motivational Video)</h3>
<a href=""> Chispa Motivation</a>
<span>10M Views • 1 Month Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/2Ji-clqUYnA/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwniaHN7MZyFEiNvdHuKMzIWnDF604Z2--O4GCMq-FA=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Javascript Fundamentals</h3>
<a href="">Coding Addict</a>
<span>179K • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/3PHXvlpOkf4/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build 15 JavaScript Projects - Vanilla JavaScript Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>470K Views • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/CVClHLwv-4I/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhIz_0Su6HhW6Ym50QCroJCAnF10X9xnnMDboN2=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build Real Time Face Detection With JavaScript</h3>
<a href=""> Web Dev Simplified </a>
<span>875K Views • 1 Year Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/ulprqHHWlng/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>AWS Basics for Beginners - Full Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>36K Views • 1 Day Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>
Top 5 Programming Languages to Learn in 2021 | Best Programming Languages to Learn
</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/YpTmcCBBdTE/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>Build A Password Generator with React JS - Beginners Tutorial</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/46cXFUzR9XM/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnh53ZRIGnyzC28QrfuggCINb3cfNbNWo4Uc6qR9=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Bella Ciao Full Song | La Casa De Papel | Money Heist | Netflix India</h3>
<a href="">Netflix</a>
<span>10M Views • 11 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/d2na6sCyM5Q/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhESPVEatju_1yE-03-KLeSrnSLc5yy0RcvhPd5Lg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>DON'T EVER GIVE UP - Elon Musk (Motivational Video)</h3>
<a href=""> Chispa Motivation</a>
<span>10M Views • 1 Month Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/2Ji-clqUYnA/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwniaHN7MZyFEiNvdHuKMzIWnDF604Z2--O4GCMq-FA=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Javascript Fundamentals</h3>
<a href="">Coding Addict</a>
<span>179K • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/3PHXvlpOkf4/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build 15 JavaScript Projects - Vanilla JavaScript Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>470K Views • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/CVClHLwv-4I/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhIz_0Su6HhW6Ym50QCroJCAnF10X9xnnMDboN2=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build Real Time Face Detection With JavaScript</h3>
<a href=""> Web Dev Simplified </a>
<span>875K Views • 1 Year Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/ulprqHHWlng/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>AWS Basics for Beginners - Full Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>36K Views • 1 Day Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>
Top 5 Programming Languages to Learn in 2021 | Best Programming Languages to Learn
</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/YpTmcCBBdTE/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>Build A Password Generator with React JS - Beginners Tutorial</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/46cXFUzR9XM/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnh53ZRIGnyzC28QrfuggCINb3cfNbNWo4Uc6qR9=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Bella Ciao Full Song | La Casa De Papel | Money Heist | Netflix India</h3>
<a href="">Netflix</a>
<span>10M Views • 11 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/d2na6sCyM5Q/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhESPVEatju_1yE-03-KLeSrnSLc5yy0RcvhPd5Lg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>DON'T EVER GIVE UP - Elon Musk (Motivational Video)</h3>
<a href=""> Chispa Motivation</a>
<span>10M Views • 1 Month Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/2Ji-clqUYnA/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwniaHN7MZyFEiNvdHuKMzIWnDF604Z2--O4GCMq-FA=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Javascript Fundamentals</h3>
<a href="">Coding Addict</a>
<span>179K • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/3PHXvlpOkf4/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build 15 JavaScript Projects - Vanilla JavaScript Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>470K Views • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/CVClHLwv-4I/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhIz_0Su6HhW6Ym50QCroJCAnF10X9xnnMDboN2=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build Real Time Face Detection With JavaScript</h3>
<a href=""> Web Dev Simplified </a>
<span>875K Views • 1 Year Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/ulprqHHWlng/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>AWS Basics for Beginners - Full Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>36K Views • 1 Day Ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
<!-- Main Body Ends -->
<script>
const menu = document.querySelector('#menu');
console.log(menu);
const sidebar = document.querySelector('.sidebar');
console.log(sidebar);
menu.addEventListener('click', function () {
sidebar.classList.toggle('show-sidebar');
});
</script>
</body>
</html>
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.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
/* header */
.material-icons {
color: rgb(96, 96, 96);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
padding: 15px;
}
.header__left {
display: flex;
align-items: center;
}
.header__left img {
width: 100px;
margin-left: 15px;
}
.header i {
padding: 0 7px;
cursor: pointer;
}
.header__search form {
border: 1px solid #ddd;
height: 35px;
margin: 0;
padding: 0;
display: flex;
}
.header__search input {
width: 500px;
padding: 10px;
margin: 0;
border-radius: 0;
border: none;
height: 100%;
}
.header__search button {
padding: 0;
margin: 0;
height: 100%;
border: none;
border-radius: 0;
}
/* Sidebar */
.mainBody {
height: calc(100vh - 70px);
display: flex;
overflow: hidden;
}
.sidebar {
height: 100%;
width: 230px;
background-color: white;
overflow-y: scroll;
}
.sidebar__categories {
width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 15px;
margin-top: 15px;
}
.sidebar__category {
display: flex;
align-items: center;
padding: 12px 25px;
}
.sidebar__category span {
margin-left: 15px;
}
.sidebar__category:hover {
background: #e5e5e5;
cursor: pointer;
}
.sidebar::-webkit-scrollbar {
display: none;
}
hr {
height: 1px;
background-color: #e5e5e5;
border: none;
}
/* videos */
.videos {
background-color: #f9f9f9;
width: 100%;
height: 100%;
padding: 15px 15px;
border-top: 1px solid #ddd;
overflow-y: scroll;
}
.videos__container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.video {
width: 310px;
margin-bottom: 30px;
}
.video__thumbnail {
width: 100%;
height: 170px;
}
.video__thumbnail img {
object-fit: cover;
height: 100%;
width: 100%;
}
.author img {
object-fit: cover;
border-radius: 50%;
height: 40px;
width: 40px;
margin-right: 10px;
}
.video__details {
display: flex;
margin-top: 10px;
}
.title {
display: flex;
flex-direction: column;
}
.title h3 {
color: rgb(3, 3, 3);
line-height: 18px;
font-size: 14px;
margin-bottom: 6px;
}
.title a,
span {
text-decoration: none;
color: rgb(96, 96, 96);
font-size: 14px;
}
h1 {
font-size: 20px;
margin-bottom: 10px;
color: rgb(3, 3, 3);
}
@media (max-width: 425px) {
.header__search {
display: none;
}
.header__icons .material-icons {
display: none;
}
.header__icons .display-this {
display: inline;
}
.sidebar {
display: none;
}
}
@media (max-width: 768px) {
.header__search {
display: none;
}
.sidebar {
display: none;
}
.show-sidebar {
display: inline;
position: fixed;
top: 4.4rem;
height: auto;
}
}
@media (max-width: 941px) {
.header__search input {
width: 300px;
}
}
Done! You can download the complete source code by clicking on download button below.
