Would you believe that fun and frontend development can coexist? If you already love writing code that should not be a surprise. But many new developers struggle to understand basic HTML/CSS concepts, and this struggle can be frustrating or just downright annoying.
But I’ve collected a handful of fun games to help you learn more about the CSS style language. All of these games can be played for free in your browser and they’re perfect for improving your frontend CSS knowledge.
Modern CSS selectors have become much more advanced with pseudo-classes and attribute selectors. How should you even get started practicing this stuff?
The CSS Diner webapp is really fun and genuinely educational for developers of all skill levels. It asks you to write selector codes that pick specific elements on a diner table. You’re given the HTML structure and you need to write the best selector for the job.
You’ll go through 26 different levels of increasing difficulty. The first few levels teach core fundamentals like element selectors and class selectors. In the later levels you’re working with advanced concepts like :only-of-type and :not(x).
If you think you’re a CSS master then prove it to yourself by beating the CSS Diner game. A fair warning: it’s tougher than it looks.
Flexbox Froggy is one of the most unique ways to learn flexbox(another one is listed below).
In this game you have to write CSS code to help a vector frog and his froggy friends move around a pond. You’re given very specific instructions and clues as to which CSS properties you’ll need to solve the puzzle. Almost everything can be controlled directly through flexbox. Your only job is to understand why and how.
This game is 100% free and playable in any web browser. It was developed by Thomas Park and it’s free to download from GitHub if you want access to the source code.
I’m sure every web developer has at least heard of the CSS flexbox property by now. It’s a mechanism for rearranging the space of a container to fit content based on certain proportions.
Not all devs have picked up the reigns of flexbox to learn this new feature because it wasn’t always supported by modern browsers. Channing Allen’s Flexbox Defense is here to change that and give you a much deeper understanding of the flexbox model.
The rules can be a little confusing, but they’re specifically meant to make you understand flexbox. There are 12 levels and each one adds further info about flexbox. If you can get through all 12 levels you’ll be a much wiser CSS developer… and maybe hold a mild annoyance for defense games.
Enjoy CSS is a web-based visual design tool for learning on-page CSS code. The drag-and-drop interface makes it easy to add page elements and apply styles to them like rounded corners, gradients, text shadows and transitions.
Try playing around in this demo and see what you can build. The options are only limited by the possibilities of CSS. You can save these visual mockups and share them to present ideas or teach specific CSS concepts to others.
Plus all the code is completely free and accessible for you to copy & paste into your own web projects. Also check out the gallery list for pre-built elements with custom CSS styles.
Unfold isn’t exactly a game, but it’s a very interactive tour of the CSS box model. Concepts are displayed visually to teach you more about CSS3 transforms, boxes, page elements, and how they all work together to manipulate content on the page.
This fun little webapp was created by Chris Ruppel and it’s hosted as a GitHub page for anyone that wants to toy around.
The source code for the entire project is also freely accessible on the GitHub repo. You can download a copy and host it yourself, or use it locally in case you’re ever stranded without Internet.
If you’re not familiar with Sass or any CSS preprocessor then you’re missing out. This is the best way to write and maintain your CSS code, and Sass is a recent preferred language of choice.
With the SassMeister webapp you can practice writing Sass code in your browser. The traditional method is to write code locally, then compile your .SCSS files into .CSS files.
However with this cool webapp you can write Sass code in the browser and see how it compiles in real time. It’s not a full IDE like CodePen, but it is an online playground for testing code snippets and for playing with Sass without the need to install it locally.
Bennet Freely’s Flexplorer webapp is a really fun way to learn about flexbox without a tower defense-style game. You can play with an active demo of a container using the flex properties limiting number of items in a row, and percentage of width for each item.
Unfortunately I can’t find a way to actually see the code for the example other than the browser’s “view source” feature. Having the source built into the page would be really cool so you could copy/paste the code into your own projects.
But this visual explorer webapp is still a fun and interactive way to conceptually understand flexbox. It’ll take practice but in time you’ll be applying flexbox like there’s no tomorrow.
This last item actually isn’t based in the browser, but instead runs on your iPhone(soon for Android).
Lrn app is completely free and teaches you how to code with accessible bite-sized lessons. It features mini-quizzes and technical challenges that mimic the real world. You’ll become fluent in code very quickly and be able to apply your knowledge conceptually.
Languages include HTML, CSS, JavaScript, Ruby and Python. This means you can learn all the major frontend languages and even some backend langs if you have the time.
Also Lrn isn’t the only app of its kind. There are other apps of a similar caliber, however Lrn truly stands on its own in regards to quality of learning.
Remember that all of these games and tools are completely free which is a great price tag for new developers. CSS is full of concepts like the box model and these won’t make sense until it all finally clicks. The best way to understand this stuff is to practice your tushie off. I’m confident these games will help.
I also left out a couple that I don’t think exactly fit into the mold. But these are all really cool games/webapps and they can teach a lot about CSS as well.
Jaime is a jr. designer interested in mobile UI/UX research and frontend web development with JavaScript frameworks. He covers general news and useful resources in the web design space.
