🎉32 Code Tutorials for Visual Learners 🖼

#javascript #webdev #beginners #devops

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

🥗 JavaScript’s 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

🎶 JavaScript’s “this” Explained By Starting A High School Band

💡 JavaScript’s 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!