Learning JavaScript – where should you start and what to do when you're stuck?
Have you tried to learn a JavaScript related topic/framework and found that you understand almost nothing?
There is a simple reason why you don’t understand what you’re learning – you skipped steps. You tried to learn something advanced without having the fundamentals to back yourself up.
What you’re trying to do by learning things that are far too advanced is like trying to drive an F1 without a drivers’ license. Can you imagine how badly you’ll crash?
So why do you force yourself to learn advanced JavaScript frameworks like React without learning the foundational topics first?
How to learn JavaScript
To learn JavaScript, you need to know three things:
1. Where are you with regards to JavaScript?
Are you a complete beginner at JavaScript? Do you only know how to copy-paste code? Or are you comfortable with writing JavaScript components from scratch?
Where you’re at determines what “level” of stuff you try to learn. If you learn something too simple, you’ll get bored. If you learn something too advanced, you’ll get overwhelmed.
But, just knowing where you are isn’t enough. You don’t have a map of what to learn, which is why you’re stuck in the first place.
This brings us to the next thing:
2. Where do you want to get to?
People learn JavaScript for different reasons. Are you trying to make your website more interactive? If you are, what you need to learn is completely different from another person who’s trying to develop a web application.
You must be able to visualize something concrete at the end of your path to learning JavaScript. It can be something simple (like clicking on a button and performing a specific animation) to something complex (like building a chat application).
You cannot use an abstract target like “learn enough to get hired”. If you use that as a target, you’ll remain lost since everyone hires differently. Don’t sabotage yourself by using a target set by someone else. Plus, if you want to get hired, you can get hired with less skills than you imagine you need.
Once you know your end goal, you can work backwards to list the things you possibly need to learn to get there. This list is your learning map. With this map, check off one thing at a time, until you’ve completed what you set out to build. Then, repeat the process and learn something new.
3. What’s the shortest path between these two points?
The learning map you’ve created will consist of winding paths. You won’t know what winding paths you’ve created. Worse, you won’t know if any hidden straight paths get you from where you are to where you want to be even faster.
This is expected. You’re charting your way into unknown territory. You won’t know if paths are straight or winding because you don’t know what you don’t know. There can be a shorter path between your two points, but you can’t see it.
This is where a mentor can come in and help. The mentor went through the path you’re trying to take. He/she knows the landscape better than you. If you have a mentor, consult them. Ask them how to get to where you want to be.
If you lack a mentor, it’s okay too. Sometimes, you just need to take that winding path to learn.
For JavaScript, here’s the straightest path I know of. You can use this to guide you.
The four phases to learning JavaScript
Learning JavaScript is similar to like growing up. There are different phases of growth. You can view it in the following four phases:
- The Baby Phase
- The Child Phase
- The Teenage Phase
- The Adult Phase
Let’s walk through each phase briefly so you understand where you are and where you should focus your energy.
The Baby Phase
If you’re starting out with JavaScript, you’re in the Baby Phase. You’re clueless about JavaScript. The syntax looks foreign.
What you should focus on in this phase is to thoroughly learn the JavaScript syntax so you know what others are talking about when they say things like objects, arrays, functions, etc.
The Child Phase
You’re in the Child Phase if you’re already comfortable with basic JavaScript syntax. At this stage, you don’t know how to build things from scratch yet.
You often need help. Maybe you can copy-paste and modify something after hours of googling, but you’re still not confident in your JavaScript skills. You don’t know how the DOM works. You don’t know how to build things from scratch.
In this phase, focus on learning methods provided to you by the DOM. Learn about selecting elements, traversing the DOM, adding and removing things from the DOM, adding and removing event listeners, changing styles and classes.
Try building simple things like accordions. Maybe even showing a menu when a button gets clicked. It’s okay to copy-paste at first, but make sure write your component from scratch afterward so you understand the underlying mechanics.
The Teenage Phase
You’re in the Teenage Phase if you already know how to build stuff from scratch. You’re somewhat confident you’ll be able to build anything DOM related, but you still can’t do them with a snap of your fingers.
Your code may be messy and unorganized. It may lack best practices, but at least you got things working.
The next step is to learn best practices from books and experts all around. Absorb what you can, then, rebuild what you’ve built. Use the new practices you’ve learned to internalize them.
This is also where you’ll want to begin looking at object oriented programming (OOP) and functional programming (FP). You’d also want to start learning about querying APIs from places like Github and Twitter.
The Adult Phase
Finally, in the Adult Phase, you know enough JavaScript to be dangerous. You can build almost anything you want. You’re confident with your code. It’s clean. You know the best practices and you’ve used them all. Now it’s time to leave the nest and look for something new, something related.
Here, you have a few options:
- You can learn a frontend framework (like Angular, Vue or React).
- You can learn Node to build a backend.
- You can dive even deeper into JavaScript.
Choose any option you want here. What you choose depends on where you want to get to. (Remember, your motivation is the deciding factor. Don’t let anyone else decide for you).
If you choose to learn a frontend framework, you’ll be able to build complicated web applications that can take a ton of work if you tried building the same thing with pure JavaScript.
If you choose to learn Node, you’ll start your journey towards a full-stack developer. Here, you have to learn about databases and server configuration at the same time.
If you choose to dive deeper into JavaScript, you’ll learn how to write better, cleaner code. Eventually, it will help you better at both Node or any JavaScript framework you intend to pick up.
How do you work through each phase?
Great question.
You need to find the correct materials to help you through each phase. You can try to find the materials yourself, or you can grab JavaScript Roadmap, where you’ll get curated learning resources to help you get through each phase.
In JavaScript Roadmap, I dive into each of the four phases, give you links to resources where you can learn from and send you questions to check your understand in each phase.
It’s a roadmap I wished I have when I started learning JavaScript. If I had it, I would have learned JavaScript so much faster than I did.
Why did I create JavaScript Roadmap?
It’s simple – I want to help you learn JavaScript, much faster than I did, without having to go through the same pain and confusion that I went through. That’s why I dedicated an entire month to curate and map out a path for you to learn from.
(And just to let you know, this article you’re reading is a lesson from JavaScript Roadmap).
Learn JavaScript
I’m also writing a course that shows you how to become great at JavaScript and how to build anything you want from scratch.
I call it Learn JavaScript.
In Learn JavaScript, I show you everything you need to know, step by step, starting from the absolute basics to JavaScript, to building real components from scratch.
If you loved this article and would love more hands-on practice and step-by-step lessons, you’ll love Learn JavaScript.
I’ve already spent more than 3 months working on the contents to Learn JavaScript, and I’m still working on it. I can proudly say its going to be the best JavaScript course out there to bring you from an absolute beginner to an advanced intermediate programmer.
Check out Learn JavaScript if it sounds any interesting to you :)
Wrapping up
You struggle to learn JavaScript because you skipped steps and tried to learn something advanced without having the fundamentals to back them up.
To learn JavaScript and do the things you want to do with it, you need to know these three things:
- Where are you with JavaScript right now?
- Where do you want to get to?
- What’s the path you’re going to take?
Leave a comment below/send me an email and tell me your answers. I’ll be waiting to help you refine them if you need help.
Then, check out JavaScript Roadmap if you want a road map to guide you through the process of learning JavaScript, and Learn JavaScript if you want to me to show you, step by step, how to learn JavaScript and build real components.
