In this section, we're going to go through Project #2, which is to clone the Pinterest page. We are going to do some things differently here because I want you to focus on the HTML and CSS elements that Pinterest uses, rather than worry too much about how the page looks.

The snapshot of what we're going to build is going to look like this:

If you're thinking this is much different from Pinterest, you're right, and that's because I want to use this project to help you learn some important things in HTML design.

I'd like you to try and design this yourself before looking at the solution. One important thing to implement is the layout. If you see, each element is of a different size, and yet they all fit in well together inside the specified margins. In a sense, it looks like a puzzle, and each element is a piece of the puzzle. Though it looks easy, it is not going to be easy to implement it.

Another important learning from this project should be to integrate icons on the page. This is something that you'll be doing a lot in your HTML projects, so it's good to know how to do it. So, these are some of the things you should focus while building this page.

At this point in time, don't worry about responsiveness though, as we'll talk about it in later sections.

Good luck!

I'd recommend you watch the solution videos after you try your best with this project.