Ask HN: Is there a website with advanced CSS puzzles?

5 points by throwaway13000 6 years ago | 3 comments

I am looking for question like :

1) How would you transform this div from middle of page to end of page etc 2) Why is this div only 20px height even though the image inside is 100px height 3) Given this moderately complex CSS, how will you add a extra text div of dimensions 20px * 30px and how will you style it with minnimum classes.

Something like this: https://www.w3schools.com/css/exercise.asp?filename=exercise_positioning5

otras 6 years ago |

Highly recommend Flexbox Froggy (https://flexboxfroggy.com/) for learning about Flexbox. There's also Grid Garden for learning CSS Grid (https://codepip.com/games/grid-garden/).

muzani 6 years ago |

I'm not sure if this is what you're looking for, but if you want advanced, you can go to Codepen and recreate some of the things there, then look at the code for answers.

throwaway13000 6 years ago | |

This is an oft repeated suggestion. But the problem is that, there is very little step by step commentary on these codepens. Its mostly only the final step that is presented. I tried recreating some and then got stuck with finer points of positions, margin-auto etc. Thats when I realised I need to solve some advanced CSS puzzles. Thanks anyways!