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.<p>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.
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'.<p>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.<p>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.<p>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<p><pre><code> $("bento:nth-last-child(2)").length
</code></pre>
is coming up 0 in the console as well.<p>edit: these work though :/<p><pre><code> bento:nth-last-child(even)
bento:nth-last-child(1n+2)
bento:nth-last-child(2n+0)
</code></pre>
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.<p>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?<p>edit 4: OK, I finally get it... <i>nth-last-child()</i> 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 <i>bento:nth-last-child(2)</i> 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."
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.<p>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.
Cool, but it's definitely got some issues. For example, this failed:<p><pre><code> orange:last-of-type, apple:last-of-type
</code></pre>
while this worked:<p><pre><code> apple:last-of-type, orange:last-of-type</code></pre>
Couple things:<p>1. Would be nice to have some sort of 'hint' or 'solve' button.<p>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.<p>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.
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.
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.<p>Anyone have any examples of how they have or would use these in real-life?
Amazing.<p>Here's the GitHub repo in case anyone wants it:<p><a href="https://github.com/flukeout/restaurant" rel="nofollow">https://github.com/flukeout/restaurant</a><p>(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.
Super idea and execution! I think it needs a few more iterations in a teaching environment to actually make it <i>effective</i> though.
I tried running this by someone with absolutely zero css or html experience.<p>- The instruction (e.g. 'Select the small apples') isn't noticeable enough.<p>- There needs to be a pause after you get an answer right, so you can work out <i>why</i> you got it right (otherwise you can bang away at random combinations until you get to the next step without any idea what worked).<p>- Similarly, when you try a wrong answer, there needs to be feedback as to <i>why</i>. 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 <i>didn't</i> do. This is not trivial to achieve!<p>- 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.<p>- Because of the right hand instructions, it's not initially clear that the HTML code is at all part of 'the puzzle'.<p>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!<p>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."<p>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.<p>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.<p>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.<p>Great job on this!
What an incredibly pleasant treat. Fun with smart progression. This certainly brought a smile to my face.<p>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.<p>A resource worth sharing.
Really nice job - I like the vibrating items to give you feedback on what your attempt selected.<p>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?
Level 13:<p>Select every pickle to the right of the bento<p>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.
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<p>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).<p>Does anybody know other games like this in HTML, Javascript and Rails?
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.<p>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).<p>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.<p>For # 16, I tried the following which did not work:<p><pre><code> pickle:only-child, apple:only-child
</code></pre>
However, this worked:<p><pre><code> apple:only-child, pickle:only-child</code></pre>
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.<p>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.
This was fun. It reminds me a lot of Regex Crossword[1]. Good game for people who need to brush up on that.<p>[1] <a href="http://regexcrossword.com/" rel="nofollow">http://regexcrossword.com/</a>
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.
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?
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!
I have found two bugs;<p>Level 17 of 26: Select the small apple and the pickle<p>Does not accept .table > :last-child, apple.small<p>does accept<p>apple.small, pickle<p>Level 19 of 26: Select the 1st bento:<p>Does not accept .table > :nth-last-child(4)<p>does accept: bento:first
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.