</>CodeChallenge

Lessons Roadmaps Practice Playground AI Tutor

Search lessons

CodeChallenge — learn coding one step at a time.

Create at © Oct 13, 2026 by Kouch Lyhour

Lessons Roadmaps Playground Search

AI tutor

Ask about any programming topic

You can ask 3 free questions a day. Log in for 20 a day.

Ask anything about programming. Try:

The tutor can make mistakes, so check important answers. Your questions are sent to an AI service to answer them.

Your question

3 of 3 left today

Exercise: Build this UI: responsive navbar · CodeChallenge

Practice
HTML & CSS

Build this UI: responsive navbar

A navigation bar with a logo and links that turns into a menu button on phones.

intermediateHTML & CSS

The task

Style the navigation bar to match the demo above:

The logo on the left, the links on the right, on one row (Flexbox).
Links have no underline, and a light background on hover. The current page ("Home") is highlighted.
On screens narrower than 600px, the links are hidden and the ☰ button shows instead. Pressing it shows the links as a column (the small script already adds the open class).

Make the preview narrower (or use your phone) to check the small-screen layout.

What you'll build

The finished result. Try it out, then build it yourself below.

Demo · drag the bottom edge to make it taller

Next exercise: Build this UI: landing page hero →

Log in to save your progress and earn 25 points for each exercise.

Hints

Solution

Try it yourself first: you learn the most from getting stuck and finding the way out.