JavaScript is a programming language commonly used for web development, among many other things. It works in conjunction with HTML and CSS to add dynamic functionality to websites.

About 97% of the websites in the world use JavaScript – so you can see that it's a popular and widely-used language.

JavaScript is the sauce of the web. It is what makes things dance. JavaScript enables web pages to do things like display updated content, show maps that you can interact with, and many other things.

Today we are going to learn how to learn JavaScript faster so that you can command JavaScript as you please and use it effectively in your projects.

What We'll Cover in this Article

  • How to learn JavaScript faster – an overview
  • How to practice coding in JavaScript
  • Why you should read the documentation
  • Some best practices you can adopt from reading documentation
  • How to contribute to open source projects
  • How to find projects to contribute to
  • Why you should build lots of projects
  • Resources that might inspire you to build projects

How to Practice Coding in JavaScript

Practicing is what makes you progress. Whether it's in music, dancing, singing, playing basketball – or coding.

Practicing is really repetitive and can be tiring, but it is what helps us and sets us apart in the long run. It is through the action of practicing and repetition that we are able to be good at all these activities. Coding is not different.

Work through Courses and Tutorials

Courses and tutorials are a good way to learn. You can find various learning materials from a lot of places on the web. If you would like to take a course on a particular programming language, you can find them on sites like LinkedIn, Codecademy, and Udemy.

If you like videos, there are many great channels on YouTube that post coding tutorials for free. My favorite one-stop-shop is  freeCodeCamp's channel.

Screenshot--125-
freeCodeCamp's channel on YouTube

These channels might focus on JavaScript or include videos on other programming languages as well.

A good rule that I use on YouTube is to check the number of views a tutorial has. This will help you know if it is a good one to follow along with.

Also the length of the tutorial matters a lot. Longer tutorials cover the basics well if you're just beginning to program in JavaScript.

Try the Free JavaScript Curriculum on freeCodeCamp

Screenshot--126-
freeCodeCamp's curriculum

FreeCodeCamp's curriculum is a perfect way to practice coding. It offers small challenges that you can practice and, once your tests pass, proceed to the next step. It almost works like a game without the gaming part.

You can understand how the language works by doing the challenges the curriculum offers. This is really nice for people who like playing games.

Here is an example of what to expect:

First, you will need to Sign in when you are accessing freeCodeCamp. This allows you to save your score/points.

image-187
sign in to freeCodeCamp

Here you can select from a variety of free courses. In our case, we only need the JavaScript course, so we select that one:

image-188
freeCodeCamp courses

I have already done all the challenges in this course, but if you were to begin, you start from the first one, Comment Your JavaScript Code.

image-189
Comment Your JavaScript Code challenge

Now, you will be able to learn as you code. You will also be able to run your tests which are at the bottom left of your screen.

On the right side, you can see that I have completed the challenge.

image-190
Attempt of the challenge

When you click Run the Tests(Ctrl + Enter), you get your points if you get it right. Since I have already done these challenges, my score will still remain at 100%.

image-193
Completed the challenge

Keep doing the challenges until you feel comfortable.

How to approach courses/tutorials to avoid tutorial hell

It is easy to fall into the trap of watching tutorial after tutorial – and not really retaining any information. Sometimes these tutorials come one after another like the episodes on a Netflix series.

I've been there. It happened when I was learning React for the first time. I followed through an online course. There was a hackathon coming up for which I needed to know React, and I deep dived into the course.

How I enjoyed it. The instructor was great! "How easy is React?," I said. I went to the hackathon and joined a team. With my new knowledge of React, I told them to leave the front end to me which required React. It was during the implementation that reality hit me. I couldn't write anything in React.

How I escaped tutorial hell

So I found myself watching tutorials a lot. And the defining moment for me was when I started implementing what I learned by coding along while watching the tutorial. I was able to create a project after watching a tutorial. I then created another one then another one and another one.

I was now ready to try out the projects on my own. Using the projects I created, I would borrow concepts from them like the navigation bar or the footer, and I would implement it in my new project. At the end, I was able to create a new project on my own without the help of tutorials.

Read the Documentation

The ability to read documentation is an underrated but important skill. Reading the documentation can give you a better understanding of the language.

