QUANTUM UNIVERSITY
ROORKEE
PROJECT REPORT
Submitted in partial fulfillment of the requirements for the degree of Bachelor
of Technology in Computer Science and Engineering
Project Name:
YOUTUBE CLONE
Name : Ayush Singh Chaudhary
Roll No : 28
QID : 24030250
Submitted To: Ankita Singh Rana Ma’am
ACKNOWLEDGMENT
I would like to express my sincere gratitude to all those who supported me throughout the
completion of this project.
First and foremost, I would like to thank Ankita Singh Rana Ma’am, my project guide, for their
continuous guidance, valuable suggestions, and encouragement during the course of this
project. Their insights helped me understand the core concepts of web development and apply
them effectively in building the Youtube Clone.
I am also thankful to my institution QUANTUM UNIVERSITY, for providing the necessary
resources and a conducive learning environment.
My heartfelt thanks to my family and friends for their moral support and constant motivation,
which helped me complete this project successfully.
Finally, I extend my thanks to all the online communities, tutorials, and opensource contributors
who made valuable resources available that assisted me throughout the development process.
ABSTRACT
The objective of this project is to develop a static web-based clone of YouTube using only HTML and
CSS. This clone mimics the front-end design and layout of YouTube, focusing on the structural and
stylistic elements without incorporating dynamic functionalities like video playback, user login, or
backend processing. The goal is to understand the capabilities of HTML and CSS in replicating real-
world web interfaces and to enhance front-end development skills. The project provides insights into
responsive design, layout management, styling components, and UI/UX principles by replicating one of
the most visited websites on the internet.
TABLE OF CONTENTS
Acknowledgements………………………………………………. I
Abstract………………………………………………......................II
Tables………………………………………………...........................III
CHAPTER 1: INTRODUCTION………………………………………… 1
CHAPTER 2: LITERATURE SURVEY………………………….........2
CHAPTER 3: METHODOLOGY……………………………………..…. 3
CHAPTER 4: CODE AND OUTPUT………………………………… ...4 CHAPTER
6: CONCLUSION……………………………………………….
CHAPTER 7: FUTURE WORK……………………………………………….
References……………………………………………….....
List of Publications……………………………………………….
INTRODUCTION
With the growing popularity of online video-sharing platforms, YouTube has emerged as a dominant
force in the digital content space. This project aims to recreate the front-end interface of YouTube using
only HTML and CSS, two foundational technologies in web development. The clone consists of essential
elements such as the header, sidebar navigation, video thumbnails, search bar, and footer — all styled
and positioned to simulate the original platform's design. Although the project does not include
JavaScript or backend support, it serves as a strong foundation for beginners and intermediate web
developers to practice layout techniques, Flexbox/Grid, and responsive design principles.
LITERATURE SURVEY
Numerous developers and learners have attempted front-end clones of popular websites
such as Facebook, Netflix, and YouTube as educational projects. These clones often serve
to understand and reverse-engineer complex designs using basic web development
technologies.
Key Findings:
YouTube UI Design: Researching YouTube’s layout highlights the effective use of
modern design patterns like card-based layouts, sticky headers, and responsive grids.
HTML5: Offers semantic tags like <header>, <nav>, <section>, and <footer>, which
improve code readability and SEO.
CSS3: Enables styling with features like Flexbox and Grid Layout, which simplify the
creation of responsive interfaces.
Responsive Design: Literature and tutorials stress the importance of media queries in
adapting the layout for multiple screen sizes.
Related Works:
Clones on GitHub: Many developers have uploaded open-source clones of YouTube
using HTML/CSS/JS, providing inspiration and reference for layout replication.
Online Learning Platforms: Websites like freeCodeCamp, W3Schools, and MDN Web
Docs provide tutorials and examples of cloning popular UIs with pure HTML/CSS.
METHODOLOGY
The development of the YouTube clone was structured in multiple stages:
1. Requirement Analysis
Study YouTube's layout, including header, sidebar, video cards, and footer.
Decide on a static structure without dynamic video streaming or interactivity.
2. Design Phase
Sketch the layout or wireframe using tools like Figma or pen and paper.
Define a color palette similar to YouTube’s theme (white background, black
header, red accents).
3. Development Phase
HTML Structure:
o <header> for logo, search bar, and user icons.
o <nav> or <aside> for the sidebar menu.
o <main> for displaying video cards in a grid layout.
o <footer> for extra links or copyright.
CSS Styling:
o Use Flexbox for header and sidebar alignment.
o Use CSS Grid for video thumbnails layout.
o Apply media queries for responsiveness (mobile, tablet, desktop).
o Style hover effects, borders, padding, and font settings.
4. Testing & Debugging
Open the clone in multiple browsers (Chrome, Firefox, Edge).
Test for mobile responsiveness using browser DevTools.
Validate HTML and CSS with W3C validators.
5. Final Touches
Polish the design to closely resemble YouTube’s interface.
Comment code and ensure proper file structuring.
CODE
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet"
href="[Link]">
<title>Youtube Clone</title>
</head>
<body>
<nav>
<div id="youtube-logo-container"></div>
<input type="text"
placeholder="Search"
id="search-bar">
<div id="icon-container">
<i class="material-icons"
id="app-icon">
</i>
<i class="fas fa-bell"></i>
</div>
</nav>
<section id="side-bar-section">
<div>
<ul class="side-bar">
<li id="active-title">
<i class="material-icons"
id="home-icon">
</i>
<a href="#"
class="side-bar-titles active">
Home
</a>
</li>
<li>
<i class="material-icons"></i>
<a href="#"
class="side-bar-titles">
Explore
</a>
</li>
<li>
<i class="material-icons">
</i>
<a href="#"
class="side-bar-titles">
Subscriptions
</a>
</li>
</ul>
</div>
<div>
<ul class="side-bar">
<li>
<i class="material-icons">

