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.

Comments

  1. User Avatar
    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’)… ;)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag