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
    Put Product Data into the Page

    Read values from a product object and show them in the DOM.

  2. 2
    Build a Product Card with JavaScript

    Create product name and price elements from a product object inside a reusable function.

  3. 3
    Render the Whole Catalogue

    Render every product object as a card using a loop.

  4. 4
    Stock the Store with Six Products

    Add new product objects so the existing renderer shows a larger catalogue.

Mission demoPut Product Data into the Page

Finished result only — the answer code stays hidden.