Intro
I often get/see the question of how to go from understanding the building blocks of JavaScript (data types, variables, conditionals, loops, functions, etc.) to actually building things. Hopefully I can offer some help here.
Most people give the advice to start with small goals and work your way up. I would say exactly the same if I were limited by text and time.
But let’s be honest, figuring out what those small projects should be can be a challenge in itself. It’s tough as a beginner to know how to experiment.
I’ll expand to the best of my ability in this post with text, but I will link the YouTube video I made at the bottom in case you want to see a code demonstration with more detail that is difficult to accomplish with words.
Explanation
Defining Small Goals
Anyway, to expand a little in words while we’re here, I believe it’s easiest to learn through frontend JavaScript, interacting with HTML and CSS. This way you can apply variables, functions, loops, and conditionals to practical, visible things.
You can play around with text, lists, cards, forms, drop-downs, images, modals, and more. Think of changing visibility, size, color, boldness, capitalization, item addition/removal, and so on. These small goals will reinforce your understanding and provide a foundation upon which you can build more complex applications.
The Mentality
Also, transitioning from learning to doing requires a mindset shift. Embrace experimentation and don’t fear making mistakes. Accept that you will initially have no idea how to accomplish these tasks, but they’re so small that with repetition, you can start to see the patterns in how the JavaScript building blocks are used. Don’t be afraid to look at the answers, but make sure you take the time to understand the answers (Don’t just copy and paste them then move on.).
Scaling Up
As you gain confidence with small projects, start scaling up. Eventually try to replicate real websites’ UIs, then you can try using sample data from free APIs. Before you know it, you’ll have confidence in your frontend abilities, and you will have learned how to use the JavaScript basics along the way.
Then you will be able to create your own applications, utilizing a combination of JavaScript fundamentals. This might be an interactive game or a web app that fetches data from an API. Remember, every complex project is just a series of simple steps combined. With every next project, you will see this breakdown more easily.
Thanks for Reading!
Here’s the Youtube video: