๐ŸŽฎ My First Browser Game โ€ข Episode 2 of 6 โ€ข See All Episodes
๐ŸŽฎ Episode 2 โ€ข Beginner โ€ข DOM & CSS Skills

Match Maker!
Memory Card Game

No canvas this time, build a card-flipping memory game out of real HTML elements, CSS 3D flips and DOM events. This is the same skill set as building web apps, disguised as a game.

๐ŸŽฎ Ages 10+ ๐ŸŽฎ ~1.5 Hours ๐ŸŽฎ JavaScript โœ“ Free
๐ŸŽฎ DOM elements ๐ŸŽฎ Array shuffle ๐ŸŽฎ CSS 3D flips ๐ŸŽฎ Click events ๐ŸŽฎ Match logic ๐ŸŽฎ Move counter
โญ
0 XP
Level 1
๐Ÿ”ฅ0
Your Progress 0 / 6 steps
๐ŸŒ
How to run: Open the HTML file in your browser - double-click it or drag it into Chrome. In this build-along you write the code, then watch it come alive in the canvas on the right.
๐ŸฆŠ
Lumo says: every step adds one feature to the same game. Type a little, click Apply to Canvas, and test it straight away. There is no wrong answer you canโ€™t undo.

Build Memory Step by Step

Each step adds a feature. Write the code, watch it come alive in the canvas.

Step 1 / 6
Click a card to flip it