
CSS Diner - dtournemille
http://flukeout.github.io/
======
DigitalSea
It 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.

~~~
rickyc091
Likewise. I kept typing ".plate", until I looked more carefully and realized
there was a plate tag.

I can see this being used as a teaching tool.

~~~
m_mueller
I did exactly the same. Then I thought the error was that it needs '{' on the
same line. The 'aha' moment is funny though.

What would be nice as a learning helper: having some display of what was
actually selected with the last command. For example little hands displayed on
top of the objects would somewhat match the theme.

~~~
chc
If you select the right objects, they get lifted up in the air. If you select
the wrong objects, they shake.

~~~
m_mueller
I see. My suggestion would be to keep the lift animation, but replace the
shaking with something that is persistently visible as long as the selector
hasn't changed - this way it would be much easier to make out what has been
going on. Also, one could play around with different selectors before actually
answering the question.

------
Theodores
Brilliant. I have been doing a little bit of CSS over the years and I can get
what I need done albeit not as quickly as some frontend developer that has
every quirk of IE6 memorised. Since I generally do backend stuff sometimes I
put in an extra class, e.g. for the end of a list, just 'to make it easier' on
the CSS side of things. There are things like A+B that I steer clear from as
they are allegedly bad according to tools like 'ySlow'. So I have plenty to
learn when it comes to CSS selectors. Normally I look at the CSS and the HTML,
not the big picture beyond 'inspect element'.

I felt that CSS Diner is very useful even if you think you know your subject.
The graphics are great. I wish all education was as much fun and as
interactive.

Like many folk here I did not understand what the game was at step #1 although
I forgot this at step #2. So yes, some introduction needs to be worked on even
though it is easy to overlook that once you get 'absorbed'. Aside from that,
brilliant and bookmarked.

------
shittyanalogy
Very cool.

Possible bug: on level 19, :nth-last-child() doesn't seem to work for
selecting the first child in a set of children in firefox. Running

    
    
        $("bento:nth-last-child(2)").length
    

is coming up 0 in the console as well.

edit: these work though :/

    
    
        bento:nth-last-child(even)
        bento:nth-last-child(1n+2)
        bento:nth-last-child(2n+0)
    

edit 2: Ahh figured it out. :nth-last-child doesn't match only nodes that
satisfy the selector you called it on. It matches all sibling nodes of the
selector you called it on.

edit 3: Actually, I don't know what I'm doing. It might be a bug. I can't tell
anymore. Anyone else have any thoughts?

