April 17

Have Fun Developing Your Styles With These CSS Games

CSS Diner

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.

css diner screenshot
Oops… even though I’ve done this before the ~ is not one of the CSS rules I remember! Maybe playing the game once is not enough…

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.

Flexbox Frog

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).

flexbox froggy screenshot
One of the great things about Flexbox is how easy it is to center things! But that’s not the only great feature. Have some fun and discover more cool layout tricks.

Grid Garden

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.

grid garden screenshot
Ah, ha! The shortcut notation is number of columns followed by the END of the section… that’s why my grid wasn’t working out the other day.

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: karenfreemansmith@gmail.com)


Tags: ,
Copyright 2017. All rights reserved.

Posted April 17, 2017 by Karen Freeman-Smith in category "CSS