Have you ever struggled with CSS? I used to! Let's struggle together. Try yourself in these exercises!
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.
- Selectors and their specificity
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.
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.
- 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!
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?