Styled List Challenge

For this challenge, the objective is to learn how to use CSS to style an HTML list to create a menu-like effect.

See this video: https://youtu.be/ifORrQzU-Y8

You should only have to edit: index.html and main.css.

Using Nitrous.io

The file editor should be pretty self explanatory.

The window at the bottom is a "Terminal" window. You'll need to start to get familiar with these anyway, so may as well start now. When you open Nitrous.io, be sure that you are in the styled-list-html-css-challenge folder. If you are not, you can use this command:

$ cd styled-list-html-css-challenge

Once you're in that folder, you can run the "web server" with this command (so that
you can view your work):

$ node index.js

After that, use the Nitrous.io Preview --> Port 3000 menu option and you'll see the results of what you've done.

Once you have a solution, send me an email and I'll check your work. :-)

Hints

  • read-up on HTML unordered lists
  • read-up on CSS pseudo-selectors (e.g., first-child, last-child, hover)