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.

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;
}