DEV Community 👩‍💻👨‍💻

Cover image for How to learn JavaScript at home (step-by-step) + 5 FREE Resources
Full Stack Vault
Full Stack Vault

Posted on • Originally published at fullstackvault.xyz

How to learn JavaScript at home (step-by-step) + 5 FREE Resources

So, you wanna know how to learn JavaScript at home? Search no more!

More and more people are sharing how they're learning one of the most popular languages at home. That's right, AT HOME. Not at a university, not in a boot camp, but at home.

How do they do it? And how can you also do it?

How to learn JavaScript at home

First, find resources to help you understand the basics. I'll recommend the best ones to start with below.

Second, learn the basics of JavaScript. I'll list the basic concepts you have to know before moving to more advanced concepts.

As you keep going, you'll learn enough to be able to build your own JavaScript projects.

I'll suggest some project ideas for you below, as well as other tips to help you learn JavaScript at home.

Find your resources (with 5 FREE recommendations)

While it's true that there are tons of resources available that will help you learn JavaScript at home, it can also be overwhelming trying to sift through everything.

So I recommend you start with the following:

1. Codecademy's JavaScript course

Teaches you everything you need to learn the basics of JavaScript.

Link: https://www.codecademy.com/learn/introduction-to-javascript

2. MDN's JavaScript Guide

MDN is a documentation repository for web development that's used by Mozilla, Google, Microsoft, and Samsung.

You can think of it like Codecademy's JavaScript course but in text format.

I recommend you don't skip this because it's more in-depth. You can use this to supplement the Codecademy course so you'll have a deeper understanding. Codecademy courses are great for beginners but they also tend to be too shallow for some people.

Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

3. The Odin Project

The Odin Project is an excellent way to learn JavaScript because of its project-based approach. It also teaches how you to learn new tech as a professional developer in the real world - by reading official documentation of these technologies.

Because of this, you also end up learning how to learn more effectively, which is essential in the long run.

I highly recommend this one because it's a proven resource - hundreds of students have gotten a job in tech because of it.

Link: https://www.theodinproject.com/

4. FreeCodeCamp

Just like The Odin Project, FreeCodeCamp is another top resource in web development. Their courses (including JavaScript) include interactive exercises with their own online code editor. This lets you know if your code has mistakes.

It's a preferable resource for those who prefer more hand-holding versus the approach of The Odin Project.

Link: https://www.freecodecamp.org/

5. Coursera

Coursera hosts free online courses from well-known universities and tech companies. With the link below, you can get access to free JavaScript courses by Meta (previously Facebook), IBM, and universities.

Link: https://www.coursera.org/search?query=javascript&

More resources

For more resources, check out the Full Stack Vault, a curation of high-quality resources on learning web development.

Learn the basics of JavaScript

Before you could run, first you gotta learn how to walk.

You're probably thinking of grand project ideas to build in JavaScript already. But before you could build those projects, you have to learn the basics of JavaScript first.

I cannot stress this enough.

I see many people who start learning how to code give up early in their journey because they skip the basics. They jump into tutorials or courses that teach you how to build complex things.

So start by learning the basics of JavaScript first.

For starters, here are the basic programming concepts you need to understand in JavaScript:

  • Variables and data types
  • Operators
  • Conditionals
  • Functions
  • Scope
  • Loops and Iterators
  • Objects
  • DOM (Document Object Model)
  • DOM manipulation
  • Events & event handling
  • Object-oriented programming (OOP)
  • Functional programming

Once you have a firm understanding of the basics, you can move on to more advanced concepts.

Apply the basics

Let me tell you about a common mistake many newbies make when learning JavaScript, or any programming language:

They spend months (some even years) consuming resources, but they can't code anything on their own - even basic stuff!

This is called being stuck in tutorial hell. It happens when you don't build your own projects.

That's why I recommend The Odin Project as a resource because of its project-oriented approach. You will learn concepts and build projects as you go.

As with anything, practice makes perfect when it comes to learning JavaScript. The best way to learn is by experimenting with code and seeing what happens when you make changes.

When you're starting out, try to do the things you've learned on your own, to see if you actually understood the concept.

If you're following along a tutorial or course and you don't understand what you're doing, Google the concept to get a deeper understanding. This will make sure you're actually learning something instead of mindlessly copying a tutorial's code.

Then write everything you've learned in your notes so you can reference them later.

A great place to start is Codecademy's JavaScript track, which I mentioned earlier. This will walk you through the basics of syntax, variables, data types, and more.

After you've completed Codecademy's course, or if you're already familiar with the basics, it's time to start building something on your own. Choose a project that interests you, and start coding!

Try to start small with your first project. Then increase the difficulty as you move on to the next projects. Remember what I said about people giving up too early because they skipped the basics? It's the same with projects.

