With our design for the footer all ready to go in Photoshop, we can start building it out into our static HTML and CSS mockup. The first step is giving ourself some HTML to work with. We already have a "part" that we include on all pages called "footer.php". This is the perfect place to include our footer markup for now.

As you might except, the footer is a <footer> tag. Within it, some lists of links. We discuss how it might not actually be ideal to put a list of links in an actual <ul> tag. They aren't really a list, after all, it's just some links. After I read this article, I haven't been putting navigation in lists anymore.

We use the Zen Coding feature in CodePen to get a bunch of links quickly to work with. To try it, type a*8 in the HTML editor of CodePen and then press Tab.

We finish up by writing the markup for the bottom footer as well. We hem and haw a bit about the best markup to use down there but ultimate just pick something and go with it. Things are easy to change on the web, anyway.


  1. JoeShmoe
    Permalink to comment#

    At approximately 12:50 you decided to add to the codepen text in the footer ‘CodePen is a playground…’ which you ultimately did, only you’re missing the word ‘a’ (you have ‘CodePen is playground’)… ;)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.