How It Started
While working from home it has become inevitable that my meetings and work spill over to when my son is home from school. Seeing the code I write and the end result has sparked his curiosity for a while now.
In my ever pursuing quest to expose my 11 year old to programming languages in a fun way, I have come across a lot of different resources. From books and apps to YouTube channels and subscription kits, we've tried them all. While they all have their own merits, we found that having an interactive way to learn and experiment worked best for retention.
I have listed 7 sites for you to check out if you're looking for a good and simple introduction into development. The best part was that these sites were easy to use and can be used to sharpen the skills of any Software Developer regardless of age.
CSS Focused
CSS Diner | Link
Cost: Free
A great introduction into 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 on 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 $3.00/mo
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 then $6.99/mo
This site is really aimed at feedback based learning. Has a dashboard for either parents or teachers to see their kids or students 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, full paid version $2.99
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 for newbies, Lightbot offers a perfect way to learn code on the go. From 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.
Whatever method you decide to use as a medium to learn, it's important to have it be engaging, fun, and informative.
Happy Coding!
Disclaimer: I am not affiliated with any of these sites, just thought I'd share 🙂
Top comments (1)
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