Loading course content...
Recreate YouTube Homepage using HTML and CSS
Next, let's focus on the navigation bar. The start section has a menu icon and a logo. The center section includes a search form and a search icon. Lastly, the end section contains several icons and a profile photo.
In order to make this example shorter, we left out the actual icon elements, defined by <svg>, but you can copy these resources from YouTube directly using your browser's Developer Tools.
html
<nav>
<div class="start">
<div class="menu-icon">. . .</div>
<img src="/media/course/htmlcss/logo.png" alt="YouTube Logo" />
</div>
<div class="center">
<form action="/">
<input type="text" placeholder="Search" />
<button>
<div class="search-form-icon">. . .</div>
</button>
</form>
<div class="mic-icon-center">. . .</div>
</div>
<div class="end">
<div class="search-icon">. . .</div>
<div class="mic-icon">. . .</div>
<div class="camera-icon">. . .</div>
<div class="notification-icon">. . .</div>
<img src="/media/course/htmlcss/profile.jpg" alt="Profile Image" />
</div>
</nav>First of all, all the icons should have a unified style. They should be rounded and have equal paddings. The icons should also have a background when the cursor is hovered on top.
css
.menu-icon,
.search-icon,
.mic-icon,
.mic-icon-center,
.camera-icon,
.notification-icon {
border-radius: 100%;
padding: 10px;
}
svg {
display: block;
width: 100%;
height: 100%;
}
.menu-icon:hover,
.search-icon:hover,
.mic-icon:hover,
.mic-icon-center:hover,
.camera-icon:hover,
.notification-icon:hover {
background-color: #e5e5e5;
}
On a small screen, most of these icons should be removed, as the horizontal space on a mobile device is very valuable. In this case, we'll only keep the logo, the search icon, and the profile picture. All the other elements will be removed.
css
.menu-icon,
.mic-icon,
.mic-icon-center,
.camera-icon,
.notification-icon {
display: none;
}And then, style the start, center and end sections of the navbar.
css
/* Navbar start section */
.start {
display: flex;
flex-direction: row;
flex: 1;
gap: 10px;
padding: 8px;
align-items: center;
}
.start > img {
width: 90px;
}
/* Navbar center section */
.center {
display: none;
flex: 2;
}
/* Navbar end section */
.end {
display: flex;
flex-direction: row;
padding: 8px;
align-items: center;
justify-content: end;
flex: 1;
}
.end > img {
width: 40px;
border-radius: 100%;
object-fit: cover;
margin-left: 10px;
}start and end will have equal size, and center will grow faster than its siblings as the viewport grows.
center will be removed on a small screen, so for now, there are only start and end.
On a medium screen, more icons will appear, but the center section is still removed.
css
@media screen and (min-width: 640px) {
/* Display the menu, mic, camera, and notification icons for medium screen */
.menu-icon,
.mic-icon,
.camera-icon,
.notification-icon {
display: block;
}
}On a large screen, the center section will be displayed, the mic icon will be moved to the center, and the right search icon will be removed. We left out the styles for the search form for simplicity.
css
@media screen and (min-width: 768px) {
.sidebar-sm {
display: flex;
flex-direction: column;
flex: 0;
}
/* Display the center section for large screens */
.center {
display: flex;
flex-direction: row;
gap: 10px;
padding: 8px;
align-items: center;
justify-content: center;
}
. . .
/* Hide the search and right mic icons */
.search-icon,
.mic-icon {
display: none;
}
/* Display the center mic icon */
.mic-icon-center {
display: block;
}
}<!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="./style.css"> <title>YouTube</title> </head> <body> <header> <nav> <div class="start"> <div class="menu-icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z"></path> </svg> </div> <img src="https://www.thedevspace.io/media/course/htmlcss/youtube-logo.png" alt="YouTube Logo"> </div> <div class="center"> <form action="/"> <input type="text" placeholder="Search"> <button> <div class="search-form-icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="m20.87 20.17-5.59-5.59C16.35 13.35 17 11.75 17 10c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.75 0 3.35-.65 4.58-1.71l5.59 5.59.7-.71zM10 16c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"> </path> </svg> </div> </button> </form> <div class="mic-icon-center"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M12 3c-1.66 0-3 1.37-3 3.07v5.86c0 1.7 1.34 3.07 3 3.07s3-1.37 3-3.07V6.07C15 4.37 13.66 3 12 3zm6.5 9h-1c0 3.03-2.47 5.5-5.5 5.5S6.5 15.03 6.5 12h-1c0 3.24 2.39 5.93 5.5 6.41V21h2v-2.59c3.11-.48 5.5-3.17 5.5-6.41z"> </path> </svg> </div> </div> <div class="end"> <div class="search-icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="m20.87 20.17-5.59-5.59C16.35 13.35 17 11.75 17 10c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.75 0 3.35-.65 4.58-1.71l5.59 5.59.7-.71zM10 16c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"> </path> </svg> </div> <div class="mic-icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M12 3c-1.66 0-3 1.37-3 3.07v5.86c0 1.7 1.34 3.07 3 3.07s3-1.37 3-3.07V6.07C15 4.37 13.66 3 12 3zm6.5 9h-1c0 3.03-2.47 5.5-5.5 5.5S6.5 15.03 6.5 12h-1c0 3.24 2.39 5.93 5.5 6.41V21h2v-2.59c3.11-.48 5.5-3.17 5.5-6.41z"> </path> </svg> </div> <div class="camera-icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2zm3-7H3v12h14v-6.39l4 1.83V8.56l-4 1.83V6m1-1v3.83L22 7v8l-4-1.83V19H2V5h16z"> </path> </svg> </div> <div class="notification-icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M10 20h4c0 1.1-.9 2-2 2s-2-.9-2-2zm10-2.65V19H4v-1.65l2-1.88v-5.15C6 7.4 7.56 5.1 10 4.34v-.38c0-1.42 1.49-2.5 2.99-1.76.65.32 1.01 1.03 1.01 1.76v.39c2.44.75 4 3.06 4 5.98v5.15l2 1.87zm-1 .42-2-1.88v-5.47c0-2.47-1.19-4.36-3.13-5.1-1.26-.53-2.64-.5-3.84.03C8.15 6.11 7 7.99 7 10.42v5.47l-2 1.88V18h14v-.23z"> </path> </svg> </div> <img src="https://www.thedevspace.io/media/course/htmlcss/youtube-profile.jpg" alt="Profile Image"> </div> </nav> </header> <!-- . . . --> </body> </html>