Have Fun Developing Your Styles With These CSS Games
One of the best lessons we had at Epicodus was the afternoon they asked us to play with the CSS Diner. It’s a cute little game where you use CSS to fulfill “orders” and put the right kind of food on the right plate(s). It’s fun enough to feel like a waste of time. But that Friday when we were building portfolios it came in handy and helped me make my portfolio a lot more exciting.
The first few levels of the game are pretty easy. It uses the kind of CSS you see everyday. But it doesn’t take too many levels to get into the kind of operators that while I’ve skimmed over documentation for them – I really didn’t see how they could apply to my pages. That’s because when you are learning, you are designing the pages yourself, often based on what you know how to do. The more advanced CSS rules can help you make the photoshop images designers (who don’t know what’s possible and what’s not) give you.
With my portfolio project, I spent the night before looking for images – something that I felt represented me in some way. And after downloading about 50 free images from Unslpash I found one that really inspired me. (You can see it on my projects page.) When I saw that image with the sparkly circle on it I thought wouldn’t it be neat to have the screenshots for my projects slide in/out of that spot?
I managed to figure out how to do it. And CSS Diner was almost certainly the biggest help in getting there.
Recently, I discovered to more games to help learn Flexbox and CSS Grid properties. I’m looking forward to playing and finding out how much I can improve my design skills by getting really comfortable with both Flexbox and CSS Grid.
I’ve been learning Flexbox with Wes Bos tutorials and it’s been so much fun. But the first time I tried to sit down and do flexbox on my own, I couldn’t remember any of the right stuff! Clearly, I need more practice… and what better way to practice than to challenge myself with a game of Frogger?
I mean Flexbox Froggy.
In “Flexbox Froggy” the goal is to get the frogs to line up on top of the correct lily pads (based on color).
When my friend posted a list of links to learn CSS Grid I was scratching my head wondering what this was about… isn’t the grid a Bootstrap thing? (Or at least a framework thing…)
Not for much longer. CSS Grid is baked into the latest browsers and gives you even more fine control over where your content lands on your pages. My first attempts to make sense of the CSS Grid have not left me feeling “in control” as my content lands in random spots instead of where I meant to put it, but with a little help from Grid Garden, I think I will learn to control this new tool in no time.
“Grid Garden” asks you to water and weed your garden in certain parts of the grid.
If you know of any other fun CSS learning pages, please leave a link in the comments below (or send me a quick email if the comments have closed by the time you read this: firstname.lastname@example.org)