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

11–20 of 63 posts

Re: Learn CSS Grid with a virtual garden game

#11

Post by martini333 »

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.

You can't blame the game for your own discipline.

Re: Learn CSS Grid with a virtual garden game

#12

Post by fortzi »

martini333 wrote: post #11
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.

You can't blame the game for your own discipline.

It’s not about assigning blame, it’s about encouraging the kind of player behavior that will lead to better learning

Re: Learn CSS Grid with a virtual garden game

#14

Post by friendzis »

cudder wrote: post #4

Pretty fun! I got stuck at level 26, my solution looks visually correct but the next button won't activate: grid-template-rows: repeat(4, 10px) 1fr;

Neat (or not, depending on your position) thing about grids is that they allow for zero-size areas.

With your approach you need 4 rows with the size of 50px/4=12.5px:

`grid-template-rows: repeat(4, 12.5px) 1fr;`

However, you can also "size" first (or any other "nice" number) of rows and insert zero-sized fluff areas:

`grid-template-rows: 50px repeat(3, 0px) 1fr;`

Re: Learn CSS Grid with a virtual garden game

#15

Post by infogulch »

martini333 wrote: post #11
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.

You can't blame the game for your own discipline.

Yes you can.

Giving players so much freedom that they can easily identify and execute a grindy, brute-force but boring strategy is an extremely common problem in game design. Fault is irrelevant, it is the game's problem if the player stops having fun because they got trapped in a psychological pit tying to circumvent the rules when playing by the rules is ultimately easier.

This is a tradeoff so requires some balance, but OP's suggestion is simple, unobtrusive, and probably effective.

Re: Learn CSS Grid with a virtual garden game

#16

Post by rezonant »

j16sdiz wrote: post #3

Some random note: 1. Good: The answer is verified by checking the absolute position. You can pass the level with any valid answer -- including non-grid variant. 2. Ugly: It send google analytics for every attempt.

re (1): Indeed, I think we all agree that "position: relative; left: 31.4em;" is a solid solution to the first challenge.

Re: Learn CSS Grid with a virtual garden game

#18

Post by aniforprez »

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 unamused to find out how little it actually teaches you

Re: Learn CSS Grid with a virtual garden game

#19

Post by aniforprez »

p0seidon wrote: post #9
buzer wrote: post #6

Earlier quoted context omitted.

You are watering everything except for top 40 pixels. You need to water everything except for top 50 pixels.

Gone are the beautiful days of layouts.

And I'm so thankful. Table layouts are horribly restrictive and opinionated with all sorts of arcane under-the-hood rendering rules making simple things like fixing the width of your columns not work at all. Grid is better except obviously if you're rendering an actual table
Post reply on HN