Coding the header and footer

The header for this project is fairly minimal in design. It will include a logo, some post filter links, and a search field. The footer for this project, however, is the most complex one we've done yet. It will include two sections, a number of links, an e-mail sign-up form, and space for an advertisement—any good magazine design will include some space for ads.

Updating the header

Let's start with updating the header first. For this project, I'm going to use a couple of HTML5 tags to mix things up. For each project in this book, I try to change how I build the header to show you that there are several ways by which you can construct a header. Some will use the default Bootstrap header, but some will be totally custom. The first thing that we're going to do is wrap the entire header in the <header> tag:

<header>
  …
</header>

Everything contained within the header is going to be centered horizontally, so let's apply a single style to this tag:

header...