March 02, 2018
When I started learning JavaScript, I wanted to jump into building projects as fast as possible.
But, learning how to write a function didn’t exactly translate into “Make a rad website!”
At a certain point, watching tutorials and going through exercises stopped being good enough.
I had to take the leap. No more hand-holding. I had to start building things on my own.
I wanted to start simple.
Conventional advice says, “Build things that are useful for you.”
Well, the navigation bar on my portfolio still isn’t mobile-responsive. Fixing that is definitely useful for me.
I looked at the code from navigation bars on other websites. I could just rewrite it so that it would work on my website. This would be easy!
When I looked at the source code for mobile-friendly navigation bars, I got completely lost. There were multiple JavaScript files, all of which were 600–800 lines. I didn’t understand a thing, not even the comments.
I felt like I wasn’t ready to build things anymore. I needed to go back to tutorials. Maybe I’d try building something again next month…
I told a friend in a Slack chat about this, and she said to build something small, like a slideshow.
The fact that I could build something as small as a component on a website blew my mind.
I didn’t have to start with to-do lists, navigation bars, or movie trackers.
I could start with the smallest possible things I could think of.
I could even build a tiny app that just says “Hello [Name]!”
This was the first project I’d ever built.
It took me hours to build, but eventually, it worked. I could take an input from the user and display “Hello [Their Name]!”
That’s it. I’d built my first project.
Within days, I had moved onto vastly bigger projects like a to-do list and a color game.
I’m now learning about crazy stuff like design patterns, array methods, and object-oriented programming.
None of this would’ve been possible if I hadn’t taken the leap and built my first app.
If you’re struggling to apply the JavaScript you already know, the solution is simple: Build the smallest possible thing you can think of.
Then, make the next app a tiny bit bigger. Then make another, and another, continuing to scale up the difficulty.
Before you know it, you’ll start building websites that you can show off to friends & family.
Need ideas on where to start?
Create a small app that takes an input from a user and prints it back to them.
Requirements:
This project is from the exercise in You Don’t Know JS: Up & Going.
You Don’t Know JS is a free book series. Read the first chapter and complete the exercise at the end.
The extra challenge is to take it out of the console. Make it an app that responds to user inputs and buttons.
Create a tiny game that will determine the winner based on whether they flipped heads or tails. These results should be random each time!
Requirements:
Create a manual carousel that changes the image displayed on each button press. Similar to this.
Requirements:
Create a countdown timer that counts down to your next birthday. Similar to this.
Requirements:
Go crazy! You’ve made it past the tiny apps. You’re now ready to create your own projects.
Create a simple to-do list and make it work however you want it to.
Whether you want a thousand buttons or just one, this is YOUR to-do list.
This list only exists as a guideline. There’s no rules about what the “correct” thing to build is. Build whatever you want!
There’s a hundred alternatives out there. You can make accordions, quizzes, or just whatever you can think up.
The goal is just to build enough confidence and get enough practice to move onto bigger and better projects.
No. Your only goal is to learn how to make JavaScript work with HTML/CSS.
Don’t worry about making any of these apps pretty until you’re working on the to-do list.
If you like videos, I recommend The Web Developer Bootcamp. It’s usually on sale for $12–$15.
If you prefer articles, there are a plethora of resources that can get you started.
If you’ve never seen how a project is built before, it can be difficult to think of what you’re supposed to do.
I highly recommend going through Watch & Code. It’s a free course that walks you through building a to-do list. Gordon really understands how newbies think.
Google is your friend!
The most trusted resource for JavaScript is the Mozilla Development Network. You can also check StackOverflow to see if someone has encountered the same issue before.
Thanks for reading! If this helped, please give it a clap or two.
If you have any questions, leave a comment below or drop me an email.
If you enjoyed this post, follow me on Twitter for more JS goodness.
Join 1000+ people who are already being notified of new posts: