Course outline
Full-Stack course / Tools and the web

A nav bar with real interactive states

Lab

How to fetch and submit this exercise

Once: install the tool and connect your account.

curl -fsSL https://gonomicon.com/install.sh | sh
gonomicon login

Each exercise: download it, edit the file named in the instructions, then submit.

gonomicon fetch fs-week-1/05-05-interactive-nav-states
cd 05-05-interactive-nav-states
gonomicon submit

The runner depends on the exercise: JavaScript/TypeScript/React labs run with Vitest, Python labs with pytest, and config-file labs (Docker, CI, Terraform, Nginx) are checked by parsing your file. gonomicon test runs the visible checks on your computer first; submitting also runs the hidden checks on our server.

A nav bar with real interactive states

Build a navigation bar with four links, clear hover and keyboard-focus states, and a visual marker for the current page.

Worked example: When a visitor hovers over a link or focuses it with a keyboard, its background changes; the current-page link has a marker before its text.

Rules and constraints

  • Link styles.css from index.html.
  • Include a <nav class="site-nav"> containing a <ul> with at least four list items and links using the required classes.
  • Give one link the site-nav__link--current class.
  • Organize the stylesheet into at least three comment-labeled sections and use a consistent site-nav block naming pattern for classes.
  • Use a transition with a positive duration for the link’s background color or text color.
  • The hover and keyboard-focus states must each have a background color different from the resting state.
  • Use a CSS pseudo-element for the current-page marker; do not add a separate marker element in the HTML.

What you'll practice

  • Styling hover and keyboard-focus states.
  • Using transitions and pseudo-elements.
  • Organizing CSS with consistent class names.

Run it

gonomicon fetch fs-week-1/05-05-interactive-nav-states
cd 05-05-interactive-nav-states
gonomicon test
gonomicon submit

Hints

  1. Check the link’s resting, pointer-hover, and keyboard-focus styles separately.
  2. Use the same link class for both interactive states, and give the current link its own modifier class.
  3. Add a non-empty ::before marker to the current-link modifier and give the base link a positive transition duration.
PreviousNext lesson