YouTube Clone Project | HTML CSS YouTube Clone | YouTube Clone Tutorial | Frontend Development Project | Web Development with HTML and CSS
Explore this project where a YouTube clone is created using HTML and CSS. This tutorial showcases skills in frontend development, including responsive design, video embedding, and custom styling. Follow along to learn how to build this from scratch and gain useful tips and tricks for your own web development projects.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube Clone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<aside>
<div class="bars">
<img src="icons/bars.svg" alt="bars" />
</div>
<div class="side-icons">
<i>
<img src="icons/home.svg" alt="home" />
</i>
<p>Home</p>
</div>
<div class="side-icons">
<i>
<img src="icons/compass.svg" alt="explore" />
</i>
<p>Explore</p>
</div>
<div class="side-icons">
<i>
<img src="icons/video-gallary.svg" alt="gallary" />
</i>
<p>Subscriptions</p>
</div>
<div class="side-icons">
<i>
<img src="icons/video-library.svg" alt="library" />
</i>
<p>Library</p>
</div>
</aside>
<div class="main-container">
<header>
<nav>
<div class="logo">
<img src="images/youtube-logo.png" alt="Youtube Logo" />
</div>
<div class="center-nav">
<div class="search">
<input type="text" />
<button>
<img src="icons/search.svg" alt="search" />
</button>
</div>
<div class="mic">
<img src="icons/mic.svg" alt="mic" />
</div>
</div>
<div class="side-nav">
<i>
<img src="icons/video-add.svg" alt="video add" />
</i>
<i>
<img src="icons/dot-grid.svg" alt="grid" />
</i>
<i>
<img src="icons/bell.svg" alt="bell" />
</i>
<i>
<img src="images/avatar.png" alt="avatar" />
</i>
</div>
</nav>
<div class="tags">
<div class="tag dark">All</div>
<div class="tag light">Mixes</div>
<div class="tag light">Crypto</div>
<div class="tag light">Html</div>
<div class="tag light">CSS</div>
<div class="tag light">Javascript</div>
</div>
</header>
<main>
<div class="card-container">
<div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div>
<div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div><div class="card">
<img src="images/uiux.jpg" alt="thumbnail"/>
<div class="avatar-content">
<div class="avatar">
<img src="images/avatar.png" alt="avatar">
</div>
<div class="content">
<h3>UI/UX complete course Hindi</h3>
<p class="channel-name">
Niteshtech
</p>
<div class="content-status">
<p>10cr views</p>
<p>1 day ago</p>
</div>
</div>
<div class="dots">
<img src="icons/dots.svg" alt="dots">
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=
Roboto:ital,wght@0,100;0,300;0,500;0,700;0,900;1,100;1,
300;1,400;1,500;1,700;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: "Roboto", sans-serif;
font-weight: 300;
line-height: 1.4;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.logo img {
width: 150px;
height: auto;
}
.center-nav {
display: flex;
}
.search {
display: flex;
}
.search input {
min-width: 600px;
padding: 10px 20px;
border: 0.5px solid #ccc;
}
.search button {
border: none;
padding: 10px 20px;
}
.mic {
padding: 15px;
border-radius: 50%;
background: rgb(240, 239, 239);
display: grid;
place-items: center;
margin-left: 15px;
}
.mic img {
width: 30px;
}
.side-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-right: 50px;
}
.tags {
display: flex;
padding: 10px 20px;
gap: 15px;
border-top: 1px solid #ccc;
}
.tag {
padding: 5px 15px;
border-radius: 20px;
border: 1px solid rgb(22, 22, 22);
}
.dark {
background: #000;
color: white;
}
.light {
background: rgb(238, 238, 238);
color: rgb(67, 67, 67);
}
.container {
display: flex;
}
aside {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.side-icons {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.side-icons img {
width: 30px;
}
.side-icons p {
font-size: 10px;
margin-top: -5px;
}
.bars {
margin-top: 20px;
}
.main-container {
width: 100%;
}
main {
min-height: 100vh;
background: rgb(240, 238, 238);
}
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.card {
padding: 10px;
max-width: 320px;
display: flex;
flex-direction: column;
}
.avatar-content {
padding-top: 10px;
display: flex;
gap: 5px;
}
.card h3 {
font-size: 20px;
}
.content {
display: flex;
flex-direction: column;
gap: 5px;
}
.channel-name {
font-size: 16px;
font-weight: bold;
}
.content-status {
display: flex;
font-size: 14px;
gap: 10px;
}
Comments
Post a Comment