Build the inside of a header

01 / 04

The header is the face of the page

Every site has a thin band right at the top. The name of the shop on the left, the menu on the right — that part is called the header.

It shows up the same on whichever page you open, which makes it the face of the site.

02 / 04

The order matters. First decide which boxes hold what, and add the colours and the arrangement afterwards.

Make the whole header a div box and give it a class of header.

<div class="header">  <h1 class="logo">Moonlight Sweets</h1></div>

03 / 04

A menu is items lined up, so underneath it is a list. An li inside a ul, and an a inside that.

When you have not decided where a link goes yet, href="#" will do.

<ul class="menu">  <li><a href="#">Notices</a></li>  <li><a href="#">Sweets</a></li></ul>

04 / 04

Write it and look at the preview. The menu will sit below the logo, one on top of the other.

Do not be disappointed. Putting them side by side is the next lesson's job; for now, if the nesting adds up, you have passed. Have a go.

<div class="header">  <h1 class="logo">Moonlight Sweets</h1>  <ul class="menu">    <li><a href="#">Notices</a></li>  </ul></div>