Project Solution: Creating the HTML structure for the Pinterest homepage

In this video, we're going to start by building our basic HTML skeleton. Let's create a file called index.html inside a folder called "Pinterest." I also have five images including the Pinterest logo. To access these, go to "https://github.com/jordanhudgens/pinterest-html-css-clone". Here, you'll find a folder called "img" inside which I've put all the images you'll need for this project.

Let's get started with our basic tags - <!DOCTYPE>, <html>, <head>, <title> and <body> tags. I'm calling this page "Pinterest Clone", but feel free to call it whatever you want.

Inside the <body> tag, we'll have different <div> sections. If you look at the Pinterest page, you'll see a header that includes the logo, a search box, and three icons on the right. The next section is our content, also called wrapper. So, we'll have a separate <div> for each of these.

The basic skeleton is:

<!DOCTYPE html>
<html>
  <head>
    <title>Pinteres Clone</title>
  </head>

  <body>
    <div id="header"> 
    </div>

    <div id="wrapper">

    </div>
  </body>
</html>

Similar to the Google project, we're going to start off with an unordered list for our header images.

First off, we'll put the Pinterest logo using the <img> tag, and the logo is located inside the "img" folder.

<body>
    <div id="header">
      <ul>
        <div id="logo"><img src="img/logo.png" alt="logo" /></div>
      </ul> 
    </div>

Next is the search box, which we'll create using our <input> tag. You can use an ID or a class here, it's completely up to you.

<div id="search">
  <input id="search-box" type="text" placeholder="Search" />
</div>

Next, we're going to put in our icons. For now though, we'll have some placeholder content with links until we integrate our icons later.

<div id="nav-buttons">
  <a href="#">Bars</a>
  <a href="#">User</a>
  <a href="#">Chat</a>
</div>

If you open this file on the browser, we'll have a logo, a search bar and three links.

Though it doesn't look too nice, at least we have the elements we need up there.

For the body or wrapper section, we'll create a <div>, and a ton of nested <div> tags inside it. We'll use a common class for all the nested <div> tags, for easier styling. Inside each nested <div>, we'll have an image and some random code.

<div id="wrapper">
  <div id="columns">
    <div class="pin">
      <img src="img/img_1.jpg"/>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>
    </div>
  </div>
</div>

You can see all this on the browser now. Next, we're going to bring in more images and text by simply replicating this nested <div> tag. The only change will be the image and text. We're changing the text because we want to know how to style items with varying amounts of text. There are five images, and we'll duplicate them to have a total of 10 pairs of images and text.

In the real world though, you'll have a database query that pulls in images and content from a database to display it in the browser. But, we won't worry about it for this project.

If you refresh the browser, you'll see all images and text, one below the other.

In the next few guides, we'll work on styles.