Recreate YouTube Homepage using HTML and CSS

Now, let's see if you can construct this layout. We'll start with the HTML document for the navigation bar.

html

<header>
  <nav>
    <div class="start">
      <div>Button</div>
      <div>Logo</div>
    </div>
    <div class="center">
      <div>Search</div>
      <div>Microphone</div>
    </div>
    <div class="end">
      <div>Button</div>
      <div>Button</div>
      <div>Button</div>
    </div>
  </nav>
</header>

And then the sidebars:

html

<main>
  <aside class="sidebar-sm">Small sidebar</aside>
  <aside class="sidebar-full">Full sidebar</aside>
  . . .
</main>

There should also be a content section inside the <main> element:

html

<section class="content">
  <section class="video">
    <div class="video-thumbnail">
      <img src="video_thumbnail1.jpg" alt="Video Thumbnail" />
    </div>
    <div class="video-info">
      <img src="channel1.jpg" alt="Channel Logo" />
      <div>
        <h2>Video Title 1</h2>
        <p>Channel Name</p>
        <p>1M views • 1 day ago</p>
      </div>
    </div>
  </section>
  . . .
</section>

Remember your HTML should have all the components required for all screen sizes. If an element is not required for a certain screen, you can remove it by setting display to none.

This example contains a navigation bar defined by the <nav> element. The navigation bar has three sections, start, center, and end. The class names correspond to their respective positions in the navigation bar.

This layout can be created with a flexbox, and the justify-content property should be set to space-between. The center section should be removed until the screen is big enough.

The <main> section has two sidebars, a small sidebar (sidebar-sm) and a full-sized sidebar (sidebar-full). The small sidebar should be displayed on large screens, and the full-sized sidebar should be displayed only on extra large screens.

Lastly, for the content section, you can use a CSS grid with the responsive-layout-without-breakpoint technique we discussed previously. For now, we are not going to worry about how the card components are created.

Now, we can move on to the CSS file. Let's remove the default margins and paddings and set the box-sizing property to border-box. You can also add a border to each section to make their respective positions more clear.

css

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}
 
nav,
.sidebar-sm,
.sidebar-full,
.content {
  border: black solid 2px;
}

Next, the navigation bar should be a flexbox with its direction set to row, and justify-content set to space-between, so that each subsection has equal spaces between each other.

The subsections should also be row flexbox so that the logo and icons are also placed horizontally. However, since we are starting from the small screen, the center section should be removed (display: none;) for now.

css

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
 
.start {
  display: flex;
  flex-direction: row;
}
 
.center {
  display: none; /* Not displayed on small screens */
}
 
.end {
  display: flex;
  flex-direction: row;
}

For large screens, the center section should be designed just like its siblings.

css

/* Large screen */
@media screen and (min-width: 768px) {
  .center {
    display: flex;
    flex-direction: row;
  }
}

Next, the <main> section should be a row flexbox, or a grid with two columns, so that the sidebar and the content are in the same row.

css

main {
  display: flex;
  flex-direction: row;
}

The sidebars are removed on small screens.

css

.sidebar-sm {
  display: none;
}
 
.sidebar-full {
  display: none;
}

The small sidebar is displayed on large screens. By setting flex to 0, you make sure the sidebar has a fixed size, and as the viewport changes, only the content section changes with it.

css

/* Large screen */
 
@media screen and (min-width: 768px) {
  .center {
    display: flex;
    flex-direction: row;
  }
 
  .sidebar-sm {
    display: flex;
    flex-direction: column;
 
    flex: 0;
  }
}

The full-sized sidebar is displayed on extra large screens, and the small sidebar will be removed.

css

/* X-Large screen */
 
@media screen and (min-width: 1024px) {
  .sidebar-sm {
    display: none;
  }
 
  .sidebar-full {
    display: flex;
    flex-direction: column;
 
    flex: 0;
  }
}

Lastly, for the content section:

css

.content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  grid-gap: 1em;
 
  flex: 1;
}
 
.video {
  border: red solid 2px;
  width: 100%;
}

For now, we'll set the maximum width of a video card to be 20em. This is how this layout looks like as the viewport changes:

YouTube layout

