Full playable demo

Try the finished feature

Use the finished version 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 feature first. Then build it in small, clear steps.

Build roadmap

What you’ll build, mission by mission

  1. 1
    Build the Side Cart Panel

    Pin a full-height cart panel to the right side of the viewport.

  2. 2
    Slide the Cart Off-Screen

    Hide a fixed drawer off-screen with a smooth transform transition.

  3. 3
    Open the Cart from the Header

    Open the cart drawer by adding an `open` class after a button click.

  4. 4
    Close the Cart Like a Real Website

    Close a cart drawer from two different click targets.

Mission demoBuild the Side Cart Panel

Finished result only — the answer code stays hidden.