I help write a lot of coding curriculum. When I’m drawing up a learning plan or designing a lesson, I often find inspiration in some of the learning experiences I’ve seen.
Here’s my list of the best online interactive learning experiences. After the list, I try to pull out the patterns and underlying principles that make them great.
These learning experiences span a huge variety of topics. Some are focused on design, others are focused on coding. I recommend them to students when they’re interested in learning these topics, and I’ve talked about a lot of them with other folks who teach or make curriculum.
Cant Unsee - Game for building design intuition by choosing the better of two side-by-side designs.
CSS Diner - Learn CSS Selectors interactively, by using them to select food from plates.
Method of Action - Five different interactive design games. My favorites are Type Method, and Boolean Method, but maybe the Bezier game is more important if you’re actually a designer. I am not a designer, so I can’t tell!
Vim Adventures - Build muscle memory and intuition for how to get around in the Vim text editor by moving a character around in a game.
SQLBolt - Learn a significant portion of what might be the most important coding language in a few hours.
RegexOne - From the same creator as SQLBolt, a terrific guided explanation of Regular Expressions, with lots of opportunities for practice.
Git Immersion - Guided tutorial through the fundamentals of Git, on your own machine.
Introduction to A* - To me, this goes to show that games are still among the best domains for teaching or learning algorithms. A* search is really hard, but it feels almost obvious when you read it in this context and see the visual examples.
Learn Layout - the interaction model is just looking and clicking, but it presents each idea in a bite-sized page, and it boils down a tricky set of connected concepts into a manageable learning path.
These pair an editor and a visual output to demonstrate or explain something powerful. By and large, these are not structured learning experiences, but they allow for structured play in a way that supports learning.
Regexr - My favorite of the many regex playgrounds. Has a built-in cheatsheet, examples, and excellent hover explanations for matches.
ExplainShell - Visual and text explanation of shell commands. Paste a weird command into the tool, and it tells you how it works.
What makes these good?
Each of these tools take a hard or intimidating concept and make it learnable, fun, and empowering. If you have the right context and want to learn those topics, starting the learning experience is almost enough to make the learning inevitable.
That’s more-or-less a definition of a great learning experience. Anyone who’s making an online learning experience should aspire to that goal. Still, setting a goal of ‘learnable, fun, and empowering’ doesn’t automatically make something good. What can we mimic in these learning experiences to make others as great?
The people who made these put a lot of thought and intention into what makes a good learning experience. Some of them have written about the design principles and what they think about coding, teaching, and learning.
Julia Evans (Wizard Zines) Notes on Building SQL Exercises discusses iterating based on actual data from learners who were using the tool.
Amit Patel (RedBlobGames) Interactive Tutorial on Making Interactive Tutorials explains in technical detail about how he makes his tutorials.
Mark MacKay (Method of Action) Getting Traction with Web Games has some tips about designing games, with history and tips about how to show respect for the user.
Thomas Park (CodePip) has published a bunch of academic research about how people learn coding. The openHTML team he was on at Drexel published a ton of great stuff. I recommend Towards a Taxonomy of Errors in HTML and CSS Development and An Analysis of HTML and CSS Syntax Errors in a Web Development Course.
Philip Guo (PythonTutor) has also published a ton of academic research. I find that I return to his thoughts on Learning Programming at Scale. Three cheers for turning academic research into practical products for learners! So much for the ivory tower, huh?
Gary Bernhardt (ExecuteProgram) tweets about designing and building the platform and content together, and has written (old blog, new blog) and given talks (and organized a conference) mostly about coding, but also about teaching and learning.
So, one trick to making great interactive experiences is to become an expert.
“You want to know how to paint a perfect painting? It's easy. Make yourself perfect and then just paint naturally.” - Robert Persig
“Think deeply and become wise”, while highly recommended, doesn’t actually convey any insights. It’s not a replicable path to follow. Reading some of those posts, however, does reveal concrete design decisions in common between these learning experiences.
The creators also iterate a lot, and (at least as far as I can tell) have built lots of learning materials. Building great things takes lots of creative output and feedback, as well as insight and aesthetic sense on top of the baseline understanding of the material and how to explain it.
Okay, what are the patterns?
Teach just one thing
Break the concept into small pieces
Sequence for speed without walls
Have an interaction for each new idea
Everything is designed around the core interaction
Why do these patterns work? In my book, it’s all about cognitive load.
Cognitive Load is how difficult it is to learn something, in a given context. If there’s lots of new stuff presented at once (or if there’s external stressors, or other sources of load), it’s harder to learn. Breaking a big concept down into bite-sized pieces reduces the load at any one moment. These games feel easy, despite the fact that the underlying concepts are hard.
Focus on teaching just one thing means no distractions. Teaching one thing is hard enough. For the learner, it means less cognitive load, so, higher success rates on each interaction.
The next trick to making difficult things easy is breaking the concept into small pieces. When going through any of these experiences, it feels like you’re building up to the big picture from carefully chosen morsels. Despite learning 50 or 100 new facts, at no point are you overloaded.
Each of these experiences is also sequenced for speed without walls. They try to move through the concepts as fast as possible. Having extra practice seems like it would be nice, but getting to the end is more important. These learning experiences are lean. They don’t have fluff.
Walls, though, are worse than fluff. Getting stuck means rereading, leaving the experience to search for an answer, or quitting altogether. Each of these tools is careful to sequence the concepts so that they don’t depend on an idea before they’ve introduced it. They never present you with a challenge without the knowledge you need to solve it.
In order to make sure that the learner has that knowledge, many of these experiences have an interaction for each new concept. Many also block progress until the reader demonstrates comprehension. When they introduce more complex challenges, they can do so knowing that the learner has solved other challenges already.
Having any interaction at all makes these tools a step above most learning experiences, but these tools are their interactions. Everything is designed around the core interaction. In contrast to some learning tools, they aren’t blindly ‘gamifying’ something adjacent. They don’t layer on a points mechanism ‘just because’. The core interaction is about the content being learned, and the learner does the thing that they’re learning. It’s one thing to be active in your learning, but it’s another to directly manipulate the symbols that are what you’re learning.
We don’t learn sports by analogy. These learning tools make it possible to learn concepts like SQL, Regular Expressions, and CSS by direct manipulation, the way we learn to dribble.
You, careful reader, might have noticed that the ‘Playgrounds’ on the list don’t follow the rest of these patterns. They don’t break concepts down into small pieces, they don’t have a sequence, and since they don’t introduce concepts, they don’t have an interaction for each new idea.
All they are is the core interaction. Do something, see the result. While they aren’t as surefire as the step-by-step guided activities, they tend to be more powerful tools for exploring. They reveal something that would otherwise be hidden, and the core interaction is around a particular kind of insight.
Some other commonalities stood out to me, though I’m not sure whether or not they’re critical to the learning experience.
The lessons are online and accurate, which seem like obvious prerequisites. They’re also notable in that they don’t have ads, and, for the most part, aren’t trying to sell you something. When they are, they’re selling more of what they are delivering, not selling a different product.
These tools don’t do a lot to explain ‘why’ learn what they offer. They expect that it’s already evident to the learner. No page space goes to justifying their own existence. That means there’s some missing steps for the learner to connect those concepts to some other context, but it also means that these tools can be dropped in to any context that provides those connections.
I’ve seen a lot of online learning content, but not everything. There’s a lot I didn’t pick! The following didn’t make the top list for one reason or another, but I still think they’re great or contain some element of greatness.
The old CodeSchool TryRuby (webarchive version linked) was amazing, but since Pluralsight bought CodeSchool, they’ve shut down the interactive version.
Learn Git Branching is a visual tutorial for practicing with Git branches. It’s a topic area that tends to be particularly hard for new Git users. The tutorial has some sharp corners where the instructions aren’t clear, but it’s still pretty great.
Typography in Ten Minutes doesn’t have a ton of interactions (just links). The content is great, and there’s a proof-in-the-pudding factor because the typography is stunning. The guide boils down hard ideas into clear, easy-to-follow recommendations. It has links to further justification and explanations (it’s a teaser for a whole book on typography).
It reminds me of Latacora’s Cryptographic Right Answers, which provides no interactivity, but makes it really easy to find the right thing to do. For some important hard decisions that ‘normal people’ will have to make infrequently, it’s more useful to have the rule than the derivation.
Codecademy, Khan Academy, Code.org’s Project Studio, Flatiron’s Precourse, General Assembly’s Dash, Grasshopper, and lots of others offer in-browser interactive courses. They’re okay. I haven’t seen any that spark joy the way the above recommendations do.
For code playgrounds and communities, Repl.it and Glitch are my favorites, but there’s a ton of other great ones like CodeSandbox, CodePen, JSFiddle, and JSBin. Encouraging play is good, and encouraging sharing and remixing is amazing.
For coding exercises, Exercism and Project Euler were really good for me. There’s a lot of great places to go for exercises though, so I find that different people tend to enjoy different sites. CodeWars doesn’t have a great name, but the community-driven exercises are actually pretty great. CodeSignal, LeetCode, InterviewCake and HackerRank all have coding interview questions, but are centered around selling you interview training, or selling you as the product to companies hiring engineers. The problems are generally well curated.
And, if you just want a big list of tech education resources to scan, here’s one on github.
Thanks for reading! I’d love to know what interactive learning experiences you love and what you think makes them great, as well as any feedback you have for me.
I’m also having lots of great conversations over the phone or video chat with folks who are interested in or working in higher ed and ed tech. If you want to chat, let’s find a time!