Interactive Learning Tools
Tags: webdev, javascript, beginners, react
Published: 2023-05-31 23:23:22

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](https://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](https://codecombat.com/)

### **3\. jsdares**

Make your own games by learning JavaScript programming.

Link:[jsdares.com](https://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](https://www.codingame.com/start)

### **5\. JavaScript Quiz**

Check your knowledge by having fun.

Link:[javascriptquiz.com](https://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](https://screeps.com/)

### **7\. CSS Diner**

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

Link:[flukeout.github.io](https://flukeout.github.io/)

### **8\. Mastery Games**

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

Link:[mastery.games](https://mastery.games/)

### **9\. Codepip**

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

Link:[codepip.com/games](https://codepip.com/games/)

### **10\. CSS Battle**

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

Link:[cssbattle.dev](https://cssbattle.dev/)

### **11\. Interactive Vim tutorial**

Learn what Vim is about without hassle.

Link:[openvim.com](https://openvim.com/)

### **12\. Coding Fantasy**

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

Link:[codingfantasy.com/games](https://codingfantasy.com/games)

### **13\. Knights of the Flexbox Table**

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

Link:[knightsoftheflexboxtable.com](https://knightsoftheflexboxtable.com/)

### **14\. CSS Ruler**

Explore CSS lengths.

Link:[katydecorah.com/css-ruler](https://katydecorah.com/css-ruler/)

### **15\. TypeScript Exercises**

A set of interactive TypeScript exercises.

Link:[typescript-exercises.github.io](https://typescript-exercises.github.io/)

### **16\. Design Patterns Game**

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

Link:[designpatternsgame.com](https://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](https://react-tutorial.app/)

### **18\. Promisees**

Promise visualization playground for the adventurous.

Link:[bevacqua.github.io/promisees](https://bevacqua.github.io/promisees/)

### **19\. Git Branching**

An interactive Git visualization tool to educate and challenge.

Link:[learngitbranching.js.org](https://learngitbranching.js.org/)

### **20\. Select Star SQL**

An interactive SQL book.

Link:[selectstarsql.com](https://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](https://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](https://regexcrossword.com/)

### **23\. RegexOne**

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

Link:[regexone.com](https://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](https://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](https://crunchzilla.com/)

  

You can bookmark this as a post here: [markodenic.com/interactive-learning-tools](https://markodenic.com/interactive-learning-tools/).

If you have any questions, you can ask me here: [twitter.com/denicmarko](https://twitter.com/denicmarko).

You can find more free resources here: [web-dev-resources.com](https://web-dev-resources.com/)

  

Happy Coding!