Table of Contents
Welcome, aspiring developers! In this tutorial, we’ll embark on an exciting journey to create a responsive YouTube Home Page using HTML, CSS, and JavaScript. By the end of this tutorial, you’ll have a functional web page resembling the layout of YouTube’s home page.
Join Our Telegram Channel to Download the Project Source Code: Click Here
Introduction:
Creating a YouTube Home Page clone is not only a fun project but also a great opportunity to hone your HTML, CSS, and JavaScript skills. By dissecting and reconstructing elements such as the sidebar, navigation bar, and categories section, you’ll gain valuable insights into building responsive and dynamic web pages.
3 Steps to Set Up: YouTube Home Page Project
Please follow this Step-by-Step Guide to Create and Setup Responsive YouTube Home Page using HTML, CSS and JavaScript —
Create Project Files: Start by creating a project folder and naming it according to your preference. Inside the folder, create three files: index.html for the structure, style.css for styling, and script.js for interactivity. This foundational step establishes the framework for design the responsive YouTube Home Page Clone
Step 1: Setting Up the HTML Structure
First, let’s set up the basic HTML structure for our YouTube Home Page. Open the index.html file, then copy and paste the provided HTML code into this file. This code establishes the main structure of the YouTube Home Page, including the header, sidebar, navigation bar, and categories section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube Home Page</title>
</head>
<body>
<div class="main-grid">
<section class="sidebar" id="sidebar">
<div class="logo">
<a href="#">
<svg id="only-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 121.401 85">
<path
d="M118.9,13.3A15.211,15.211,0,0,0,108.2,2.6C98.7,0,60.7,0,60.7,0s-38,0-47.5,2.5A15.523,15.523,0,0,0,2.5,13.3C0,22.8,0,42.5,0,42.5S0,62.3,2.5,71.7A15.211,15.211,0,0,0,13.2,82.4C22.8,85,60.7,85,60.7,85s38,0,47.5-2.5a15.211,15.211,0,0,0,10.7-10.7c2.5-9.5,2.5-29.2,2.5-29.2s.1-19.8-2.5-29.3Z"
fill="red" />
<path d="M48.6,24.3V60.7L80.2,42.5Z" fill="#fff" />
</svg>
<svg id="youtube-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 247.5 73.9">
<g transform="translate(-133.5 -6)">
<path id="path7435"
d="M176.3,77.4a12.937,12.937,0,0,1-5.1-7.6,50.105,50.105,0,0,1-1.5-13.6V48.5a47.043,47.043,0,0,1,1.7-13.8,14.266,14.266,0,0,1,5.4-7.6,17.645,17.645,0,0,1,9.7-2.4,16.934,16.934,0,0,1,9.5,2.4,13.873,13.873,0,0,1,5.2,7.6,46.107,46.107,0,0,1,1.7,13.8v7.7c0,5.7-.5,10.2-1.6,13.7a13.873,13.873,0,0,1-5.2,7.6c-2.4,1.6-5.7,2.4-9.8,2.4-4.2-.1-7.6-.9-10-2.5ZM189.8,69c.7-1.7,1-4.6,1-8.5V43.9c0-3.8-.3-6.6-1-8.4a3.589,3.589,0,0,0-6.9,0c-.7,1.8-1,4.6-1,8.4V60.5c0,3.9.3,6.8,1,8.5a3.514,3.514,0,0,0,3.5,2.6C188,71.6,189.1,70.8,189.8,69Z"
fill="#fff" />
<path id="path7437"
d="M360.9,56.3V59a72.445,72.445,0,0,0,.3,7.7,6.4,6.4,0,0,0,1.3,3.7,3.51,3.51,0,0,0,3,1.2,3.751,3.751,0,0,0,3.7-2.1c.7-1.4,1-3.7,1.1-7l10.3.6a10.317,10.317,0,0,1,.1,1.9c0,4.9-1.3,8.6-4,11s-6.5,3.6-11.4,3.6c-5.9,0-10-1.9-12.4-5.6s-3.6-9.4-3.6-17.2V47.5c0-8,1.2-13.8,3.7-17.5s6.7-5.5,12.6-5.5c4.1,0,7.3.8,9.5,2.3a12.235,12.235,0,0,1,4.6,7A51.2,51.2,0,0,1,381,47v9.1H360.9Zm1.5-22.4a7.638,7.638,0,0,0-1.2,3.7,73.308,73.308,0,0,0-.3,7.8v3.8h8.8V45.4a75.954,75.954,0,0,0-.3-7.8,6.85,6.85,0,0,0-1.3-3.7,3.609,3.609,0,0,0-2.8-1.1,3.034,3.034,0,0,0-2.9,1.1Z"
fill="#fff" />
<path id="path7439"
d="M147.1,55.3,133.5,6h11.9l4.8,22.3q1.8,8.25,2.7,14.1h.3c.4-2.8,1.3-7.4,2.7-14l5-22.4h11.9L159,55.3V78.9H147.2V55.3Z"
fill="#fff" />
<path id="path7441"
d="M241.6,25.7V79h-9.4l-1-6.5h-.3c-2.5,4.9-6.4,7.4-11.5,7.4-3.5,0-6.1-1.2-7.8-3.5s-2.5-5.9-2.5-10.9V25.7h12V64.8a12.189,12.189,0,0,0,.8,5.1,2.7,2.7,0,0,0,2.6,1.5,5.131,5.131,0,0,0,3-1,4.874,4.874,0,0,0,2.1-2.4V25.7Z"
fill="#fff" />
<path id="path7443"
d="M303.1,25.7V79h-9.4l-1-6.5h-.3c-2.5,4.9-6.4,7.4-11.5,7.4-3.5,0-6.1-1.2-7.8-3.5s-2.5-5.9-2.5-10.9V25.7h12V64.8a12.189,12.189,0,0,0,.8,5.1,2.7,2.7,0,0,0,2.6,1.5,5.131,5.131,0,0,0,3-1,4.873,4.873,0,0,0,2.1-2.4V25.7Z"
fill="#fff" />
<path id="path7445" d="M274.2,15.7H262.3V78.9H250.6V15.7H238.7V6h35.5Z" fill="#fff" />
<path id="path7447"
d="M342.8,33.109c-.7-3.28-1.9-5.6-3.5-7.042a9.765,9.765,0,0,0-6.7-2.219,11.061,11.061,0,0,0-6.2,1.833,11.957,11.957,0,0,0-4.4,4.727h-.1V3.3H310.3V76.232h9.9l1.2-4.824h.3a10.031,10.031,0,0,0,4.2,4.148,13.365,13.365,0,0,0,6.2,1.544,9.4,9.4,0,0,0,8.9-5.4c1.9-3.569,2.9-9.261,2.9-16.882v-8.1a74.649,74.649,0,0,0-1.1-13.6Zm-11,20.934a64.443,64.443,0,0,1-.5,8.779,9.6,9.6,0,0,1-1.6,4.534,3.954,3.954,0,0,1-3,1.351,5.094,5.094,0,0,1-2.7-.675,5.664,5.664,0,0,1-2-2.026V36.872a7.833,7.833,0,0,1,2.1-3.473,4.939,4.939,0,0,1,3.2-1.351,3.281,3.281,0,0,1,2.8,1.351,10.75,10.75,0,0,1,1.4,4.631,75.045,75.045,0,0,1,.4,9.261v6.753Z"
transform="translate(0 2.7)" fill="#fff" />
</g>
</svg>
</a>
</div>
<div class="sidebar-inner">
<div class="item-container">
<ul class="sidebar-item-section sidebar-item-section1">
<li class="sidebar-active">
<a href="#">
<span class="item-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-home">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" />
</svg>
</span>
<span class="item-title">
Home
</span>
</a>
</li>
<li>
<a href="#">
<span class="item-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-youtube">
<path
d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
<path d="m10 15 5-3-5-3z" />
</svg>
</span>
<span class="item-title">
Subscription
</span>
</a>
</li>
<li>
<a href="#">
<span class="item-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-history">
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
<path d="M3 3v5h5" />
<path d="M12 7v5l4 2" />
</svg>
</span>
<span class="item-title">
History
</span>
</a>
</li>
<li>
<a href="#">
<span class="item-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock-8">
<circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 8 14" />
</svg>
</span>
<span class="item-title">
Watch Later
</span>
</a>
</li>
<li>
<a href="#">
<span class="item-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-thumbs-up">
<path d="M7 10v12" />
<path
d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
</svg>
</span>
<span class="item-title">
Liked videos
</span>
</a>
</li>
</ul>
<ul class="sidebar-item-section sidebar-item-section2" id="subscription">
<div class="section-title">
Subscription
</div>
<!-- <li>
<a href="#">
<span class="subscription-item-icon">
<img src="https://yt3.googleusercontent.com/UlKrbeZ4Xz79DUbEbF3FvC0FQ4A_cvpIIzhJQ_wigP8CL_Xf_WF-ryYrrtGpqpD9WzAplsUz=s176-c-k-c0x00ffffff-no-rj"
alt="image">
</span>
<span class="subscription-item-title">
Hyperplexed
</span>
</a>
</li> -->
</ul>
<ul class="sidebar-item-section3">
<div class="nav-item-section nav-item-section1">
<div class="nav-item youtube-shorts-item">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.128 251.03">
<g id="youtube-shorts-icon" transform="translate(-35.996 -54.001)">
<path id="Path_11" data-name="Path 11"
d="M129.71,5.535a48.711,48.711,0,0,1,65.456,20.082,47.705,47.705,0,0,1-20.307,64.761L155.39,100.613a48.486,48.486,0,0,1,41.145,25.578,47.688,47.688,0,0,1-20.307,64.761L72.406,245.5A48.711,48.711,0,0,1,6.95,225.416a47.705,47.705,0,0,1,20.307-64.761L46.726,150.42A48.486,48.486,0,0,1,5.581,124.842,47.705,47.705,0,0,1,25.888,60.081L129.71,5.535Z"
transform="translate(36 54)" fill="red" fill-rule="evenodd" />
<path id="Path_14" data-name="Path 14" d="M38.5,0,77.275,62.322l-77.4-.012Z"
transform="translate(171.996 141.001) rotate(90)" fill="#fff" />
</g>
</svg>
</span>
</div>
<div class="nav-item">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 36">
<path id="Icon_awesome-fire" data-name="Icon awesome-fire"
d="M15.188,1.678a1.691,1.691,0,0,0-3.1-.917C3.375,13.489,15.75,14.063,15.75,20.25a4.5,4.5,0,1,1-9-.067V14.171a1.688,1.688,0,0,0-2.913-1.16A14.059,14.059,0,0,0,0,22.5a13.5,13.5,0,0,0,27,0C27,10.526,15.188,8.93,15.188,1.678Z"
transform="translate(0 0)" />
</svg>
</span>
</div>
</div>
<div class="nav-item-section nav-item-section2">
<div class="nav-item">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.5 29.602">
<g id="Group_5" data-name="Group 5" transform="translate(441 -1.553)">
<path id="Union_1" data-name="Union 1"
d="M11.46,25.7h-9.2A2.252,2.252,0,0,1,0,23.448a2.194,2.194,0,0,1,.606-1.526c1.358-1.46,3.9-3.656,3.9-10.849a11.1,11.1,0,0,1,9-10.91,15.528,15.528,0,0,1,4.5,0,11.1,11.1,0,0,1,9,10.91c0,7.193,2.542,9.389,3.9,10.849a2.194,2.194,0,0,1,.606,1.526,2.252,2.252,0,0,1-2.257,2.25h-9.2a4.309,4.309,0,0,1-8.579,0Z"
transform="translate(-441 1.553)" />
</g>
</svg>
</span>
</div>
<div class="profile-icon">
<span class="profile-pic">
<img src="https://assets.codepen.io/9240354/internal/avatars/users/default.png"
alt="Profile">
</span>
<span class="arrow-down-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-down">
<path d="m6 9 6 6 6-6" />
</svg>
</span>
</div>
</div>
</ul>
</div>
</div>
</section>
<section class="nav-bar">
<div class="nav-item-section nav-item-section1">
<div tabindex="0" class="nav-item youtube-shorts-item">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.128 251.03">
<g id="youtube-shorts-icon" transform="translate(-35.996 -54.001)">
<path id="Path_11" data-name="Path 11"
d="M129.71,5.535a48.711,48.711,0,0,1,65.456,20.082,47.705,47.705,0,0,1-20.307,64.761L155.39,100.613a48.486,48.486,0,0,1,41.145,25.578,47.688,47.688,0,0,1-20.307,64.761L72.406,245.5A48.711,48.711,0,0,1,6.95,225.416a47.705,47.705,0,0,1,20.307-64.761L46.726,150.42A48.486,48.486,0,0,1,5.581,124.842,47.705,47.705,0,0,1,25.888,60.081L129.71,5.535Z"
transform="translate(36 54)" fill="red" fill-rule="evenodd" />
<path id="Path_14" data-name="Path 14" d="M38.5,0,77.275,62.322l-77.4-.012Z"
transform="translate(171.996 141.001) rotate(90)" fill="#fff" />
</g>
</svg>
</span>
</div>
<div class="nav-item" tabindex="0">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 36">
<path id="Icon_awesome-fire" data-name="Icon awesome-fire"
d="M15.188,1.678a1.691,1.691,0,0,0-3.1-.917C3.375,13.489,15.75,14.063,15.75,20.25a4.5,4.5,0,1,1-9-.067V14.171a1.688,1.688,0,0,0-2.913-1.16A14.059,14.059,0,0,0,0,22.5a13.5,13.5,0,0,0,27,0C27,10.526,15.188,8.93,15.188,1.678Z"
transform="translate(0 0)" />
</svg>
</span>
</div>
</div>
<div class="search-bar-section">
<input type="text" placeholder="search" />
<button class="search-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
</svg>
</button>
</div>
<div class="nav-item-section nav-item-section2">
<div class="nav-item" tabindex="0">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.147 18">
<path
d="M16.98,18H3.621A3.622,3.622,0,0,1,0,14.386V3.614A3.618,3.618,0,0,1,3.614,0H16.973a3.618,3.618,0,0,1,3.614,3.614v.167L23.426,1.99a1.205,1.205,0,0,1,.654-.19h1.462a.6.6,0,0,1,.6.6V15.617a.6.6,0,0,1-.6.6H24.08a1.265,1.265,0,0,1-.654-.19l-2.839-1.792v.147A3.618,3.618,0,0,1,16.98,18ZM6.749,7.5a1.5,1.5,0,1,0,0,3h2.43v2.312a1.5,1.5,0,1,0,3,0V10.5h2.43a1.5,1.5,0,0,0,0-3h-2.43V5.188a1.5,1.5,0,0,0-3,0V7.5Z" />
</svg>
</span>
</div>
<div class="nav-item-section nav-item-section2">
<div class="nav-item" tabindex="0">
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.5 29.602">
<g id="Group_5" data-name="Group 5" transform="translate(441 -1.553)">
<path id="Union_1" data-name="Union 1"
d="M11.46,25.7h-9.2A2.252,2.252,0,0,1,0,23.448a2.194,2.194,0,0,1,.606-1.526c1.358-1.46,3.9-3.656,3.9-10.849a11.1,11.1,0,0,1,9-10.91,15.528,15.528,0,0,1,4.5,0,11.1,11.1,0,0,1,9,10.91c0,7.193,2.542,9.389,3.9,10.849a2.194,2.194,0,0,1,.606,1.526,2.252,2.252,0,0,1-2.257,2.25h-9.2a4.309,4.309,0,0,1-8.579,0Z"
transform="translate(-441 1.553)" />
</g>
</svg>
</span>
</div>
<div class="profile-icon" tabindex="0">
<span class="profile-pic">
<img src="https://assets.codepen.io/9240354/internal/avatars/users/default.png?format=auto&version=1690567068&width=80&height=80"
alt="Profile">
</span>
<span class="arrow-down-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-down">
<path d="m6 9 6 6 6-6" />
</svg>
</span>
</div>
</div>
</section>
<section class="catagories">
<span>All</span>
<span>UI Design</span>
<span>Gaming</span>
<span>Superheroes</span>
<span>Web Development</span>
<span>VFX</span>
<span>Java Script</span>
<span>Art & Craft</span>
<span>New to you</span>
<span>Live</span>
<span>Blender</span>
<span>Adobe</span>
<span>marvel Studios</span>
<span>Star Wars</span>
<span>UI/UX</span>
</section>
<section class="main" id="main">
<!-- <div class="card">
<div class="thumbnail">
<img src="https://i.ytimg.com/vi/Kt3DavtVGVE/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAyAJFjZELD-vk1n3d4rohdXMqc_Q"
alt="Thumbnail">
<div class="duration">17:49</div>
</div>
<div class="content">
<div class="profile-pic">
<img src="https://yt3.googleusercontent.com/UlKrbeZ4Xz79DUbEbF3FvC0FQ4A_cvpIIzhJQ_wigP8CL_Xf_WF-ryYrrtGpqpD9WzAplsUz=s176-c-k-c0x00ffffff-no-rj"
alt="profile">
</div>
<span class="title">Unravelling the Magic behind Polyrhythms</span>
<span class="channel-name">Hyperplexed
<span class="verified">
<svg viewBox="0 0 24 24" focusable="false">
<path
d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zM9.8 17.3l-4.2-4.1L7 11.8l2.8 2.7L17 7.4l1.4 1.4-8.6 8.5z">
</path>
</svg>
</span>
</span>
<span class="views">139K views . <span class="time">2 months ago</span></span>
</div>
</div> -->
</section>
</div>
</body>
</html>Step 2: Styling with CSS
Now, let’s add the below CSS styles in the styles.css file to make our YouTube Home Page visually appealing and responsive. This CSS file contains styles for the YouTube Home Page elements, ensuring a visually appealing layout. Feel free to customize the styles to match your preferences.
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Nunito", sans-serif;
}
body {
background: #141414;
max-height: 100dvh;
}
.main-grid {
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: 75px 40px auto;
gap: 1rem;
height: calc(100dvh - 2rem);
margin: 1rem;
}
.sidebar {
width: 100%;
height: 100%;
background: #1f1f1f;
border-radius: 15px;
padding: 1rem 0.2rem 1rem 1rem;
overflow: hidden;
position: relative;
grid-row: span 3;
}
.sidebar .logo {
position: absolute;
top: 1rem;
left: 0;
width: 100%;
height: 50px;
padding: 10px 0;
border-radius: inherit;
text-align: center;
border-radius: inherit;
padding-right: 0.8rem;
}
.sidebar .logo a {
display: flex;
align-items: center;
height: 100%;
justify-content: center;
gap: 5px;
}
.sidebar .logo a svg {
height: 100%;
}
.sidebar .sidebar-inner {
width: 100%;
height: 100%;
border-radius: inherit;
}
.sidebar .sidebar-inner .item-container {
width: 100%;
height: calc(100% - 50px);
margin-top: 50px;
overflow-y: auto;
}
.sidebar .sidebar-inner .item-container::-webkit-scrollbar-thumb {
border-radius: 4px;
}
.sidebar .sidebar-inner .item-container:hover::-webkit-scrollbar-thumb {
background-color: #141414;
}
.sidebar .sidebar-inner .item-container::-webkit-scrollbar {
width: 4px;
background-color: #1f1f1f;
}
.sidebar .sidebar-active {
background: #141414;
border: 2px solid black;
}
.sidebar-item-section {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.1rem;
padding-right: 0.2rem;
margin-top: 2rem;
}
.sidebar-item-section .section-title {
font-weight: 900;
text-transform: uppercase;
color: #9a9a9a;
padding-left: 1rem;
margin-bottom: 0.5rem;
}
.sidebar-item-section li {
list-style: none;
padding: 1rem;
border-radius: 15px;
border: 2px solid transparent;
}
.sidebar-item-section li:hover {
background: #141414;
border: 2px solid black;
}
.sidebar-item-section li a {
text-decoration: none;
color: #f5f5f5;
display: flex;
align-items: center;
gap: 1rem;
}
.sidebar-item-section li a .item-icon {
display: grid;
place-content: center;
width: 20px;
aspect-ratio: 1;
}
.sidebar-item-section li a .item-icon svg {
width: 100%;
fill: none;
stroke: #e9e9e9;
stroke-width: 2px;
}
.sidebar-item-section li a .item-title {
color: #f5f5f5;
}
.sidebar-item-section li a .subscription-item-icon {
width: 25px;
aspect-ratio: 1;
border-radius: 15px;
overflow: hidden;
}
.sidebar-item-section li a .subscription-item-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.sidebar-item-section3 {
display: none;
}
.nav-bar {
background: #1f1f1f;
border-radius: 15px;
padding: 1rem;
display: flex;
gap: 1rem;
justify-content: space-between;
}
.nav-bar .nav-item-section {
display: flex;
gap: 1rem;
}
.nav-bar .search-bar-section {
height: 100%;
flex-grow: 1;
max-width: 600px;
display: flex;
border-radius: 10px;
}
.nav-bar .search-bar-section input {
flex-grow: 1;
height: 100%;
background: #141414;
border-radius: min(10px, calc(15px));
border: none;
padding: 0.3rem 1rem;
color: #e9e9e9;
font-weight: 700;
border: 2px solid transparent;
width: 50px;
}
.nav-bar .search-bar-section input:focus {
outline: none;
border: 2px solid black;
}
.nav-bar .search-bar-section .search-button {
margin-left: -15px;
height: 100%;
aspect-ratio: 1;
background: #2e2e2e;
border-radius: min(10px, calc(15px));
border: none;
padding: 0.8rem;
background: black;
}
.nav-bar .search-bar-section .search-button svg {
fill: #9a9a9a;
}
.nav-bar .search-bar-section .search-button:hover svg {
fill: #ffffff;
}
.nav-bar .search-bar-section .search-button:active {
transform: scale(0.9);
}
.nav-item {
background: #2e2e2e;
border-radius: min(10px, calc(15px));
height: 100%;
aspect-ratio: 1;
padding: 0.6rem;
border: 2px solid transparent;
}
.nav-item .nav-icon {
display: inline-block;
width: 100%;
height: 100%;
}
.nav-item .nav-icon svg {
width: 100%;
height: 100%;
fill: #9a9a9a;
}
.nav-item:hover {
background: #141414;
border: 2px solid black;
}
.nav-item:hover .nav-icon svg {
fill: #ffffff;
}
.youtube-shorts-item {
background: rgba(255, 0, 0, 0.2);
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgba(255, 0, 0, 0) 0px 0px 0px 1px;
}
.youtube-shorts-item:hover {
background: rgba(255, 0, 0, 0.1);
border: 2px solid #ff0000;
}
.youtube-shorts-item:hover svg {
fill: #ff0000 !important;
}
.profile-icon {
height: 100%;
border-radius: min(10px, calc(15px));
overflow: hidden;
padding: 0.3rem;
background: #2e2e2e;
display: flex;
align-items: center;
gap: 0.3rem;
border: 2px solid transparent;
}
.profile-icon .profile-pic {
height: 100%;
aspect-ratio: 1;
border-radius: min(8px, calc(15px));
overflow: hidden;
}
.profile-icon .profile-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-icon .arrow-down-icon {
width: 20px;
display: grid;
place-content: center;
}
.profile-icon .arrow-down-icon svg {
width: 100%;
fill: none;
stroke-width: 3px;
stroke: #9a9a9a;
}
.profile-icon:hover {
border: 2px solid black;
background: #141414;
}
.profile-icon:hover .profile-pic {
filter: brightness(2);
}
.catagories {
display: flex;
gap: 1rem;
overflow-x: auto;
border-radius: 15px;
scrollbar-width: none;
}
.catagories::-webkit-scrollbar {
display: none;
}
.catagories span {
flex-shrink: 0;
display: flex;
align-items: center;
height: 100%;
padding: 5px 20px;
background: #1f1f1f;
color: #f5f5f5;
font-size: 0.8rem;
font-weight: 700;
border-radius: 15px;
cursor: pointer;
}
.catagories span:first-child {
background: #ffffff;
color: #141414;
}
.catagories span:hover {
background: #e9e9e9;
color: #141414;
}
.main {
border-radius: 15px;
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: space-between;
overflow: auto;
}
.main::-webkit-scrollbar {
width: 0px;
}
.main .card {
flex: 1 0 20%;
background: #1f1f1f;
border-radius: 15px;
padding: 1rem;
border: 2px solid transparent;
}
.main .card .thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16/9;
border-radius: calc(15px - 5px);
overflow: hidden;
}
.main .card .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease-in-out;
}
.main .card .thumbnail .duration {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
padding: 2px 5px;
background: rgba(0, 0, 0, 0.736);
color: #ffffff;
font-size: 0.7rem;
border-radius: min(5px, calc(15px));
}
.main .card .content {
width: 100%;
position: relative;
padding-top: 30px;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.main .card .content .profile-pic {
position: absolute;
top: -20px;
left: 10px;
height: 40px;
aspect-ratio: 1;
border-radius: min(30%, calc(15px));
overflow: hidden;
}
.main .card .content .profile-pic img {
width: 100%;
}
.main .card .content .title {
display: block;
color: #f5f5f5;
font-size: 0.9rem;
font-weight: 600;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.main .card .content .channel-name {
color: #9a9a9a;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
}
.main .card .content .channel-name .verified {
display: inline-block;
height: 15px;
}
.main .card .content .channel-name .verified svg {
fill: #9a9a9a;
height: 100%;
}
.main .card .content .views,
.main .card .content .time {
display: inline-block;
color: #9a9a9a;
font-size: 0.8rem;
font-weight: 600;
}
.main .card:hover {
border: 2px solid black;
}
.main .card:hover .thumbnail img {
transform: scale(1.1);
}
@media (max-width: 1250px) {
.main .card {
flex: 1 0 30%;
}
}
@media (max-width: 1000px) {
.main .card {
flex: 1 0 40%;
}
}
@media (max-width: 550px) {
.main .card {
flex: 1 0 100%;
}
}
@media (max-width: 900px) {
.item-title,
.sidebar-item-section2 {
display: none;
}
.sidebar-item-section3 {
display: block;
}
.main-grid {
grid-template-columns: 70px auto;
}
.sidebar {
padding: 0.6rem;
}
.sidebar .sidebar-inner .item-container::-webkit-scrollbar {
width: 0;
}
.sidebar .sidebar-item-section {
padding: 0;
}
.sidebar .logo {
padding: 0.6rem;
}
.sidebar .logo a #youtube-text {
display: none;
}
.nav-bar {
gap: 0;
}
.nav-bar .nav-item-section {
display: none;
}
.nav-bar .search-bar-section {
max-width: unset;
}
.sidebar-item-section li {
padding: 0.9rem;
}
.sidebar-item-section li a .item-icon {
width: 30px;
}
.item-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-item {
border-radius: 15px;
width: 100%;
aspect-ratio: 1;
padding: 0 0.9rem;
background: transparent;
}
.nav-item:hover {
background: transparent;
border: none;
}
.youtube-shorts-item {
box-shadow: none;
}
.profile-icon {
padding: 0;
border: none;
}
.profile-icon .arrow-down-icon {
display: none;
}
}Step 3: Adding Interactivity with JavaScript
Lastly, let’s enhance our YouTube Home Page with some interactive features using JavaScript. For this just paste the below JS code in the script.js file. This code includes a sample SVG animation, but you can further extend it based on your creativity.
const cardContainer = document.getElementById("main");
const sidebarSubscriptions = document.getElementById("subscription");
const cards = [
{
thumbnail : 'https://i.ytimg.com/vi/6TYkDy54q4E/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBWCIWtkNOQuG_8cs42HbQygXoCTA',
duration : '11:11',
profile: 'https://yt3.googleusercontent.com/UlKrbeZ4Xz79DUbEbF3FvC0FQ4A_cvpIIzhJQ_wigP8CL_Xf_WF-ryYrrtGpqpD9WzAplsUz=s176-c-k-c0x00ffffff-no-rj',
title : 'ImNotGoodEnough.js',
channelName: 'Hyperplexed',
views: '637k',
time : '1 year'
},
{
thumbnail : 'https://i.ytimg.com/vi/rioc6mTWOZs/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDJiTR6fmKJU7LmK2o1lfq5F7PXEw',
duration : '24:26',
profile: 'https://yt3.googleusercontent.com/tWGVfHXn5SaAsw-7livA-p-Db6VrWKtLESCqIaR0Gw6cMN47dhUWt3nMPYcoF7ueZBDsUq4atg=s176-c-k-c0x00ffffff-no-rj',
title : 'Photoshopping YOUR Drawings! | Realistified! S1E3',
channelName: 'Benny Productions',
views: '11M',
time : '2 years'
},
{
thumbnail : 'https://i.ytimg.com/vi/-QgJgZCJvo4/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLB_2KVRoB69h4VCTsgcCODnftemTA',
duration : '37:45',
profile: 'https://yt3.googleusercontent.com/ytc/AOPolaS101j27Disa_BYArytv-hXMRl8wNMtqZMTkrfH=s176-c-k-c0x00ffffff-no-rj',
title : 'I Challenged The CSS King To A CSS Battle',
channelName: 'Web Dev Simplified',
views: '1.2M',
time : '2 years'
},
{
thumbnail : 'https://i.ytimg.com/vi/pY-kr8DgnWk/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDfnmE-lFvJm6jPhcTdJz6-fIe95A',
duration : '15:01',
profile: 'https://yt3.googleusercontent.com/okRlBwXJN68DuPhHs_AaMlOHVwfnHWEL7is5lV3RTyYlJSDvOy58-q-OyCm5bSOU71csOHyaKQ=s176-c-k-c0x00ffffff-no-rj',
title : 'VFX Artists React to Bad & Great CGi 9',
channelName: 'Corridor Crew',
views: '6.7M',
time : '3 years'
},
{
thumbnail : 'https://i.ytimg.com/vi/YjYsjyu7TIY/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBNLuOheAZSFFZQUDo_vSFpvga2vg',
duration : '4:39',
profile: 'https://yt3.googleusercontent.com/ytc/AOPolaRbWvcPuAZMiqeKn637mEoXt2qZg-z1Aic6mFg=s176-c-k-c0x00ffffff-no-rj',
title : 'Wednesday Playing Cello Theme | Paint It Black - The Rolling Stones (Episode 1 Soundtrack Netflix)',
channelName: 'Krutikov Music',
views: '5.8M',
time : '8 months'
},
{
thumbnail : 'https://i.ytimg.com/vi/0e3GPea1Tyg/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLD97HrPD21P7TSwUSpdGr2vz7i7cg',
duration : '25:42',
profile: 'https://yt3.googleusercontent.com/ytc/AOPolaSe-ifBRtdfb67uDM8kaHdhdPdQny-MaSRdBfT2NA=s176-c-k-c0x00ffffff-no-rj',
title : '$456,000 Squid Game In Real Life!',
channelName: 'MrBeast',
views: '469M',
time : '1 year'
},
{
thumbnail : 'https://i.ytimg.com/vi/nk0qACYkbQM/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCxAA5VdczKRj0edUtijLRdzLJP4A',
duration : '15:34',
profile: 'https://yt3.googleusercontent.com/enyLBm1Sy8mVRXJJLWHT2z64nqxJGt2g61A9xnxpUjO2YAUovHaY_JT3rnAg0j6Qij9iaHQlAg=s176-c-k-c0x00ffffff-no-rj',
title : 'Nothing Phone (2) Impressions ft Nothing CEO!',
channelName: 'Mrwhosetheboss',
views: '2.7M',
time : '2 weeks'
},
{
thumbnail : 'https://i.ytimg.com/vi/0fA8J1UyT6I/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBaykf02_5xrw5BkGU7KLh4Q1tdYw',
duration : '16:33',
profile: 'https://yt3.googleusercontent.com/ytc/AOPolaQnQusYXzxBd2-knQxbeFiCWZ_dfPdX0Mu5v_oQcg=s176-c-k-c0x00ffffff-no-rj',
title : 'Incredible Hidden Details in Spider-Man: Across The Spider-Verse (Part 3)',
channelName: 'The Canadian Lad',
views: '850k',
time : '8 days'
},
{
thumbnail : 'https://i.ytimg.com/vi/CGjKO_F6y9g/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAIpcMuo9sN9S1rt0lU6on23YoPpw',
duration : '11:45',
profile: 'https://yt3.googleusercontent.com/HB-lIXnCINyWJY17l3UppuluNz_pc4uxv9KhtZuGJSjEjcByODmpqb1I9B2Tv5UUCywdolWaveg=s176-c-k-c0x00ffffff-no-rj',
title : 'Can I Build a SHIPWRECK in ROBLOX?! | Theme Park Tycoon 2 • #38',
channelName: "Benji's Adventures",
views: '38k',
time : '2 days'
},
{
thumbnail : 'https://i.ytimg.com/vi/ejoEUpUSIiU/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCTe-27OKAFkYPRssdqMkVWZKbNmA',
duration : '3:42',
profile: 'https://yt3.ggpht.com/9QBOD8JbiG7_HHZj7TUOtTriUcAefAWxtBRaun832mE4y_OCzIcLq8Lf_3yWshHiwPePhPznTQ=s88-c-k-c0x00ffffff-no-rj',
title : 'Loki Theme | EPIC GLORIOUS VERSION (Loki Soundtrack Cover)',
channelName: 'Samuel Kim Music',
views: '5.9M',
time : '2 years'
},
{
thumbnail : 'https://i.ytimg.com/vi/705XCEruZFs/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLA2oEKcrIi5CpR9mpcL-JFu_wkwYA',
duration : '11:37',
profile: 'https://yt3.ggpht.com/ytc/AOPolaQ2iMmw9cWFFjnwa13nBwtZQbl-AqGYkkiTqNaTLg=s68-c-k-c0x00ffffff-no-rj',
title : 'The Joy of CSS Grid - Build 3 Beautifully Simple Responsive Layouts',
channelName: 'Fireship',
views: '405k',
time : '3 years'
},
{
thumbnail : 'https://i.ytimg.com/vi/vgjSrJ022lo/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAAV7r0Pyh0-zxpBR-QxM2aQYHHwQ',
duration : '11:54',
profile: 'https://yt3.googleusercontent.com/ytc/AOPolaRHeytO1y7AbKLw3UyJFoIAMydxKNnuz2Y-gVi4iw=s176-c-k-c0x00ffffff-no-rj',
title : "MINOTAUR'S MOST SAVAGE FIGHTS! | BattleBots",
channelName: 'BattleBots',
views: '9.8M ',
time : '1 year'
},
]
const generateCard = (thumbnail, duration, profile, title, channelName, views, time) => {
const card = document.createElement("div");
card.classList.add('card');
card.innerHTML = `<div class="thumbnail"><img src="${thumbnail}"alt="Thumbnail"><div class="duration">${duration}</div></div><div class="content"><div class="profile-pic"><img src="${profile}"alt="profile"></div><span class="title">${title}</span><span class="channel-name">${channelName}<span class="verified"><svg viewBox="0 0 24 24" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zM9.8 17.3l-4.2-4.1L7 11.8l2.8 2.7L17 7.4l1.4 1.4-8.6 8.5z"></path></svg></span></span><span class="views">${views} views . <span class="time">${time} ago</span></span></div>`
return card;
}
cards.forEach((card) => {
const finalCard = generateCard(card.thumbnail, card.duration, card.profile, card.title, card.channelName, card.views, card.time);
cardContainer.appendChild(finalCard);
});
const generateSidebarItem = (profile, channelName) => {
const item = document.createElement("li");
item.innerHTML = `<a href="#"><span class="subscription-item-icon"><img src="${profile}" alt="image"></span><span class="subscription-item-title"> ${channelName} </span> </a>`
return item;
}
cards.forEach((card) => {
const item = generateSidebarItem(card.profile, card.channelName);
sidebarSubscriptions.appendChild(item);
})Conclusion:
Congratulations! You’ve successfully created a responsive YouTube Home Page using HTML, CSS, and JavaScript. Through this project, you’ve gained hands-on experience in front-end web development and learned valuable techniques for building dynamic and engaging web pages. Keep experimenting and exploring new ideas to further expand your skills.
Now, it’s time to showcase your masterpiece to the world and continue your journey towards becoming a proficient web developer. Remember, practice makes perfect. Keep experimenting, learning, and building amazing projects. Stay tuned for more tutorials and happy coding!
Join Our Telegram Channel to Download the Project Source Code: Click Here
For your convenience, the total source code of this “login and signup form” project instructional practice is accessible for download by clicking the Download Code button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
