DEV Community

Hanzla Baig
Hanzla Baig

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

31 2 2 2 3

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read 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
 
devtostd profile image
Dev Studio β€’

πŸ‘

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
 
henrique_marques profile image
Henrique Marques β€’

O big returns 404 error

Collapse
 
robertds07 profile image
Robert Damaceno β€’

Big O returns 404

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

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay