How To

How to learn JavaScript

1 Jun , 2017  

A lot of people ask – how should I learn JavaScript?

It’s a great question. Why?

First, because JavaScript is one of the most in-demand skills right now, and it underpins nearly all technologies used for web development.

So of course lots of people ask how they can learn it.

I cover resources and tools we need for JavaScript in 2017 in the video below, but I’ll go through the exact steps to learn JavaScript in the rest of this article.

JavaScript has a reputation as being a simple language that’s easy to learn. Is that true?

No, not really.

I mean, as programming languages go, it’s pretty straightforwardat the beginning.

But anybody’s first programming language is going to be daunting.

The thing is, learning the language is just a small part of learning JavaScript. As soon as you ask about learning JavaScript, people start talking about npm and Node and React and Angular and ES5 and ES6 and…

There just seems so much to learn.

So the most important question after ‘how do I learn JavaScript’ is ‘where do I start?’

How to learn JavaScript and build awesome projects

 

How to start learning JS

First, we need to get the fundamentals down. This means learning programming concepts (if you haven’t learnt them already) and then learning JavaScript syntax.

Learning JavaScript syntax isn’t as straightforward as it should be at the moment, because the industry is half-way through changing standards. The old standard is ES5 (short for EcmaScript 5). The standard being adopted is ES6 (EcmaScript 6).

The main problem with this is that when you’re reading ‘how to do X in JavaScript’ articles on the internet, sometimes it can look like they’re talking about completely different languages!

So which should you learn?

Since ES5 is almost entirely a subset of ES6 (meaning ES6 is ES5 + goodies), start with ES5, then get familiar with ES6.

Click here for your free HTML, CSS and JavaScript E-book

What about more advanced JavaScript topics?

Yeah, how about learning closures, and promises and … ?

If you’re just starting out, stick to vanilla JavaScript. The cool thing is, as you take on different projects and start learning different frameworks (more on that soon) you’ll be forced to start using these concepts.

That’s a great time to start learning them!

What about learning other technologies besides JavaScript?

Hey, JavaScript doesn’t exist in a vacuum. It’s almost always paired with other technologies.

That’s half the problem, right?

Once you start looking into these other technologies, JavaScript starts to feel like one piece in a very big jigsaw puzzle.

If you code in JavaScript, most people assume you’re going to know HTML and CSS. You don’t have to have a deep knowledge of them, but the fundamentals will be fine.

Interesting fact: these technologies go a lot deeper than people realise. There are a lot of experienced developers who have to look up CSS rules like

(Thanks to Heydon Pickering for that one!)

Once you’re comfortable with HTML and CSS, you won’t need to learn anything more for a while.

As with the more advanced JavaScript topics, they’ll come to you as you take on more ambitious projects.

Your first JavaScript project

How to learn JavaScript - get started

There’s nothing better for learning a topic than turning theory into practice, and you do that by implementing a project.

Your project doesn’t have to be the next Gmail (a famously complex JavaScript project), but just something simple you can use yourself.

This could be a simple to-do application, or a little widget you can put on your website.

The point is, you use what to you know to create something.

There are a couple benefits to this.

The first is that when you start to build something even a little non-trivial in a programming technology, you’ll be introduced to some parts of the technology most tutorials don’t cover.

Every technology has its share of rough edges, and this is where you’ll meet them. For all its advantages, JavaScript has more than its fair share of rough edges!

But that’s ok, getting to know them is a normal part of the path to proficiency.

The second major benefit is that doing a project means you’ll have something to add to your portfolio. A portfolio item is proof of your ability. A strong portfolio is the first step to paid work.

And then finish your first JavaScript project

This is harder than you’d think.

Every project is going to have a few surprises, and pushing through to the end takes some grit.

Here’s why – when things don’t go according to plan, it’s easy to start thinking “what’d I do wrong? Maybe I’m not cut out for this,” and so on. Just remember that everybody runs into problems, and the only way you’ll get better is to push through them.

The really tough part is that most of the really tough problems seem to show up at the end. This is where our assumptions turn up to bite our butts.

Once again, this is totally normal. There’s an old, old – like really old joke that goes like this:

“The first 90% of a project takes the first 90% of the time to complete – how long does the last 10% of the project take?”

“The other 90% of the time.”

Boom-tish! Funny, but true. The last 10% of a project is where all the gnarly details finally come to light. Pushing through that last part and completing the project is what will set you apart.

Because now you’ve got something solid to put in your portfolio.

Oh yes, didn’t I mention that?

An online portfolio will take you from a hobby coder to someone people take seriously, because you’re providing rock solid proof of your skills. So yes, simple as they are, stick your first projects into an online portfolio of some kind.

Click here for your free HTML, CSS and JavaScript E-book

Level up your JavaScript programming skills

