20 ms·

CSS Diner

560 points by dtournemille 13y ago

smokinjoe 13y ago
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 13y ago
  > 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 13y ago
    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 13y ago
      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.
      - kaila 13y ago
        plate, bento
      - sirclueless 13y ago
        It's simpler than that. You are supposed to select the plate and bento, not the pickles on the plate and bento.
        geerlingguy 13y ago
        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.
      - flukeout 13y ago
        plate,bento does the trick, but because it's order-specific right now, so bento,plate fails - I'm updating it tonight to fix that issue.
    - flukeout 13y ago
      I agree, I think I'll add a way to expose the solution. The problem with A,B is that it's also looking for one specific order, so I'll make sure both A,B and B,A work! Cheers!
dbecks 13y ago
This is really fun!
joeframbach 13y ago
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.
- jagger27 13y ago
  I just tried this out in JSFiddle. It appears to be the correct behaviour. http://jsfiddle.net/2GzrZ/2/ http://jsfiddle.net/2GzrZ/2/
- sirclueless 13y ago
  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.
mpnordland 13y ago
Absolute css genius. I've found no better way to learn selectors
TazeTSchnitzel 13y ago
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.
- jonny_eh 13y ago
  Ya, I stopped there, thought it was broken (didn't realize how to get around that issue)
- gagege 13y ago
  Similar thing happened to me with "pickle:last-child, apple:last-child" The pickle and apple shook, but apparently I was "wrong."
- xarien 13y ago
  Interesting... When I went through it quickly I think I used .small:last-of-type and never ran into this.
  - igravious 13y ago
    Ahhhhhhhhhhhhh
  - vxNsr 13y ago
    Yeah, my ah-ha moment happened when I realized that the pickles weren't small.
colinramsay 13y ago
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 13y ago
  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
xixixao 13y ago
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.
owenversteeg 13y ago
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.
robobro 13y ago
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/
DigitalSea 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      If you select the right objects, they get lifted up in the air. If you select the wrong objects, they shake.
      - m_mueller 13y ago
        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.
- 13y ago
coffeecodecouch 13y ago
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.
jmcgough 13y ago
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.
Oculus 13y ago
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.
riz_ 13y ago
Really cool, but please, more contrast. I can barely read the text in the HTML/CSS editor.
changyu 13y ago
I'm not clear what to do about the game.Could someone give me the solve for level 1 for example.thx
- pawannitj 13y ago
  plate
mrtksn 13y ago
take a look at the console. >Fails thus far: 5
dav- 13y ago
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.
chadscira 13y ago
very cool, but it took me longer than it should have to figure out how to play.
JoshTriplett 13y ago
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 13y ago
  Hey can you give me a specific example that's bothering you?
  - lifthrasiir 13y ago
    Some examples: `plate>apple, plate>pickle` for 16, `apple, pickle` for 17, `bento:nth-child(2)` for 19, `plate:nth-child(2)>apple` for 22.
  - JoshTriplett 13y ago
    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 13y ago
      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.
xtacy 13y ago
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 13y ago
  There's an opening brace on the next line that could probably be more obvious.
aaronetz 13y ago
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.
habosa 13y ago
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 13y ago
  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/rendering#UseEfficientCSSSelectors https://developers.google.com/speed/docs/best-practices/rend... [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_s...
  - jmcgough 13y ago
    I mostly see the universal selector used for resets (like removing all padding and margins), but it's definitely not frequently used.
Theodores 13y ago
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.
zacinbusiness 13y ago
On an iPad I long-tapped one of the plates and the highlight animation got really funky.
primitivesuave 13y ago
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.
_august 13y ago
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 13y ago
  I thought the solution was plate :only-child
  - _august 13y ago
    That works, along with just :only-child
matthuggins 13y ago
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
- sp332 13y ago
  Same problem on level 9, "bento, plate" doesn't work but "plate, bento" does.
- paraxisi 13y ago
  This was the only issue I noticed having gone through them all, the ordering seems to be specific on a few of them. All in all pretty fun, the tips on the right make it fairly trivial to trudge through if you're not great at CSS (like me.)
- flukeout 13y ago
  It's currently depending on the order of the selected elements to match, but I'm updating it work correctly now.
- Aeolus98 13y ago
  I just did it with .small:last-of-type, as it executes cleaner and can be scaleable
durkie 13y ago
absolutely love it. thanks for the creative way of teaching css -- it's very well done!
vysakh0 13y ago
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!
danoc 13y ago
Really well done. I'd love to see one of these teaching the CSS animations they use.
- Springtime 13y ago
  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.
rahmatawaludin 13y ago
Why don't you use strawberry? I love strawberry.. :)
tyleregeto 13y ago
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!
mbesto 13y ago
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)
jebblue 13y ago
This is pretty slick, I usually do just basic CSS, this got me to see the power of selectors.
yeldarb 13y ago
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 13y ago
  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.