</i>
<a href="#"
class="side-bar-titles">
Library
</a>
</li>
<li>
<i class="material-icons"></i>
<a href="#"
class="side-bar-titles">
History
</a>
</li>
<li>
<i class="material-icons">

</i>
<a href="#"
class="side-bar-titles">
Your videos
</a>
</li>
<li>
<i class="fas fa-clock"></i>
<a href="#"
class="side-bar-titles">
Watch later
</a>
</li>
<li>
<i class='fas fa-thumbs-up'></i>
<a href="#"
class="side-bar-titles">
Liked videos
</a>
</li>
</ul>
</div>
<div>
<p class="side-bar-heading">
SUBSCRIPTIONS
</p>
<ul class="side-bar">
<li>
<div class="channel-dp-container-1">
</div>
<a href="#"
class="side-bar-titles">
Ania Palmer
</a>
</li>
<li>
<div class="channel-dp-container-1">
<img src=
"[Link]
class="channel-dp-1">
</div>
<a href="#"
class="side-bar-titles">
The Puzzle World
</a>
</li>
<li>
<div class="channel-dp-container-1">
</div>
<a href="#"
class="side-bar-titles">
Sports Daily
</a>
</li>
<li>
<div class="channel-dp-container-1">
<img src=
"[Link]
class="channel-dp-1">
</div>
<a href="#" class="side-bar-titles">
Rick Sorkin
</a>
</li>
<li>
<div class="channel-dp-container-1">
<img src=
"[Link]
class="channel-dp-1">
</div>
<a href="#" class="side-bar-titles">
Android Daily
</a>
</li>
<li>
<div class="channel-dp-container-1">
<img src=
"[Link]
class="channel-dp-1">
</div>
<a href="#"
class="side-bar-titles">
Mike Miller
</a>
</li>
<li>
<div class="channel-dp-container-1">
<img src=
"[Link]
class="channel-dp-1">
</div>
<a href="#" class="side-bar-titles">
Best Tips
</a>
</li>
</ul>
</div>
<div>
<p class="side-bar-heading">
MORE FROM YOUTUBE
</p>
<ul class="side-bar">
<li>
<i class='fab fa-youtube'></i>
<a href="#"
class="side-bar-titles">
YouTube Premium
</a>
</li>
<li>
<i class="material-icons"></i>
<a href="#"
class="side-bar-titles">
Films
</a>
</li>
<li>
<i class="fa fa-gamepad"></i>
<a href="#"
class="side-bar-titles">
Gaming
</a>
</li>
<li>
<i class="material-icons"></i>
<a href="#"
class="side-bar-titles">
Live
</a>
</li>
<li>
<i class='fas fa-lightbulb'></i>
<a href="#"
class="side-bar-titles">
Learning
</a>
</li>
<li>
<i class='fas fa-trophy'></i>
<a href="#"
class="side-bar-titles">
Sport
</a>
</li>
</ul>
</div>
<div>
<ul class="side-bar">
<li>
<i class="material-icons"></i>
<a href="#"
class="side-bar-titles">
Settings
</a>
</li>
<li>
<i class='fas fa-flag'></i>
<a href="#"
class="side-bar-titles">
Report history
</a>
</li>
<li>
<i class="material-icons"></i>
<a href="#"
class="side-bar-titles">
Help
</a>
</li>
<li>
<i class="material-icons"></i>
<a href="#"
class="side-bar-titles">
Send feedback
</a>
</li>
</ul>
</div>
</section>
<main id="video-section">
<div class="video-container">
<img src=
"[Link]
id="image-1"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#"
class="video-title">
Top 5 Android 12 Features
</a>
<a href="#"
class="channel-name">
Android Daily
</a>
<a href="#"
class="views">
2M views
</a>
<i class="fas fa-circle"></i>
<a href="#"
class="time">
1 week ago
</a>
</div>
</div>
</div>
<div class="video-container">
<img src=
"[Link]
id="image-2"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#"
class="video-title">
The 10 BEST Shows of 2021!
</a>
<a href="#"
class="channel-name">
Mike Miller
</a>
<a href="#"
class="views">1K views
</a>
<i class="fas fa-circle"></i>
<a href="#"
class="time">2 months ago
</a>
</div>
</div>
</div>
<div class="video-container">
<img src=
"[Link]
id="image-3"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#"
class="video-title">
5 New Features of YouTube
</a>
<a href="#"
class="channel-name">
Android Daily
</a>
<a href="#"
class="views">
2.7K views
</a>
<i class="fas fa-circle"></i>
<a href="#"
class="time">
5 days ago
</a>
</div>
</div>
</div>
<div class="video-container">
<img src=
"[Link]
id="image-4"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#"
class="video-title">
How To Improve Your
YouTube Recommendations
</a>
<a href="#"
class="channel-name">
Best Tips
</a>
<a href="#"
class="views">
3K views
</a>
<i class="fas fa-circle"></i>
<a href="#"
class="time">
3 days ago
</a>
</div>
</div>
</div>
<div class="video-container">
<img src=
"[Link]
id="image-5"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#"
class="video-title">
Rick Sorkin - Your Eyes (Official Video)
</a>
<a href="#"
class="channel-name">
Rick Sorkin
</a>
<a href="#"
class="views">
5M views
</a>
<i class="fas fa-circle"></i>
<a href="#" class="time">1 year ago</a>
</div>
</div>
</div>
<div class="video-container">
<img src=
"[Link]
id="image-6"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#"
class="video-title">
15 Photography Tips for Beginners
</a>
<a href="#"
class="channel-name">
Photography World
</a>
<a href="#"
class="views">
506 views
</a>
<i class="fas fa-circle"></i>
<a href="#"
class="time">
5 weeks ago
</a>
</div>
</div>
</div>
<div class="video-container">
<img src=
"[Link]
id="image-7"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#"
class="video-title">
David Scott -
Another Year (Official Lyric Video)
</a>
<a href="#"
class="channel-name">
Android Daily
</a>
<a href="#"
class="views">
500K views
</a>
<i class="fas fa-circle"></i>
<a href="#"
class="time">
1 month ago
</a>
</div>
</div>
</div>
<div class="video-container">
<img src=
"[Link]
id="image-8"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#" class="video-title">
5 Popular Sports Right Now
</a>
<a href="#" class="channel-name">
Sports Daily
</a>
<a href="#" class="views">
2K views
</a>
<i class="fas fa-circle"></i>
<a href="#" class="time">
5 weeks ago
</a>
</div>
</div>
</div>
<div class="video-container">
<img src=
"[Link]
id="image-9"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#" class="video-title">
Puzzles - Official Trailer (HD)
</a>
<a href="#" class="channel-name">
The Puzzle World
</a>
<a href="#" class="views">
2M views
</a>
<i class="fas fa-circle"></i>
<a href="#" class="time">
2 months ago
</a>
</div>
</div>
</div>
<div class="video-container">
<img src=
"[Link]
id="image-10"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#" class="video-title">
Ania Palmer - Changes (Official Video)
</a>
<a href="#" class="channel-name">
Ania Palmer
</a>
<a href="#" class="views">
1M views
</a>
<i class="fas fa-circle"></i>
<a href="#" class="time">
5 months ago
</a>
</div>
</div>
</div>
<div class="video-container">
<img src=
"[Link]
id="image-11"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#" class="video-title">
Rachel Spectre -
Footsteps (Official Video)
</a>
<a href="#" class="channel-name">
Rachel Spectre
</a>
<a href="#" class="views">
2M views
</a>
<i class="fas fa-circle"></i>
<a href="#" class="time">
11 months ago
</a>
</div>
</div>
</div>
<div class="video-container">
<img src=
"[Link]
id="image-12"
class="images">
<div class="video-description">
<div class="channel-dp-container-2">
<img src=
"[Link]
class="channel-dp-2">
</div>
<div class="video-details">
<a href="#"
class="video-title">
Top 5 Android 11 Features
</a>
<a href="#"
class="channel-name">
Android Daily
</a>
<a href="#"
class="views">
3M views
</a>
<i class="fas fa-circle"></i>
<a href="#"
class="time">
1 year ago
</a>
</div>
</div>
</div>
</main>
<footer>
<p>
This project is a cloned work and
a recreation of YouTube's design
</p>
</footer>
</body>
</html>
CSS CODE
/* [Link] */
@import url("[Link]
*{
font-family: "Roboto", sans-serif;
font-size: 14px;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 0.5px solid gray;
position: fixed;
top: 0;
left: 0;
right: 0;
background: white;
padding-bottom: 10px;
z-index: 2;
}
#youtube-logo-container {
margin-left: 75px;
}
#youtube-logo {
width: 100px;
}
#search-bar {
justify-self: center;
width: 38vw;
margin-top: 15px;
height: 25px;
padding: 2px;
padding-left: 5px;
}
#icon-container {
color: gray;
margin-top: 15px;
cursor: pointer;
justify-self: flex-end;
margin-right: 5px;
}
.fas {
font-size: 20px;
}
#app-icon {
transform: translateY(5px);
font-size: 20px;
}
#side-bar-section {
margin-left: 0;
position: fixed;
left: 0%;
width: 250px;
float: left;
height: 100%;
overflow-y: auto;
z-index: 1;
}
#side-bar-section>div {
margin-bottom: 30px;
}
.side-bar {
display: flex;
flex-direction: column;
margin-left: 0;
padding-left: 0;
width: 250px;
box-sizing: border-box;
}
.side-bar>li {
list-style-type: none;
margin-bottom: 20px;
position: relative;
box-sizing: border-box;
width: calc(250px - 20px);
padding-left: 20px;
height: 25px;
}
#active-title {
background: rgba(188, 195, 204, 0.5);
height: 40px;
display: flex;
margin-bottom: 20px;
left: 0%;
align-items: center;
}
.material-icons {
color: rgb(99, 95, 94);
}
#home-icon {
color: red;
}
.side-bar-titles {
text-decoration: none;
color: rgb(53, 50, 49);
font-size: 15px;
position: absolute;
top: 5%;
left: 35%;
}
.active {
position: absolute;
top: auto;
left: 35%;
font-weight: bold;
}
.fa-clock,
.fa-thumbs-up {
color: rgb(99, 95, 94);
}
i{
color: rgb(99, 95, 94);
font-size: 18px;
}
.side-bar-heading {
color: rgb(99, 95, 94);
font-weight: bold;
padding-left: 20px;
margin-bottom: 20px;
}
.channel-dp-container-1 {
height: 25px;
width: 25px;
border-radius: 50%;
display: inline-block;
justify-self: flex-start;
}
.channel-dp-1 {
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
position: relative;
}
#video-section {
margin: 20px 5px 0 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
margin-left: 255px;
margin-top: 60px;
padding-top: 20px;
}
.video-container {
margin-top: 20px;
margin-bottom: 40px;
}
.images {
width: 295px;
height: 175px;
margin-bottom: 5px;
}
.video-description {
display: flex;
flex-direction: row;
}
.channel-dp-container-2 {
height: 35px;
width: 35px;
border-radius: 50%;
display: inline-block;
justify-self: flex-start;
}
.channel-dp-2 {
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
}
.video-details {
width: 200px;
margin-top: 3px;
margin-left: 10px;
justify-self: flex-end;
}
.video-title {
font-weight: bold;
text-decoration: none;
color: black;
margin-bottom: 5px;
}
.channel-name {
color: rgb(99, 95, 94);
text-decoration: none;
display: block;
margin-top: 5px;
}
.channel-name:hover {
color: rgb(53, 50, 49);
}
.views {
color: rgb(99, 95, 94);
text-decoration: none;
}
.fa-circle {
color: rgb(99, 95, 94);
font-size: 2px;
transform: translateY(-3px);
}
.time {
text-decoration: none;
color: rgb(99, 95, 94);
}
footer p {
text-align: right;
color: rgb(99, 95, 94);
margin-right: 20px;
}
@media all and (max-width: 255px) {
.video-description {
padding-left: 5px;
padding-right: 5px;
}
}
@media all and (max-width: 300px) {
nav {
flex-wrap: wrap;
}
#search-bar {
order: 1;
flex: 1 1 100%;
justify-self: center;
}
}
@media all and (max-width: 315px) {
.images {
width: 100%;
}
}
@media all and (max-width: 550px) {
#side-bar-section {
display: none;
}
#video-section {
margin-left: 0;
}
#youtube-logo-container {
margin-left: 0;
}
}
