A navigation list and link states
Hover a link, press Tab to focus one with the keyboard, then press and hold the mouse button on one. Each state shows its style. (display: flex lays the menu out in a row; it's taught in the Flexbox phase.)
list-style and ::marker control the bullets and numbers of lists, and link styles are written in the order :link, :visited, :hover, :focus-visible, :active so each state wins at the right moment, while staying easy to spot for everyone.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make an ordered list count with lowercase letters and show the letters in bold seagreen.
Turn nav ul into a plain menu without bullets or indentation, and style its links in LVHFA order: blue, purple when visited, underlined on hover, an orange outline on keyboard focus, red while pressed.
Explain it without notes
Why must link state rules be written in LVHFA order?
Why is :visited restricted, and what can you still change with it?
What can ::marker style, and what do you do when you need more?
How do you keep links accessible if the design wants no underlines?
Preview
Console
Nothing logged yet.