180 lines
8.6 KiB
HTML
180 lines
8.6 KiB
HTML
<h1 id="awesome-educational-games">Awesome Educational Games</h1>
|
||
<p><a
|
||
href="https://en.m.wikipedia.org/wiki/Educational_game"><img src="https://cloud.githubusercontent.com/assets/499192/18659925/ed7e6262-7f0d-11e6-8e8e-b53b87158210.png" align="right" alt="Awesome Educational Games" width="150"></a></p>
|
||
<blockquote>
|
||
<p>A curated list of awesome <a
|
||
href="https://en.m.wikipedia.org/wiki/Educational_game">educational
|
||
games</a> to learn editors, languages, programming, etc.</p>
|
||
</blockquote>
|
||
<p><em>Please read the <a href="CONTRIBUTING.md">contribution
|
||
guidelines</a> before contributing.</em></p>
|
||
<blockquote>
|
||
<p><a
|
||
href="https://en.m.wikipedia.org/wiki/Educational_game">Educational
|
||
games</a> are designed to teach people about certain subjects, expand
|
||
concepts, reinforce development, understand an historical event or
|
||
culture, or assist them in learning a skill as they play - <a
|
||
href="https://en.m.wikipedia.org/wiki/Educational_game">Wikipedia</a></p>
|
||
</blockquote>
|
||
<h4 id="contents">Contents</h4>
|
||
<ul>
|
||
<li><a href="#art--design">Art & Design</a></li>
|
||
<li><a href="#articles">Articles</a></li>
|
||
<li><a href="#css">CSS</a></li>
|
||
<li><a href="#editors">Editors</a></li>
|
||
<li><a href="#languages">Languages</a></li>
|
||
<li><a href="#math--computer-science">Math & Computer
|
||
Science</a></li>
|
||
<li><a href="#music">Music</a></li>
|
||
<li><a href="#programming">Programming</a></li>
|
||
</ul>
|
||
<h2 id="art-design">Art & Design</h2>
|
||
<ul>
|
||
<li><a href="http://www.canonoutsideofauto.ca/">Canon Explains
|
||
Exposure</a> - Learn how to give your photographs just the right amount
|
||
of light.</li>
|
||
<li><a href="https://cantunsee.space/">Can’t Unsee</a> - A game where
|
||
your attention to details earns you a lot of coins.</li>
|
||
<li><a href="https://betterwebtype.com/font-memory-game">Font Memory
|
||
Game</a> - Recognizing different styles of fonts is one of the most
|
||
challenging parts of typography.</li>
|
||
<li><a href="https://method.ac/">Method of Action</a> - A collection of
|
||
games that teach you design principles.
|
||
<ul>
|
||
<li><a href="https://bezier.method.ac/">The Bézier Game</a> - Bézier
|
||
Curves</li>
|
||
<li><a href="https://color.method.ac/">Color</a> - Color</li>
|
||
<li><a href="https://shape.method.ac/">Shape Type</a> - Letter
|
||
Shaping</li>
|
||
<li><a href="https://type.method.ac/">Kern Type</a> - Kerning</li>
|
||
</ul></li>
|
||
<li><a href="http://pixact.ly/">Pixactly</a> - A pixels test to quiz
|
||
your knowledge.</li>
|
||
<li><a href="https://boolean.method.ac/">The Boolean Game</a> - Learn
|
||
how to use boolean operations in Sketch, Figma, and other vector
|
||
editors.</li>
|
||
</ul>
|
||
<h2 id="articles">Articles</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.nyu.edu/about/news-publications/news/2013/november/educational-video-games-can-boost-motivation-to-learn-nyu-cuny-study-shows-.html">Educational
|
||
Video Games Can Boost Motivation to Learn</a> - An article by New York
|
||
University.</li>
|
||
<li><a
|
||
href="https://www.nyu.edu/about/news-publications/news/2013/november/educational-video-games-can-boost-motivation-to-learn-nyu-cuny-study-shows-.html">Fact
|
||
or Fiction?: Video Games Are the Future of Education</a> - An article by
|
||
Scientific American.</li>
|
||
<li><a
|
||
href="https://www.educationworld.com/a_curr/reasons-to-play-games-in-the-classroom.shtml">Five
|
||
Reasons to Use Games in the Classroom</a> - An article by Education
|
||
World.</li>
|
||
</ul>
|
||
<h2 id="css">CSS</h2>
|
||
<ul>
|
||
<li><a href="https://flukeout.github.io/">CSS Diner</a> - It’s a little
|
||
game to help you learn CSS selectors.</li>
|
||
<li><a href="http://cssgridgarden.com/">CSS Grid Garden</a> - A game for
|
||
learning CSS grid layout.</li>
|
||
<li><a href="http://www.flexboxdefense.com/">Flexbox Defense</a> -
|
||
Unlike other tower defense games, you must position your towers using
|
||
CSS!</li>
|
||
<li><a href="http://flexboxfroggy.com/">Flexbox Froggy</a> - A game for
|
||
learning CSS flexbox.</li>
|
||
<li><a href="https://www.flexboxgame.com/">Flexbox with Webflow</a> -
|
||
Learn and master flexbox in 28 interactive levels—without writing
|
||
code.</li>
|
||
</ul>
|
||
<h2 id="editors">Editors</h2>
|
||
<ul>
|
||
<li><a href="https://www.openvim.com/">Open Vim</a> - Interactive Vim
|
||
tutorial.</li>
|
||
<li><a href="https://vim-adventures.com/">Vim Adventures</a> - Learning
|
||
Vim while playing a game.</li>
|
||
<li><a href="http://vimgenius.com/">Vim Genius</a> - Increase your speed
|
||
and improve your muscle memory with Vim Genius.</li>
|
||
</ul>
|
||
<h2 id="languages">Languages</h2>
|
||
<ul>
|
||
<li><a href="https://languagedrops.com/">Drops</a> - Learn useful words
|
||
and phrases in a languge of your choosing, with fun gameplay.</li>
|
||
<li><a href="https://www.duolingo.com/">Duolingo</a> - Learn Spanish,
|
||
French and other languages for free.</li>
|
||
</ul>
|
||
<h2 id="math-computer-science">Math & Computer Science</h2>
|
||
<ul>
|
||
<li><a href="http://worrydream.com/#!/AlligatorEggs">Alligator Eggs!</a>
|
||
- A pen-and-paper game for children that teaches lambda calculus.</li>
|
||
<li><a href="https://csunplugged.org/en/">CS Unplugged</a> - A
|
||
collection of classroom activities that teach computer science concepts
|
||
without using computers.</li>
|
||
<li><a href="http://www.postcrashgames.com/finitris/">Finitris</a> - See
|
||
what goes into running a regular expression.</li>
|
||
<li><a href="http://guessthecorrelation.com/">Guess The Correlation</a>
|
||
- Try to guess how correlated the two variables in a scatter plot
|
||
are.</li>
|
||
</ul>
|
||
<h2 id="music">Music</h2>
|
||
<ul>
|
||
<li><a href="https://learningmusic.ableton.com">Learning Music</a> -
|
||
Explore the fundamentals of music via Ableton’s interactive
|
||
website.</li>
|
||
<li><a href="https://learningsynths.ableton.com/">Learning Synths</a> -
|
||
Learn the basics of using synthesizers (or synths).</li>
|
||
<li><a href="https://pianu.com">Pianu</a> - Learn how to play the piano
|
||
in-browser.</li>
|
||
</ul>
|
||
<h2 id="programming">Programming</h2>
|
||
<ul>
|
||
<li><a href="http://box-256.com/">BOX-256</a> - Program a fictional CPU
|
||
with assembly to output graphics.</li>
|
||
<li><a href="https://gitlab.com/slackermedia/bashcrawl">Bashcrawl</a> -
|
||
Learn Linux commands by playing a simple text adventure .</li>
|
||
<li><a href="https://md5crypt.github.io/clipsgame/">Clips the Game</a> -
|
||
A demanding logic game based on the clips rule engine.</li>
|
||
<li><a href="https://www.codeavengers.com/">Code Avengers</a> - Learn to
|
||
build websites, apps and games in a fun and effective way.</li>
|
||
<li><a href="https://www.pluralsight.com/codeschool">Code School</a> -
|
||
Learn to code in the comfort of your browser.</li>
|
||
<li><a href="https://code.org/">Code.org</a> - Every student in every
|
||
school should have the opportunity to learn computer science.</li>
|
||
<li><a href="https://www.codecademy.com/">Codecademy</a> - Learn to code
|
||
interactively, for free.</li>
|
||
<li><a href="https://codecombat.com/">CodeCombat</a> - The most engaging
|
||
coding game for learning programming.</li>
|
||
<li><a href="https://www.codingame.com/start">CodinGame</a> - A
|
||
challenge-based training platform where you can play with the hottest
|
||
programming topics.</li>
|
||
<li><a href="https://david-peter.de/cube-composer/">Cube Composer</a> -
|
||
A puzzle game inspired by functional programming.</li>
|
||
<li><a href="https://deadlockempire.github.io/">Deadlock Empire</a> -
|
||
Solve puzzles with concurrency.</li>
|
||
<li><a href="https://www.freecodecamp.org/">Free Code Camp</a> - An open
|
||
source community that helps you learn to code.</li>
|
||
<li><a href="https://learngitbranching.js.org/">Learn Git Branching</a>
|
||
- Interactive Git tutorial that emphasizes branching.</li>
|
||
<li><a href="https://getmimo.com/">Mimo</a> - Learn how to become a
|
||
developer on mobile.</li>
|
||
<li><a href="http://programminggames.org/">Programming Games Wiki</a> -
|
||
A long-standing catalogue of programming games through the years.</li>
|
||
<li><a href="https://regexone.com/lesson/introduction_abcs">RegexOne</a>
|
||
- Learn Regular Expressions with simple, interactive exercises.</li>
|
||
<li><a href="https://alf.nu/ReturnTrue">ReturnTrue</a> - A game were you
|
||
learn about booleans, return true to win.</li>
|
||
<li><a href="https://screeps.com/">Screeps</a> - The world’s first MMO
|
||
strategy sandbox game for programmers.</li>
|
||
<li><a href="https://mystery.knightlab.com/">SQL Murder Mystery</a> -
|
||
Solve a crime while practicing database skills.</li>
|
||
<li><a href="https://www.apple.com/swift/playgrounds/">Swift
|
||
Playgrounds</a> - Learn to code on your iPad in a seriously fun
|
||
way.</li>
|
||
<li><a href="https://alexnisnevich.github.io/untrusted/">Untrusted</a> -
|
||
Learn while playing a JavaScript adventure game.</li>
|
||
<li><a href="https://github.com/olistic/warriorjs">WarriorJS</a> - Using
|
||
JavaScript, program a warrior to climb a tall tower, fight monsters and
|
||
rescue captives.</li>
|
||
<li><a href="https://mmckegg.github.io/web-audio-school/">Web Audio
|
||
School</a> - Interactive WebAudio tutorials.</li>
|
||
<li><a href="https://xss-game.appspot.com">XSS game</a> - A game about
|
||
tricking people into running code in their browsers.</li>
|
||
</ul>
|