Hello Guys, welcome back to another blog from The Coding Hubs. Today in this tutorial, we are going to Build A YouTube Clone in HTML CSS and JavaScript
Contents
IntroductionSteps to Build A YouTube Clone in HTML CSS and JavaScriptStep 1: Write HTML Code to Build A YouTube Clone in HTML CSS and JavaScriptStep 2: Write CSS Code to Build A YouTube Clone in HTML CSS and JavaScriptStep 3: Write JavaScript Code to Build A YouTube Clone in HTML CSS and JavaScriptOutput Download Build A YouTube Clone in HTML CSS and JavaScript
Introduction
A YouTube clone is a perfect project you can do to increase your front-end development skills, and it’s fun as well. You work with a design that you know from the start, allowing you to use HTML, CSS, and JavaScript as well. By doing this clone, you’ll learn how modern websites are structured and styled.
Today, I am going to show you how we can easily Build A YouTube Clone in HTML CSS and JavaScript. We will recreate the YouTube homepage layout, such as the navbar with search, grid view for videos, and collapsible sidebar as well as a dark/light mode switch.
Throughout this project, you will immerse yourself in the world of website structuring and styling by learning how to build web pages that appear attractively on any device.
You might like this:
- Online Ticket Booking Website Project
- Create a Chatbot with HTML CSS and JavaScript
- Make Calculator in HTML CSS and JavaScript
- Resume Generator App
Steps to Build A YouTube Clone in HTML CSS and JavaScript
To make a Build A YouTube Clone in HTML CSS and JavaScript. Make a new folder and give your project whatever name you like. I have given a YT UI. Then, make three files inside this folder. Give the file names accordingly: index.html, style.css, and script.js.
After creating these files, copy and paste the provided codes into the respective files. If you would instead do this, scroll down and click the provided download button to get the YouTube Clone in HTML CSS and JavaScript source code file.
Step 1: Write HTML Code to Build A YouTube Clone in HTML CSS and JavaScript
Start by launching your index.html file and adding the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube-like Interface</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="dark">
<div class="flex">
<!-- Sidebar -->
<aside class="w-1/6 h-screen p-4 fixed top-0 left-0">
<div class="text-2xl font-bold mb-6">Premium</div>
<ul>
<li class="mb-4">
<a href="#" class="flex items-center">
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>
Home
</a>
</li>
<li class="mb-4"><a href="#" class="flex items-center">Shorts</a></li>
<li class="mb-4"><a href="#" class="flex items-center">Subscriptions</a></li>
<li class="mb-4"><a href="#" class="flex items-center">YouTube Music</a></li>
<hr class="border-gray-700 my-4">
<li class="mb-4"><a href="#" class="flex items-center">Your channel</a></li>
<li class="mb-4"><a href="#" class="flex items-center">History</a></li>
<li class="mb-4"><a href="#" class="flex items-center">Playlists</a></li>
<li class="mb-4"><a href="#" class="flex items-center">Your videos</a></li>
<li class="mb-4"><a href="#" class="flex items-center">Watch later</a></li>
<li class="mb-4"><a href="#" class="flex items-center">Liked videos</a></li>
<li class="mb-4"><a href="#" class="flex items-center">Downloads</a></li>
<li class="mb-4"><a href="#" class="flex items-center">Your clips</a></li>
</ul>
<div class="mt-6">
<h3 class="text-lg font-bold mb-2">Subscriptions</h3>
<ul>
<li class="mb-2">Channel 1</li>
<li class="mb-2">Channel 2</li>
<li class="mb-2">Channel 3</li>
<li class="mb-2">Channel 4</li>
</ul>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 p-6 ml-1/6" style="margin-left: 16.666667%;">
<!-- Search Bar -->
<div class="flex justify-center items-center mb-6">
<input type="text" placeholder="Search" class="px-4 py-2 rounded mr-2">
<button class="bg-gray-800 px-4 py-2 rounded">Search</button>
<button id="theme-toggle" class="toggle-theme-btn px-4 py-2 rounded ml-2">Toggle Theme</button>
</div>
<!-- Search Filters -->
<div class="filter flex space-x-2 mb-6">
<button class="bg-gray-800 px-4 py-2 rounded">All</button>
<button class="bg-gray-800 px-4 py-2 rounded">T-Series</button>
<button class="bg-gray-800 px-4 py-2 rounded">Indian pop music</button>
<button class="bg-gray-800 px-4 py-2 rounded">APIs</button>
<button class="bg-gray-800 px-4 py-2 rounded">Server</button>
<button class="bg-gray-800 px-4 py-2 rounded">Computer programming</button>
<button class="bg-gray-800 px-4 py-2 rounded">Computer Hardware</button>
<button class="bg-gray-800 px-4 py-2 rounded">Jukebox</button>
<button class="bg-gray-800 px-4 py-2 rounded">Live</button>
<button class="bg-gray-800 px-4 py-2 rounded">Disha Vakani</button>
<button class="bg-gray-800 px-4 py-2 rounded">Movie musicals</button>
<button class="bg-gray-800 px-4 py-2 rounded">Gaming</button>
<button class="bg-gray-800 px-4 py-2 rounded">Videos</button>
</div>
<!-- Video Thumbnails -->
<div class="video-thumbnails grid grid-cols-4 gap-4">
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">10 Mind-Blowing Facts You Never Knew About Space</h3>
<p>Space Wonders</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">Epic Drone Footage of Iceland’s Stunning Landscapes</h3>
<p>Epic Earth Views</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">How to Cook the Perfect Steak: Step-by-Step Guide</h3>
<p>Steak Secrets</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">Top 5 Life-Changing Productivity Hacks</h3>
<p>Productivity Pro</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">Exploring Abandoned Mansions: What We Found Inside</h3>
<p>Urban Explorers</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">The Science Behind Why We Dream</h3>
<p>Dream Science TV</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">Beginner’s Guide to Investing in Cryptocurrency</h3>
<p>Crypto Basics</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">DIY Home Office Makeover on a Budget</h3>
<p>Home Makeover Magic</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">The History of Video Games: From Pong to VR</h3>
<p>Game History Hub</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">Unbelievable Animal Rescues That Will Warm Your Heart</h3>
<p>Animal Rescue Heroes</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">YTraveling Solo: Tips for a Safe and Memorable Adventure</h3>
<p>Solo Travel Tips</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">10 Minute Morning Yoga Routine for Beginners</h3>
<p>Morning Yoga Flow</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">The Truth About Fast Fashion: What You Need to Know</h3>
<p>Fashion Reality Check</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">How to Build a Thriving Online Business from Scratch</h3>
<p>Online Biz Builder</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">Reacting to the Internet's Funniest Memes</h3>
<p>Meme Mania</p>
</div>
<div class="bg-700 p-4 rounded">
<img src="https://via.placeholder.com/340x170" alt="Thumbnail" class="rounded mb-2">
<h3 class="text-lg font-bold">The Ultimate Guide to Self-Care: 50 Ways to Relax and Recharge</h3>
<p>Self-Care Central</p>
</div>
<!-- More video thumbnails -->
</div>
</main>
</div>
</body>
</html>
Step 2: Write CSS Code to Build A YouTube Clone in HTML CSS and JavaScript
The second step is to open your style.css file and add the following code.
:root {
--bg-color-light: #ffffff;
--text-color-light: #000000;
--sidebar-bg-color-light: #f0f0f0;
--button-bg-color-light: #e0e0e0;
--input-bg-color-light: #d0d0d0;
--bg-color-dark: #1a202c;
--text-color-dark: #ffffff;
--sidebar-bg-color-dark: #2d3748;
--button-bg-color-dark: #4a5568;
--input-bg-color-dark: #4a5568;
}
body {
font-family: "Roboto", sans-serif;
}
body.light {
background-color: var(--bg-color-light);
color: var(--text-color-light);
}
body.light aside {
background-color: var(--sidebar-bg-color-light);
}
body.light .toggle-theme-btn,
body.light button,
body.light input {
background-color: var(--button-bg-color-light);
color: var(--text-color-light);
}
body.light input {
background-color: var(--input-bg-color-light);
}
body.dark {
background-color: var(--bg-color-dark);
color: var(--text-color-dark);
}
body.dark aside {
background-color: var(--sidebar-bg-color-dark);
}
body.dark .toggle-theme-btn,
body.dark button,
body.dark input {
background-color: var(--button-bg-color-dark);
color: var(--text-color-dark);
}
body.dark input {
background-color: var(--input-bg-color-dark);
}
#filter {
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 500;
font-style: normal;
}
.video-thumbnails h3 {
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: 500;
font-style: normal;
line-height: 22px;
}
.video-thumbnails p {
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 20px;
}
Step 3: Write JavaScript Code to Build A YouTube Clone in HTML CSS and JavaScript
Third, open the script.js file in your file and insert the script below.
const toggleButton = document.getElementById('theme-toggle');
const body = document.body;
toggleButton.addEventListener('click', () => {
body.classList.toggle('dark');
body.classList.toggle('light');
});
Output
Clicking the download option will allow you to get the source code files for this Build A YouTube Clone in HTML CSS and JavaScript JavaScript at no cost. This will be helpful if you are having trouble making your code or if it isn’t functioning as it should.