edit 4: OK, I finally get it... _nth-last-child()_ is a qualifier not a
grouper(I don't know the actual css terms so I made those up). That is to say
that when you specify _bento:nth-last-child(2)_ you're not saying "of all the
bentos give me the second one" you're saying "of all the bentos give me those
that are in the second child position."

~~~
pippy

        .table *:nth-last-child(4)
    

Seems to work, although for me I had to push enter a few times.

~~~
kremlin
bento:nth-last-child(4) worked for me.

It selects the <bento> element that is the 4th child from last.

I think the confusion is here: people think that bento:nth-last-child(2) will
be the solution because it should select the second-from-last bento element,
but what it does is it selects all bento elements which are the 2nd from last
children -- and since in the puzzle there is no bento that is second from
last, it selects nothing.

So you have to consider it's siblings. The one we want ot select is the 4th-
from-last among its siblings.

~~~
CoryMathews
That makes very little sense.

Adding the bento: should have removed all the other items from selection.

It sounds like you are explaining a selector such as *:nth-last-child(4)

~~~
kremlin
it in fact works the way that 'makes very little sense'.

There is a good reason, though, and it's in keeping with the 'nth-of-type'
selector logic: there is a selector that works the way you think, called nth-
last-of-type[0]

[0] [http://www.w3schools.com/cssref/sel_nth-last-of-
type.asp](http://www.w3schools.com/cssref/sel_nth-last-of-type.asp)

[sample page I made just for you on my github.io page]
[http://flanneljesus.github.io/](http://flanneljesus.github.io/)

------
primitivesuave
This is amazing, literally the best way I've ever seen for teaching about CSS
selectors. I'm very grateful you made this open source so more levels and
features can be added.

------
JoshTriplett
Quite a bit of fun.

One notable issue: several puzzles need to have additional elements or classes
added to prevent less sophisticated solutions from working. It's often
possible to use a simpler selector than the one being taught in a particular
puzzle.

~~~
flukeout
Hey can you give me a specific example that's bothering you?

~~~
JoshTriplett
One example of how it _should_ work: On puzzle 1, the expected solution is
"plate", but * works fine; that's completely OK because puzzle 2 forces you to
use a more specific selector.

On level 7, it's possible to ignore the intended lesson and use "plate .small,
bento .small".

On level 10, surprisingly, it's _not_ possible to ignore the intended lesson
and write "apple, orange, bento, plate".

On level 11, .table * * works, though that does use the intended lesson.

That's in addition to the ones already mentioned in the sibling comment, which
were the first ones I noticed.

~~~
talmand
I did several of them this way as well. At first I wasn't even reading the
description to the right and just typing in selectors based on the
instructions. So if I knew two comma separated selectors would work then
that's what I typed in. Without going back over it to check, it's possible I
entered selectors on a good number of them totally different than what was
expected.

It would be interesting if the answers were tracked so we could eventually see
what different developers were entering as selectors on each one.

------
matthuggins
Cool, but it's definitely got some issues. For example, this failed:

    
    
      orange:last-of-type, apple:last-of-type
    

while this worked:

    
    
      apple:last-of-type, orange:last-of-type

~~~
flukeout
It's currently depending on the order of the selected elements to match, but
I'm updating it work correctly now.

------
smokinjoe
Couple things:

1\. Would be nice to have some sort of 'hint' or 'solve' button.

2\. Since you have the copy regarding how it's a work in progress, I'd suggest
throwing a link to the github issues page so it's easy to submit bug reports
and whatnot.

3\. I like it. Really aesthetically pleasing to use and each level is such a
small incremental step forward I think that even the most timid of noobs would
get a kick out of using it.

~~~
baddox
> 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.

~~~
smokinjoe
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 answer available to them.

~~~
kleinishere
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.

~~~
sirclueless
It's simpler than that. You are supposed to select the plate and bento, not
the pickles on the plate and bento.

~~~
geerlingguy
I was thinking plate + pickle and bento + pickle, since all of them were
dancing... took me coming back here to figure out that only the plate/bento
should be selected.

------
wrl
It is really bugging me that I can't prefix ".table" or "div.table" to any of
these, since intuitively that's what I'd do when writing styles.

~~~
suyash
this is not valid CSS : ".table" or "div.table" since those are elements
themselves and not class names. Unless of-course table is a class name then
I'm mistaken.

------
tyleregeto
I can always tell when a designer is working on a large screen, this feels
very awkward on my 13 inch laptop. There is just a little too much vertical
height. I keep wanting to scroll to see the whole thing. Very nice idea
though, well done!

------
yeldarb
Nice, I've been doing CSS for years but never knew about the "+" or "~"
selectors until now.

Anyone have any examples of how they have or would use these in real-life?

~~~
harlanlewis
The adjacent sibling selector `+` can be used to style an element based on the
state of a sibling. For example:

input:valid + label { color: black; }

input:invalid + label {color: red; }

CSS Tricks has a tutorial ([http://css-tricks.com/float-labels-
css/](http://css-tricks.com/float-labels-css/)) on this technique for
displaying form labels as faux placeholders until the input has content,
although it's not quite ready for most site's production requirements.

I haven't found many uses for the general sibling selector `~`, as it matches
_all_ elements _after_ the initial selected element. I usually want the
_preceding_ elements as well if I'm shooting that broadly, so simply excluding
the item with `:not()` is generally a better choice.

------
mbesto
Amazing.

Here's the GitHub repo in case anyone wants it:

[https://github.com/flukeout/restaurant](https://github.com/flukeout/restaurant)

(couldn't find a link anywhere)

------
coffeecodecouch
This 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.

------
Oculus
Took 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.

------
muxxa
Super idea and execution! I think it needs a few more iterations in a teaching
environment to actually make it _effective_ though. I tried running this by
someone with absolutely zero css or html experience.

\- The instruction (e.g. 'Select the small apples') isn't noticeable enough.

\- There needs to be a pause after you get an answer right, so you can work
out _why_ you got it right (otherwise you can bang away at random combinations
until you get to the next step without any idea what worked).

\- Similarly, when you try a wrong answer, there needs to be feedback as to
_why_. E.g. if you try 'bento small plate', when the answer is 'bento #small
plate', then there needs to be an explanation as to what you _didn 't_ do.
This is not trivial to achieve!

\- The instructions at the right hand side is visually noisy, and should be
hidden until needed, or perhaps presented first (in a modal popup) to give the
visitor a heads up as to what they are supposed to be adding to their
knowledge.

\- Because of the right hand instructions, it's not initially clear that the
HTML code is at all part of 'the puzzle'.

You are 90% there, just the last 90% to make it a true gem of a teaching tool.

------
reshambabble
Like what you're trying to do here!

It took me some time to figure out what I needed to do. Immediately, when I
see "select," I think "click," so I clicked on the item instead of typing in
text. Consider saying, "select images by typing in their class below."

Instead of ".classname," give an example. Also consider a pop up tutorial or a
guide that shows you what to do on the very first lesson.

The list of lessons is also confusing. There needs to be something that says -
this is what you've learned and what you still have to learn. Otherwise it
just looks like a strange list of words from a language I don't know.

Also - consider putting the instructions on the left hand side, and putting
"Learn CSS!" or something at the top instead of "Select ???." Because I read
from left to right, right now I see the image first, an instruction to select
something on the image (which I and others will interpret as "click on the
image") and then I stop (rather than go all the way across to see the other
instructions). If I see the instructions first and know exactly what to do.

Great job on this!

------
TazeTSchnitzel
I 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.

~~~
xarien
Interesting... When I went through it quickly I think I used .small:last-of-
type and never ran into this.

~~~
vxNsr
Yeah, my ah-ha moment happened when I realized that the pickles weren't small.

------
kaplejon
What an incredibly pleasant treat. Fun with smart progression. This certainly
brought a smile to my face.

But what I liked most, is that as someone with very little experience in
writing CSS, this allowed me to breeze through the simpler selectors, while
building my confidence on the more complex selectors. No doubt the graphical
representation was extremely helpful in that regard.

A resource worth sharing.

------
jmcgough
Really nice job - I like the vibrating items to give you feedback on what your
attempt selected.

I'm not sure if a beginner will retain much by going through each selector for
each level - would be nice to throw in some levels that require you to think
back to previous selectors. However, it's a good review for someone who's been
exposed to them before.

------
dav-
I really enjoyed this, but as others have mentioned it is not immediately
clear what you're supposed to do. I spent about 3 minutes trying to figure it
out. Maybe the first level should tell you exactly what to type, so that you
can get the hang of it.

------
xtacy
Quite fun. I was typing in the correct answer for the first puzzle, but with a
"{ }" at the end and it marked me incorrect. Maybe pop up a warning to tell
the user not to type braces?

~~~
Falling3
There's an opening brace on the next line that could probably be more obvious.

------
mpnordland
Absolute css genius. I've found no better way to learn selectors

------
joeframbach
Level 13:

Select every pickle to the right of the bento

The solution `bento ~ pickle` passes, but I don't think it should. It does not
select the pickles on the plates that are to the right of the bento.

~~~
sirclueless
I don't think it's meant to. The instructions are a bit ambiguous, but they
mean just the pickles that are siblings to the bento, which you can see
because only those are bouncing.

------
rschmitty
This is very cool. I found you can cheat though depending on the table and
task. For example level 17 is trying to show you :last-child but you can
'cheat' and just do `apple, pickle` and it let's you move on to the next phase

Anyways, very awesome way to teach, I'm sharing it with all my friends but
would be cool to force the solution and prevent "hacks" :P

------
subrat_rout
It is a really neat game. Kudos to maker(Luke). One must possess a unique
combination of creativity and subject matter expertise to bring this kind of
engaging game to audience(users). I heartily encourage those makers and wish
for more games on other programming languages (such as Rails, HTML and
Javascript etc).

Does anybody know other games like this in HTML, Javascript and Rails?

------
dfritsch
What should the solution to Level 19 be? I couldn't get anything with 'nth-
last-child' to work for me.

~~~
ntaylor
Same issue here. Not sure what I'm missing.

~~~
Aeolus98
:nth-last-child(4), because if you do first-child(2) it selects the second
orange as well.

------
owenversteeg
I 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.

------
ntaso
I think it's great and fun but too easy. There should be levels that require
more nesting or specifying elements within another group and there should be
more "control groups" that should NOT be matched (like in regex golf).

e.g.: A + B > C .small

------
aaronetz
Very cool. A suggestion: move the help bar (that teaches the concepts) to the
left side. I think it will feel more natural there. It took me some time to
notice it. Do you plan to extend that to learning javascript too? That would
be really nice.

------
tarun29061990
Not able to figure out what to do. It should be simpler, Kindly put a note or
some sort of information about what to do , don't put a link because I think
there are more chances that the user will go away rather than playing with it.

------
_august
This is great. Although, at first I thought it was one of those codepen CSS
creations.

For # 16, I tried the following which did not work:

    
    
      pickle:only-child, apple:only-child
    

However, this worked:

    
    
      apple:only-child, pickle:only-child

~~~
gerbal
I thought the solution was

    
    
      plate :only-child

~~~
_august
That works, along with just

    
    
      :only-child

------
enscr
Well done. A little 'getting started' would help people get started faster.
This written at the top "Select the plates" & the progress bar weren't obvious
because there were occluded form the view.

------
colinramsay
I know CSS pretty well and I have no idea how to make this work.

I'm on the current version of Chrome and it's throwing a load of JavaScript
errors in the console so maybe that's got something to do with it.

~~~
flukeout
Type in "plate" for level 1 - that's the correct selector. The goal is to type
the correct CSS selector for each level into the strobing blue input. Also,
use chrome or firefox :D

------
robobro
This was fun. It reminds me a lot of Regex Crossword[1]. Good game for people
who need to brush up on that.

[1] [http://regexcrossword.com/](http://regexcrossword.com/)

------
habosa
This is great. I never knew about the universal selector (*) or the general
sibling selector (~). I'm sure I'll learn a few more tricks from this as well,
not finished yet.

~~~
huckyaus
Google[0] and Mozilla[1] both have some information on their developer sites
about why avoiding the universal selector is preferable from a performance
point of view.

I'm yet to find a case that has absolutely required the use of the universal
selector. Has anybody else?

[0] [https://developers.google.com/speed/docs/best-
practices/rend...](https://developers.google.com/speed/docs/best-
practices/rendering#UseEfficientCSSSelectors)

[1] [https://developer.mozilla.org/en-
US/docs/Web/CSS/Universal_s...](https://developer.mozilla.org/en-
US/docs/Web/CSS/Universal_selectors)

~~~
jmcgough
I mostly see the universal selector used for resets (like removing all padding
and margins), but it's definitely not frequently used.

------
rowyourboat
Web designers should be forced to use el cheapo LCD monitors. Dark grey text
on black and light grey text on white are really hard to read if you do not
have a very good monitor.

------
eiliant
Thanks! Great design and interactivity. I would suggest adding a glossary page
somewhere and some follow up at the end instead of just CSS God, maybe
suggested readings?

------
rahmatawaludin
Why don't you use strawberry? I love strawberry.. :)

------
vysakh0
This is really useful and fun to use. At first I din understand how to solve
the problem, then realized the plate is related to the puzzle. Great work!

------
slaxman
This is awesome! I wish this was there, when I started learing to code. I
found it really difficult to understand CSS selectors back then. Great job!

------
NKCSS
I have found two bugs;

Level 17 of 26: Select the small apple and the pickle

Does not accept .table > :last-child, apple.small

does accept

apple.small, pickle

Level 19 of 26: Select the 1st bento:

Does not accept .table > :nth-last-child(4)

does accept: bento:first

------
xixixao
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.

------
cheshire137
Awesome! I shared this with my ladies' coding class, since several of them are
interested in web design and have been learning CSS.

------
the4dpatrick
I wanted to share after I completed it, and I was completely expecting a share
link after I finished it all. Make it easier to share

------
tripzilch
Oh wow. I teach kids to make websites (and other computer stuff) and I'm
totally going to use this game.

Thanks for creating it!

------
j-rom
Wow. Thank you for this. I'm just starting out in web development and this
makes learning CSS a lot easier.

------
changyu
I'm not clear what to do about the game.Could someone give me the solve for
level 1 for example.thx

~~~
pawannitj
plate

------
riz_
Really cool, but please, more contrast. I can barely read the text in the
HTML/CSS editor.

------
jebblue
This is pretty slick, I usually do just basic CSS, this got me to see the
power of selectors.

------
danoc
Really well done. I'd love to see one of these teaching the CSS animations
they use.

~~~
Springtime
The upbeat animations were the highlight for me. Without them I think it would
have felt more an exercise than game-like. Kept the positive vibe throughout.

------
zacinbusiness
On an iPad I long-tapped one of the plates and the highlight animation got
really funky.

------
rplnt
Does not work in Opera (the normal one) at all. The plates are jumping like
crazy.

------
asadlionpk
you should put up little help message to tell what exactly the player has to
do. Took me few minutes to understand that I had to type in the css selector.

------
agumonkey
Made me learn a few, thanks for the fearning.

------
gulbrandr
> You did it! You are a CSS God.

Very good, thank you! :)

------
durkie
absolutely love it. thanks for the creative way of teaching css -- it's very
well done!

------
bostan
awesome game. I think it will be great if you could add some levels for
layouts.

------
klochner
there's a bug in level 9 - you're enforcing an order on the tags

overall this is great

------
Kiro
How do you do level 26?

~~~
sailfast
Hint: For level 26, the apples you want to select are regular apples and do
not have the small class. As a result you can use the alpple:not() selector to
sove.

------
neotrinity
godsend! i am learning css and this turns up on hacker news

------
hitherejoebirch
This is really nice!

------
dbecks
This is really fun!

------
akbarnama
Awesome work!!

------
hw
this is fun. Love educational games.

------
mrtksn
take a look at the console.

>Fails thus far: 5

------
iotakodali
cool. thnx for making this

------
chadscira
very cool, but it took me longer than it should have to figure out how to
play.

