The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
I built Auto Layout Purrty, a playful game where you learn Auto Layout through levels full of cakes 🎂 and kitties 🐾.
Each level challenges you to play with properties like Alignment, Gap, Flow, and Padding — but in a fun, interactive way.
🖥️ Best played on desktop for the full experience! Play here 🔗
I hope you enjoy playing it as much as I enjoyed creating it. 💜
So… how far can you and your kitties go? 🐾
@Eva Martín Charro So well done
@Fatik Owais Thank you so much Fatik! 🙌
@Eva Martín Charro this is so cool! 🍰🐱
@Mario Cadenas @Eva Martín Charro Very cool!
@FlutterflowDevs @Mario Cadenas Thank you both!😊
@Mario Cadenas Thanks! Happy to know you make it to the last level (🍰) 🎉
@Eva Martín Charro Looks so cool
@Gobinath Ravichandran Thanks a lot Gobinath! It was super fun to make 😻
@Eva Martín Charro thats a brilliant concept. learn auto layout from playing
@Jinson Johny Thank you so much, Jinson — it means a lot to me! Auto Layout isn't always the easiest thing to learn, so I thought, 'Why not make it fun?' 👾
@Eva Martín Charro that's sooo cool
@Manon Lamouche Thank you Manon! 😊
@Eva Martín Charro Love it !!
@Sharan bakki Thanks so much Sharan! It means a lot 😊
@Eva Martín Charro Something useful. Great work
@Kshitiz Chandra Thank you Kshitiz! Glad you found it useful 😊
@Eva Martín Charro Games like this helped me a lot with CSS. Great app!
@Jake Sorrentino Thank you Jake!! Love that you’ve learned with similar games — that’s exactly the idea behind this one ☺️
@Eva Martín Charro this was such an interesting way to learn auto layout! 😍
@Angad Singh Thanks a lot Angad! 💜
@Eva Martín Charro 🍰 so cool!
@Cameron Motameni Thanks, Cameron! So happy to know you made it to the last level 🙌
@Eva Martín Charro super fun! very immersive. love this teaching style. reminded me of Grid Critters and Flexbox Zombies.
thank you for making it! 🍰❤️
gridcritters.com
Grid Critters
Learn CSS Grid once and for all in the most fun way possible
@Mares Zhar Thank you so much Mares!! 😊 I didn’t know about Grid Critters, it looks super cool — I’ll definitely check it out! For this one I was actually inspired by Flexbox Froggy 🐸✨
@Eva Martín Charro oh, i also learned flexbox with that game! super cute 🐸.
LightBot and Flappy Bird from Hour of Code also guided my first steps into programming. if you're into interactive learning experiences, Explorable Explanations is an excellent collection (my personal favorites are
lightbot.com
LightBot
Coding made Kid-Friendly
@Mares Zhar Wow, thank you so much for sharing all these references! I’m really into creating playful and interactive learning experiences, so this is super helpful 🙌 Thanks Mares!
@Eva Martín Charro This is awesome! Would love to see more of this kind of stuff, so easy to learn things this way. Super creative and innovative
@Amin - Sr. Product Designer Thanks a lot Amin! It means a lot 😊 I'll be adding new levels soon with more properties - so stay tunned!🚀
@Eva Martín Charro THIS IS SOOOOOOOOOOO GOOD!
@Musais Thanks so much Musais! I’m so glad you like it🤩
@Eva Martín Charro where was this when I was learning auto-layout?! So creative 🙌
@Anushka Sundaresh jaja thank you so much Anushka! I really appreciated ☺️
@Eva Martín Charro Looks stunning! And a very cool idea.
@Johannes Specht Thank you so much Johannes! Really appreciate it 💚
@Eva Martín Charro such a cool idea!
@Lisa Demchenko Thank you so much Lisa!☺️
@Eva Martín Charro Adorable Idea!
@nura lee Thank you so much Nura!
@Eva Martín Charro I think this is just pawfect!
@Chhavi Malik haha thank you so much Chhavi!
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
maxearnings
The next frontier of payments is live on Contra. How are you maximizing revenue?
micrographics
Micrographics started as utility - barcodes, packaging, instruction labels. How would you use them?
aidesignflow
AI tools are redefining how designer work. What does your workflow look like?
aivideo
AI video tools are moving at warp speed. What tools are you using?
whennotai
As AI accelerates, creative judgment matters more. What part of your work stays human?