๐ 10 Free Sites to Learn Web Development by Playing Games ๐งต๐
1. Code Combat โ๏ธ
This game is EPIC! ๐คฏ
There is a free and paid version. The free version offers you a ton - go nuts! ๐ฅ
Learn programming core concepts by battling through hundreds of levels in the language of your choice ๐๐
๐ codecombat.com
This game is EPIC! ๐คฏ
There is a free and paid version. The free version offers you a ton - go nuts! ๐ฅ
Learn programming core concepts by battling through hundreds of levels in the language of your choice ๐๐
๐ codecombat.com
2. Codin Game ๐ฎ
This browser-based game helps you work on problem-solving skills and learn programming basics through a turn-based game โ
Over 25 languages are supported, and the graphics are top-shelf ๐ฅ๐
๐ codingame.com
This browser-based game helps you work on problem-solving skills and learn programming basics through a turn-based game โ
Over 25 languages are supported, and the graphics are top-shelf ๐ฅ๐
๐ codingame.com
3. Flexbox Defense ๐พ
Who doesnโt love some Tower Defense?! ๐๐
Position the towers to keep out your enemies using CSS Flexbox ๐ก
๐ flexboxdefense.com
Who doesnโt love some Tower Defense?! ๐๐
Position the towers to keep out your enemies using CSS Flexbox ๐ก
๐ flexboxdefense.com
4. Flexbox Froggy ๐ธ
This game is personally how I learned CSS Flexbox several years ago, so it holds a special spot for me ๐
โ Get the frogs on the lilypads ๐ธ
โ By the time you finish lvl 24, you will be quite experienced with CSS flexbox ๐โจ
๐ flexboxfroggy.com
This game is personally how I learned CSS Flexbox several years ago, so it holds a special spot for me ๐
โ Get the frogs on the lilypads ๐ธ
โ By the time you finish lvl 24, you will be quite experienced with CSS flexbox ๐โจ
๐ flexboxfroggy.com
5. Grid Garden ๐ฑ
Water only the areas that have carrots ๐ฅ๐ฅ
Do that for 28 levels and you will now be quite proficient with CSS Grid ๐
Great game! Very easy way to get good with Grid quickly.
๐ cssgridgarden.com
Water only the areas that have carrots ๐ฅ๐ฅ
Do that for 28 levels and you will now be quite proficient with CSS Grid ๐
Great game! Very easy way to get good with Grid quickly.
๐ cssgridgarden.com
6. JS Robot ๐ค
Control a robot to collect coins, avoid obstacles and reach the flag at the end of the level ๐ฉ
This game is actually quite fun. Feels like Mario a bit ๐
Except youโre learning JavaScript, instead of sinking the day away ๐คฉ
๐ lab.reaal.me
Control a robot to collect coins, avoid obstacles and reach the flag at the end of the level ๐ฉ
This game is actually quite fun. Feels like Mario a bit ๐
Except youโre learning JavaScript, instead of sinking the day away ๐คฉ
๐ lab.reaal.me
7. Tynker ๐ฎ
โ Here you can play games and build projects using HTML, CSS, JavaScript, Python, and Java.
โ They have an extensive list of projects, DSA (data structures & algorithms) challenges.
๐ tynker.com
โ Here you can play games and build projects using HTML, CSS, JavaScript, Python, and Java.
โ They have an extensive list of projects, DSA (data structures & algorithms) challenges.
๐ tynker.com
8. SQL Murder Mystery ๐ต๏ธโโ๏ธ๐ต๏ธโโ๏ธ
Looking to learn or up your SQL in a gamified manner? ๐ค
Thereโs a game for that too๐คฉ
Good for beginners & experienced SQL developers.
Familiarize yourself with the database schema first โ then go find the murderer ๐
๐ mystery.knightlab.com
Looking to learn or up your SQL in a gamified manner? ๐ค
Thereโs a game for that too๐คฉ
Good for beginners & experienced SQL developers.
Familiarize yourself with the database schema first โ then go find the murderer ๐
๐ mystery.knightlab.com
9. Crunch Zilla ๐จโ๐จ๐จโ๐จ
Learn how to work with the HTML DOM canvas API in a gamified manner ๐จ
๐ crunchzilla.com
Learn how to work with the HTML DOM canvas API in a gamified manner ๐จ
๐ crunchzilla.com
10. Pixactly ๐ฅ
โ Get a good feel for pixel units with this game โจ
โ Pixactly has a very simple, yet challenging concept.
โ The game gives you two random pixel values - 1 for height, 1 for width.
โ Draw a box estimating the dimensions ๐ฆ
๐ pixact.ly
โ Get a good feel for pixel units with this game โจ
โ Pixactly has a very simple, yet challenging concept.
โ The game gives you two random pixel values - 1 for height, 1 for width.
โ Draw a box estimating the dimensions ๐ฆ
๐ pixact.ly
Thatโs a wrap!
If you enjoyed this thread, donโt forget to like, comment, and retweet the first tweet!
I create threads, and hand-drawn illustrations to level up your software development game ๐ ๐งต ๐จ
Follow @ChrisStaud
for more free tips and free resources.
If you enjoyed this thread, donโt forget to like, comment, and retweet the first tweet!
I create threads, and hand-drawn illustrations to level up your software development game ๐ ๐งต ๐จ
Follow @ChrisStaud
for more free tips and free resources.
Loading suggestions...