ShowDEV: Guess CSS! HTML+CSS puzzler game

#showdev #html #css #react

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!