BETAThis is a new service – your feedback will help us to improve it.

Creating layouts

Now we've learned some basic HTML and CSS concepts, let's pull it all together and create our first "real" webpage.

The HTML

The basic HTML for our app should look something like this:

<header>
  <h1>My app name here</h1>
</header>
<div class="body">
  <aside>
    <h3>Sidebar menu</h3>
    <ul>
      <li>Option one</li>
      <li>Option two</li>		
    </ul>
  </aside>
  <main>
    <h2>Page title here</h2>
    <p>Some content here</p>
  </main>
</div>
<footer>
  <p>Copyright notice here</p>
</footer>

Notice that we have three top-level tags:

  • <header>
  • A <div> with a class of body.
  • <footer>

Inside the <div>, there is an <aside> and an <main> tag.

Apart from the <div>, these are all semantic tags. This means that just by looking at them, we can make a good guess as to the purpose of the content inside it.

It doesn't matter exactly what you put inside these tags, as long as you keep this basic structure. We've added some headings, paragraph text and lists for demonstration purposes.

Copy this HTML into a new pen on Codepen.

The CSS

Now we're happy with the HTML structure of our webpage, we can turn our attention to how it looks.

To start with, let's use a more approachable font. We want all text on our webpage to use this font, so we're going to write a CSS rule using an asterisk character:

* {
  font-family: sans-serif;
}

The asterisk here works as a wildcard selector. It will match all elements on our page, so this is a quick way to add CSS to all our text.

Now let's change the colour of our paragraph text to a slightly lighter colour:

p {
  color: #505050;
}

#505050 is a hex code - a numerical way of representing a colour - a dark grey in this case.

Next, let's make our header stand out a little:

header {
  background-color: #cfcfcf;
	padding: 10px;
}

From our HTML, we can see that we have an <aside> element, which we'd like to be a sidebar.

By default, HTML all lives in a single column - later elements appear lower down the page. But in the real world, many webpages show elements side by side. We can use a CSS property called float to do this:

aside {
  float: right;
}
  1. Copying this CSS over to Codepen and watch how the final webpage changes.
  2. Try modifying selectors and values and see how it influences the final webpage.
  3. Try to display an image on right right hand side of the header, opposite the h1 element. You'll need to write HTML and CSS.

Using semantic tags...

Lessons last updated 12th July 2019. You can improve this lesson on Github.
Part of Building webpages
  1. Your first webpage
  2. Introducing HTML
  3. HTML attributes
  4. Classes and IDs
  5. Introducing CSS
  6. CSS selectors
  7. CSS specificity
  8. Creating layouts
  9. Responsive design
  10. Get confident with HTML and CSS
  11. Turn your prototypes into webpagesP