Best Resources to Learn Vanilla JavaScript from Scratch

CodingJake Rocheleau • January 09, 2018 • 5 minutes READ

If you’re trying to learn front-end development then JavaScript is one of the primary languages you need to learn. It’s also one of the most complex languages to pick up, especially if you’ve only work with basic HTML & CSS.

But fret not! The Internet is here to help with dozens of resources to guide your learning process from the very beginning.

I always recommend starting with basic vanilla JavaScript because it’s the core of the language. Once you understand that it’s easier to move into libraries like jQuery, but you’ve gotta learn to crawl before you can walk. And these resources are the perfect teaching tools for finding your legs in the JavaScript world.

Eloquent JavaScript

The Eloquent JavaScript book was published a while back and eventually got released for free online. It’s still available in print if you wanna pay for a copy. Some people like working from physical books.

However, all the lessons are exactly the same on the website so you can pick up all the same ideas right from your computer.

This book is released under the Creative Commons license so all the source codes and lessons are 100% free. You can download a copy locally to your machine and keep this handy to work through.

In my experience, these lessons are very technical but also very accurate. Perfect for beginners who aren’t sure which resources are trustworthy.

Looking through the chapter list you’ll notice it breaks down into three sections:

• The JS language
• The browser
• Node.js

You don’t need to worry much about the final chapters on Node until you’re using JS fluently in your web projects.

But all the other 15+ chapters are well worth studying and they should help any novice learn JS fundamentals the right way.

TutsPlus

Another site I really like is the TutsPlus blog which is full of free tutorials on hundreds of topics. They do a lot of coding tuts and you’ll notice their JavaScript category is pretty big.

The only downside of browsing TutsPlus is the lack of sorting. You can search by category and by language, but you can’t search by difficulty level.

Beginners may have a tough time finding tutorials aimed at complete beginners or putting together a lesson plan. Still the TutsPlus guides are thorough so you can trust the information inside.

And if you’re willing to spend a little on courses you can always sign up for their premium videos. Their team has tons of vanilla JS video tuts and their entire video library is available for $30/mo.

FreeCodeCamp

FreeCodeCamp works just like the name implies. You can sign up for a free account and learn coding from scratch right within your browser.

It’s a great community founded by coders hoping to help other coders learn. It’s primarily built as a web platform so you’ll find lessons on HTML/CSS, vanilla JS, React, Angular, pretty much everything.

The site runs on “challenges” where you work through specific exercises to learn how to do certain tasks. And with a huge support community you’re never alone in your journey.

Give this a shot if you’re looking for other coders to bounce ideas off. The site is free to join so there’s not much to lose!

Watch and Code

The Watch and Code site is very new so it’s still pretty empty on content. Their goal is to offer both free & premium courses just like many other sites online, and their Practical JavaScript course is one of the freebies.

This teaches you everything about JavaScript including basic syntax, browser behaviors, functions, variable scope, basically all the fundamentals.

You do need to sign up and create an account to access the videos. But it shouldn’t take long to get up & running with these lessons, especially if you’re great at self-teaching.

YouTube Videos

I hate to throw in such a vague recommendation but honestly YouTube has tons of free tutorials on JavaScript.

The best part is that most of these are full video walkthroughs so you can watch the presenter show you line-by-line how to write proper code. It won’t be easy and you’ll still need to do the work yourself to understand the concepts.

But all videos on YouTube are 100% free so you know whatever you find on there is accessible even without a YT account.

If you’re ever stuck on a specific JS topic that just doesn’t make sense try searching YouTube for tutorials. You’ll be surprised how many are out there.

Awesome Coding Videos

For a more organized gallery of learning guides check out the site Awesome Coding Videos. This operates like a curation resource where large courses are organized together so you can more easily find videos on your preferred topics.

For example this course on modular JavaScript has all 7 videos from the course on one page. These all come from YouTube so you could have found them through search… but who knows how long that would take.

Plus this site has its own search feature so you can look for vanilla JS vids and try starting with those lessons right away.

JavaScript 30

Note this site is really great if you already know some vanilla JS and want serious practice projects to up your skills. But it’s not as great for absolute beginners since the topics are very practical and hands-on without the baby steps.

With that said, JavaScript 30 should absolutely be on your radar for learning vanilla JS.

It’s a free course with 30 different videos each showing you how to build a very specific project from scratch.

The instructor Wes Bos has tons of premium courses online but he released this one for free as a “thank you” to the community.

Really keep this site bookmarked once you’re kinda comfortable with JavaScript. Working through these 30 lessons will radically improve your JS skills once you’re able to follow along.

Moving Forward

Learning JavaScript is hard. There’s no getting around it.

But you can reduce the learning curve and the most common frustrations by working with the right teaching materials. I trust all the items mentioned in this guide and they’re all fantastic for pushing yourself into the world of vanilla JS.

Plus the vast majority of these guides are totally free so you can pick up JavaScript development without paying a dime.