The Secret to Learning Code

Programming

Learning how to code can be a daunting task for anyone, whether you’re a complete beginner or an experienced professional. Just getting started is hard enough, but sometimes the best still get stuck.

Blocks of code on a computer screen.

Reverse Engineering

If you’ve never coded before, Treehouse is a great way to get started. Once you have your footing and you know a language or two, it’s easy to understand code you’ve never seen by reverse engineering, or as I like to call it, “breaking stuff” to see how it works. This method rarely gets the emphasis it deserves (especially in formal educational environments), yet it’s amazing how useful it is for learning. In fact, being able to understand code without any instruction is an essential job skill, because it’s common for programmers to maintain code they didn’t write themselves.

Now before you take a proverbial hammer to your favorite website, you should know that you can’t just break anything with reckless abandon and expect to learn something. You have to take a methodical approach and break one thing at a time, then analyze the results of your changes. When breaking things, you should be looking for the relationship between parts to understand their function in the whole.

Learn to Break Stuff

Recently I was forced to do some reverse engineering in order to advance my own knowledge. I’ve become interested in 3D programming in the browser, which is a mixture of well explored territory and new frontiers. Three.js is an abstraction for a much more complex language called WebGL, and while three.js is useful enough to be worth using, it’s also poorly documented. How do you learn code without an instruction manual? Reverse engineering is the only way. The following is a code example that uses three.js to create a light:

var light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);

If you have some programming experience, you might be able to read this and figure out most of what’s happening here. If there are any blanks or assumptions you’re unsure about, you can test them with the following techniques:

  1. Delete one line at a time to see if it’s necessary for your goals.
  2. Delete one line at a time to better understand its function. Even if you think you know what a line does, try deleting it anyway to test your assumptions.
  3. Change variables and function arguments to see if you can manipulate them in a way that matches your mental model.
  4. Swap the order of various lines to see if things can be done “out of order” or if there’s some significance to the sequence of operations.

As you test each line, you’ll start to build a mental model and make corrections to other assumptions you made previously. Soon, the whole picture will start to make sense. Using the techniques on this example, we might discover that we can change the position of the light by reseting the XYZ coordinates, and that each line is necessary in order for the whole thing to work. Another tip to get going more quickly is to use contextual clues, as many languages are quite similar. In the example, a hexadecimal value is used when creating the light. If you’ve ever coded in CSS, you’ll probably recognize this as a color value, even though the formatting is a bit different.

Reverse engineering isn’t the only way to learn and it should always be backed by more formal material whenever it’s available. In fact, I would argue that tutorials become more valuable once you have some of the context mapped for yourself. If you learn best by diving into problems head on, breaking stuff is one of the fastest paths to understanding.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

8 comments on “The Secret to Learning Code

  1. I find the hardest thing about reading code is figuring out where to start. How do you identify which functions/classes are the essential “core” of the program and which merely support or add features. I suppose deleting entire functions might help there, too.

    • Think in terms of verbs and nouns. Compose your functionality from those units. Eventually, group things together into classes that model your objects.

  2. After many years of print design I’ve finally made the jump to webdesign. At first CSS, PHP, JS & HTML seemed too much for me to handle. There’s just so much to know. I started breaking it down into smaller pieces by building my own website. I started to look around for sites that employ a feature I’d like to have on my site as well (interactive features etc.). I’m taking their code and delete or add until it does what I want. If I get stuck or need code, w3schools or codeacademy has helped me a lot to find the missing pieces or code. My biggest problem was to understand the basics like classes, ids, selectors and how they relate to each other or need to be formatted. But I’m getting better every day and it all is starting to make sense little by little. Still got a long way to go but I’m getting there. I just added your site into my reference toolbox. The more the merrier.

  3. Hello there, I found your web site by means of Google even as searching for a comparable subject, your website came up, it seems great. I’ve added to favourites|added to my bookmarks.