March 2, 2018
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!
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.
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.
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.
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!
Create a manual carousel that changes the image displayed on each button press. Similar to this.
Create a countdown timer that counts down to your next birthday. Similar to this.
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.
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’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!
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.
If you liked this post, get updates about new posts by signing up to my infrequent newsletter.