Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Learn CSS Grid with a virtual garden game

cssgridgarden.com

Post reply on HN
Print view View original

31–40 of 63 posts

Re: Learn CSS Grid with a virtual garden game

#31

Post by renegade-otter »

I've always found this Rachel Andrews series a superb learning source: https://www.smashingmagazine.com/2020/01/understanding-css-g...

For someone such as myself, doing backend, this gave me a solid foundation for building modern UI apps while keeping them lean and simple.

No Bootstraps, no Tailwinds.

Re: Learn CSS Grid with a virtual garden game

#32

Post by cubefox »

aniforprez wrote: post #18

Honestly the game is kind of disappointingly surface level. It spends far too much time trying to exercise your knowledge of template columns and grid start/end but not enough to explain way more other features. No lessons about colspan, minmax, autoflow, gap, column names, subgrid and much more. I found flex to not fit a usecase I was working with so decided to use the website to learn about grid and I was pretty un…

This is an old game from a time when CSS Grid was new, so they just focused on the basics. Nowadays you can probably assume that most CSS users are somewhat familiar with basic CSS Grid already, so a game which covers the advanced features would make more sense.

Re: Learn CSS Grid with a virtual garden game

#34

Post by FireInsight »

sandreas wrote: post #2

While this game is quite nice and fun to play, I find it kind of tempting to just experiment with the values until you solve the current problem instead of focussing on the "How does it really work" aspect of the problem, which would lead to a deeper understanding... One way to solve this could be to allow more freedom in solving the problem as well as a small penalty on more than 2 or 3 tries.

I write frontend code and especially with CSS it's always trial-and-error, "bruteforcing" as you describe it. Sometimes you just gotta play with it until it works, while utilizing what you've learned from the previous times whacking at similar problems.

Re: Learn CSS Grid with a virtual garden game

#37

Post by ramesh31 »

bluelightning2k wrote: post #22

I did this and enjoyed it. Maybe I'm getting old but I just use flexbox every time. Makes me very "meh" about CSS grid.

>Maybe I'm getting old but I just use flexbox every time. Makes me very "meh" about CSS grid.

Grid is the wrong choice 99% of the time, but 1% of the time it will save you a ton of effort. Fixed navbars come to mind.

Re: Learn CSS Grid with a virtual garden game

#38

Post by georgesimon »

rimliu wrote: post #24
spyrosk wrote: post #20

For a moment I thought this was about https://csszengarden.com/pages/about/ (A long time ago) it was an amazing source to learn CSS, and get design inspiration.

I still consider those years to be the golden years of the web development. When the fruits of web standards movement started to appear. Alas, then came react and all the good stuff was thrown out of the window. I guess tag soup is palatable, when it is buried deep in node_modules.

Nowadays, I think the opposite. I feel a pang of jealousy and regret when I load a page from before CSS Zen Garden that uses tables for layouts. It still exists and works perfectly. I love how I can automatically date it in my mind, like period furniture or buildings. Unlike the thousands of pages that I made at the time, which are either gone or broken. I yearn for the html files that I lovingly handcrafted as unique pages. I destroyed them myself so that they could use a one-size-fits-all CSS solution. And they could in turn destroy each other with each new site redesign. If I ever get back on the indieweb, I'll be creating each page as a single file and allowing them to age gracefully.

Re: Learn CSS Grid with a virtual garden game

#39

Post by lghh »

renegade-otter wrote: post #31

I've always found this Rachel Andrews series a superb learning source: https://www.smashingmagazine.com/2020/01/understanding-css-g... For someone such as myself, doing backend, this gave me a solid foundation for building modern UI apps while keeping them lean and simple. No Bootstraps, no Tailwinds.

While Bootstrap certainly abstracts CSS away for you in a way that you can get by without knowing much about CSS (for simple things), Tailwind is just tokenized CSS. You can't use Tailwind without knowing CSS or learning CSS in the process.

That feels pretty lean and simple to me.

Re: Learn CSS Grid with a virtual garden game

#40

Post by squidbeak »

lghh wrote: post #39
renegade-otter wrote: post #31

I've always found this Rachel Andrews series a superb learning source: https://www.smashingmagazine.com/2020/01/understanding-css-g... For someone such as myself, doing backend, this gave me a solid foundation for building modern UI apps while keeping them lean and simple. No Bootstraps, no Tailwinds.

While Bootstrap certainly abstracts CSS away for you in a way that you can get by without knowing much about CSS (for simple things), Tailwind is just tokenized CSS. You can't use Tailwind without knowing CSS or learning CSS in the process. That feels pretty lean and simple to me.

The problem with tailwind is it does away with separation of concerns and messes up HTML, like the old styling tags in HTML. We moved on from those for good reasons.
Post reply on HN