CodinGame

CodinGame is a site that helps you work on problem solving skills and learn programming basics through a turn-based game.

This platform supports over 25 different programming languages and gives players the opportunity to practice, learn, and compete in coding contests.

Once you create an account, you can get started with the beginner level onboarding section. You will be introduced to standard programming concepts and solve mini challenges.

CSS Diner

In CSS Diner, you can practice the basics of CSS through a series of 32 challenges. This is a good way to get more familiar with the language and have fun learning it.

The first few challenges are short and focus on working with classes and ids. But as you progress through the levels, you will be introduced to Pseudo-selectors, First of Type Selector, Last of Type Selector, and the Universal Selector.

Flexbox Froggy

In Flexbox Froggy, you will learn CSS Flexbox by placing the frogs on the correct lillypads. By the time you finish level 24, you should feel comfortable using Flexbox in your next project.

Each challenge provides a description on the Flexbox properties. The first few challenges start off easy but as you progress in the game things get more complicated.

Flexbox Defense

Flexbox Defense is a tower defense game that helps you strengthen your CSS skills. Position the towers to keep out your enemies using CSS Flexbox.

The challenges will provide you with definitions of the Flexbox properties. Once you write your code, press the Start Wave button and see if you were successful in stopping your enemies.

Grid Garden

Learn CSS Grid by going through 28 levels of Grid Garden. Some familiarity with CSS Grid is encouraged but not required for getting started with the game.  

Each challenge provides a description on the CSS Grid properties. The first few challenges start off easy but as you progress in the game things get more complicated.

CodeCombat

CodeCombat works well for both kids and adult learners. You can create a free account and learn the fundamentals of programming like loops, functions, conditionals, and variables.

You can choose which programming language to start with and work your way through the games.

You also have the option to upgrade to the premium account if you are interested in having access to more levels.

Scratch

MIT's Scratch is a block based programming language where you can learn about events, conditionals, variables, and more by building your own games and animations.

Choose from dozens of sprites, sounds and backgrounds to code your own creations and start understanding programming basics.

Scratch is also used during the first week of Harvard's CS50: Introduction to Computer Science course.

Tynker

Tynker is a site where you can build projects and play games using HTML, CSS, JavaScript, Python, and Java. They have an extensive list of projects, algorithms and data structure challenges.

You can build these projects in the online editor and share your creations within the community. This site is aimed at kids between the ages of 5-18.

SQL Murder Mystery

SQL Murder Mystery is great for both beginners and experienced SQL developers. Strengthen your SQL and problem solving skills by trying to track down the killer in this murder mystery.

The game uses SQLite and you will first have to get acquainted with the database structure before starting the game.

If you are new to SQL, there is a detailed walk through for beginners. Otherwise, if you are an experienced SQL user then you can dive straight into the game.

Untrusted

Untrusted is an adventure game where you can test your JavaScript and problem solving skills. Help guide Dr. Eval through a series of levels by solving JavaScript challenges.

If you are brand new to JavaScript then this game might be a little advanced for you. But if you have spent some time programming in JavaScript then the challenges will be doable.

Elevator Saga

Elevator Saga is a JavaScript game where you will go through a series of challenges trying to transport people in elevators in the most efficient way possible within the time given.

Once you modify the code, you can test the efficiency of your solution by clicking the start button in the top right hand corner. When the program is running, you can check the stats to see if you passed the challenge or not.

CheckiO

CheckiO is a strategy game where you can learn TypeScript or Python through a series of challenges. Once you create a free account, you will start off with the beginner challenges and work your way through to the advanced ones.

The game will give you access to hints and other players' solutions if you need help. You will solve each of the challenges in the online editor and move onto the next mission when the task is solved.

Source;

www.freecodecamp.org/news/12-free-coding-games-to-learn-programming-for-beginners/amp/