How I Learn JavaScript and Build My First Project
Mohammed Asker
Posted on July 4, 2020
Photo by Raphaël Biscaldi on Unsplash
In this post, I am going to talk about how I build my first JavaScript project and also share everything that I know and the resources that I've used to go from zero to intermediate level.
I am doing this because as many of you may know, learning JavaScript as the first programming is extremely hard and I struggled so much to learn it. It's from my hope that by sharing my journey that you'll be inspired by it and continue to learn JavaScript knowing that you're not alone facing this challenge.
Start from the bottom
The very first thing I did to get started learning JavaScript is by watching a YouTube video called JavaScript Crash Course for Beginners by Traversy Media.
I choose this video precisely because this video taught me the basics which are enough to start practising on my own and I wasn't looking for a complete and comprehensive tutorial at the time. Also, it was from the same channel I used to learn HTML and CSS from the very beginning and helped me to learn basic concepts of web development.
When I finished the video, I was stuck - I don't know what's the next step to take my JavaScript skills to the next level. I'm not feeling confident enough to build projects right away since I have absolutely zero ideas on how to incorporate these JavaScript methods and concepts that I just learnt.
I mean what am I suppose to use Variable for? And Objects? And Loops? And what about Arrays? These concepts are not hard to understand when thinking them in isolation. But when it's time to implement these weird concepts into the projects, this is where the real problems start happening.
To put this in another way; I don't know how to apply JavaScript into real-world use cases!
The breakthrough
I was practising JavaScript mindlessly when I come across a video where the first "Aha moment" occurred and changed the direction of my JavaScript journey. This video is called Learn JavaScript in 7 Minutes by blondiebytes. (A tutorial, again? Seriously? I know, I know - But hear me out)
This short video explained JavaScript concepts in the simplest words and clearest examples possibly I got. The real gem is in the codes itself. In one of her examples, she hid the text with CSS and by using JavaScript, she revealed the hidden text by clicking the button.
Simply put, I was introduced to the world of Document Object Modal, or DOM for short. Why do these matters? Because for the first time since I begin to learn JavaScript, I start to connect the dots!
With DOM and event listener, I can attach HTML with JavaScript and use it to modify the elements based on my wants. And when I want to modify the elements logically, this is the moment where the programming fundamentals starts to fall into place.
Tired of repeating the same codes again and again? Use variables to reference the codes and save your time for more important things. Want the action to happen to the web page or HTML elements? Use functions to fire the events. Want the event to happen it conditionally? You guessed it - use if/else statements to do the actions if the conditions are true or not.
The second breakthrough happened when I read an article about why building projects can sometimes to be a bad idea for beginners. This article is very insightful, but to summarize, building projects right after tutorial will overwhelm you and may cause to quit learning JavaScript.
What they recommended instead is to build very small projects that do very simple functionalities. I downloaded a free JavaScript ebook from the same author and I used it as a guide to learn JavaScript effectively.
Using this approach and what I've learned from that 7 minutes video, I created a small game called JS Dojo and it was around that time where I meet the tech community on Twitter using the #100DaysOfCode and #CodeNewbie hashtags. These communities are indispensable to complete this mini-project.
Ready to build my first project
After months of building and abandoning many small projects, read countless articles and forums from Medium, SitePoint, FreeCodeCamp, and Reddit, and unlimited support from the people on Twitter, I am ready to build my very first JavaScript project and I decided to build the note-taking app.
I borrowed some code snippets from my learning projects to use it as the foundations, but otherwise, most of the functionalities and styling are done by myself and have consulted Stack Overflow and Twitter for help whenever I got stuck for more than a day.
It took me almost 3 weeks to complete it and while it still has bugs and maybe ignoring best practices, I'm very happy with the results and add it in my portfolio.
Conclusion:
My journey of building a first JavaScript project has taught me so many valuable lessons and these takeaways from the lesson:
- Learn DOM and event listeners after learning the basics of JavaScript. It is probably the closet thing I find intuitive when learning JavaScript. I wish I learn it sooner.
- Don't be afraid to ask questions if there's something you don't understand or need to help fix bugs. Sometimes, the act of asking questions alone will be the key to understand the concepts and solve the problems. Some good places to ask questions including Stack Overflow, FreeCodeCamp forums, DEV, and Twitter using the #100DaysOfCode and #CodeNewbie hashtags.
- You don't have to learn everything about JavaScript - just knowing the basics and DOM are enough to get started building amazing things. I've been learning it for over 1 year now and there are still so many things I don't know about JavaScript and I'm learning it almost every day.
- And the most important of all, be patient! Learning programming or any hard skills takes a long time and you won't be able to master it overnight. You will acquire this skill as long as you continue to put effort into learning it, practice it consistently, be persistent in time of hardships, and take an occasional break to help you absorb information and give your mind a time to rest.
And before I wrap up, I just want to say no matter how hard it will be, you can without a shred of doubt, learn JavaScript! You can do it!
Resources:
Here is the list of all resources that I have personally used them to help me learn JavaScript. Without them, I've probably had never made this far:
Posted on July 4, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related