32 Code Tutorials for Visual Learners

Sometimes it's easier to understand code through pictures than by looking at the code itself. I compiled a list of (free!) code tutorials that help you learn through nice pictures.

JavaScript Tutorials

JavaScript Service Workers, Visualized

Big O Notation Visualized with Flowcharts

Node Package Manager (NPM) Explained By Directing A Movie

Understanding the basics of Express.js by Going Out To Eat

How JavaScript variable scoping is just like multiple levels of government

Javascript's Filter Function Explained By Applying To College

JavaScripts Reduce Method Explained By Going On a Diet

JavaScript Promises Explained By Gambling At A Casino

Merge Sort Explained by Reading A Book

State (in JavaScript) Explained by Cooking A Simple Meal

JavaScript Arrow Functions Explained By Going Down A Slide

Bubble Sort Algorithm Explained

JavaScripts this Explained By Starting A High School Band

JavaScripts apply, call, and bind explained

JavaScript Visualized: The JavaScript Engine

Javascript Visualized: Generators and Iterators

Javascript Visualized: Prototypal Inheritance

Javascript Visualized: Event Loop

Javascript Visualized: Scope

Javascript Visualized: Hoisting

What is Map/Filter/Reduce in Javascript?

Javascript Map() Explained By Going on a Hike

What is the Event Loop?

CSS Tutorials

What are CSS Shapes?

CSS Combinators Explained

CSS Positioning

Web Performance Tutorials

What is Adaptive Loading?

Adaptive Serving

Loading web pages fast on a $20 phone

DevOps

Docker Fundamentals

CS Visualized: Useful Git Commands

Kubernetes and Virtual Kubelet in a nutshell

I remember when JavaScript tutorials using emojis to explain concepts were always on the front page of dev.to. Did I miss something? Comment so I can add to the list!