
Ask HN: Is there a website with advanced CSS puzzles? - throwaway13000
I am looking for question like :<p>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.<p>Something like this: https:&#x2F;&#x2F;www.w3schools.com&#x2F;css&#x2F;exercise.asp?filename=exercise_positioning5
======
otras
Highly recommend Flexbox Froggy
([https://flexboxfroggy.com/](https://flexboxfroggy.com/)) for learning about
Flexbox. There's also Grid Garden for learning CSS Grid
([https://codepip.com/games/grid-garden/](https://codepip.com/games/grid-
garden/)).

------
muzani
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
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!

