DEV Community

Hanzla Baig
Hanzla Baig

Posted on β€’ Originally published at dev.to on

32 1 1 1 2

πŸŽ‰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

πŸ₯— 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!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (10)

Collapse
 
naveed_hassan_7f63c8e0907 profile image
Naveed Hassan β€’

It's really amazing

Collapse
 
hamisoptimistic profile image
Hamim β€’

Great Resources man

Collapse
 
omak profile image
omak-oorzhak β€’ β€’ Edited

Great collections! Thank you! But Big O Notation Visualized with Flowcharts and Docker Fundamentals are broken links

Collapse
 
weeqfy profile image
Weeqfy β€’

Good job!

Collapse
 
usha_bothra_b53c1e61c8b54 profile image
Usha Bothra β€’

Too good concept, appreciate hole wholeheartedly…

Collapse
 
gamingtech profile image
Scott β€’

Docker Fundamentals returns a 404 for me?

Collapse
 
sebman56 profile image
Seb β€’
Collapse
 
robertds07 profile image
Robert Damaceno β€’

Big O returns 404

Collapse
 
henrique_marques profile image
Henrique Marques β€’

O big returns 404 error

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay