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.

Games

• 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.

• CodePip - Lots of code learning games, including CSS Grid Garden and CSS Flexbox Froggy, which make difficult concepts easy with structured practice and visual feedback.

• 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.

Tutorials

• 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.

• ExecuteProgram has courses on Modern Javascript and TypeScript, as well as Regular Expressions, SQL, and JavaScript Array Methods.

• 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.

• Web Design in 4 Minutes - A click-through explainer that uses the medium of the web page powerfully and satisfyingly. The follow-up JavaScript in 14 minutes is also recommended, though it doesn’t deliver the same deep and satisfying ‘win’ as you complete it.

• 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.

Playgrounds

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.

• Python Tutor - It isn’t much to look at, but visualizing code as it executes step by step is profound. The site also has free, anonymous live tutoring. The name is misleading - it supports Ruby, Javascript, Java, and more (in addition to Python).

• Become a Select Star Playground - Published alongside Julia Evans’ corresponding zine, and if you get the zine, you can follow the exercises, like this one on aggregations.

• Regexr - My favorite of the many regex playgrounds. Has a built-in cheatsheet, examples, and excellent hover explanations for matches.

• Loupe - Video and playground for exploring the JavaScript event loop.

• AST Explorer - In-browser abstract syntax tree parser and visualizer. A great way of teaching or learning what an AST is, what a parser does, what a compiler or transpiler does, and what codemods are. Admittedly, LISPs have a way of making those ideas more natural, but since lots of folks start with JavaScript, this is really handy in practice.

• 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.

Honorable Mentions

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.

Why’s Poignant Guide to Ruby, and Learn You a Haskell For Great Good are book-length and aren’t interactive, but they commit to storytelling and a whimsical aesthetic that I love.

Quantum Country and Explorable Explanations are pushing on how we can make better use of tools for learning, explaining, and (hopefully) thinking.

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.

There are also excellent language-specific playgrounds (for languages other than JavaScript). The two that come to mind are the Rust Playground and the Swift Playground, but it’s pretty common for a language to have one.

For younger kids, there’s WoofJS. It’s better than Processing as a next step after Scratch or Blockly. If you’re curious why, it’s worth reading Making JavaScript Learnable from WoofJS creator Steve Krouse, and for more background, Learnable Programming by Bret Victor. I don’t have a current LOGO implementation that I like, but Turtle Academy looks good at first glance.

When I polled other code teachers, I got recommendations for SQLZoo, LinuxZoo, and Mastery Games, which I haven’t used myself, but am excited to check out.

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.

Wrapping up

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!