A vanilla JS learning path

One of the things I get asked about fairly often is what a learning path for vanilla JavaScript might look like.

I believe that in order for learning to be engaging and really “stick” in your mind, you need to go from theory to actually building something in as little time as possible. The conceptual stuff is boring. Making things is fun!

With that in mind, here’s what I think the optimal vanilla JS learning path looks like:

DOM Manipulation. Learn how to get elements on the page, and do things to them like add and remove classes, get properties, set properties, add styles, and so on.
Strings, Arrays, and Objects. What they are and when you’d use one over the other. Also, how to get data from a string, array, or object and manipulate it in some way: adding or removing content, or transforming it into another value, for example.
Variables, Functions, and Scope. Should you use functional declarations or function expressions (and what’s the difference)? What are arrow functions? What’s function hoisting? What’s the difference between var, let, and const, and when should you use each? What is scope, and how does it affect how you structure your code?
DOM Injection and Traversal. How to create new HTML elements and inject them into the page. How do you climb up or down the DOM to find parent or child elements? How to move laterally to get sibling elements?
Browser Storage. How to store data locally in the browser to use later? This includes things like localStorage, sessionStorage, browser cookies, and how to retrieve values from query strings.
Ajax & HTTP. How to get data from an API, or dynamically grab content from another page on your site?
Writing Plugins. How to structure your code for greater flexibility. How to write scripts that can scale, adapt, and expand to future use cases you haven’t thought of yet… without touching the core code?
Web Apps. How to build interactive web apps and single page apps without libraries or frameworks.

This learning path is designed to be progressive. The skills you learn earlier on will guide the things you learn later in the path.

Of course, you could also jump around a bit. If you needed Ajax for a project, there’s no reason you couldn’t skip over the nitty-gritty of functions and scopes and then come back to them. It might just bit a little harder to get started.

If you like the way this learning path looks, you might also enjoy my Vanilla JS Pocket Guides (available in ebook and video format).

They follow this exact learning path.