Photo by Victor Freitas on Unsplash

You have finished watching JavaScript tutorial and cannot wait to build projects. You've opened a new folder in the text editor and what greets you there is a blank screen. You feel lost and not sure where to begin.

Well my friend, welcome to the real world of programming!

This is where beginners get stuck and it's quite common to happen all the time. Fortunately, I have gone through this "from-tutorial-to-lost-in-the-blank-screen" phase and I can offer you some practical advice that will help you to get passed a blank screen and build a real project.

And while I'm at it, I'd like to mention that while this post is about JavaScript, the approach should also work for other programming languages as well.

Get familiar with the basic concepts

JavaScript has so many features and methods and it's nearly impossible to know them all. Your first task as a beginner is to learn the very basic features that will be useful to you as soon as possible. Here's the list of JavaScript that lets you do the practical things quickly.

• Functions
• Variable
• If else statements
• innerHTML
• getElementById
• onclick
• Style and className
• Arrays and Objects
• QuerySelector

Functions, variable, if-else statements, arrays, and objects are core fundamentals of programming which brings logic and interactivity of the website and you absolutely cannot afford to skip them.

The rest of them - innerHTML, getElementById, onclick, Style and className are part of the DOM (Document Object Model) which is, well to keep things short, allows you to connect HTML elements to styling (CSS in other words) and change the styles of these HTML elements using JavaScript.

Learn one concept at the time

Alright, I got the list, so how am I supposed to practice? Let's take a function for example. Read the documentation to get know everything about function - what is a function? What it can do? How does it work? and so on. You don't have to memorize them - just try to understand what it does conceptually.

Then play them around! Get the code examples from W3Schools on your text editor and make some changes, delete some lines and features, and see what happens. Spend the time as much as you need to get comfortable with function. It might take you days, but that doesn't matter. As long as you understand the concepts of function - you win!

When you are done with the function, do the same thing for the other features on the list above.

Build very small projects

As you are going through the features of JavaScript, you might feel tempted to create a big project. But don't do that yet! Why?

Because building big projects takes a long time to finish and on top of that, it gets complicated quickly as there are plenty of steps involved in building such big projects. You'll be overwhelmed by it and may stop learning JavaScript altogether. I was there before so I know exactly how it feels.

What should you do, then? One suggestion I can provide to you is building small projects.

The advantage of building small projects is you can reasonably complete them within two weeks or less. And when you do complete them, you'll feel a bit more confident going from "man, I can't do this" to "Hey, I think I can do that" which in turn gives you a motivation to build another small project. The more you build these small projects, the more you'll improve your JavaScript skills. At one point, you'll look back at these small projects and say, "Wow, I can't believe that I build them by myself!"

If building small projects seems daunting to you (which is okay to feel by the way), then break these small projects into mini-projects.

To give you an idea of mini-projects - instead of building a complete to-do list, just create a feature that will append a text after clicking the button. Or create a feature that will display a number on the screen instead of building a calculator. I know this may seem way too simple, but it will help to build momentum - at least for me.

If you got some ideas of mini-projects on your own, that's even better.

Take away

So this is how you practice JavaScript for real. You take the basic concepts of JavaScript which I've shown you in the list. Spend a good amount of time learning each concept at a time and play them around, and finally, build a small project.

If you find this post helpful, please share it so that someone will benefit from it.