<!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>Button</div>
                <div>Logo</div>
            </div>
            <div class="center">
                <div>Search bar</div>
                <div>Mic</div>
            </div>
            <div class="end">
                <div>Button</div>
                <div>Button</div>
                <div>Button</div>
            </div>
        </nav>
    </header>

    <main>
        <aside class="sidebar-sm">
            Small sidebar
        </aside>
        <aside class="sidebar-full">
            Full sidebar
        </aside>
        <section class="content">
            <section class="video">
                <div class="video-thumbnail">
                    <img src="video_thumbnail1.jpg" alt="Video Thumbnail">
                </div>
                <div class="video-info">
                    <img src="channel1.jpg" alt="Channel Logo">
                    <div>
                        <h2>Video Title 1</h2>
                        <p>Channel Name</p>
                        <p>1M views • 1 day ago</p>
                    </div>
                </div>
            </section>
            <section class="video">
                <div class="video-thumbnail">
                    <img src="video_thumbnail1.jpg" alt="Video Thumbnail">
                </div>
                <div class="video-info">
                    <img src="channel1.jpg" alt="Channel Logo">
                    <div>
                        <h2>Video Title 1</h2>
                        <p>Channel Name</p>
                        <p>1M views • 1 day ago</p>
                    </div>
                </div>
            </section>
            <section class="video">
                <div class="video-thumbnail">
                    <img src="video_thumbnail1.jpg" alt="Video Thumbnail">
                </div>
                <div class="video-info">
                    <img src="channel1.jpg" alt="Channel Logo">
                    <div>
                        <h2>Video Title 1</h2>
                        <p>Channel Name</p>
                        <p>1M views • 1 day ago</p>
                    </div>
                </div>
            </section>
            <section class="video">
                <div class="video-thumbnail">
                    <img src="video_thumbnail1.jpg" alt="Video Thumbnail">
                </div>
                <div class="video-info">
                    <img src="channel1.jpg" alt="Channel Logo">
                    <div>
                        <h2>Video Title 1</h2>
                        <p>Channel Name</p>
                        <p>1M views • 1 day ago</p>
                    </div>
                </div>
            </section>
            <section class="video">
                <div class="video-thumbnail">
                    <img src="video_thumbnail1.jpg" alt="Video Thumbnail">
                </div>
                <div class="video-info">
                    <img src="channel1.jpg" alt="Channel Logo">
                    <div>
                        <h2>Video Title 1</h2>
                        <p>Channel Name</p>
                        <p>1M views • 1 day ago</p>
                    </div>
                </div>
            </section>
            <section class="video">
                <div class="video-thumbnail">
                    <img src="video_thumbnail1.jpg" alt="Video Thumbnail">
                </div>
                <div class="video-info">
                    <img src="channel1.jpg" alt="Channel Logo">
                    <div>
                        <h2>Video Title 1</h2>
                        <p>Channel Name</p>
                        <p>1M views • 1 day ago</p>
                    </div>
                </div>
            </section>
            <section class="video">
                <div class="video-thumbnail">
                    <img src="video_thumbnail1.jpg" alt="Video Thumbnail">
                </div>
                <div class="video-info">
                    <img src="channel1.jpg" alt="Channel Logo">
                    <div>
                        <h2>Video Title 1</h2>
                        <p>Channel Name</p>
                        <p>1M views • 1 day ago</p>
                    </div>
                </div>
            </section>
            <section class="video">
                <div class="video-thumbnail">
                    <img src="video_thumbnail1.jpg" alt="Video Thumbnail">
                </div>
                <div class="video-info">
                    <img src="channel1.jpg" alt="Channel Logo">
                    <div>
                        <h2>Video Title 1</h2>
                        <p>Channel Name</p>
                        <p>1M views • 1 day ago</p>
                    </div>
                </div>
            </section>
            <section class="video">
                <div class="video-thumbnail">
                    <img src="video_thumbnail1.jpg" alt="Video Thumbnail">
                </div>
                <div class="video-info">
                    <img src="channel1.jpg" alt="Channel Logo">
                    <div>
                        <h2>Video Title 1</h2>
                        <p>Channel Name</p>
                        <p>1M views • 1 day ago</p>
                    </div>
                </div>
            </section>
            <section class="video">
                <div class="video-thumbnail">
                    <img src="video_thumbnail1.jpg" alt="Video Thumbnail">
                </div>
                <div class="video-info">
                    <img src="channel1.jpg" alt="Channel Logo">
                    <div>
                        <h2>Video Title 1</h2>
                        <p>Channel Name</p>
                        <p>1M views • 1 day ago</p>
                    </div>
                </div>
            </section>
            <section class="video">
                <div class="video-thumbnail">
                    <img src="video_thumbnail1.jpg" alt="Video Thumbnail">
                </div>
                <div class="video-info">
                    <img src="channel1.jpg" alt="Channel Logo">
                    <div>
                        <h2>Video Title 1</h2>
                        <p>Channel Name</p>
                        <p>1M views • 1 day ago</p>
                    </div>
                </div>
            </section>
        </section>
    </main>
</body>

</html>

Open Sandbox

Loading course content...

Recreate YouTube Homepage using HTML and CSS

Now, let's see if you can construct this layout. We'll start with the HTML document for the navigation bar.

html

<header>
  <nav>
    <div class="start">
      <div>Button</div>
      <div>Logo</div>
    </div>
    <div class="center">
      <div>Search</div>
      <div>Microphone</div>
    </div>
    <div class="end">
      <div>Button</div>
      <div>Button</div>
      <div>Button</div>
    </div>
  </nav>
</header>

And then the sidebars:

html

<main>
  <aside class="sidebar-sm">Small sidebar</aside>
  <aside class="sidebar-full">Full sidebar</aside>
  . . .
</main>

There should also be a content section inside the <main> element:

html

<section class="content">
  <section class="video">
    <div class="video-thumbnail">
      <img src="video_thumbnail1.jpg" alt="Video Thumbnail" />
    </div>
    <div class="video-info">
      <img src="channel1.jpg" alt="Channel Logo" />
      <div>
        <h2>Video Title 1</h2>
        <p>Channel Name</p>
        <p>1M views • 1 day ago</p>
      </div>
    </div>
  </section>
  . . .
</section>

Remember your HTML should have all the components required for all screen sizes. If an element is not required for a certain screen, you can remove it by setting display to none.

This layout can be created with a flexbox, and the justify-content property should be set to space-between. The center section should be removed until the screen is big enough.

css

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}
 
nav,
.sidebar-sm,
.sidebar-full,
.content {
  border: black solid 2px;
}

Next, the navigation bar should be a flexbox with its direction set to row, and justify-content set to space-between, so that each subsection has equal spaces between each other.

css

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
 
.start {
  display: flex;
  flex-direction: row;
}
 
.center {
  display: none; /* Not displayed on small screens */
}
 
.end {
  display: flex;
  flex-direction: row;
}

For large screens, the center section should be designed just like its siblings.

css

/* Large screen */
@media screen and (min-width: 768px) {
  .center {
    display: flex;
    flex-direction: row;
  }
}

Next, the <main> section should be a row flexbox, or a grid with two columns, so that the sidebar and the content are in the same row.

css

main {
  display: flex;
  flex-direction: row;
}

The sidebars are removed on small screens.

css

.sidebar-sm {
  display: none;
}
 
.sidebar-full {
  display: none;
}

The small sidebar is displayed on large screens. By setting flex to 0, you make sure the sidebar has a fixed size, and as the viewport changes, only the content section changes with it.

css

/* Large screen */
 
@media screen and (min-width: 768px) {
  .center {
    display: flex;
    flex-direction: row;
  }
 
  .sidebar-sm {
    display: flex;
    flex-direction: column;
 
    flex: 0;
  }
}

The full-sized sidebar is displayed on extra large screens, and the small sidebar will be removed.

css

/* X-Large screen */
 
@media screen and (min-width: 1024px) {
  .sidebar-sm {
    display: none;
  }
 
  .sidebar-full {
    display: flex;
    flex-direction: column;
 
    flex: 0;
  }
}

Lastly, for the content section:

css

.content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  grid-gap: 1em;
 
  flex: 1;
}
 
.video {
  border: red solid 2px;
  width: 100%;
}

For now, we'll set the maximum width of a video card to be 20em. This is how this layout looks like as the viewport changes:

YouTube layout

<!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>Button</div> <div>Logo</div> </div> <div class="center"> <div>Search bar</div> <div>Mic</div> </div> <div class="end"> <div>Button</div> <div>Button</div> <div>Button</div> </div> </nav> </header> <main> <aside class="sidebar-sm"> Small sidebar </aside> <aside class="sidebar-full"> Full sidebar </aside> <section class="content"> <section class="video"> <div class="video-thumbnail"> <img src="video_thumbnail1.jpg" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="channel1.jpg" alt="Channel Logo"> <div> <h2>Video Title 1</h2> <p>Channel Name</p> <p>1M views • 1 day ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="video_thumbnail1.jpg" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="channel1.jpg" alt="Channel Logo"> <div> <h2>Video Title 1</h2> <p>Channel Name</p> <p>1M views • 1 day ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="video_thumbnail1.jpg" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="channel1.jpg" alt="Channel Logo"> <div> <h2>Video Title 1</h2> <p>Channel Name</p> <p>1M views • 1 day ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="video_thumbnail1.jpg" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="channel1.jpg" alt="Channel Logo"> <div> <h2>Video Title 1</h2> <p>Channel Name</p> <p>1M views • 1 day ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="video_thumbnail1.jpg" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="channel1.jpg" alt="Channel Logo"> <div> <h2>Video Title 1</h2> <p>Channel Name</p> <p>1M views • 1 day ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="video_thumbnail1.jpg" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="channel1.jpg" alt="Channel Logo"> <div> <h2>Video Title 1</h2> <p>Channel Name</p> <p>1M views • 1 day ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="video_thumbnail1.jpg" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="channel1.jpg" alt="Channel Logo"> <div> <h2>Video Title 1</h2> <p>Channel Name</p> <p>1M views • 1 day ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="video_thumbnail1.jpg" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="channel1.jpg" alt="Channel Logo"> <div> <h2>Video Title 1</h2> <p>Channel Name</p> <p>1M views • 1 day ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="video_thumbnail1.jpg" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="channel1.jpg" alt="Channel Logo"> <div> <h2>Video Title 1</h2> <p>Channel Name</p> <p>1M views • 1 day ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="video_thumbnail1.jpg" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="channel1.jpg" alt="Channel Logo"> <div> <h2>Video Title 1</h2> <p>Channel Name</p> <p>1M views • 1 day ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="video_thumbnail1.jpg" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="channel1.jpg" alt="Channel Logo"> <div> <h2>Video Title 1</h2> <p>Channel Name</p> <p>1M views • 1 day ago</p> </div> </div> </section> </section> </main> </body> </html>