HTML & CSS - Lists and Navigation

If you’ve completed and understood everything so far, you’ve demonstrated your ability to leverage both HTML and CSS to create the foundation of any good site – its layout. So what’s next? Well, now it’s time to get a little more HEADy – to start thinking about user experience as you turn a series of web pages into a web site.

“Describe the semantically correct HTML markup for a simple primary navigation.”
sample interview question

What is a web site? According to Wikipedia:

... a set of related web pages containing content such as text,images, video, audio, etc.
http://en.wikipedia.org/wiki/Website

If you have a set of web pages, how do you tie this set together? In practice, this can be quite complicated and you should always ask yourself a few key questions like: Do you have a specific order in which you want your users to view the pages on your site? Or is this a choose-your-own-adventure? Are your pages meant to represent a classic documents and folder structure? Or do you have categories within categories of pages?

Whatever the case, most web user experience revolves around thoughtful navigation. Read Smashing Magazine’s excellent article on Planning And Implementing Website Navigation to understand how important navigation is to a website.

Planning And Implementing Website Navigation

The most important aspect of navigation is helping people find what they are looking for quickly; and one of the best ways to do that is with a list of page links. Let’s start by taking all 7 courses of Codecademy’s Lists in HTML.

CodeCademy: Lists in HTML, Lessons 1-7

Pretty straight forward, right? But how does that help you create a system of navigation for your website? Watch this video where a coder uses all the tricks we’ve learned so far to make a navigation bar for a website: Create a website navigation bar using CSS.

Create a website navigation bar using CSS

Pretty snazzy! Now let’s dig a little deeper with our ol’ friend Shay Howe to get a little more background on the type of lists you can use in your site navigation: Shay Howe’s A Beginner’s Guide to HTML & CSS Unordered, Ordered, & Definition Lists.

HTML & CSS for Beginners: Lesson 6 - Unordered, Ordered, & Definition Lists

You should now have a really good understanding of how lists can contribute to a simple site with navigation, but look at the sites you use every day to understand the nuances and minutiae of an important part of web design.

What's next? Do the challenge!

0 Comments — Be the first!