In developer education we deal with a lot of conceptual information and mental modeling. For example, when talking about application architecture you form an image in your head – you think of a picture, not code.
When teaching concepts, I almost always turn to visual aids. Visuals can truly speak a thousand words. You might be thinking of video-based learning but creating web-based learning allows us to do some awesome things when it comes to creating visuals.
For example, you can use CSS animations. When you couple that with JavaScript, you can create interactive animations.
Here's an example from Serverless Visually Explained by Matthieu Napoli (Serverless Framework):
This is plain HTML and JavaScript (well, Vue.js) – nothing out of reach for someone who can write CSS. But look how effective it is at communicating the role of the API gateway or SQS queues in front of Lambda functions. I love that the course uses this as a way to teach.
You could also hire an illustrator. That's what Dan Abramov did (creator of React) in his Just JavaScript course. The illustrations are animated and embedded as auto-playing clips throughout the course:
In this case, Dan chose to embed videos of the animated illustrations. You could also go a step further and use a web-based game engine like Excalibur or Phaser to make these illustrations interactive (or add audio, or you know, make a game).
Another way to create amazing visuals with the power of the web is to animate SVGs using CSS and JavaScript. I first learned of this through Sarah Drasner, here's an example of animating React page transitions:
How awesome is that? If you want to learn how to make this, buy her Animated SVGs book (affiliate link).
I especially love SVGs because they're performant, accessible, and can even be made responsive, all of which are perfect for web-based courses. Check out Vivus for an open source library that animates SVGs to make them seem drawn.
One of the benefits of being a software company is that you likely have all the in-house talent needed to create animated graphics – a graphic designer can provide SVGs or a frontend designer can make HTML/CSS. Oftentimes, your design team can do both since you use all those technologies in developing your product.
Take that in-house talent and apply it to your DevEd. Give it some umami. Spicing up your visual aids with animation – SVG or otherwise – not only is a great way to teach concepts, but it also makes the learning experience more fun and engaging.
Have a lovely day,
Kamran
