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
.
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. :-)
- read-up on HTML unordered lists
- read-up on CSS pseudo-selectors (e.g., first-child, last-child, hover)