In this article, we will design a YouTube clone using HTML and CSS. This project replicates the fundamental features and design elements of YouTube, offering you a hands-on experience in web development. The code example illustrates a YouTube-like web page with a navigation bar, sidebar, and video section.
Preview
Approach
- Make the basic structure of the web page using different HTML elements including div, nav, ul, li, etc.
- Create the external stylesheet to give style to the elements. like margin, padding, etc.
- The id video section and a class video container define styles for the video section, video containers, descriptions, details, titles, channel names, views, and time.
- Properties like display flex for adjusting the elements and media queries are used to provide responsive styles for different screen sizes using media queries, adjusting layout and styling accordingly.
Example: This example illustrates the YouTube Cloning using HTML and CSS.
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 = "styles.css" >
< 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 =
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 =
class = "channel-dp-1" >
</ div >
< a href = "#" class = "side-bar-titles" >
Rick Sorkin
</ a >
</ li >
< li >
< div class = "channel-dp-container-1" >
< img src =
class = "channel-dp-1" >
</ div >
< a href = "#" class = "side-bar-titles" >
Android Daily
</ a >
</ li >
< li >
< div class = "channel-dp-container-1" >
< img src =
class = "channel-dp-1" >
</ div >
< a href = "#"
class = "side-bar-titles" >
Mike Miller
</ a >
</ li >
< li >
< div class = "channel-dp-container-1" >
< img src =
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 =
id = "image-1"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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 =
id = "image-2"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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 =
id = "image-3"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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 =
id = "image-4"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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 =
id = "image-5"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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 =
id = "image-6"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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 =
id = "image-7"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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 =
id = "image-8"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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 =
id = "image-9"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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 =
id = "image-10"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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 =
id = "image-11"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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 =
id = "image-12"
class = "images" >
< div class = "video-description" >
< div class = "channel-dp-container-2" >
< img src =
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
/* styles.css */ * { 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 : 38 vw;
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 ;
}
} |
Output: