CSS Diner | Hacker News Reader

CSS Diner

flukeout.github.io

560 pointsdtournemille120 comments

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.

I'm not sure that making it harder faster is a good idea. It was easy for me as well (for the most part), but I immediately sent out an email to some friends who are trying to learn the web basics. A game like this is a fun way to teach them about css selectors- adding some specific notes about them in the email makes it a really easy lesson.

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.

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.

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

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.

You can skip ahead, click three lines symbol on the top right and select an exercise.

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.

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

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?

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.

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

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

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.

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)

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

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

i haven't tested it in actual html/css. I'll do that now. I'll get back to you with my results

I also had to hit enter several times on a few of these. It looks like there are some bugs on a few of them.

TIL * from CSS where known.previous == didntKnowShit

I learned a lot today. Thanks for posting this in the thread.

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.

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.

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

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.

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.

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.

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

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

Same problem on level 9, "bento, plate" doesn't work but "plate, bento" does.

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

I just did it with .small:last-of-type, as it executes cleaner and can be scaleable

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.

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

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.

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

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.

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.

plate, bento

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!

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.

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.

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!

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?

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/) 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.

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 Small demo if you want to mess around with it.

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.

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

Amazing.

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

https://github.com/flukeout/restaurant

(couldn't find a link anywhere)

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.

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.

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.

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!

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.

Similar thing happened to me with "pickle:last-child, apple:last-child"

The pickle and apple shook, but apparently I was "wrong."

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

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

Ahhhhhhhhhhhhh

Ya, I stopped there, thought it was broken (didn't realize how to get around that issue)

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.

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.

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.

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?

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

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

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.

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.

I just tried this out in JSFiddle. It appears to be the correct behaviour. http://jsfiddle.net/2GzrZ/2/

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

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?

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

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

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

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.

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

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.

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.

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

I thought the solution was

  plate :only-child

That works, along with just

  :only-child

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.

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.

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

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/

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.

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

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

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

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.

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?

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

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!

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!

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

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.

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

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

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!

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

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

plate

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

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

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

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.

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

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

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.

Made me learn a few, thanks for the fearning.

> You did it! You are a CSS God.

Very good, thank you! :)

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

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

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

overall this is great

How do you do level 26?

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.

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

This is really nice!

This is really fun!

Awesome work!!

this is fun. Love educational games.

take a look at the console.

>Fails thus far: 5

cool. thnx for making this

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

Reply on news.ycombinator.com