ShowDEV: Guess CSS! HTML+CSS puzzler game

#showdev #html #css #react

https://guess-css.app/

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: https://guess-css.app/. What is your score?

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.