Skip to main content Accessibility Feedback

Learning how to start JavaScript projects from scratch

Whenever someone signs up for my Daily Developer Tips newsletter, they get an email from me asking:

What’s the biggest challenge you face as a web developer?

For a long time, the most common response was, “Keeping up with all the changes.” And that’s still a big portion of the responses I get.

But recently, I’ve started to see another reply become a lot more common.

I’ve memorized all of the different JavaScript methods, browser APIs, and techniques. I’ve taken a bunch of tutorials. But when I sit down to start a project from scratch, I have no idea what to do.

Today, I want to talk about how to break past this hurdle and feel more comfortable taking on projects from scratch.

If you feel like this, you’re not alone

I struggled with this same thing so much when I was learning, too.

I found picking up the basics of HTML and CSS a little tough, but JavaScript was incredibly difficult for me to wrap my head around. I started and quit countless tutorials. I failed tech interview after tech interview for two years.

I even started to feel like maybe I just wasn’t cut out for this profession at all.

Let’s talk about how to move past it and become a kick-ass coder.

Opening up your text editor should be the last things you do, not the first thing

Coding is problem solving.

When you start working on a new project from scratch, the first thing figure out isn’t what methods, APIs, or techniques to use. It’s what steps you need to take to complete the task or solve the problem.

For example, let’s say I wanted to build an app that calculated how much to leave for a tip based on the total cost of the bill.

I’d start by pulling out a piece of paper and a pen (yes, I still do this after more than seven years of coding) and writing down what steps I need to take to get that number.

  1. I need to get the total amount on the bill.
  2. I need to get the percentage to use for the tip (20% of the bill? Less? More?).
  3. I need to multiply the total by that percentage to get the tip amount.
  4. I need to add the tip amount to the total to get my final number.

Once you map it out like this, figuring out what specific methods, APIs, and techniques to use becomes easier, because you have a plan you can follow.

The specific methods and APIs don’t matter as much as you think they do

It’s really, really easy to get lost in the details of the code.

Looking at the tip calculator example again, for each step, there are several different ways you could approach each step. The details don’t matter as much as you think they do.

  • Should you use getElementById() or querySelector() to get each of the fields?
  • Should you use parseFloat() or Number() to get the field value into a number you can do math with?
  • Do you update the UI as the user types, or do they have to specifically submit a form?

Working code is better than perfect code. Perfect is the enemy of good.

Your first attempt will almost always be meh at best. Get something that’s good enough and works, and refine it later. Don’t let picking the perfect approach prevent you from making anything at all.

You don’t have to do this alone

My Vanilla JS Academy is a project-based training program designed to help you learn to solve problems and think in JavaScript.

Here’s how it works:

  1. Every other day, you get a project to work on, 1-3 short lessons that provide some background, and a template to help you get started.

  2. On the in-between days, I share my approach to the project and some of the common challenges and “gotchas” that students often run into.

If you get stuck, there’s a 24/7 private Slack channel exclusively for students, and video office hours every few weeks.

If that sounds interesting, today through Tuesday (April 21), you can get 40% off using the code EARLYBIRD at checkout.

Here’s what people who have taken the program have said about it…

Tired of tutorials? Want to really dig in and work with other developers on how to become a vanilla JS badass? I can't tell you how much I've learned from Chris Ferdinandi and his Vanilla JS Academy.- Ben Rudolph
I’m loving the Academy and I don’t want it to end! 😢 For me this is priceless. I don’t work in tech yet and to be able to do those mini projects and discuss the code and best practices with you guys is a great learning experience. The pace of the course is nice too because it keeps me busy and that helps me feel more comfortable with the syntax and methods. 💯- Giamma Carioca
In terms of knowledge gained per effort expended, this course is hands down the best I've ever tried. More than just the content, it is the growing confidence that maybe even I can actually do this. I feel like I am beginning to know what I don't know. That is huge. Well done.- Stewart Davis

If you’re interested in the program, don’t forget to sign up before Tuesday so that you can take 40% off with the code EARLYBIRD at checkout.

Click here to register or learn more.

And if you have any questions about the program, please reach out and let me know.