DEV Community

Aleksei Berezkin
Aleksei Berezkin

Posted on

ShowDEV: Guess CSS! HTML+CSS puzzler game

Have you ever struggled with CSS? I used to! Let's struggle together. Try yourself in these exercises!

What's this?

It's HTML and CSS learning game. You are given a rendered example, three CSS fragments and HTML layout, and your task is to guess which CSS renders this example.

CSS parts covered

  • Grid
  • Selectors and their specificity
  • Flexbox
  • Position
  • Display

How it works

We are all developers, so if you are interested in app internals, I'm glad to disclose them!

The code is here. It's typical React app written on TypeScript. There's a global store but it's not Redux or MobX: there's an easy way to write your own and keep your bundle small 😉 Interface components are created with Material UI.

How does it create puzzlers

It generates them here. There's a script for each topic which combines random elements into an exercise. Because there are a lot of moving parts in one puzzler, the result is likely to be different each time.

For each task 3 similar CSS fragments are generated. One is picked to be correct.

What I've learned doing this project

  • CSS basics
  • React and TypeScript — I practiced them a lot
  • I played also with Redux and SSR but then removed both for simplicity
  • Material UI and CSS-in-JS
  • Responsive, mobile-first layout
  • A bit of design. It was quite challenging to make exercises look clear; if it looks simple for you — yeah, I'm glad I managed to!

Did I enjoy working on the project?

Yes! Doing pet projects is very fun and useful.

Thanks for reading the post. Here's the link again: What is your score?

Top comments (3)

afif profile image
Temani Afif

nice one, I got 17:0 so far 😇

alekseiberezkin profile image
Aleksei Berezkin • Edited

I believe you can easily get +Inf:0 😉

posandu profile image

Thank you for creating this! Very useful