So far I’ve discussed this as if you’re working in a vacuum, and it’s true that programming can be a solitary exercise (but there are excellent reasons for it not to be!).

The thing is, it’s easy to get in a rut working on your own.

Being in a rut is a great way to consolidate bad habits (you won’t realise they’re bad habits!) and to never be exposed to better ways of doing things.

There are great ways to avoid this.

The simplest is to attend meetups in your area that do Code Jams/Katas/Dojos etc. Don’t be intimidated by being a beginner. Just turn up and let people know you’re just starting out. It’s a great way to meet people who can help you learn more, and expose you to better ways of doing things.

Another option is to participate in open source projects on Github. This can also be an intimidating thing to do at the beginning. It’s easy to fall in the trap of thinking “who am I to assist in this vast, complicated project?”

While it’s not easy to dive in and start coding, there are lots of small tasks that need beginners to help out.

These include writing documentation, improving the wording used in user interfaces and adding tests. As you contribute to tasks like these you’ll learn your way around the project and eventually be able to help with actual coding. Project maintainers have high standards, and they’ll help you level up to achieve good outcomes for the project.

This is a SOLID intro to getting started in open source projects.

Get ambitious with your JavaScript projects

How to Learn JavaScript - project tools
Once you’ve got a couple projects under your belt, it’s time to get ambitious.

Choosing something big to chew on is a great way to continue improving, but it’ll also let you in on a little secret. Some things that look really intimidating aren’t actually that tough (the flip-side of that is that some things that look dead simple are actually quite tricky!)

Choose something that seems like a big ask. Get researching on how to do it, and get started.

The great thing about this is that projects that look tough to you are going to look super impressive to other people once you’ve finished them (because of course you’re going to finish them and put them in your portfolio, right?)

What’s even better, this is where you’ll start running into interesting concepts like closures and promises: the more advanced topics that I said not to worry about at the beginning. As you start dealing with events and timers, you’ll find yourself using closures. Need to make some network requests? Time to look at promises.

Click here for your free HTML, CSS and JavaScript E-book

Time to get paid with JavaScript

The truth is, you don’t need to be a great coder to get paid doing it. Just ask anyone who’s tried hiring freelancers!

Everybody starts somewhere, and as long as you’re willing to put in enough effort to do a great job, there’s no reason not to get started as soon as possible.

This is where that portfolio comes in. Now that you’ve proven that you’re capable of executing some interesting and fun work, you can check out sites like freelancer.com and upwork.com and start applying for simple jobs.

Because those sites do have simple jobs that most newbie developers can take care of. They might not be fun jobs at the start (e.g. edit a few hundred HTML product pages manually), but once you’ve got a few jobs under your belt, you can start aiming higher.

But why work on these sites at all? They do have a reputation for pushing rates for programmers down.

The thing is, when you’re being paid to do this work – even small amounts – it’ll make you focus like crazy on doing a good job.

And the first time someone pays you for your coding – you’re officially a professional programmer!

Learn a JavaScript framework

How to Learn JavaScript - serious tools

It’s true that vanilla JavaScript will only take you so far. Frameworks for building web applications take a lot of the grunt work out of projects, and multiply developers’ efforts significantly.

But people get caught up on which framework to learn – Ember? Angular? React? Vue?

These frameworks and libraries will come and go. The thing is, they’re based on concepts that will be around for a long time, and you can bet those concepts will appear in the next framework as well.

So whatever framework you’re learning, remember you’re learning about component based development, functional reactive programming, observables, pipelines, routers and so on. You’ll be meeting them again in the future.

Of course you’ll want to implement some projects that use whichever framework you choose.

And it’s now that you’ll start to meet members of the wider JavaScript eco-system: package managers, build tools and so on.

This is the best time to get started learning these tools, since they’ll really help you manage your project development.

Click here for your free HTML, CSS and JavaScript E-book

The journey never ends

Let’s do a quick recap on how you can learn JavaScript:

  1. Learn the basics of JavaScript syntax
  2. Start and finish your first, simple JavaScript project
  3. Avoid getting in a rut: meet other programmers and read awesome code
  4. Challenge yourself with more ambitious projects
  5. Take on a little freelancing work
  6. Learn some frameworks

Of course, I’ve only been talking about JavaScript in the browser so far. There’s also server-side JavaScript, not to mention other programming languages, programming paradigms and platforms.

There’s always going to be more to learn, even if you just stick to browser-based JavaScript.

Since I love learning new stuff, this makes me very happy. If you’re that kind of person as well, you’re in the right place.

The question is, what’s going to be your next step in your JavaScript programming journey?

By


2 Responses

  1. Ankur says:

    I know JavaScript do you recommend React or Angular?

    • Luke says:

      That’s a big question! 🙂

      In short – React is fast to learn, but Angular gives you more. What are you priorities?

Leave a Reply

Your email address will not be published. Required fields are marked *