Finally, we are going to finish this chapter by creating two real-life projects as practice.
In the first project, we will recreate the YouTube homepage. This will be the first time we systematically discuss how to use what we've learned so far to create a real project.
The second project will be a calculator, created using the utility class approach. Of course, without JavaScript, this calculator is not going to actually work, but we will keep working on it in the next chapter.
Without further ado, let's start with the YouTube homepage.
You may download the source code for this project directly from GitHub.
Creating the page layout
Let's start by discussing the basic page layout. We will follow the mobile-first rule and start from the small screen.
On a small screen, there should be a top navigation bar and a content section. The navigation bar has the logo on the left side and some buttons on the right side. The content section should include several card components showing individual videos.
On a medium screen (>= 640px), more icons should be displayed in the navigation bar. We will skip this step for now and revisit this topic when we start building the navigation menu.
On a large screen (>= 768px), the page should have a small sidebar. The navigation bar should display a search box at the center instead of just an icon. The content section should also be multi-column.
And lastly, on an extra large screen (>= 1024px), the webpage should have a full-sized sidebar, a fully expanded navigation bar with all the icons and search boxes, and the content section should have more columns.
The HTML document
Now, let's see if you can construct this layout. We'll start with the HTML document for the navigation bar.
1<header>
2 <nav>
3 <div class="start">
4 <div>Button</div>
5 <div>Logo</div>
6 </div>
7 <div class="center">
8 <div>Search</div>
9 <div>Microphone</div>
10 </div>
11 <div class="end">
12 <div>Button</div>
13 <div>Button</div>
14 <div>Button</div>
15 </div>
16 </nav>
17</header>And then the sidebars:
1<main>
2 <aside class="sidebar-sm">Small sidebar</aside>
3 <aside class="sidebar-full">Full sidebar</aside>
4 . . .
5</main>There should also be a content section inside the <main> element:
1<section class="content">
2 <section class="video">
3 <div class="video-thumbnail">
4 <img src="video_thumbnail1.jpg" alt="Video Thumbnail" />
5 </div>
6 <div class="video-info">
7 <img src="channel1.jpg" alt="Channel Logo" />
8 <div>
9 <h2>Video Title 1</h2>
10 <p>Channel Name</p>
11 <p>1M views • 1 day ago</p>
12 </div>
13 </div>
14 </section>
15 . . .
16</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.
1* {
2 box-sizing: border-box;
3 padding: 0px;
4 margin: 0px;
5}
6
7nav,
8.sidebar-sm,
9.sidebar-full,
10.content {
11 border: black solid 2px;
12}Navbar layout
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.
1nav {
2 display: flex;
3 flex-direction: row;
4 justify-content: space-between;
5}
6
7.start {
8 display: flex;
9 flex-direction: row;
10}
11
12.center {
13 display: none; /* Not displayed on small screens */
14}
15
16.end {
17 display: flex;
18 flex-direction: row;
19}For large screens, the center section should be designed just like its siblings.
1/* Large screen */
2@media screen and (min-width: 768px) {
3 .center {
4 display: flex;
5 flex-direction: row;
6 }
7}Sidebars
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.
1main {
2 display: flex;
3 flex-direction: row;
4}The sidebars are removed on small screens.
1.sidebar-sm {
2 display: none;
3}
4
5.sidebar-full {
6 display: none;
7}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.
1/* Large screen */
2
3@media screen and (min-width: 768px) {
4 .center {
5 display: flex;
6 flex-direction: row;
7 }
8
9 .sidebar-sm {
10 display: flex;
11 flex-direction: column;
12
13 flex: 0;
14 }
15}The full-sized sidebar is displayed on extra large screens, and the small sidebar will be removed.
1/* X-Large screen */
2
3@media screen and (min-width: 1024px) {
4 .sidebar-sm {
5 display: none;
6 }
7
8 .sidebar-full {
9 display: flex;
10 flex-direction: column;
11
12 flex: 0;
13 }
14}The content section
Lastly, for the content section:
1.content {
2 display: grid;
3 grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
4 grid-gap: 1em;
5
6 flex: 1;
7}
8
9.video {
10 border: red solid 2px;
11 width: 100%;
12}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:
Building the navigation bar
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.
1<nav>
2 <div class="start">
3 <div class="menu-icon">. . .</div>
4 <img src="/media/course/htmlcss/logo.png" alt="YouTube Logo" />
5 </div>
6 <div class="center">
7 <form action="/">
8 <input type="text" placeholder="Search" />
9 <button>
10 <div class="search-form-icon">. . .</div>
11 </button>
12 </form>
13 <div class="mic-icon-center">. . .</div>
14 </div>
15 <div class="end">
16 <div class="search-icon">. . .</div>
17 <div class="mic-icon">. . .</div>
18 <div class="camera-icon">. . .</div>
19 <div class="notification-icon">. . .</div>
20 <img src="/media/course/htmlcss/profile.jpg" alt="Profile Image" />
21 </div>
22</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.
1.menu-icon,
2.search-icon,
3.mic-icon,
4.mic-icon-center,
5.camera-icon,
6.notification-icon {
7 border-radius: 100%;
8 padding: 10px;
9}
10
11svg {
12 display: block;
13 width: 100%;
14 height: 100%;
15}
16
17.menu-icon:hover,
18.search-icon:hover,
19.mic-icon:hover,
20.mic-icon-center:hover,
21.camera-icon:hover,
22.notification-icon:hover {
23 background-color: #e5e5e5;
24}
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.
1.menu-icon,
2.mic-icon,
3.mic-icon-center,
4.camera-icon,
5.notification-icon {
6 display: none;
7}And then, style the start, center and end sections of the navbar.
1/* Navbar start section */
2
3.start {
4 display: flex;
5 flex-direction: row;
6 flex: 1;
7
8 gap: 10px;
9 padding: 8px;
10 align-items: center;
11}
12
13.start > img {
14 width: 90px;
15}
16
17/* Navbar center section */
18
19.center {
20 display: none;
21 flex: 2;
22}
23
24/* Navbar end section */
25
26.end {
27 display: flex;
28 flex-direction: row;
29
30 padding: 8px;
31 align-items: center;
32 justify-content: end;
33 flex: 1;
34}
35
36.end > img {
37 width: 40px;
38 border-radius: 100%;
39 object-fit: cover;
40 margin-left: 10px;
41}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.
1@media screen and (min-width: 640px) {
2 /* Display the menu, mic, camera, and notification icons for medium screen */
3 .menu-icon,
4 .mic-icon,
5 .camera-icon,
6 .notification-icon {
7 display: block;
8 }
9}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.
1@media screen and (min-width: 768px) {
2 .sidebar-sm {
3 display: flex;
4 flex-direction: column;
5
6 flex: 0;
7 }
8
9 /* Display the center section for large screens */
10 .center {
11 display: flex;
12 flex-direction: row;
13
14 gap: 10px;
15 padding: 8px;
16 align-items: center;
17 justify-content: center;
18 }
19
20 . . .
21
22 /* Hide the search and right mic icons */
23 .search-icon,
24 .mic-icon {
25 display: none;
26 }
27
28 /* Display the center mic icon */
29
30 .mic-icon-center {
31 display: block;
32 }
33}Building the sidebar
Now, let's move on to the sidebar. The small sidebar will be displayed on large screens, and the full-sized sidebar will be displayed on extra large screens.
1<aside class="sidebar-sm">
2 <div class="side-icon">
3 <div class="icon">. . .</div>
4 <div class="text">Home</div>
5 </div>
6 . . .
7</aside>1<aside class="sidebar-full">
2 <section class="guide">
3 <div class="item">
4 <div class="icon">. . .</div>
5 <div class="text">Home</div>
6 </div>
7 . . .
8 <div class="divider"></div>
9 <div class="item">
10 <div class="icon">. . .</div>
11 <div class="text">Library</div>
12 </div>
13 . . .
14 </section>
15 <div class="divider"></div>
16 <section class="subscriptions">
17 <p>Subscriptions</p>
18 <div class="item">
19 <img src="/media/course/htmlcss/1.jpg" alt="Channel1" />
20 <div class="text">First channel</div>
21 </div>
22 . . .
23 </section>
24 <div class="divider"></div>
25 <section class="explore">
26 <p>Explore</p>
27 <div class="item">
28 <div class="icon">. . .</div>
29 <div class="text">Trending</div>
30 </div>
31 . . .
32 </section>
33 <div class="divider"></div>
34 <section class="mf-ytb">
35 <p>More from YouTube</p>
36 <div class="item">
37 <div class="icon">. . .</div>
38 <div class="text">YouTube Premium</div>
39 </div>
40 . . .
41 </section>
42</aside>The small sidebar contains four buttons arranged vertically. Each individual button should also be a flexbox, aligned vertically.
1@media screen and (min-width: 768px) {
2 .sidebar-sm {
3 display: flex;
4 flex-direction: column;
5
6 flex: 0;
7 }
8
9 .side-icon {
10 width: 80px;
11 height: 100px;
12 border-radius: 10px;
13
14 display: flex;
15 flex-direction: column;
16 justify-content: center;
17 align-items: center;
18 }
19
20 .side-icon:hover {
21 background-color: #f2f2f2;
22 }
23
24 .side-icon svg {
25 width: 25px;
26 }
27
28 .side-icon > .text {
29 font-size: 10px;
30 margin-top: 5px;
31 }
32
33 . . .
34}As for the full-sized sidebar, it should only be displayed on extra large screens.
The sidebar should have a fixed width (flex: 0 250px;) so that it does not change as the viewport size changes. The height is defined as 100 percent of the viewport height (100vh), and the overflow is set to auto.
This configuration ensures that the sidebar is treated as an independent section in the webpage. When you scroll the sidebar up and down, it will not affect the main content section.
1@media screen and (min-width: 1024px) {
2 .sidebar-sm {
3 display: none;
4 }
5
6 .sidebar-full {
7 display: flex;
8 flex-direction: column;
9 flex: 0 250px;
10
11 height: 100vh;
12 overflow-y: auto;
13
14 padding: 8px;
15 }
16
17 . . .
18}For individual items in the sidebar, the setup should be easy to understand.
1@media screen and (min-width: 1024px) {
2 .sidebar-sm {
3 display: none;
4 }
5
6 .sidebar-full {
7 display: flex;
8 flex-direction: column;
9 flex: 0 250px;
10
11 height: 100vh;
12 overflow-y: auto;
13
14 padding: 8px;
15 }
16
17 /* Section titles */
18
19 .subscriptions > p,
20 .explore > p,
21 .mf-ytb > p {
22 font-size: 16px;
23 padding: 10px;
24 }
25
26 /* Individual items */
27
28 .item {
29 display: grid;
30 grid-template-columns: 25px auto;
31 gap: 20px;
32
33 align-items: center;
34 justify-items: stretch;
35
36 padding: 10px;
37
38 border-radius: 10px;
39 }
40
41 .item:hover {
42 background-color: #f2f2f2;
43 }
44
45 .item > .text {
46 font-size: 14px;
47 }
48
49 /* Channel images */
50
51 .item > img {
52 width: 30px;
53 aspect-ratio: 1/1;
54 border-radius: 100%;
55 object-fit: cover;
56 }
57
58 /* Divider */
59
60 .divider {
61 border: #e5e5e5 solid 1px;
62 margin: 10px 0px;
63 }
64}Building the video card component
As for the content section, we already have the general layout ready. All you need to do here is build the video card component.
1<section class="content">
2 <section class="video">
3 <div class="video-thumbnail">
4 <img src="/media/course/htmlcss/1.jpg" alt="Video Thumbnail" />
5 </div>
6 <div class="video-info">
7 <img src="/media/course/htmlcss/2.jpg" alt="Channel Logo" />
8 <div>
9 <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit</h2>
10 <p>Channel Name</p>
11 <p>1M views • 1 day ago</p>
12 </div>
13 </div>
14 </section>
15 . . .
16</section>1/* Video card */
2
3.video {
4 width: 100%;
5 height: min-content;
6}
7
8.video-thumbnail > img {
9 width: 100%;
10 height: 15em;
11 object-fit: cover;
12 border-radius: 10px;
13}
14
15.video-info {
16 display: grid;
17 grid-template-columns: 50px auto;
18 gap: 10px;
19
20 padding: 10px 0px;
21}
22
23.video-info > img {
24 width: 50px;
25 height: 50px;
26 border-radius: 100%;
27 object-fit: cover;
28}
29
30.video-info > div {
31 display: flex;
32 flex-direction: column;
33 gap: 5px;
34}
35
36.video-info h2 {
37 font-weight: 700;
38 font-size: 20px;
39}
40
41.video-info p {
42 color: #606060;
43 font-size: 14px;
44}The content element itself should also be independent, like the sidebar.
1.content {
2 display: grid;
3 grid-template-columns: repeat(auto-fill, minmax(22em, 1fr));
4 grid-gap: 1em;
5
6 align-content: start;
7
8 flex: 1;
9
10 padding: 10px;
11
12 height: 100vh;
13 overflow-y: auto;
14}