You’ve stumbled upon my step-by-step guide to the basics of JavaScript. I’ve been actively learning JavaScript for a while now and have learned I learn best by teaching. In an effort to solidify the basics, I’ve decided to write a this tutorial with accompanying videos.
Before I begin, let me go over a few concepts that will help you as you learn.
1. Focus on concepts over syntax.
When you’re just starting, it’s easy to focus on syntax. “How exactly do I write a function?” or “How do I loop through that array again?”
In JavaScript, there are many ways to tell the computer to do some task, so it especially encourages focus on syntax because you’re always looking for the “right way” or the “best way” to write the code. For this reason, it’s easy to spend all your time memorizing syntax and fail to understand the underlying concepts.
Syntax can be Googled, but concepts drive your programs.
2. Start building from scratch.
The best way to focus on concepts is to build out simple projects while you learn. It’s a bit like cooking. If you cook out of a cookbook only, you likely won’t be able to develop a sense for what flavors fit well together. Worse still, you’ll remain entirely dependent on recipes and miss the joy of creating something from scratch. As you learn, you’ll develop individual skills—how to boil, how to chop, etc. The best way to focus on the concepts (rather than merely syntax) is to take two individual skills and put them together without a recipe.
How do you “cook without a recipe” with your JS skills? Once you learn two concepts, try to creating something new by putting the two concepts together.
For instance, once you learn about variables and click events, see if you can build something without looking at someone’s code first. Don’t start by writing out syntax. Start by mapping out pseudo code.
Declare a variable with a string value
Write a click event to watch everything on the webpage
Write a function to log my variable to the console
Tell the browser to run my function when I clickHave you written any code? No, but you’ve thought through the concepts and thought about putting two concepts together in a step-by-step sequence. That’s the important and hard thing about coding. Again, you can Google syntax questions once you know what you need to do (e.g., “how do I make a variable with a string in JavaScript”).
With the steps set out, start trying to remember the syntax. Anyone can watch a tutorial and say, “that makes sense.” But once you open a blank JavaScript file, you’ll get a sense for how well you truly understand how to break down a solution and how well you remember the syntax. Start with what you know.
After you’ve spent 5 minutes trying to figure out how to make the two work with each other, start Googling like a regular developer. If you wait to look or Google until you have questions, you’ll both better remember the solution and also cement the concept.
And here’s the truth: forcing yourself to start with blank .js files will also help you remember syntax eventually. Focus on the concepts and you’ll get both concepts and syntax. Focus on the syntax and you’ll likely get neither.
3. Get comfortable with failure.
Perhaps my suggestion above sounds like the “slow” way to learn. Within reason, however, slowly thinking through your problem and mapping out your solution will end up being much faster.
There’s just one catch: you have to be okay with failing … a lot. You’re new. That’s why you’re here. Everyone fails—new and experienced developers alike. But the great developers squeeze every bit of learning out of their failures while mediocre developers despair over the error in the first place and miss the benefit.
4. Iterate, iterate, iterate.
If you’re learning correctly, you should be able to look back every few weeks and think, “Man, I was an idiot back then.” That’s part of the whole “getting comfortable with failure” thing.
Because you’re always learning, you’ll be tempted to constantly park on some old project and optimize, optimize, optimize. And with every new project you do, you’ll be tempted to spend hours getting your program to run .003 seconds faster.
While it is important to optimize, don’t let your growth in learning get in the way of your growth in learning. Focus on the concepts you’re trying to nail down.
In other words, if you’re trying to learn switch statements, don’t spend 40 minutes setting up a beautiful webpage with a fully-realized stylesheet. Get something ugly up and focus on switch statements. You can always iterate and make it better. But start with what you know or what you’re learning and then build upon it.
In other words, start ugly and go from there. Start with slow code and go from there. There is no “perfect way to write JavaScript” and those who spend all their time looking for the best way usually never find their way.
No matter how good you are, if you keep on actively learning, you will always look back and roll your eyes at previous work. That’s okay. In two months, you’ll realize there was a better way to write your function or loop through your array. Fine, change it then. For now, be comfortable with failing, iterate when you come back to stuff, and stay focused on stringing together concepts and making magic happen.
Let’s get going.