Full playable demo

Open the full PixelForge demo

Explore the complete site you are building.

Playable result only — the source code stays hidden.

Mission 00 5 min

Mission 0: Meet PixelForge

You are going to build PixelForge, a landing page for a creative coding studio. Explore the finished result first, then build it one section at a time.

Build roadmap

What you’ll build, mission by mission

  1. 1
    Page shell

    Create the semantic structure and navigation.

  2. 2
    Navbar

    Lay out the header with Flexbox.

  3. 3
    Hero

    Build the opening two-column section.

  4. 4
    Features

    Create a three-card Grid section.

  5. 5
    Projects

    Build a second reusable card grid.

  6. 6
    Call to action

    Add a strong final action section.

  7. 7
    Interactions

    Add restrained hover motion.

  8. 8
    Responsive

    Adapt the layout for narrow screens.

  9. 9
    Polish

    Review the whole site for consistency.

Mission demoBuild the Page Shell

Finished result only — the answer code stays hidden.