How It Started
As my work often spills over into time at home, my young son has started showing a lot of curiosity about programming. This sparked a quest to introduce him to coding in a fun, engaging way. We’ve explored a variety of resources—books, apps, YouTube channels, and subscription kits. Each has its perks, but we’ve found that interactive learning really stands out for retention. Getting hands-on experience seems to make all the difference! The more we explored, the more I ended up using these resources for fun and to sharpen my skills in a different way.
I’ve compiled a list of websites and games that offer a simple, engaging introduction to coding and development. The best part? They’re super easy to use and are great for building skills at any age, whether you’re just starting or looking to sharpen your expertise as a Software Developer.
CSS Focused
CSS Diner | Link
Cost: Free
A great introduction to CSS selectors using an interactive diner-style game. This free site is open source and offers 32 challenge levels all in the browser. If you're stuck on any level, there's even a useful 'Help' button that explains the problem and provides insight into the solution.
Flexbox Froggy & Grid Garden | Flex Link | Grid Link
Cost: Free
These are the best visual representations of how both CSS Flexbox and CSS Grid work. They both offer a fun and easy-to-understand way to learn these CSS methods. Flexbox has you helping a frog hop along a pond. Grid Garden has you helping a garden flourish on a grid. Flexbox Froggy has 24 challenge levels and Grid Garden has 28 challenge levels, both are free sites.
CSS Battle | Link
Cost: Free, Pro Upgrade option with monthly subscription
There are so many amazing things that can be done with CSS on its own. This site puts your CSS knowledge to the test with a visual prompt and a side-by-side comparison as you work on your solution. There over 100 challenge levels to work through, all for free. There is a Pro version that gives you some quality-of-life additions if you want to expand on the free version.
Programming Fundamentals
CodinGame | Link
Cost: Free
If you're looking for an old school flash game approach then this is it. CodinGame gives you challenges based on game scenarios like traversing mountain tops, space shooters, zombies, and so many more options. You can pick a game scenario that tests a certain topic like loops or conditions and work through that game scenario. If you're up for it, there is also an element of competition for those who want to try their hand at it. Frequently hosts competitions with prizes and signing up is free!
Code Monkey | Link
Cost: Free Trial, offers monthly subscription
This site is really aimed at feedback-based learning. Has a dashboard for either parents or teachers to see their kids or student's progress. When we tried this one, I did enjoy the reports generated based on my son's progress through the lesson plans. This allowed me to provide feedback on areas where he struggled. This site does have a monthly subscription but they do offer a generous trial period to see if it's for you.
WarriorJS | Link
Cost: Free
Looking for a text-based adventure to learn and improve your JavaScript skills? WarriorJS fits that bill to a T. Reminiscent of old-school text adventures, this free open-source site has you controlling a hero through multiple levels using JavaScript to interact.
Lightbot | Link
Cost: Free version, offers a full paid version as well
Okay, kind of cheating here because this is an app and not a website but this fun simple app explains fundamental topics in an easy-to-understand way. Aimed at newbies, Lightbot offers a perfect way to learn code on the go. According to their site, "LightBot was designed with first-time coders. It's been played by over 20 million kids and has been used by tens of thousands of teachers worldwide.". They offer a free version and a paid full version so something for everyone.
Brilliant | Link
Cost: Free trial, offers monthly and annual plans
A different approach to learning with Brilliant's platform of bite-sized lessons. They offer simple reward-based lessons that revolve around fundamentals at its core. Whether it's algorithms, math, or computer science basics, Brilliant has managed a way to make breaking into these topics a lot more approachable. It's offered online and via an app.
Games
Human Resource Machine | Link
Cost: $14.99 not accounting for sales
Program little office workers to solve puzzles. From the creators of World of Goo and Little Inferno. Easy way to pass hours working your way through employees while also sharpening your logic skills. Can be found on Steam and GOG.
Code Romantic | Link
Cost: $9.99 not accounting for sales
If you want a story to go alongside your programming learning journey, then this game might just be the one.
This game is a computer science puzzle visual novel wrapped in a science fiction love story. Definitely worth a try if you like visual novels. Can be found on Steam and GOG.
7 Billion Humans | Link
Cost: $14.99 not accounting for sales
The follow-up to the award-winning Human Resource Machine, automate swarms of office workers to solve puzzles inside your very own parallel computer made of people. If you liked their previous game, this is more of it but with many more challenges. Can be found on Steam, GOG, Humble Store, Nintendo Switch, and iOS/Android.
While True: learn() | Link
Cost: $12.99 not accounting for sales
Including this title as an honorable mention as it does not directly deal with programming but does touch on basic machine learning concepts. You solve puzzles to build a cat-to-human translator in this quirky game. Can be found on all PC game marketplaces and consoles.
Whatever method you decide to use as a medium to learn, it's important to have it be engaging, fun, and informative.
Happy Coding!
Top comments (1)
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