I must admit, I have trouble remembering things. Especially when it comes to CSS. The Flexbox Layout for example. The property justify-content of a...
For further actions, you may consider blocking this person and/or reporting abuse
Yop, solved the last level of Flexbox Froggy, very interesting game !
Here is the solution I found if you want to try :
Awesome, congrats! 👏🏻
Can you recheck your solution? I think you have a small mistake -
align-contentneeds to have the valuespace-betweenfor me 😇Oh yup you're right, mistake while copying, sorry for this ^
Might want to prefix your post with
SPOILER:.you can save a line of CSS by doing like this:
flex-flow:column-reverse wrap-reverse;
justify-content:center;
align-content:space-between
you can write
flex-flow: column-reverse wrap-reverse;
How could a list of CSS games be complete without Dave Geddes's creations?
Flexbox Zombies (free) - mastery.games/p/flexbox-zombies
Grid Critters ($179 and worth it) - gridcritters.com/
He also has another free game on Service Workers that's partly available as he's developing it. serviceworkies.com/
$179 or even the reduced price of $99 is way too expensive for a game of this type... It is supposed to be fun and educational, this price wipes out both those qualities at the same time...
Yes, agree with you here. At the time of writing this article, those games were free.
Thank you for these recommendations! Didn't know about Dave Geddes's games until now! I added a bonus section with these games to this post ✔️
Yay! I did one of those! :D
Yes! How awesome that you're on dev.to too! Thank you for building inspiring things 💪🏻!
If you liked the Tic-Tac-Toe, there some more CSS games here.
Very interesting! I start practicing CSS for my gaming sites. Now I am doing it for Play Ojo games at my site online. Actually, I am surprised how many new options it can open.
Totally true! CSS is by now much more powerful than it seems. Great work, keep it up!
I love each and every one of these. Having an instinctual understanding of "the grid" is what will ultimately ensure your sanity.
Now if only we can go about gamifying SASS/LESS concepts. I wish there were more functions/mixins in my stylesheets.
Awesome idea! It was the same for me with SASS. Make sure to look at this SASS in 15 minutes tutorial - it shows all core concepts with examples and with a little bit of practice, mixins will quickly become demystified :)
Yes I just solved Flexbox Froggy lvl 24, I ended up using 3 lines and that's how I learned that properties can be grouped in flex-flow. Really fun game can't wait to try thew rest :)
Well done! 👏🏻
(and sorry for the late reply - didn't see any notification of your comment)
This post spawned just when I needed it. Will totally start learning CSS with this.
Thank you!
I'm so glad to hear this! If you're starting with CSS, game 4 (the CSS Diner) would be a good choice, for selectors are one of the most basic things. I hope you enjoy your CSS journey!
Wonderful.Fun way to learn CSS
I'd already played the Flexbox Froggy and Grid Garden, both excellent.
I just played Flexbox Defense and managed to score 100 on every level, albeit on a second attempt on one of them.
Nice work, congrats! 🎉
Two years back i started learning CSS, being a developer is very hectic. Then i start making games and change their features and sell my products to gaming websites. Recently, i sold updated vweion of Pubg Mobile. It was fun 😁😁
Thanks for sharing a beautiful piece of information. All CCS games are great and lots of fun, Feel free to check thexploretech.com/free-sports-stre...
You're welcome.
thanks will check about restore and renew
Hey Andreas! You might want to include CSSBattle in this amazing list - cssbattle.dev
Do check it out!
Awesome ressource! Thanks for this addition 👏🏻
Thanks for adding CSSBAttle! One small thing - the link of the website is wrong :) It should be cssbattle.dev
My fault, should be fixed now! Thanks.
Fun stuff! I kinda lost connection with CSS but looks like you awakened my interest. I'll need it at this BetWinner project soon anyway.
Glad I could bring some interest in CSS back. Good luck with your project!
These css games really remind me of childhood even though it came into being later and practically based on iframe. Currently, android games are much more popular, there are many websites that offer free games such as gamedva.com
CSS Diner Great Resource to test some skills.
That's true - especially for the
[attribute...]selectors! A very good exercise to distinguish between[attribute^="value"],[attribute$="value"]and[attribute*="value"]😅I've played the first 3 games.
The carnival one seems interesting I will give it a try
Awesome! Took me quite some time to finish the Grid Garden 😅
CSS diner is the most useful game for me as I am in-charge of training new batch at our company... I will use it to teach CSS to the new batch now-onwards.
So glad it's useful for you! And thanks for sharing knowledge with newcomers - keep it up!
I first-tried the Roadmap thingy, using the MBPs touchpad might've helped a little with that. 😁
Haha nice one! It surely depends on the input device 🕹️
Check out this this android game: dapks.com/afk-arena-mod-apk/
I would like someone to let me know how this game would be created on kotlin.
Would really appreciate the help!
check out this also Buy Tourmaline
Thanks i will check it after Magic Mushroom Retreat
solved the last level of Flexbox Froggy,
Just in case, in the first paragraph you're talking about justify-items which is ignored when used on a Flexbox container (as per the MDN doc). Maybe you were talking about justify-content?
My fault, you're totally right! Updated it with
justify-content- thanks for pointing out!Flexbox Zombies link is broken/404. Here is working link, and it is still free fwiw > flexboxzombies.com/ > mastery.games/flexboxzombies/.
Good catch, thank you for this hint! I fixed it 🔨👍🏻
If you want all the latest version with free use then don't forget to visit here.
I love your WorkThanks for sharing.
Only the last level was tricky, rest all level were easy-peasy!
Great article I played them and enjoyed started coding too anyway
and dont forget to check Thehimalayantime
Thank you for the great article!
I noticed that the link to Flexbox Zombies is outdated. The new link is as follows:
mastery.games/flexboxzombies/
You're right, thank you for this hint! I fixed it 🔨👍🏻
Flexbox Froggy (flexboxfroggy.com) - level 24:
flex-flow: column-reverse wrap-reverse;
align-items: flex-end;
justify-content: center;
align-content: space-between;
It will even work without
align-items: flex-end;Yay! I solved the last Exercise. It was truly rewarding, helped me understand CSS Flexbox.
If you want best video editor. then install Alight Motion.
thanks for sharing with us..
Beach Bootcamp
don't forget to check techtrickers.com
ok checking this. yoga hotels
Dont forget to check Techtrickers
Unique and informative article on this topic TikTok