- aram 13y ago
  Way back NetTuts had a good article with unusual CSS selectors; check it out here: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 https://code.tutsplus.com/tutorials/the-30-css-selectors-you...
- stan_rogers 13y ago
  Before the nth-child/first-child selectors had common-enough implementation and the <section> tag didn't yet exist, I used hn + p and .epigraph + p (along with first-line set in small-caps and first-letter as an versal) to style the initial paragraph of a page or major section. That's more document layout than anything apptastic, but it made for a nice-looking page.
- criswell 13y ago
  A super useful one is for styling an element that's next to a checked checkbox. :checked + label { background-color: green; } http://jsbin.com/witaziwu/1/edit?html,css,output http://jsbin.com/witaziwu/1/edit?html,css,output Small demo if you want to mess around with it.
j-rom 13y ago
Wow. Thank you for this. I'm just starting out in web development and this makes learning CSS a lot easier.
klochner 13y ago
there's a bug in level 9 - you're enforcing an order on the tags overall this is great
slaxman 13y ago
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!
dfritsch 13y ago
What should the solution to Level 19 be? I couldn't get anything with 'nth-last-child' to work for me.
- ntaylor 13y ago
  Same issue here. Not sure what I'm missing.
  - Aeolus98 13y ago
    :nth-last-child(4), because if you do first-child(2) it selects the second orange as well.
hw 13y ago
this is fun. Love educational games.
subrat_rout 13y ago
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?
the4dpatrick 13y ago
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
shittyanalogy 13y ago
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."
- kang 13y ago
  Came here to report level 19 as well. According to the description on level 18 div p:nth-child(2) selects the second <p> in every <div> So on level 19, to select the first <bento> in <div>, div bento:nth-child(1) should work, but it doesn't. However, div bento:nth-child(2) works. So I think a possible bug here?
  - chc 13y ago
    The description of :nth-child is misleading here. It would only do that if the first two elements in every DIV were P elements. A more accurate description would be "Selects the second element in each DIV if it is a P." The description given there sounds more like :nth-of-type.
- pippy 13y ago
  .table *:nth-last-child(4) Seems to work, although for me I had to push enter a few times.
  - kremlin 13y ago
    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.
enscr 13y ago
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.
kaplejon 13y ago
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.
asadlionpk 13y ago
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.
tripzilch 13y ago
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!
eiliant 13y ago
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?
gulbrandr 13y ago
> You did it! You are a CSS God. Very good, thank you! :)
akbarnama 13y ago
Awesome work!!
iotakodali 13y ago
cool. thnx for making this
wrl 13y ago
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 13y ago
  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.
ntaso 13y ago
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
Kiro 13y ago
How do you do level 26?
- sailfast 13y ago
  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.
rowyourboat 13y ago
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.
tarun29061990 13y ago
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.
hitherejoebirch 13y ago
This is really nice!
rplnt 13y ago
Does not work in Opera (the normal one) at all. The plates are jumping like crazy.
neotrinity 13y ago
godsend! i am learning css and this turns up on hacker news
rschmitty 13y ago
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
cheshire137 13y ago
Awesome! I shared this with my ladies' coding class, since several of them are interested in web design and have been learning CSS.
bostan 13y ago
awesome game. I think it will be great if you could add some levels for layouts.
agumonkey 13y ago
Made me learn a few, thanks for the fearning.
reshambabble 13y ago
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!
muxxa 13y ago
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.
NKCSS 13y ago
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

560 points by dtournemille 13y ago

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 13y ago
> 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 13y ago
  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 13y ago
    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.
    - kaila 13y ago
      plate, bento
    - sirclueless 13y ago
      It's simpler than that. You are supposed to select the plate and bento, not the pickles on the plate and bento.
      - geerlingguy 13y ago
        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.
    - flukeout 13y ago
      plate,bento does the trick, but because it's order-specific right now, so bento,plate fails - I'm updating it tonight to fix that issue.
  - flukeout 13y ago
    I agree, I think I'll add a way to expose the solution. The problem with A,B is that it's also looking for one specific order, so I'll make sure both A,B and B,A work! Cheers!

dbecks 13y ago

This is really fun!

joeframbach 13y ago

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.

jagger27 13y ago
I just tried this out in JSFiddle. It appears to be the correct behaviour. http://jsfiddle.net/2GzrZ/2/ http://jsfiddle.net/2GzrZ/2/
sirclueless 13y ago
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.

mpnordland 13y ago

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

TazeTSchnitzel 13y ago

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.

jonny_eh 13y ago
Ya, I stopped there, thought it was broken (didn't realize how to get around that issue)
gagege 13y ago
Similar thing happened to me with "pickle:last-child, apple:last-child" The pickle and apple shook, but apparently I was "wrong."
xarien 13y ago
Interesting... When I went through it quickly I think I used .small:last-of-type and never ran into this.
- igravious 13y ago
  Ahhhhhhhhhhhhh
- vxNsr 13y ago
  Yeah, my ah-ha moment happened when I realized that the pickles weren't small.

colinramsay 13y ago

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 13y ago
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

xixixao 13y ago

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.

owenversteeg 13y ago

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.

robobro 13y ago

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/

DigitalSea 13y ago

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 13y ago
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 13y ago
  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 13y ago
    If you select the right objects, they get lifted up in the air. If you select the wrong objects, they shake.
    - m_mueller 13y ago
      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.
13y ago

coffeecodecouch 13y ago

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.

jmcgough 13y ago

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.

Oculus 13y ago

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.

riz_ 13y ago

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

changyu 13y ago

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

pawannitj 13y ago
plate

mrtksn 13y ago

take a look at the console. >Fails thus far: 5

dav- 13y ago

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.

chadscira 13y ago

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

JoshTriplett 13y ago

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 13y ago
Hey can you give me a specific example that's bothering you?
- lifthrasiir 13y ago
  Some examples: `plate>apple, plate>pickle` for 16, `apple, pickle` for 17, `bento:nth-child(2)` for 19, `plate:nth-child(2)>apple` for 22.
- JoshTriplett 13y ago
  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 13y ago
    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.

xtacy 13y ago

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 13y ago
There's an opening brace on the next line that could probably be more obvious.

aaronetz 13y ago

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.

habosa 13y ago

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 13y ago
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/rendering#UseEfficientCSSSelectors https://developers.google.com/speed/docs/best-practices/rend... [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_s...
- jmcgough 13y ago
  I mostly see the universal selector used for resets (like removing all padding and margins), but it's definitely not frequently used.

Theodores 13y ago

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.

zacinbusiness 13y ago

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

primitivesuave 13y ago

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.

_august 13y ago

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 13y ago
I thought the solution was plate :only-child
- _august 13y ago
  That works, along with just :only-child

matthuggins 13y ago

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

sp332 13y ago
Same problem on level 9, "bento, plate" doesn't work but "plate, bento" does.
paraxisi 13y ago
This was the only issue I noticed having gone through them all, the ordering seems to be specific on a few of them. All in all pretty fun, the tips on the right make it fairly trivial to trudge through if you're not great at CSS (like me.)
flukeout 13y ago
It's currently depending on the order of the selected elements to match, but I'm updating it work correctly now.
Aeolus98 13y ago
I just did it with .small:last-of-type, as it executes cleaner and can be scaleable

durkie 13y ago

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

vysakh0 13y ago

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!

danoc 13y ago

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

Springtime 13y ago
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.

rahmatawaludin 13y ago

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

tyleregeto 13y ago

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!

mbesto 13y ago

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)

