Hello Developers! Are you interested in learning how to create a website like YouTube using HTML and CSS? Look no further! In this tutorial, we will guide you step-by-step through the process of building a responsive website that includes quick navigation links, a search box, and all the essential features of a YouTube-like website.
In the digital age, video-sharing platforms have become an integral part of our lives, with YouTube being at the forefront. Have you ever wondered how such a dynamic website like YouTube is built? In this article, we will delve into the process of creating a website similar to YouTube using HTML and CSS, providing you with valuable insights and guidance.
Understanding HTML and CSS:
Before we embark on our journey, let’s quickly recap the basics. HTML (Hypertext Markup Language) forms the backbone of web development, providing the structure and content of a webpage. On the other hand, CSS (Cascading Style Sheets) is responsible for the visual presentation and layout of a webpage, enabling developers to customize the appearance of HTML elements.
Planning and Structure:
To create a website like YouTube, proper planning is essential. Begin by envisioning the overall structure and functionality you want to achieve. Consider the various sections such as the header, search bar, video content, sidebar, and footer. Breaking down the layout into these sections helps organize your code and facilitates easier development.
Designing the Header:
The header serves as the topmost section of the website, housing the logo, search bar, and navigation icons. Using HTML, structure the header elements and apply CSS to position them correctly. Incorporate relevant icons, such as the menu, search, and microphone icons, to enhance user experience and make the website intuitive.
Building the Sidebar:
The sidebar provides easy navigation and access to different sections of the website. Utilize HTML and CSS to create a sidebar with clickable icons, allowing users to explore home, explore, subscriptions, and other sections effortlessly. Dividing the sidebar into categories like library, history, and watch later enhances user convenience.
Implementing Video Content:
The heart of a YouTube-like website lies in its video content. Using HTML, create a container for the videos, and embed videos or thumbnail images within it. Incorporate relevant details like the video title, channel logo, channel name, view count, and upload date. CSS can be used to style these elements and ensure they are visually appealing.
Enhancing User Interactions:
To make the website engaging, consider adding interactive features. HTML and CSS can be used to create buttons, allowing users to add videos to a watch later list, create playlists, or perform other actions. Implementing hover effects, such as changing the appearance of buttons or thumbnails when the mouse hovers over them, adds a touch of interactivity.
Applying Responsive Design:
In today’s mobile-centric world, responsiveness is crucial. Utilize CSS media queries to make your website adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms, be it desktop, tablet, or mobile.
Optimizing Performance:
Website performance plays a vital role in user satisfaction. Employ best practices such as optimizing image sizes, minifying CSS and JavaScript files, and leveraging caching techniques to improve loading speed. These optimizations contribute to a smooth browsing experience, reducing bounce rates and keeping users engaged.
Conclusion:
Creating a website like YouTube using HTML and CSS may seem like a daunting task at first, but with careful planning and understanding of these technologies, it becomes an achievable goal. Remember to break down the layout into sections, design an intuitive header and sidebar, focus on engaging video content, incorporate interactive elements, and prioritize responsiveness and performance. By following these steps, you’ll be on your way to building a dynamic and user-friendly website similar to YouTube. So, let your creativity flow and embark on this exciting web development journey!
Video tutorial
Source codes
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>YouTube</title>
<link rel="shortcut icon" href="youtube-logo-png-2061.png" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="logo-container">
<i class="ri-menu-line"></i>
<div class="logo">
<div class="logo-img">
<img src="youtube-logo-png-2061.png" alt="">
</div>
<h1 id="logo-txt">YouTube</h1>
</div>
</div>
<div class="search-container">
<form action="">
<input type="text" placeholder="Search">
</form>
<button class="search"><i class="ri-search-line"></i></button>
<button class="mic"><i class="ri-mic-fill"></i></button>
</div>
<div class="profile-container">
<i class="ri-video-add-line"></i>
<i class="ri-grid-fill"></i>
<i class="ri-notification-4-line"></i>
<div class="profile-box">
<img src="unnamed (7).jpg" alt="">
</div>
</div>
</div>
<div class="body-container">
<div class="sidebar">
<div class="sidebar-items">
<a class="sidebar-item"><i class="ri-home-5-line"></i></i>Home</a>
<a class="sidebar-item"><i class="ri-compass-3-line"></i>Explore</a>
<a class="sidebar-item"><i class="ri-wireless-charging-line"></i>Shorts</a>
<a class="sidebar-item"><i class="ri-rss-line"></i>Subscription</a>
<hr>
<a class="sidebar-item"><i class="ri-links-line"></i>Library</a>
<a class="sidebar-item"><i class="ri-history-line"></i>History</a>
<a class="sidebar-item"><i class="ri-video-line"></i>Your videos</a>
<a class="sidebar-item"><i class="ri-time-line"></i>Watch later</a>
<a class="sidebar-item"><i class="ri-play-list-2-line"></i>All videos</a>
<a class="sidebar-item"><i class="ri-arrow-down-s-line"></i>Show more</a>
<hr>
<h4 class="more">More from youtube</h4>
<a class="sidebar-item"><i class="ri-keyboard-box-line"></i>Gaming</a>
<a class="sidebar-item"><i class="ri-live-line"></i>Live</a>
<a class="sidebar-item"><i class="ri-award-line"></i>Sports</a>
<hr>
<a class="sidebar-item"><i class="ri-settings-5-line"></i>Settings</a>
<a class="sidebar-item"><i class="ri-flag-line"></i>Report history</a>
<a class="sidebar-item"><i class="ri-question-line"></i>Help</a>
<a class="sidebar-item"><i class="ri-feedback-line"></i>Send feedback</a>
</div>
</div>
<div class="content">
<div class="chips-wrapper">
<div class="chip">
<p>All</p>
</div>
<div class="chip">
<p>CSS</p>
</div>
<div class="chip">
<p>User interface design</p>
</div>
<div class="chip">
<p>User interface design</p>
</div>
<div class="chip">
<p>User interface design</p>
</div>
<div class="chip">
<p>User interface design</p>
</div>
<div class="chip">
<p>User interface design</p>
</div>
<div class="chip">
<p>User interface design</p>
</div>
<div class="chip">
<p>User interface design</p>
</div>
</div>
<div class="video-container">
<div class="video-content-cover">
<div class="video-content">
<a href="https://www.youtube.com/watch?v=FNhjbNQ8Sik" class="video-box">
<img src="1.png" alt="">
</a>
<div class="video-details">
<div class="channel-logo">
<img src="unnamed (7).jpg" alt="">
</div>
<div class="detail">
<h3 class="title">Complete responsive website design</h3>
<div class="channel-name">iMe Creative</div>
<div class="views-upload">
<div class="views">281K views .</div>
<div class="upload">1 year ago</div>
</div>
</div>
</div>
<div class="hidden-content">
<div class="btn"><i class="ri-time-line"></i>Watch later</div>
<div class="btn"><i class="ri-play-list-2-line"></i>Add to queue</div>
</div>
</div>
</div>
<div class="video-content-cover">
<div class="video-content">
<a href="https://www.youtube.com/watch?v=FNhjbNQ8Sik" class="video-box">
<img src="2.png" alt="">
</a>
<div class="video-details">
<div class="channel-logo">
<img src="unnamed (7).jpg" alt="">
</div>
<div class="detail">
<h3 class="title">React with firebase 9 (blog app with file upload)</h3>
<div class="channel-name">iMe Creative</div>
<div class="views-upload">
<div class="views">281K views .</div>
<div class="upload">1 year ago</div>
</div>
</div>
</div>
<div class="hidden-content">
<div class="btn"><i class="ri-time-line"></i>Watch later</div>
<div class="btn"><i class="ri-play-list-2-line"></i>Add to queue</div>
</div>
</div>
</div>
<div class="video-content-cover">
<div class="video-content">
<a href="https://www.youtube.com/watch?v=FNhjbNQ8Sik" class="video-box">
<img src="3.png" alt="">
</a>
<div class="video-details">
<div class="channel-logo">
<img src="unnamed (7).jpg" alt="">
</div>
<div class="detail">
<h3 class="title">Complete responsive website design</h3>
<div class="channel-name">iMe Creative</div>
<div class="views-upload">
<div class="views">281K views .</div>
<div class="upload">1 year ago</div>
</div>
</div>
</div>
<div class="hidden-content">
<div class="btn"><i class="ri-time-line"></i>Watch later</div>
<div class="btn"><i class="ri-play-list-2-line"></i>Add to queue</div>
</div>
</div>
</div>
<div class="video-content-cover">
<div class="video-content">
<a href="https://www.youtube.com/watch?v=FNhjbNQ8Sik" class="video-box">
<img src="4.png" alt="">
</a>
<div class="video-details">
<div class="channel-logo">
<img src="unnamed (7).jpg" alt="">
</div>
<div class="detail">
<h3 class="title">Complete responsive website design</h3>
<div class="channel-name">iMe Creative</div>
<div class="views-upload">
<div class="views">281K views .</div>
<div class="upload">1 year ago</div>
</div>
</div>
</div>
<div class="hidden-content">
<div class="btn"><i class="ri-time-line"></i>Watch later</div>
<div class="btn"><i class="ri-play-list-2-line"></i>Add to queue</div>
</div>
</div>
</div>
<div class="video-content-cover">
<div class="video-content">
<a href="https://www.youtube.com/watch?v=FNhjbNQ8Sik" class="video-box">
<img src="5.png" alt="">
</a>
<div class="video-details">
<div class="channel-logo">
<img src="unnamed (7).jpg" alt="">
</div>
<div class="detail">
<h3 class="title">Complete responsive website design</h3>
<div class="channel-name">iMe Creative</div>
<div class="views-upload">
<div class="views">281K views .</div>
<div class="upload">1 year ago</div>
</div>
</div>
</div>
<div class="hidden-content">
<div class="btn"><i class="ri-time-line"></i>Watch later</div>
<div class="btn"><i class="ri-play-list-2-line"></i>Add to queue</div>
</div>
</div>
</div>
<div class="video-content-cover">
<div class="video-content">
<a href="https://www.youtube.com/watch?v=FNhjbNQ8Sik" class="video-box">
<img src="6.png" alt="">
</a>
<div class="video-details">
<div class="channel-logo">
<img src="cwv.png" alt="">
</div>
<div class="detail">
<h3 class="title">React Table Sorting</h3>
<div class="channel-name">iMe Creative</div>
<div class="views-upload">
<div class="views">281K views .</div>
<div class="upload">1 year ago</div>
</div>
</div>
</div>
<div class="hidden-content">
<div class="btn"><i class="ri-time-line"></i>Watch later</div>
<div class="btn"><i class="ri-play-list-2-line"></i>Add to queue</div>
</div>
</div>
</div>
<div class="video-content-cover">
<div class="video-content">
<a href="https://www.youtube.com/watch?v=FNhjbNQ8Sik" class="video-box">
<img src="7.png" alt="">
</a>
<div class="video-details">
<div class="channel-logo">
<img src="unnamed (7).jpg" alt="">
</div>
<div class="detail">
<h3 class="title">React Table Sorting</h3>
<div class="channel-name">iMe Creative</div>
<div class="views-upload">
<div class="views">281K views .</div>
<div class="upload">1 year ago</div>
</div>
</div>
</div>
<div class="hidden-content">
<div class="btn"><i class="ri-time-line"></i>Watch later</div>
<div class="btn"><i class="ri-play-list-2-line"></i>Add to queue</div>
</div>
</div>
</div>
<div class="video-content-cover">
<div class="video-content">
<a href="https://www.youtube.com/watch?v=FNhjbNQ8Sik" class="video-box">
<img src="8.png" alt="">
</a>
<div class="video-details">
<div class="channel-logo">
<img src="unnamed (7).jpg" alt="">
</div>
<div class="detail">
<h3 class="title">Complete responsive website design</h3>
<div class="channel-name">iMe Creative</div>
<div class="views-upload">
<div class="views">281K views .</div>
<div class="upload">1 year ago</div>
</div>
</div>
</div>
<div class="hidden-content">
<div class="btn"><i class="ri-time-line"></i>Watch later</div>
<div class="btn"><i class="ri-play-list-2-line"></i>Add to queue</div>
</div>
</div>
</div>
<div class="video-content-cover">
<div class="video-content">
<a href="https://www.youtube.com/watch?v=FNhjbNQ8Sik" class="video-box">
<img src="1.png" alt="">
</a>
<div class="video-details">
<div class="channel-logo">
<img src="unnamed (7).jpg" alt="">
</div>
<div class="detail">
<h3 class="title">Complete responsive website design</h3>
<div class="channel-name">iMe Creative</div>
<div class="views-upload">
<div class="views">281K views .</div>
<div class="upload">1 year ago</div>
</div>
</div>
</div>
<div class="hidden-content">
<div class="btn"><i class="ri-time-line"></i>Watch later</div>
<div class="btn"><i class="ri-play-list-2-line"></i>Add to queue</div>
</div>
</div>
</div>
<div class="video-content-cover">
<div class="video-content">
<a href="https://www.youtube.com/watch?v=FNhjbNQ8Sik" class="video-box">
<img src="1.png" alt="">
</a>
<div class="video-details">
<div class="channel-logo">
<img src="unnamed (7).jpg" alt="">
</div>
<div class="detail">
<h3 class="title">Complete responsive website design</h3>
<div class="channel-name">iMe Creative</div>
<div class="views-upload">
<div class="views">281K views .</div>
<div class="upload">1 year ago</div>
</div>
</div>
</div>
<div class="hidden-content">
<div class="btn"><i class="ri-time-line"></i>Watch later</div>
<div class="btn"><i class="ri-play-list-2-line"></i>Add to queue</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
styles.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
scroll-behavior: smooth;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 5px;
}
.sidebar:hover::-webkit-scrollbar-thumb {
background: #717171;
}
::-webkit-scrollbar-thumb:hover {
background: #888;
}
h1 {
font-size: 1.5rem;
color: #fff;
}
h4 {
text-transform: uppercase;
margin-left: 20px;
font-size: .9rem;
color: #aaa;
}
i {
font-size: 1.5rem;
color: #fff;
}
p,
a {
font-size: 0.9rem;
}
hr {
border: 1px solid rgba(255, 255, 255, 0.1);
margin: 12px 0;
}
/* header starts here */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #202020;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 25px;
padding-right: 40px;
}
.logo-img {
position: relative;
height: 50px;
width: 50px;
}
#logo-txt {
letter-spacing: -1.5px;
}
.logo {
display: flex;
align-items: center;
}
.logo-container {
display: flex;
align-items: center;
}
.search-container {
display: flex;
align-items: center;
flex: 0 1 685px;
margin-left: 40px;
}
.search-container form {
position: relative;
width: 100%;
}
.search-container input {
height: 40px;
display: flex;
align-items: center;
width: 100%;
background-color: #121212;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 12px;
color: #fff;
font-size: 1rem;
}
.search-container .search {
min-width: 60px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
background-color: #313131;
outline: none;
border: none;
}
.search-container .mic {
height: 40px;
min-width: 40px;
border-radius: 50%;
outline: none;
border: none;
margin-left: 10px;
display: flex;
align-items: center;
justify-content: center;
background-color: #181818;
}
.profile-container {
display: flex;
align-items: center;
}
.profile-container i {
margin-left: 25px;
}
.profile-box {
position: relative;
height: 30px;
width: 30px;
border-radius: 50%;
overflow: hidden;
margin-left: 25px;
}
img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
/* body container */
.body-container {
display: flex;
position: fixed;
height: calc( 100vh - 60px);
top: 60px;
}
/* sidebar stars here */
.sidebar {
padding-top: 10px;
width: 240px;
background-color: #212121;
overflow-y: scroll;
color: #fff;
}
.sidebar-items {
display: flex;
flex-direction: column;
}
.sidebar-item {
display: flex;
align-items: center;
padding: 0 24px;
cursor: pointer;
height: 40px;
}
.sidebar-item:hover {
background-color: #4C4C4C;
}
.sidebar-item i {
margin-right: 24px;
}
/* main content starts here */
.content {
width: calc(100vw - 240px);
}
.chips-wrapper {
overflow-x: scroll;
background-color: #181818;
display: flex;
padding-left: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.chips-wrapper::-webkit-scrollbar {
height: 0;
}
.chip {
margin: 12px 6px;
background-color: #373737;
padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
white-space: nowrap;
cursor: pointer;
color: #fff;
transition: .5s;
}
.chip:hover {
background-color: #4D4D4D;
}
/* video container startrs here */
.video-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 18px;
padding: 20px 25px;
background-color: #181818;
overflow-y: scroll;
height: calc(100vh - 116px);
}
.video-content-cover {
position: relative;
transition: .5s;
transition-delay: .05s;
}
.video-content {
margin-bottom: 25px;
position: relative;
transition: .5s;
width: 100%;
}
.video-content:hover {
transform: scale(1.5);
z-index: 222;
position: absolute;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
background-color: #202020;
}
.video-content-cover:hover {
transform: translateY(60px);
z-index: 999;
}
.video-content-cover:nth-child(4n+1):hover {
transform: translate(50px, 60px);
z-index: 999;
}
.video-content-cover:nth-child(4n+4):hover {
transform: translate(-30px, 60px);
z-index: 999;
}
.video-content:hover .video-details {
background-color: #202020;
padding: 10px;
}
.video-box {
position: relative;
width: auto;
height: 145px;
display: block;
}
.video-details {
display: flex;
color: #fff;
padding-top: 12px;
}
.video-content:hover .channel-logo {
min-width: 25px;
height: 25px;
}
.channel-logo {
position: relative;
min-width: 35px;
height: 35px;
border-radius: 50%;
overflow: hidden;
}
.detail {
margin-left: 12px;
}
.video-content:hover .title {
font-size: .7rem;
}
.title {
font-size: .9rem;
}
.video-content:hover .channel-name {
font-size: .6rem;
}
.channel-name {
font-size: .8rem;
margin-top: 10px;
color: #aaa;
}
.video-content:hover .views-upload {
font-size: .6rem;
}
.views-upload {
display: flex;
font-size: .8rem;
color: #aaa;
}
.btn {
padding: 5px 0;
color: #aaa;
text-transform: uppercase;
width: 100%;
background-color: #373737;
text-align: center;
margin: 5px 0;
font-size: .6rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.btn i {
font-size: .7rem;
margin-right: 5px;
color: #aaa;
}
.hidden-content {
display: none;
padding: 5px 10px;
background-color: #202020;
}
.video-content:hover .hidden-content {
display: block;
}
/* responsive starts here */
@media (max-width:1200px) {
.sidebar {
width: 70px;
overflow-x: hidden;
}
.content {
width: calc(100vw - 70px);
}
.more {
display: none;
}
}
@media (max-width:1050px) {
.video-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width:820px) {
.video-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width:600px) {
.video-container {
grid-template-columns: 1fr;
}
.search-container,
.ri-grid-fill {
display: none;
}
.video-container {
grid-gap: 10px;
padding: 10px 10px;
}
.header {
padding-right: 10px;
}
.video-content:hover {
transform: none;
position: relative;
box-shadow: none;
background-color: #181818;
}
.video-content-cover:hover {
transform: none;
}
.video-content-cover:nth-child(4n+1):hover {
transform: none;
}
.video-content-cover:nth-child(4n+4):hover {
transform: none;
}
.video-content:hover .video-details {
background-color: #181818;
padding: 0px;
padding-top: 12px;
}
.video-content:hover .channel-logo {
min-width: 35px;
height: 35px;
}
.video-content:hover .title {
font-size: .9rem;
}
.video-content:hover .channel-name {
font-size: .8rem;
}
.video-content:hover .views-upload {
font-size: .8rem;
}
.video-content:hover .hidden-content {
display: none;
}
}
Don’t forget to Subscribe to our YouTube Channel for more.
This is really interesting, You are a very skilled blogger.
I’ve joined your feed and look forward to seeking more of
your wonderful post. Also, I’ve shared your web site in my social networks!