Most tutorials will only teach you the basic things so you can get started programming in JavaScript. But if you fully understand the language and how it works, this can increase your skills ten-fold.

This reminds me of when I was learning how trains work. Well, a story for another day. :)

Also, reading documentation helps you understand the best practices of JavaScript. A lot of the time, without knowing best practices, you might fall into the trap of writing bad code that isn't efficient. This leads you down the rabbit hole of never ending inefficient code.

There are a lot of tools you can use to browse documentation. Some of these include Zeal, DevDocs, and Devbook, which are all free. If you feel that you want to understand your functions better, you can use their search functionality inside the app, and read more about it without having to Google. (Source: Bruno Edoh)

What you will learn from reading the documentation

Sometimes learning through a tutorial leaves you with more questions than you had answered. This is where documentation comes in.

A concept might get introduced by the course instructor that leaves you hanging. Fortunately, you can often learn more about that concept by going to the documentation.

For example, in this beginners course on learning JavaScript by Beau Carnes:

Beau has really brought out the concepts well! But if you feel that you would like to explore variables more, for example, you could go and google "variables in JavaScript".

Alternatively you can Google using this special method: the Search keyword will search the query within the website that you want. Let's use the MDN Web Docs as an example: "developer.mozilla.org variables":

image-199
Google search of variables on Mozilla website.

When I follow the link, it takes me to the documentation about variables.
Here in the documentation, you can learn what variables are. When I follow the link "Declaring variables in JavaScript":

image-200

And there I can learn a lot more about JavaScript variables.

image-201
Var, Let, Const on the MDN web docs.

When I scroll down a bit, I am able to learn more about Data types. Here you can explore more by following their individual links.

image-202
Data types in JavaScript


Some best practices you can adopt from reading documentation

The best thing about documentation is that you get answers to questions that you have not asked yet.

You can find all the functions that you are ever going in the documentation. If you skim through it, you might get an idea or two that can be very helpful in your future projects.

Another advantage is that it'll help you write efficient code. Reading documentation introduces you to better ways of writing your code. This helps you avoid hours of searching on Stack overflow and Google as to why your code doesn't work.

Contribute to Open Source Projects

Another great way to learn is to contribute to open-source projects.

There are a lot of open-source projects you can learn from and contribute to on GitHub. Some of these projects include:

You-Dont-Know-JS.

This repository will help you learn more about JS at a deeper level.

image-203
You Don't Know JS repository.

