These games run in your browser and are a fun way to practice basic website coding skills and techniques.
CSS Diner focuses on CSS selectors. In this game, your job is to select the right food during 32 challenges using CSS selectors to specify which item should be added to your dish.
Passing the first level took me a couple of tries, as I wasn’t expecting to type in a non-html5 element, like plate. I especially love the refresher this game gives you on universal selectors (the *), selecting adjacent sibling items,
This is a golf-themed CSS game.
Practice CSS grid skills in this game’s 28 levels of tending to your carrot garden. Add poison to weeds and water to your carrots while gaining practice with grid-column-start, grid-column-end, grid-column, grid-row, order, grid-template-columns, grid-template-row, grid-template, and grid-area. You’ll even get to use the fr (fractional) unit. Starting at level 26, it starts to get challenging!
Practice your Flexbox positioning in 24 challenges that help frogs find lilypads. The game provides excellent visuals to teach the difference between space-between, space-around, and space-evenly in the CSS justify-content property. You’ll also have the opportunity to explore the align-items (flex-start, flex-end, center, baseline, stretch), flex-direction (row, row-reverse, column, column-reverse), order, align-self, flex-wrap, flex-flow, and align-content properties. The last level is a bit tricky!
Play defense by positioning your towers with CSS to block your enemies.
Play “zombie survival challenges” as you learn and practice flexbox skills.
Your job is to write code that successfully moves people riding in elevators.
For more advanced programmers; an open-source sandbox game, not a browser-based game
Happy Web Designing + Programming!
If you know of other games, please share them in the comments.