CSS Diner

#1

Post by dtournemille » Mon, Mar 24, 2014, 9:41 PM UTC

CSS Diner
flukeout.github.io

Re: CSS Diner

#2

Post by smokinjoe » Mon, Mar 24, 2014, 11:07 PM UTC

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.

Re: CSS Diner

#3

Post by baddox » Mon, Mar 24, 2014, 11:32 PM UTC

smokinjoe wrote: post #2

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…

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

Re: CSS Diner

#4

Post by dbecks » Mon, Mar 24, 2014, 11:32 PM UTC

This is really fun!

Re: CSS Diner

#5

Post by joeframbach » Mon, Mar 24, 2014, 11:38 PM UTC

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.

Re: CSS Diner

#6

Post by smokinjoe » Mon, Mar 24, 2014, 11:40 PM UTC

baddox wrote: post #3

smokinjoe wrote: post #2

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…

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

Re: CSS Diner

#7

Post by mpnordland » Mon, Mar 24, 2014, 11:41 PM UTC

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

Re: CSS Diner

#8

Post by TazeTSchnitzel » Mon, Mar 24, 2014, 11:58 PM UTC

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.

Re: CSS Diner

#9

Post by jonny_eh » Mon, Mar 24, 2014, 11:58 PM UTC

TazeTSchnitzel wrote: post #8

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.

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

Re: CSS Diner

#10

Post by colinramsay » Tue, Mar 25, 2014, 12:01 AM UTC

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.