How to Learn to Code

The most common question I get when teaching workshops is “How do I learn to code”? The fact that I’m being asked this question after the workshop ends tells me that a weekend workshop is obviously not enough time to learn code. At first the question made me feel bad as though I didn’t do a good job of explaining the concepts but it turns out that learning to code just isn’t something you can learn in a weekend. That’s not to say coding bootcamps are a waste of time. On the contrary they’re actually very useful. It’s incredibly valuable to have an expert help you debug code and explain concepts that can sometimes be pretty difficult to understand when reading an online tutorial. The real value of these workshops is the ability to get immediate feedback and ask questions of an instructor but once the weekend is over the students are left to their own devices. I’ve been thinking of how we can help people want to learn to code a lot lately. If you’re wondering “how can I learn to code” then this post is for you.

Ask the right questions

StackOverflow is an amazing resource for getting your programming-related questions answered. I’ve asked and have answered many questions over the years and the most valuable thing I’ve learned is how to ask questions. Many beginners will ask “how do I get my code to work”? That may seem like an obviously horrible question to even mediocre developers but to a beginner they don’t know how else to ask it.

When you ask a question you need to follow these guidelines:

  • What are you trying to achieve?
  • What have you done to try to implement your solution?
  • What was the result of your code?
  • What did you expect would happen?

These are the four most basic debugging questions any developer could ask and they narrow down the possible solutions. In order to ask the right questions you have to be specific and to be specific you need to have another essential developer skill: the ability to break down a problem.

Breaking down problems (Programmatic thinking)

Programmatic thinking is another way of describing how one reasons about a problem and breaks it into smaller, more manageable steps. In any beginner programming course you’ll hear that “computers are dumb”. It’s true. A computer is dumber than a rock. It’s a series of electrical impulses being turned into individual instructions that result in a program. A computer’s strength, even the slowest, least powerful computer’s strength is its ability to do computations and take instructions faster than you can possibly imagine. In aggregate these instructions can manifest themselves in ways that make it seem like computers are very smart but really it’s the series of steps a programmer inputs in the form of algorithms that creates that illusion.

With that in mind, you need to remember how to break down problems into their component parts. Let’s take a real world example of an HTML based todo list.

The basic idea is that you have a form and a list on the page. When you add a new item using the form it displays in the list. How do you create a static todo list in HTML, CSS, and JavaScript? When you ask it that way its quite an endeavor but once you break it down into its component parts it becomes easier. There may be a lot of steps but in the end it becomes much more manageable. Here are the steps as I teach them:

  1. Create an HTML form with an input field and a button to add todo items to your list
  2. Create an HTML <ul></ul> tag to hold your list items
  3. In JavaScript you create an array of told your list of todo items
  4. When the form is submitted the following happens:
    • The form’s default action is stopped (because we want to use JS to render list items, not submit a form)
    • You save the value of the text input in a variable
    • Push the value of the input into your todo list array
    • Empty all <li> elements from the container <ul> tag
    • Loop over each element in your todo list array and append a new list item to your <ul> for each item you have saved

That’s it. Like I mentioned, it may look like a lot of work just for a simple todo list but the reality is that this makes things much more manageable and brings me to my next tip: Pick and problem and solve each part in turn.

Pick a project

The one piece of advice I tell students is to simply pick a project they want to build or a topic they want to know more about and begin creating it. Often times that project is a todo list or a blog. These are great starter projects because in their most basic forms they’re very standard, it’s easy to find resources to help you create them, and there really aren’t too many differeny ways to complete them. Once you’ve picked your project you need to break it down into small parts like I mentioned above.

Solve one problem at a time

Using our todo list example, asking strangers on the internet how to build a todo list is vague and not helpful. If you asked me how to do this I’d be pretty annoyed and tell you to Google it. But if you break down your project into smaller steps and begin solving them one at a time you’ll be in a position to ask better questions. I’m happy to help you figure out how to set up a click event listener in JavaScript. I’m annoyed by you if you ask me how to build a todo list which is the equivalent of asking me to just do it for you.

Solving one problem at a time also helps you learn more. You’re in a place where you know what needs to be done and when something goes wrong you can ask good questions like “why isn’t this event listener firing when I click the submit button on my form”. Even the small steps can sometimes be hard and the more sub-problems you solve while building out a larger project the more you’ll learn and the better developer you’ll become.

Read the error messages

Most web programming languages except for CSS and HTML have good or at least decent error messages when things go wrong. Read those error messages! I can’t tell you how many times someone has a syntax error in their code, their terminal or dev console tells them about it very clearly and they simply ignore it. They see red or the word “ERROR” and focus on how stupid they think they are or how dumb this whole programming thing is instead of what the error says. Even as an expert developer I don’t always know what every word or line in the message means but there are always clues like line numbers or phrases like “Syntax Error” that will put you on the right track. Often times error messages will at least show you where in the code you went wrong and more often than not it’ll tell you what the error is. I know stack traces can be overwhelming sometimes but expand that window, read the first few lines, and try to deduce from there what’s going on. If you can’t figure it out after that, then you can go ahead and start asking for help.

Be patient

Programming is hard. It’s so frustrating. People are used to simply clicking buttons and having things work just as the label advertises. In programming you have to build the label and the button. Little things like a missing semicolon, an extra space, or even capitalization can stop a whole program from running. Remember, the computer is stupid. Pay attention to detail. Keep trying. If you can push through those first few weeks or months of pain it’ll eventually click and you’ll begin to learn faster and faster from there. Remember too that programming isn’t for everyone and despite the new trend of telling everyone they should learn to code, some people just don’t have the aptitude or patience for it and that’s alright. I know how to change the oil on my car and do some basic maintenance but I have neither the patience or aptitude to learn to be a mechanic, professional or otherwise. The same analogy applied to programming. Keep at it, take breaks, and remember these tips as you continue on your journey.

Learn to code, Web development

« Organizing Express Routes You shoudn't need document.ready »