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.
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.
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.
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!
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.
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
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.
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 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.
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.
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.
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.
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.
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.
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.
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?
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.
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?
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.
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.
120 comments
[ 5.6 ms ] story [ 122 ms ] thread1. 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.
Did you see the CSS documentation on the right sidebar? It took me a while to notice it was there.
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.
Apparently "plate pickle, bento pickle" (or reverse order) isn't correct. Would love to see a hint/solution manual.
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.
The pickle and apple shook, but apparently I was "wrong."
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 looks great for teaching beginners CSS, although there should be an "instructions" message somewhere.
[1] http://regexcrossword.com/
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 can see this being used as a teaching tool.
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.
>Fails thus far: 5
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.
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.
It would be interesting if the answers were tracked so we could eventually see what different developers were entering as selectors on each one.
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 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.
For # 16, I tried the following which did not work:
However, this worked: