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.
