vincenius/css-speedrun

A small fun app to test your CSS knowledge

css-speedrun's Issues

Answer

Answer list:

Intro: ul :first-child

• Level 1: div :not(.foo)
• Level 2: ul :nth-child(2n+3)
• Level 3: div > *
• Level 4: div span[data-item]
• Level 5: p ~ span
• Level 6: form :enabled
• Level 7: #one,#two,#five,#six,#nine
• Level 8: a + span
• Level 9: #foo > .foo
• Level 10: div div span ~ code:not(.foo)

More useful hints?

I wonder if a more useful hint that had some time penalty, like "think of :nth-of-type" would help? Or maybe explaining slightly what the pattern is without saying the actual solution

bug with level time

as seen on twitter there is some bug on the level time:

Barely visible "error line"

For me, it's that barely visible that I did not notice it for the first minutes. And even after I knew it, I could not recognize it immediately 😅

I didn't know if it is intended, but I think a richer red would be great.

Show ideal solutions

Many of the puzzles can be "solved" quicker in a hacky way than in an ideal way. To actually teach something, after the game is done, it would be great to show intended (ideal) solutions.

From HN (not me):

The intended solution is just :enabled. This is where I think this project has failed badly in its stated goal to “improve your CSS knowledge”, because all it offers in that direction is a little hint link; to actually teach, it needs a set of proposed solutions, and at the end show you any where you differed.
Such a thing might also help suggesting just [data-item] instead of the needlessly-more-specific span[data-item]. And also whether :nth-child(2n+3) was the intended solution on one of them.