Basic web development lessons that use analogies to make new concepts simple
Each tutorial includes images, diagrams and text that explain common coding challenges in a refreshing (and unusual) way
Web Development Is Hard
At CodeAnalogies, we optimize our tutorials for understanding . What makes each web development topic unique?
Most tutorials include the following steps:
- A high-level analogy to real-world concept
- Diagrams that tie the real-world to the code
- A few examples using actual code
![](/img/guides/MapFunc2.png)
CSS Tutorials
CSS Basics
![](/img/guides/positioningvec.png)
Positioning
CSS Positioning Explained by Building an Ice Cream Sundae
![](/img/guides/house.png)
Box Model
The CSS Box Model Explained by Living in a Boring Suburban Neighborhood
![](/img/guides/displayBlock.png)
Display
CSS Display Explained by Packing a Suitcase
![](/img/roadtrip/mainimg.png)
Flexbox
CSS Flexbox Explained by Roadtripping across the Country
![](/img/guides/floatsvec.png)
Floats
CSS Floats Explained by Riding An Escalator
![](/img/guides/flexboxvec.png)
Selectors
CSS Selectors Explained by Going Car Shopping
![](/img/guides/suit.png)
Specificity
CSS Specificity Explained by Hopelessly Shopping for New Clothes
JavaScript Tutorials
Javascript Basics
![](/img/guides/hardhat.png)
The Very Basics
JavaScript Syntax Explained by Directing a Construction Site
![](/img/truck2.png)
Variables
JavaScript Variables Explained by Loading A Truck
![](/img/judge.png)
Booleans
JavaScript Booleans Explained By Going to Court
![](/img/guides/pasta.png)
Functions
JavaScript Functions Explained by Making A Recipe
![](/img/guides/newspaper.png)
Arrays and Objects
JavaScript Arrays and Objects are Just Like Books and Newspapers
![](/img/guides/factory2.png)
For Loops And More
For Loops Explained by Running a Factory
![](/img/guides/minionsvec.png)
Callbacks
JavaScript Callbacks Explained Using Minions
![](/img/guides/mvcvec.png)
MVC Frameworks
Model View Controller Explained by Ordering Drinks at the Bar
Key JavaScript Concepts
![](/img/guides/ajaxff.png)
AJAX
AJAX Explained By Working In A Fast Food Restaurant
![](/img/guides/promisesvec.png)
Promises
JavaScript Promises Explained By Gambling At A Casino
![](/img/guides/closuresvec.png)
Closures
JavaScript Closures Explained by Mailing a Package
![](/img/guides/scoping.png)
Scoping
Scoping Explained Through Multiple Levels of Government
![](/img/guides/mountain.png)
Map() Method
Map() Method Explained by Going on A Hike
![](/img/guides/school.png)
Filter() Method
Filter() Method Explained by Applying to College
![](/img/chips.png)
Reduce() Method
Reduce Method Explained By Going On a Diet
![](/img/guides/calendarIMG.png)
Traversing The DOM
Traversing The DOM Is Just Like Creating Your Personal Schedule
![](/img/guides/guitar.png)
The Concept of "This"
JavaScript's "this" Explained by Starting a High School Band
![](/img/guides/burger.png)
Apply, Call and Bind
Apply, Call and Bind Explained by Hosting a Cookout
Popular JavaScript Frameworks
![](/img/guides/d3vec.png)
D3.js Basics
Learn D3.js by Planting a Vegetable Garden
![](/img/guides/reactvec.png)
React Props/State
Props/State Explained Through Darth Vader’s Hunt for the Rebels
![](/img/guides/restaurant.png)
Express.js
Express Basics Explained by Running a Restaurant
JavaScript Dev Tools
![](/img/guides/BasicFoodCans.png)
Basic Dev Tools (Module Bundler, Package Manager)
JS Dev Tools Explained By Cooking In a Restaurant Kitchen
How The Web Works
Basics
![](/img/city.png)
HTML, CSS and JavaScript
The Relationship Between HTML, CSS and JavaScript Explained by Building A City
![](/img/dresser.png)
File Directories
File Directories Explained by Getting Dressed in the Morning
![](/img/kitchen.png)
Dev Tools
Browser Developer Tools Explained By Training To Become a Chef
![](/img/guides/brewery.png)
Front End v. Back End
Front End v. Back End Explained by Starting a Microbrewery
![](/img/guides/chef.png)
Localhost
Localhost Explained By Starting A Microbrewery
![](/img/guides/brewery.png)
Web Servers
Web Servers Explained By Running A Microbrewery
![](/img/milk.png)
Caching
Web Caching Explained by Buying Milk at the Supermarket
![](/img/guides/farmhouse.png)
APIs
Web APIs Explained by Selling Goods From Your Farm
![](/img/assembly.png)
Amazon Web Services
Amazon Web Services (AWS) Explained by Operating a Brewery
![](/img/guides/pumpkins.png)
Webhooks
Webhooks v. APIs Explained by Selling Seasonal Produce At Your Farm
![](/img/guides/school.png)
Blockchain
Blockchain Explained by Trying to Pass High School Math Class
![](/img/doctor.png)
Cookies
Internet Cookies Explained by Taking Your Kid to the Doctor's Office
SQL Tutorials
Basics
![](/img/guides/tables.png)
SQL Basics
SQL Tables Explained by Voting in the Infamous 2016 Election
Git Tutorials
Git Basics
![](/img/guides/blueprints.png)
Git Basics
The Basics of Git Explained by Designing a New Car
About
Hi, I'm Kevin! I taught myself web development over the last couple years on nights and weekends. It was...challenging.
There had to be a better way to teach code than endless videos, blog posts and practice problems. I started studying cognitive psychology, and I realized that analogies and imagery make complex topics much easier to understand.
I wrote the first tutorial in March 2016, "Javascript Callbacks Explained Using Minions". It did over 5000 views, and I knew I was on to something.
Since then, the tutorials have done over 400,000 views. Now, I am trying to create a new way to teach web development
Want to chat? Email me at kevin (at) codeanalogies.com