🎉32 Code Tutorials for Visual Learners 🖼 
Tags: javascript, webdev, beginners, devops
Published: 2020-08-31 16:16:56

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](https://dev.to/blarzhernandez/javascript-service-workers-visualized-1683)

🔘 [Big O Notation Visualized with Flowcharts](https://dev.to/ender_minyard/big-o-notation-understanding-time-complexity-using-flowcharts-383a)

🎬 [Node Package Manager (NPM) Explained By Directing A Movie](https://dev.to/kbk0125/node-package-manager-npm-explained-by-directing-a-movie-359)

🥙 [Understanding the basics of Express.js by Going Out To Eat](https://dev.to/kbk0125/going-out-to-eat-and-understanding-the-basics-of-expressjs-4d6n)

👸🏽 [How JavaScript variable scoping is just like multiple levels of government](https://dev.to/kbk0125/how-javascript-variable-scoping-is-just-like-multiple-levels-of-government--3g27)

👨🏽‍🎓 [Javascript's Filter Function Explained By Applying To College](https://dev.to/kbk0125/javascripts-filter-function-explained-by-applying-to-college-58j0)

🥗 [JavaScript’s Reduce Method Explained By Going On a Diet](https://dev.to/kbk0125/javascripts-reduce-method-explained-by-going-on-adiet-3078)

🎲 [JavaScript Promises Explained By Gambling At A Casino ](https://dev.to/kbk0125/javascript-promises-explained-by-gambling-at-a-casino-4jdo)

📖 [Merge Sort Explained by Reading A Book](https://dev.to/kbk0125/recursion-and-the-call-stack-explained-by-reading-a-book-a1)

🍚 [State (in JavaScript) Explained by Cooking A Simple Meal](https://dev.to/kbk0125/state-in-javascript-explained-by-cooking-a-simple-meal-4ego)

🛷 [JavaScript Arrow Functions Explained By Going Down A Slide](https://dev.to/kbk0125/javascript-s-arrow-functions-explained-by-going-down-a-slide-1ebm)

🛁 [Bubble Sort Algorithm Explained](https://dev.to/kbk0125/bubble-sort-algorithm-explained-by-picking-teams-at-recess-3f19)

🎶 [JavaScript’s “this” Explained By Starting A High School Band](https://dev.to/kbk0125/javascripts-this-explained-by-starting-a-high-schoolband-5abb)

💡 [JavaScript’s apply, call, and bind explained](https://dev.to/kbk0125/javascripts-apply-call-and-bind-explained-by-hosting-a-cookout-32jo)

🖥 [JavaScript Visualized: The JavaScript Engine](https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf)

📱 [Javascript Visualized: Generators and Iterators](https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36)

💻 [Javascript Visualized: Prototypal Inheritance](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co)

➰ [Javascript Visualized: Event Loop](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)

⬆️ [Javascript Visualized: Scope](https://dev.to/lydiahallie/javascript-visualized-scope-chain-13pd)

⤴️ [Javascript Visualized: Hoisting](https://dev.to/lydiahallie/javascript-visualized-hoisting-478h)

🗺 [What is Map/Filter/Reduce in Javascript?](https://dev.to/chrisachard/map-filter-reduce-crash-course-5gan)

🗾 [Javascript Map() Explained By Going on a Hike🧗🏽‍♀️](https://dev.to/kbk0125/javascript-map-method-explained-by-going-on-a-hike--537i)

➰ [What is the Event Loop?](https://dev.to/lschwall/event-loops-an-introduction-53ep)

##CSS Tutorials

🔘 [What are CSS Shapes?](https://dev.to/rosieebob/beautify-the-web-with-css-shapes-nel)

🎨 [CSS Combinators Explained](https://dev.to/murkrage/css-combinators-explained-and-visualized-4i6k)

🔲 [CSS Positioning](https://dev.to/kbk0125/css-positioning-explained-by-building-an-ice-cream-sundae--3e86)

## Web Performance Tutorials

▶️ [What is Adaptive Loading?](https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69)

⏯ [Adaptive Serving](https://dev.to/addyosmani/adaptive-serving-using-javascript-and-the-network-information-api-331p)

🐅 [Loading web pages fast on a $20 phone](https://dev.to/addyosmani/loading-web-pages-fast-on-a-20-feature-phone-8h6)

## DevOps 

💡 [Docker Fundamentals](https://dev.to/skaytech/docker-fundamentals-2ibi)

✨ [CS Visualized: Useful Git Commands](https://dev.to/lydiahallie/cs-visualized-useful-git-commands-37p1)

🥜 [Kubernetes and Virtual Kubelet in a nutshell ](https://dev.to/adipolak/kubernetes-and-virtual-kubelet-in-a-nutshell-gn4)

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