How to Go From Knowing the Basics of JavaScript To Actually Building Websites

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.

Project Ideas to Bridge The Gap

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?

Here’s a progression of 6 projects to take you from nothing to your first to-do list:

1. Hello Name!

Create a small app that takes an input from a user and prints it back to them.

Requirements:

1. It should ask the user what their name is with an input element.
2. There should be a button that triggers the output.
3. The output should say “Hello NAME!”

2. Phone Price Calculator

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.

3. Luck-Based Game

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:

1. It should have a button to flip the coin.
2. It should compare the results of the flip to the results of the computer’s flip.
3. It should display a “YOU WON!” or “YOU LOST!”
4. The color of the text should change depending on whether the user won or lost.

4. Carousel/Slideshow

Create a manual carousel that changes the image displayed on each button press. Similar to this.

Requirements:

1. There should be a left & right button that cycles through existing pictures.
2. It should display the corresponding picture depending on which buttons are pressed.
3. Left & right buttons should adapt dynamically to a minimum of 4 pictures.

5. Countdown Timer

Create a countdown timer that counts down to your next birthday. Similar to this.

Requirements:

1. Set an end date.
2. Calculate time between now & then.
3. Display the clock.
4. Stop the clock & display a message once it reaches 0.

6. To-Do List

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.

Some Tips on Building Projects

1. What if I don’t want to build these?

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.

2. Should I be worried about styling?

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.

3. What if I don’t know how the DOM works?

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.

4. When I see the blank editor, I freak out!

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.

5. What do I do if I get stuck?

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.

Conclusion

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.