How to Get Past JavaScript Tutorials: Copy & Paste

"I can follow the tutorial perfectly, but when I try to do it by myself, I have no idea I'm doing."

Sound Familiar?

It's one of the most frustrating situations you can experience as a developer because... what do you do? You were trying to learn how to create projects, and the tutorial was supposed to teach you that... but it didn't work. What are you meant to do now?

You're almost on the right path – you need to work on your own projects. You just need some help in working out how.

Let me ask you this: why do you think that you're able to understand the tutorial perfectly? Because you're copying someone else - and there's a lot of value in it.

In an ideal world, you'd have an expert sitting next to you all day telling you precisely what to do - but that's a luxury very few people have. Fortunately, you don't need one. Others like you have asked the same questions thousands of times, all you have to do is copy the answer.

The issue is that with a tutorial, you copy everything. You don't get the opportunity to make the decisions that you need to make to code by yourself. Instead, focus on copying small sections of code and composing them into a broader application.

Why you should Copy & Paste

Programmers are absolutely shameless about copying each others code. We joke about it regularly - and it's our most important skill. Sharing and copying solutions are how we grow as individuals and as a community.

Liquid error: internal

Despite this, it's not uncommon to see advice that you, as a beginner, shouldn't copy code. The thinking is you won't learn anything by copying. This advice, however, ignores the actual difficulty of copying code.

Make no mistake, copying and pasting code isn't easy. If it were, programmers would be minimum wage workers. It can often take a lot of work and knowledge just to know which code to copy, let alone how to fit it all together.

What you need to learn at this point is how to solve problems - you need to work on build projects with JavaScript. Copying code is a perfect way for you to fill the gaps in your knowledge while you're learning that.

How to code with Copy & Paste

Before we begin: you need a project. It's hard to write code if your code doesn't have anything to do. You want to start simple and progressively get more ambitious with your projects as time goes on.

Coding with copy and paste is all about breaking your project down. This is the hard step - you need to take your project and deconstruct it.

• Can you divide your project into distinct parts? Can you divide those parts further?
• What does each part do (it's behaviour)?
• What actions do you need for each behaviour? Can you divide those actions into smaller actions?

This step isn't easy. It can be hard to know what actions to take when you haven't encountered the problem before. Your list might be incomplete, or wrong. It doesn't matter all that much - if what you have doesn't work, you can just update the list.

With these actions, there are two golden rules to keep in mind:

• The more specific an action, the easier it's going to be to find code for it
• The less complete the portion of code you copy, the better it is for learning. This is why tutorials don't work.

Translate actions into code

Before you start googling how to do each action in your list, take a moment to see if you can do any of them by yourself. This is an excellent way to check what you've learned. As you get better, you'll find yourself needing to copy less and less.

Write down your answers directly into the code. It doesn't matter if you leave sections incomplete. Put a comment in indicating that you intend to put more code in.

/**
* Function that changes fields based on a dropdown value
*/
function updateFields(event) {
    let value = 0; // TODO: Get the value from the dropdown

    if (value === 1) {
        // TODO: Set value of form field
    }
}

//TODO: Add event listener to dropdown

Now what you're left with is a big pile of actions that you don't know how to do – This could be most of your project, or this could be a single step. Either way, it's time to look them up in Google.

Finding code snippets can be surprisingly challenging. How easy it is to find a snippet depends on the words you've used in your search. While you're looking at answers, it's a good idea to search for other keywords that people use. For instance, I've used dropdown in the snippet above, but it's represented by <select> in HTML. Calling it "select" may return more relevant results.

There's also one final problem: You can't put distinct pieces of code together, and expect it to work. More often than not, you'll need to change code you've copied to make it fit.

/**
* Function that changes fields based on a dropdown value
*/
function updateFields(event) {
    let value = event.target.querySelector(':selected').text;

    if (value === 1) {
        document.querySelector('#lastname').value = '';
    }
}

let dropdown = document.querySelector('#dropdown');
dropdown.addEventListener('change', updateFields);

Once your project is working, you can consider this step done. You can stop any point from now, fully satisfied that you succeeded. However, it's a good idea to review your code and see if there's anything you can improve.

You've made it work, now make it good

Once you've copied and pasted a bunch of code together, chances are it's a mess. It's no surprise – your code is Frankenstein's monster, sewn together from unrelated parts.

If your project isn't a throwaway, it's a good idea to go through again and look for any improvements you can make. This can include renaming variables, using newer APIs, etc. At a minimum, you should aim to make the code readable.

This is a chance to make the code your own. You need to make it presentable in case you decide to revisit it, or if it becomes a part of your portfolio.

What to do next

Growing as a programmer is an iterative process - you can't expect to be an expert after a single project. You should get into the habit of doing dozens of small projects, both to learn and to form a portfolio.

The trick here is to keep your projects small so that you can finish what you start, and to consistently set aside time to work on them. Finishing a project is much harder than starting one, and it's a valuable skill that employers will be looking for.

Are you stuck on JavaScript Tutorials? Sign up to my newsletter for more helpful articles to get you moving again