Visual Learning Resources
Published: 2021-10-18 03:58:35


# Visual Explanations

### [Lydia Hallie](https://dev.to/lydiahallie/series/3341)
![lydia hallie image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kflvr9n0250d9ka0eiv.png)
    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](https://blog.codeanalogies.com/) 
![js equality table image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg0xbl3ixzxlor1d5qio.png)
    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](https://betterexplained.com/articles/matrix-multiplication/) 
![Better Explained Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fct170so23gvrfcf25a7.png)
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](https://marklodato.github.io/visual-git-guide/index-en.html)
![visual git reference image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhj1ycasg5pxyx1czysv.png)
  This page gives brief, visual reference for the common commands in git. 

 
### [Flexbox Flowchart/Infograph ](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
![flexbox infograph image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ssbnch17x227gmomcije.png)
  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).

---



## Tools 

### [Keycode](https://keycode.info/) 
![keycode image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2ldw7zbqjilussakvsi.png)
  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](https://www.calculator.net/factor-calculator.html?cvar=600851475143&x=53&y=18) 
![factor calculator image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7q2bg2rdrord4afux9wq.png)
  Let's you enter a number and the calculator will output a factor tree. 

### [VisuAlgo](https://visualgo.net/en) 
![Visualgo image]![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33kasmov07rmpmvca9sy.png)
  Visualize algorithms and data structures through animation. 

### [Javascript Equality Table](https://dorey.github.io/JavaScript-Equality-Table/) 
![js equality table image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ell2gmd1hvyj25rfg81o.png)



### [Google Web Font Typography Project](https://femmebot.github.io/google-type/)
![google web font typography project image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip0n6eys6ba2enn69str.png)
    Scroll through and see Google fonts paired together and decide which looks best for your project.


### [RegExr: Learn, Build & Test Regex](https://regexr.com/) 
![regexr image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmel76wppaux3icjd5kw.png)
  A Regular expression tester with syntax highlighting, contextual help, cheat sheet, reference, and searchable community patterns. 


---


## Bonus Tools

### [Focus Mate](https://www.focusmate.com/)
![focus mate image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tftchrjp5ks1sbdhsbrp.png)
Book a time slot for a virtual study buddy.


### [Coffitivity](https://coffitivity.com/)
![coffitive image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0llpjez3l1f01zcymce.png)
 Coffitivity recreates the ambient sounds of a cafe to boost your creativity and help you work better. 


### [Cheatography](https://cheatography.com/)
![cheatography image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5egn6jj4yjhgobriyuh.png)
 A collection of cheatsheets & quick references. Intuitive design and great layouts for creating your own notes.