I thought it was a quiz game before noticing the explanation on the right. I guess to teach kids CSS basics this would be great, quite engaging.
CSS Diner
11–20 of 121 posts
Re: CSS Diner
#12I was flummoxed on how to start for a bit but after reading the darkened title, I realized that you're supposed to type a selector that matches the darkened title's description.
This looks great for teaching beginners CSS, although there should be an "instructions" message somewhere.
Re: CSS Diner
#13This was fun. It reminds me a lot of Regex Crossword[1]. Good game for people who need to brush up on that.
Re: CSS Diner
#14I didn't like that apple:last-of-type, orange:last-of-type worked, but not orange:last-of-type, apple:last-of-type. Had me flummoxed for a bit.
Similar thing happened to me with "pickle:last-child, apple:last-child"
The pickle and apple shook, but apparently I was "wrong."
Re: CSS Diner
#15It took me at least 5 minutes to work out what to do. It is not immediately apparent you have to type in the selectors in the styling box, I thought you had to click on the animated objects. Pretty cool idea, I found it a little too easy, but as a developer already, maybe I am not the target market.
You did manage to throw in a few curve balls like needing to use general and adjacent sibling selectors to select particular elements beside other elements and inside of elements. I think it should get harder a lot quicker, would be cool to see an expert CSS version of this where it starts out hard.
Re: CSS Diner
#16This is really great. When first learning web design I would look up CSS selectors one at a time depending on what I needed at that moment. I assume this is how most people do it because all the tutorials out there are so damn boring, and by the time you learn the fifth selector you've forgotten the first. But even now, as someone who's proficient in CSS I enjoyed completing a large chunk of this "tutorial". If I didn't already have a whole lineup of side projects I'm working on I'd try making this mobile friendly and packing it into an app. If there were more levels that got very difficult at the end it would be a fun way for people learning web design (a growing trend) to spend their time while commuting.
Re: CSS Diner
#17Took a while to understand what the game was asking for, but once I did it was a lot of fun! Will definitely recommend it to friends learning css.
Re: CSS Diner
#18Earlier quoted context omitted.
> 1. Would be nice to have some sort of 'hint' or 'solve' button. Did you see the CSS documentation on the right sidebar? It took me a while to notice it was there.
Yeah I did - but I ran into an issue on level 9 (A, B) where I wasn't producing the answer it was looking for but my solution was still technically correct. I couldn't for the life of me 'unstick' myself from my initial answer. The hint could have kinda slapped my brain and jolted the more concise answer outta me. Really minor detail I know, but with a lot of these online lesson helpers people do like to have the ans…
Still trying to figure this one out..
Apparently "plate pickle, bento pickle" (or reverse order) isn't correct. Would love to see a hint/solution manual.
Re: CSS Diner
#19I didn't like that apple:last-of-type, orange:last-of-type worked, but not orange:last-of-type, apple:last-of-type. Had me flummoxed for a bit.
Interesting... When I went through it quickly I think I used .small:last-of-type and never ran into this.
Re: CSS Diner
#20Really cool, but please, more contrast. I can barely read the text in the HTML/CSS editor.