easy HTML & CSS CSS

Navigation Bar

The Brief

You're starting a portfolio site. Build the top navigation bar — a logo on the left, three links on the right (Home, About, Contact), all on a dark bar that runs the full width of the page.

Acceptance Criteria

Tap a criterion to mark it off as you work. Tap a category header to expand or collapse.

1 Use a <nav> element wrapping everything

2 Put the logo text in a <div> with class logo

3 Use a <ul> with three <li><a> items: Home, About, Contact

4 Apply display: flex to the <nav>

5 Use justify-content: space-between so logo is left, links are right

6 Use align-items: center for vertical centring

7 Apply display: flex and gap: 24px to the <ul>

8 Remove bullets from the list with list-style: none, and reset its padding/margin

9 Nav background: #1e293b (dark slate)

10 Nav padding: 16px 32px

11 Logo: font-size: 20px, font-weight: 700, white

12 Links: white text, no underline (text-decoration: none)

13 Hover state: link colour becomes #38bdf8 with a smooth transition

💡 Hints 0 / 3

Guest Mode Attempt freely, or log in to earn EXP & CodeCoins.

index.html

Live Preview