Full playable demo

Try the finished feature

Use the finished shell before you build it yourself.

Playable result only — the source code stays hidden.

Mission 00 4 min

Mission 0: See What You’re Building

Try the finished shell first. Notice that there is no hero yet — you will build that in the next quest.

Build roadmap

What you’ll build, mission by mission

  1. 1
    Build the Store Header

    Add the brand, navigation and disabled bag button.

  2. 2
    Make the Header Look Legit

    Use Flexbox to make the header feel like a real shop.

  3. 3
    Give the Navigation Somewhere to Go

    Create Shop and About destination sections.

  4. 4
    Make the Navigation Work

    Connect the links to their sections and add smooth scrolling.

Mission demoBuild the Store Header

Finished result only — the answer code stays hidden.