Pantheon Community

Tip Tuesday: Browser Games to Learn New Skills!

Hey there!

I’m Kaylan, jumping into the forum today for our tip this Tuesday! It was hard to decide on what fun things to share this week, but I decided to go with something a little different: fun, browser-based ways to learn new skills!

Learn Git Branching
https://learngitbranching.js.org/?locale=en_US
This is a great primer for people who are new to git workflows, or for when you just need to knock some dust off the ol’ skills. This tool covers the basics of working locally, working with remote repos and gets into some advanced git maneuvers.

VIM Adventures
https://vim-adventures.com/
How many times have you accidentally found yourself in VIM, and unable to quit? For me, personally, it used to be more often than I want to admit. Then I found VIM Adventures! This completely browser-based game has a free version that lets you get some basics under your belt, with a paid version that lets you go even further.

CSS Diner
http://flukeout.github.io/
CSS Diner is a great game that uses CSS to select, place and move objects around the screen. If you’ve never worked with CSS before, this can be a great way to learn the basics - or if you’re new, it’s a fun way to practice and help cement your understanding. It can also be a fun way for experienced front end developers to show off their skills.

Flexbox Froggy
http://flexboxfroggy.com/
An increasingly difficult game where the goal is to help the frogs get to their lily pads, using flexbox properties in CSS. It starts off simple enough, but they add more colors, more frogs and more complexity as you go along - really forcing you to use all the attributes available with flexbox.

Flexbox Defense
http://www.flexboxdefense.com/
If you like tower defense-style games, and you like learning CSS… this game is for you. Fend off waves of attacks by placing towers in the right locations to stop the mobs from getting through.

Lastly, for anyone with a graphics bend… or who wants to try something new!

The Bezier Game
https://bezier.method.ac/
This is a fun little challenge that helps teach you how to use the Pen Tool when making or editing vector graphics. The stages, as you may guess, get more and more complex and challenging to complete.

If you have any other resources like this, please feel free to share them with the community in the comments below. I love having a stash of these on hand to share with people who are new to development, or who’s primary role isn’t necessarily technical - but they want to understand our world a little better.

6 Likes

Ahhh my weakness, gamification! :video_game:

Of these I’d only heard of Flexbox Froggy :frog: , which is awesome. I didn’t realize there was a whole genre out there. So cool!!! :sunglasses: Thanks for sharing, time for me to go expand my skills :muscle:

2 Likes

SO FUN! :heart_eyes:

Thank you @Kaylan!

2 Likes

@Kaylan I am OBSESSSED with your #TipTuesday :raised_hands:

So many fun games–and honestly I have never heard of any of them until now! For someone like myself, I am definitely a hands-on learner so being able to learn through play is a must for this gal!

I am going to give some of these a whirl & share my experience with you :slight_smile: Thanks so much for sharing these with everyone!

2 Likes

Talking about computer games mostly just makes me think of Myst or Monkey Island and now I want to play those.

4 Likes