Skip to main content Accessibility Feedback

Learn Vanilla JS

Roadmap
Projects
Resources

Learning Roadmap

Not sure where to start? Here’s a structured roadmap for learning vanilla JS.

After you’ve mastered a skill or completed a project, check if off and the site will save your learning progress for you.

1. DOM Manipulation

Resources and project ideas →

Getting elements in the DOM
Looping through arrays and objects
Getting, setting, and removing classes
Manipulating styles
Getting and setting attributes
Listening for events in the DOM

2. Strings, Arrays, and Objects

Resources and project ideas →

Removing whitespace from a string
Transforming text to uppercase and lowercase
Converting strings to integers
Replacing a portion of text with different text
Getting a portion of a string
Splitting a string into an array based on a character
Adding items to an array or object
Merging two or more arrays or objects together
Filtering and transforming arrays

3. Variables, Functions, and Scope

Resources and project ideas →

Function expressions vs. function declarations
Function hoisting (and if it’s a good thing)
Scope, and why you need it
Conditional variables
Setting default values for variables
Arrow functions
When to use var, let, and const

4. DOM Injection

Resources and project ideas →

Detecting when the DOM is ready
Adding text and HTML to an element
Creating new elements
Injecting elements into the DOM
Removing elements from the DOM

5. DOM Traversal

Resources and project ideas →

Climb up and down the DOM
Get sibling elements
Filter nodes by selectors
Detect when an element is in the viewport
Calculate distances to the top of the bottom of the viewport

6. Browser Storage

Resources and project ideas →

Cookies
The localStorage and sessionStorage APIs
Storing arrays and objects
Expiring localStorage data
Query strings

7. APIs and JavaScript

Resources and project ideas →

Common HTTP methods
Calling API endpoints with XHR
Transforming API response data
API authentication
Third-party data and XSS attacks

8. Writing Plugins

Resources and project ideas →

Code structure and design
Settings and user options
Events and callbacks
Public methods
Multiple plugin instances
JS Modules

9. Web Apps

Resources and project ideas →

Rendering content into the DOM
Sanitizing data from XSS attacks
Components and state management
Data reactivity
Detecting user interactions and behaviors
Routing

Get Daily Developer Tips

I send out a short email each weekday with code snippets, tools, techniques, and interesting stuff from around the web. Join 8,200+ daily subscribers.

If you're human, leave this blank

Email Address

Roadmap
Projects
Resources

Made with ❤️ in Massachusetts by Chris Ferdinandi. Unless otherwise noted, all code is free to use under the MIT License.