Here are simple JavaScript project ideas for inspiration:

  • Simple calculator
  • Unit converter
  • Currency converter
  • Calorie tracker
  • Online questionnaire
  • Simple image gallery

As for advanced project ideas, let your creativity shine. Think of a problem you have in your life, and try to solve it yourself. Besides, many successful tech products came to life because the founders were simply solving their own problems.

With JavaScript, you can even build games that run on the browser!

At Full Stack Vault, we also curated resources for you that teach you advanced JavaScript projects such as Uber, Yelp, and Medium clones, as well as Twitter, Discord, and AI bots.

If you get stuck, don't be afraid to Google for solutions or ask questions on Stack Overflow.

Learn to ask for help

Don't be afraid to ask for help!

Many people who are starting out don't ask for help or even use Google to get themselves unstuck, thinking that it's cheating.

But this is the worst mindset to have in learning programming. Believe me, even senior developers get stuck and ask for help themselves. Programming is a very wide field, plus it is constantly evolving and changing. Nobody knows everything!

So if you get stuck, there's no shame in looking up the answer online or asking for help from someone more experienced than you.

Reach out to friends or family who already know JavaScript, or post a question on a forum or online community dedicated to learning programming languages.

Finally, one of the best things you can do to learn programming is to find a mentor that can help and guide you.

Learning JavaScript at home alone can be hard when you're starting out. Sometimes, you can't make sense of the resources you're using, or your code doesn't work and no amount of posting in an online forum helps.

That can be frustrating and it's one of the many reasons people quit before they reach a breakthrough in their learning.

The personal touch that comes with mentorship changes that, and it's a game-changer. Having someone who can take the time to look at your code, answer your questions and doubts, or simply motivate you when you're on the brink of giving up, is priceless.

You can also reach out to me at hello@fullstackvault.xyz or Twitter. My inbox is open if you're stuck on something and need guidance. I've already lent a hand to a few people who are just getting started, and you're also welcome to join them!

Stay up to date with new features and developments

JavaScript and the tech industry as a whole is constantly evolving, so it's important to stay up to date on new features and developments. This way, you can take advantage of new capabilities as they become available and you also keep your skills sharp.

So be sure to keep up with the latest news in the JavaScript community so that you can stay current on new features and best practices.

And that's it!

By following these steps and putting in some consistent practice, you'll be well on your way to becoming a proficient JavaScript developer in no time.

You can do this!

Final Words

If you have further questions or just want to connect, don't hesitate to reach out to me at hello@fullstackvault.xyz or Twitter. I was a beginner too and I'm happy to help when I can.

Other than that, happy coding!

Top comments (11)

Collapse
 
369gtech profile image
Steven Mcleod

OMG I so love this post, I am doing it in a very similar way. Currently doing a bootstrap site with a Udemy Course and I use stack overflow like a fellow worker who knows everything lol. Thanks for posting.

Collapse
 
fullstackvault profile image
Full Stack Vault

Love that you're complementing the Udemy course with your own research. Yeah, stack overflow is heaven-sent. Glad to hear that you're building a project in the process, and I look forward to you completing it :D

Collapse
 
michthebrand profile image
Ikechukwu Charles

That is basically the JavaScript developer roadmap.

Every single step in this post is legit. Thank you for this post.

Collapse
 
fullstackvault profile image
Full Stack Vault

Thank you for your kind words. I'm glad you find it helpful!

Collapse
 
michthebrand profile image
Ikechukwu Charles

You are welcome.

I have a problem with github.
Please could you explain how I can make my project open source?

Thread Thread
 
fullstackvault profile image
Full Stack Vault

What's your problem with github?
What have you tried so far?
Have you seen this for reference? opensource.guide/starting-a-project/

Thread Thread
 
michthebrand profile image
Ikechukwu Charles

So far, I have tried using github for version control, but I find the whole concept of version control itself is confusing to understand.

I have posted a few html, javascript and css files on github. They were just little projects I made while learning the basics of web development. And that is it for what I have tried.

About the reference, no I haven't. Thank you for the link I'll read the content and get back to you.

Thread Thread
 
fullstackvault profile image
Full Stack Vault

Which part of version control do you find hard to understand? Is it why we use it in the first place? Or how to use it? Also, can you check out the resources here and tell me if you found one that helped you? fullstackvault.xyz/tags/Version%20...

Collapse
 
lakincoder profile image
Lakin Mohapatra

If anyone needs help in learning js , can ping me on twitter.

Collapse
 
fullstackvault profile image
Full Stack Vault

Thank you for offering to the readers, Lakin!

Collapse
 
zaidghanchi profile image
Zaid Ghanchi

It is good idea to learn Javascript from scratch step by step for you next project for free.

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!