CSS Grid Garden – a game to learn CSS grid by watering plants

cssgridgarden.com

48 points·nailer··9 comments

See also discussion from 4 months ago: https://news.ycombinator.com/item?id=18753358 (128 comments)

And from 2 years ago: https://news.ycombinator.com/item?id=14041367 (131 comments)

Just as fair warning, the last one of these to come around on HN, Flex Zombies, collected email addresses and either promptly sold them or was compromised. The nature of the email indicates being sold. I have proof of marketing mail being sent to name+flexzombie@myemaildomain.com.

Grid garden doesn’t require a sign up.

The creator of flex zombies does have a grid game but it’s paid. That said I think they just released a service workers game so I guess good to know.

> grid-template-columns: 20% 20% 20% 20% 20%;

Shouldn't this be repeat(5, 1fr);

I thought we were done with percentages and the fractional unit was the new way.

guess you didn't finish the tutorial before you commented ;-)

fr is introduced later.

I went through to about 28.

The problem is that you should never educate people with the wrong stuff first. It is harder to unlearn than it is to learn. Plus people like me come along with some knowledge of the subject and get put off by the wrongfulness of the starting point.

Apropos of CSS grid learning games, had anyone here used Grid Critters[1] and want to share their experience? It looks pretty slick, but the price tag makes me hesitate.

[1] http://www.gridcritters.com

Is there anything like this for more advanced css?

All tutorials seem to be for complete beginners or advanced hacks / tricks. I can't find anything for an intermediate level.

There is https://cssbattle.dev it's not a tutorial, but seems to be a nice way to play with css. (I've only done the first puzzle, so can't say too much about it)

Reply on news.ycombinator.com