Navigation Menu Activity

instructions.md

Navigation Menu Activity

• Due: Saturday Jan 22 @ 11:59pm
• Weight: 4%

Objectives

• Build a simple and responsive horizontal nav bar using flexbox.
• Familiarize with flex-wrap and justify-content
• Practice styling block and inline nested elements
• Build a basic component that can be reused in future assignments

Instructions

• review this css-tricks article for info on creating a nav bar

1. create a nav tag
2. inside of it add a ul
3. add li with a tags inside the ul
4. stylize as you want
   • background-color
   • color
   • font-size
   • padding
   • default list styles
   • default link styles

Flexbox

• to make the nav links responsive to horizontal screen size, you will need to use flex-wrap
• you will likely need to adjust the justify-content property to tell your nav items how to justify themselves across the screen
• Pay attention to what is a flex container and what is an item (note that containers can be flex items of their respective parents as well)

Rubric

• 2pt for submission
• 1pt for syntax optimization and/or debug comments
• 1pt for flexbox usage and/or debug comments

---

Submission Notes

• Create activity in codepen with a partner
  • you will each have your own version of it by the end
• export as a zip file (see the bottom right of codepen for the export option)
• Submit your zipped file to brightspace along with a link to your codepen