You will be able to learn as you contribute. Contributions to open-source can be as small as a typo fix. You can go through the README (which you can find on the repository's main page at the bottom) to get a better understanding of the project.

image-204

Some other contributions you can make include sharing suggestions in issues, helping to write blogs, and also coding.

If you are unfamiliar with the repository, or as a first time user, you can start with the issues labeled as good-first-issues on the issues tab.

image-207
Issues tab on GitHub for a repository.

Here is the link to the repository: www.github.com/getify/You-Dont-Know-JS

Make sure you have a GitHub account if you want to clone the repository or you have changes that you have made and you want to make a Pull Request to the repository.

Other projects you can contribute to and with an inclusive community are:

  1. Clean-Code-JavaScript. (github.com/ryanmcdermott/clean-code-javascript).
  2. wtfjs. (github.com/denysdovhan/wtfjs).
  3. ES6-for-humans. (github.com/metagrover/ES6-for-humans).

Read through the code of these projects and learn how they structure their code. You can also study the languages and frameworks they use which will help you practice and cement your learning in JavaScript.

The open-source community is also generally very welcoming. If you find a project that you like, give it a try!

How to contribute to open source

To be able to contribute to open source, you only need three things:

  • A computer
  • A GitHub account
  • A desire to contribute

To create a GitHub account, go to GitHub's website.

image-213
GitHub's sign up page.

Here, you can sign up for a GitHub account. After signing up, you sign in with your new credentials.

image-214
Sign in page of GitHub.

After signing in, you can now begin your journey into open-source development!

A good place to start is to search for any project that you would like to contribute to. We will use an example of a JavaScript project, hosted on GitHub.

How to find projects to contribute to

In the search bar, I type "JavaScript".

image-215

I'll then select "All GitHub" in my search to search the whole of GitHub. It's the one currently highlighted in blue.

When I search, it will bring me to this page.

image-217

It returns may repositories that I can contribute to, or I can just view their codebase.

image-216

There are more than one million repositories on JavaScript. In my case, I'll select the "Airbnb's JavaScript Style Guide".

image-218
airbnb's style guide.

By selecting this style guide, it takes me to their repository.

image-219
AirBnB's JavaScript style guide.

A good thing to note, as well, is that this repository is a good place to learn JavaScript. It will teach you the right way of writing JavaScript and also show you the bad way.

image-220
Airbnb's README example code on GitHub.

You can also select the "Issues" tab where you can look for an issue which you are comfortable solving.

image-221
The issues tab on GitHub's AirBnB's repository.

When you click on it, it takes you to the current issues that the developers of this repository are trying to solve and would appreciate your help resolving.

If the repository is not one which you are comfortable contributing to or it is not beginner friendly, you can check out other beginner friendly repositories like Web development resources or the EddieHub community where you can share resources, learn, and be part of a community.

Being a part of a community is great!

Web development resources repository

image-222
Searching on GitHub.

Remember to select All GitHub in the search since we want to search the whole of GitHub. Other options are in this repository to search within this repository and in this organization to search within the organization.

image-223
Web Development Resources repository search.
EddieHub Community

Still in GitHub, you can search for EddieHub where you can find a community of welcoming developers, ready to help new developers contribute to the open source repositories for free. It has great repositories where you can learn and contribute.

image-15

Build Lots of Projects

Building projects really helps you get a grasp of how software works.

Ever wondered how, when you click the mouse or keyboard, something happens – and you always wanted to know how? Making projects helps you understand all that.

The more projects you make, the better you will understand a topic. And the more you'll satisfy your maybe lifelong desire to uncover how it all works.

Making projects also toughens you up. You become a person who likes solving problems no matter how small or big they are. The ability to face programming challenges and solve issues that arise sells you as a problem solver. This ability is applicable everywhere in life.

"The best way to learn cycling is by buying a bicycle and to start cycling." Karlgusta.

To start riding a bike, you don't really read about the bicycle. Sometimes you don't know the bicycle parts, but you still cycle and learn along the way, if you are curious enough.

It's also in building projects that creativity meets technical skills. Most industries don't have a way where you can use your technical skills and your creativity together. But the software industry does.

You will not face the same problems each time you build something, so you will need to be creative to find solutions. The challenges, and the solutions you come up with, are where the fun and satisfaction lies.

It is a fine balance between documentation, tutorials, coding (mostly), and reading other people's code. Trust your gut in the process.

If you need guidance to boost up your confidence, here are some resources that might be of help.

Resources that can inspire you to build projects

Here are some resources that might be helpful in building your first JavaScript project:

  1. JavaScript Programming - Full Course (Free).

In this video tutorial by Per Harald Borgen, you will learn about creating a passenger counter app using JavaScript. You'll learn how to create a variable, add buttons, add event listeners, functions, strings, if else statements, arrays, and much more. All this is in JavaScript and its free.

In the same video, there is an even nicer secret gift! Building a chrome extension. Oops! I said it.

2. How to create a counter clock (Free).


In this video tutorial, you will learn how to create a counter clock that resembles a counter clock on an ecommerce site like Amazon.

3.  40 free JavaScript Projects for Beginners

In this article, Jessica shares 40 JavaScript projects you can build to practice your skills as you learn.

You'll build a responsive navbar, a countdown clock, a platformer game, and many more.

Conclusion

JavaScript is a powerful programming language and it's a great one to learn if you want to get started coding.

Your ability to read documentation will give you a better understanding of the language. It will also help you in understanding JavaScript best practices.

Practicing coding through the curriculum, learning through tutorials while coding a project, and contributing to open-source will set you apart from your peers. It will also make you a better programmer.

By making projects, you get to understand how JavaScript works and generally how software works. This also helps you unleash your creativity.

I hope you enjoyed reading this article. If you have any questions or suggestions, feel free to hit me up on Twitter.

See you soon!