The header

Let's start implementing our header. Best practice is to first do the HTML and then finish with the CSS. Let's have a look at our design first.

As you can see, our header has a transparent background, with a logo and main menu on the left-hand side, and a secondary menu on the right-hand side.

First, create a <header> tag in our HTML document:

<!-- Add your site or application content here --> <header></header>

Creating a menu

To create our menu, we need to create a list. In HTML, to create a list you have to use the tag <ul>.

<ul> stands for unordered list; it needs to have a list tag inside <li>. You can use it as follows:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Our list should end up looking like this:

<header>
  <ul>
    <li>Upcoming events</li>
    <li>Past events</li>
    <li>FAQ</li>
    <li>About us</li>
    &lt...