Building the HTML Structure for the About Page Header
In this guide, we're going to walk through how we can start building the "About Us" page, and we'll build out the basic HTML structure that we'll be using.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
  • Complete the Exercise
Video locked
This video is viewable to users with a free Dev Camp account
GET FREE ACCOUNT

We're going to start with this header element, and we're also going to bring in all of the common styles, fonts, and all of those types of dependencies into the project. So, I have the "About" page here, which right now is pretty boring but that is about to change.

large

Let's open up our file system. And moving to the "About" page, we're going to be able to reuse quite a bit of what we have in the index, so, let's actually get rid of everything here, and I'm going to grab the first content here at the top of the index page. So, let's just copy everything up to the body.

about.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>About</title>


    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
     crossorigin="anonymous">
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/navigation.css">
</head>
<body>
</body>
</html>

Now, we can put a heading just to test it out, and say, "Hey" just to make sure we didn't break anything.

about.html

<body>
    <h1>Heyyy</h1>
</body>

Hit refresh. And you can see that that's all working.

large

Now, also another good practice just to make sure is to click inspect, and make sure that in the console here, you're not getting any errors because if you have any kind of issue, such as one of the CSS files not being brought in properly, that would give you an error, but it looks like all of that is working.

large

Now that we have that in place, now we can start bringing in our structure. So, let's take a look at what we're going to need. We definitely are going to need a spot to put this cool skewed item, which is going to be kind of the focal point.

large

We'll take care of that in one of the next guides but for right now we're just going to add the HTML, we have this heading up here and then we have the nav component. So, let's see what we need to do in order to bring all of this in.

I'm going to start off by creating a wrapper div here, and it's going to wrap up that image, the nav bar, everything like that.

about.html

<body>
    <div class="skewed-header">
        <div class="header-bg"></div>

        <div class="skewed-header-wrapper">
            <div class="skewed-header-content">
                <div class="heading-wrapper">
                    <h1>About Us</h1>
                </div>
            </div>
        </div>
    </div>
</body>

If you're wondering why I'm setting up the structure like this, it's because we're going to be using tools like Flexbox and CSS Grid, and remember, the more divs we have, the easier it's going to be to control the elements and select them.

Let's go and let's add our links wrapper. Now, we are going to be able to not just reuse the styles, we're actually going to be able to reuse the homepage elements, so, all of the links themselves, just like we did with the footer.

about.html

<div class="skewed-header-content">
    <div class="heading-wrapper">
        <h1>About Us</h1>
    </div>

    <div class="links-wrapper">
        <div class="nav-link">
          <a href="index.html">Home</a>
        </div>
        <div class="nav-link">
          <a href="about.html">About Us</a>
        </div>
        <div class="nav-link">
          <a href="menu.html">Menu</a>
        </div>
        <div class="nav-link">
          <a href="contact.html">Contact</a>
        </div>
      </div>
    </div>
</div>

Any time that you find yourself building out a system like this, it's really a good idea to be able to figure out how you can manage it so that you can share styles as much as possible. The reason for that is just that it makes the entire layout much more scalable.

You're able to make a change in one part of the application, and then it'll populate to the rest of that. It's definitely a best practice when it comes to building out websites.

Okay, so now that we have our links wrapper there, this should be all of the content that we're going to need. So, if I hit refresh, you can see that it has our links wrapper, it has the "About Us" section, and everything that we're going to need is actually there.

large

It may look very different than what we have at the moment here, but actually, this is all the HTML structure we're going to have to have. And so, in the next guide, we're going to dive into how we can work with the clip-path property so that we can create those cool skewed images.