HomeChallengesRepsProblemsLeaderboardTake a challenge

Responsive Navbar

Create a navigation bar with logo, links, and a mobile menu button.

Intermediate8 min on the clock8 graded checks · 100 pointsComponent Builder
Graded by reading your code against the checklist below.

What you build

    How it is graded

    Published in full, before you start — every point is one of these and there is nothing else.

    1. Use responsive breakpoints+20Responsive design
    2. Use Flexbox+15CSS layout
    3. Toggle visibility across breakpoints+15Responsive design
    4. Add hover states+10Interaction and motion
    5. Use spacing utilities+10Spacing and rhythm
    6. Add shadows+10Visual polish
    7. Constrain with max-width+10CSS layout
    8. Add transitions+10Interaction and motion

    What it teaches

    Interaction and motionbeginner

    A :hover style tells the user something is clickable, and a transition stops that change from snapping — together they are the cheapest way to make a page feel built rather than assembled.

    Spacing and rhythmbeginner

    Padding is the breathing room inside a box; without it text touches its own border and everything looks amateur, no matter how good the colours are.

    The rest of Component Builder