jebblue 13y ago

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

yeldarb 13y ago

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 13y ago
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.
aram 13y ago
Way back NetTuts had a good article with unusual CSS selectors; check it out here: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 https://code.tutsplus.com/tutorials/the-30-css-selectors-you...
stan_rogers 13y ago
Before the nth-child/first-child selectors had common-enough implementation and the <section> tag didn't yet exist, I used hn + p and .epigraph + p (along with first-line set in small-caps and first-letter as an versal) to style the initial paragraph of a page or major section. That's more document layout than anything apptastic, but it made for a nice-looking page.
criswell 13y ago
A super useful one is for styling an element that's next to a checked checkbox. :checked + label { background-color: green; } http://jsbin.com/witaziwu/1/edit?html,css,output http://jsbin.com/witaziwu/1/edit?html,css,output Small demo if you want to mess around with it.

j-rom 13y ago

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

klochner 13y ago

there's a bug in level 9 - you're enforcing an order on the tags overall this is great

slaxman 13y ago

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!

dfritsch 13y ago

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

ntaylor 13y ago
Same issue here. Not sure what I'm missing.
- Aeolus98 13y ago
  :nth-last-child(4), because if you do first-child(2) it selects the second orange as well.

hw 13y ago

this is fun. Love educational games.

subrat_rout 13y ago

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?

the4dpatrick 13y ago

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

shittyanalogy 13y ago

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

kang 13y ago
Came here to report level 19 as well. According to the description on level 18 div p:nth-child(2) selects the second <p> in every <div> So on level 19, to select the first <bento> in <div>, div bento:nth-child(1) should work, but it doesn't. However, div bento:nth-child(2) works. So I think a possible bug here?
- chc 13y ago
  The description of :nth-child is misleading here. It would only do that if the first two elements in every DIV were P elements. A more accurate description would be "Selects the second element in each DIV if it is a P." The description given there sounds more like :nth-of-type.
pippy 13y ago
.table *:nth-last-child(4) Seems to work, although for me I had to push enter a few times.
- kremlin 13y ago
  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.

enscr 13y ago

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.

kaplejon 13y ago

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.

asadlionpk 13y ago

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.

tripzilch 13y ago

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!

eiliant 13y ago

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?

gulbrandr 13y ago

> You did it! You are a CSS God. Very good, thank you! :)

akbarnama 13y ago

Awesome work!!

iotakodali 13y ago

cool. thnx for making this

wrl 13y ago

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 13y ago
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.

ntaso 13y ago

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

Kiro 13y ago

How do you do level 26?

sailfast 13y ago
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.

rowyourboat 13y ago

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.

tarun29061990 13y ago

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.

hitherejoebirch 13y ago

This is really nice!

rplnt 13y ago

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

neotrinity 13y ago

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

rschmitty 13y ago

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

cheshire137 13y ago

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

bostan 13y ago

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

agumonkey 13y ago

Made me learn a few, thanks for the fearning.

reshambabble 13y ago

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!

muxxa 13y ago

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.

NKCSS 13y ago

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