DEV Community

Tandap Noel Bansikah
Tandap Noel Bansikah

Posted on

Interactive Learning Tools

Learning how to code in an interactive way is way more fun.

So, I created a list of interactive learning tools for you.

In this list, you can find tools to learn CSS, JavaScript, TypeScript, React, Python, Git, SQL, Regex, and more.

Lets start!

1. Learn to Code RPG

It is a visual novel game developed by FreeCodeCamp. In this game, you will teach yourself to code, make friends in the tech industry, and pursue your dream of becoming a developer.

Link:freecodecamp.itch.io/learn-to-code-rpg

2. CodeCombat

Learn typed code through a programming game. Learn Python, JavaScript, and HTML as you solve puzzles and learn to make your own coding games and websites.

Link:codecombat.com

3. jsdares

Make your own games by learning JavaScript programming.

Link:jsdares.com

4. Coding Games

CodinGame is a challenge-based training platform for programmers where you can play with the hottest programming topics. Solve games, code AI bots, learn from your peers, have fun.

Link:codingame.com/start

5. JavaScript Quiz

Check your knowledge by having fun.

Link:javascriptquiz.com

6. Screeps

A strategy sandbox MMO game with a persistent open world where you play by writing JavaScript to control your units. They live within the game and operate autonomously even while you are offline.

Link:screeps.com

7. CSS Diner

A fun game to help you learn and practice CSS selectors.

Link:flukeout.github.io

8. Mastery Games

Learn Flexbox and CSS Grid once and for all in the most fun way possible.

Link:mastery.games

9. Codepip

Codepip coding games, including Flexbox Froggy, Grid Garden, CSS Surgeon, Code Crunchers, and Nester.

Link:codepip.com/games

10. CSS Battle

Use your CSS skills to replicate targets with the smallest possible code.

Link:cssbattle.dev

11. Interactive Vim tutorial

Learn what Vim is about without hassle.

Link:openvim.com

12. Coding Fantasy

Collection of coding games to learn HTML, CSS and JavaScript.

Link:codingfantasy.com/games

13. Knights of the Flexbox Table

Learn and remember Flexbox with Tailwind CSS to overcome your cheatsheet.

Link:knightsoftheflexboxtable.com

14. CSS Ruler

Explore CSS lengths.

Link:katydecorah.com/css-ruler

15. TypeScript Exercises

A set of interactive TypeScript exercises.

Link:typescript-exercises.github.io

16. Design Patterns Game

A game to test your familiarity with the design patterns implemented in JavaScript.

Link:designpatternsgame.com

17. React tutorial

React Tutorial is an easy, interactive way to learn & practice modern React online. Understand how React works not just how to build with React.

Link:react-tutorial.app

18. Promisees

Promise visualization playground for the adventurous.

Link:bevacqua.github.io/promisees

19. Git Branching

An interactive Git visualization tool to educate and challenge.

Link:learngitbranching.js.org

20. Select Star SQL

An interactive SQL book.

Link:selectstarsql.com

21. Regex 101

Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java. Features a regex quiz & library.

Link:regex101.com

22. Regex Crossword

A crossword puzzle game using regular expressions. Earn achievements completing puzzle challenges. Easy tutorials for people new to regular expressions.

Link:regexcrossword.com

23. RegexOne

RegexOne provides a set of interactive lessons and exercises to help you learn regular expressions.

Link:regexone.com

24. JSRobot

Learn JavaScript by playing a platform game: Control a robot to collect coins, avoid obstacles and reach the flag at the end of the level.

Link: lab.reaal.me/jsrobot

25. Crunchzilla

Crunchzilla offers interactive tutorials that get people excited about programming. Play with code, build and learn.

Link:crunchzilla.com

You can bookmark this as a post here: markodenic.com/interactive-learning-tools.

If you have any questions, you can ask me here: twitter.com/denicmarko.

You can find more free resources here: web-dev-resources.com

Happy Coding!

Top comments (0)