DEV Community


Posted on • Updated on

Visual Learning Resources

Visual Explanations

Lydia Hallie

lydia hallie image
Lydia's notes are one of my favorite resources to for ... Lydia does an excellent job of explaining JS under the hood with the aid of gifs.

Code Analogies Blog

js equality table image
Visual explanations of JavaScript, HTML, CSS & other web concepts concepts. Writter ___ takes real world systems and relates them to a variety of complex programming --. He uses custom drawings and gifs to further illustrate his anologies making his blog easy to understand and almost conversational.

Better Explained

Better Explained Image
Better Explained gives in-depth and straightforward explanations for complex computer science and mathematics topics. The blog focuses on the "why's" instead of the "what's" and shows an intuitive side to math.

Visual Git Reference

visual git reference image
This page gives brief, visual reference for the common commands in git.

Flexbox Flowchart/Infograph

flexbox infograph image
A comprehensive visual guide to CSS Flexbox. This complete guide explains everything about Flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).



keycode image
Keycode is app that does one thing: displays Javascript Event Keycodes when you press the corresponding key on the keyboard. It's niche, but the clean layout and simple design makes the app great for visual learners

Factor Calculator

factor calculator image
Let's you enter a number and the calculator will output a factor tree.


![Visualgo image]Image description
Visualize algorithms and data structures through animation.

Javascript Equality Table

js equality table image

Google Web Font Typography Project

google web font typography project image
Scroll through and see Google fonts paired together and decide which looks best for your project.

RegExr: Learn, Build & Test Regex

regexr image
A Regular expression tester with syntax highlighting, contextual help, cheat sheet, reference, and searchable community patterns.

Bonus Tools

Focus Mate

focus mate image
Book a time slot for a virtual study buddy.


coffitive image
Coffitivity recreates the ambient sounds of a cafe to boost your creativity and help you work better.


cheatography image
A collection of cheatsheets & quick references. Intuitive design and great layouts for creating your own notes.

Top comments (0)