How to Learn from Tutorials the Right Way

Project tutorials are a very popular way to start building your first few projects. But unfortunately most people go about it in the wrong way and don’t end up learning very much in the process.

In this article, I will provide some tips on how to properly learn from tutorials and gain confidence to start building your own projects. I will also provide advice on how to avoid tutorial hell.

But first, what is tutorial hell?

Help! I am trapped in tutorial hell

When I first started learning how to code 9 months ago, I didn’t understand how to go about building my first project. So I signed up for a Udemy course and learned how to build a restaurant page with HTML and CSS.

I loved the final result and decided to sign up for another Udemy course. I learned how to build a product landing page with some cool animations.

I was proud of these two projects and decided to go on a shopping spree and buy four JavaScript courses on Udemy. I built a couple more small JavaScript projects and now I was interested in building something on my own.

But when I opened up my code editor, I was drawing a complete blank. I had no clue how to get started or how to research.

It then dawned on me that for the past month, I was trapped in consuming tutorials without a game plan. I had the opportunity to learn from these videos, but I went about it in the wrong way.

All I was doing was coding along with the instructor and jumping from project to project. I didn’t stop to ask questions and process what I had just learned.

Tutorials can be a good learning tool, but you have to go about it in the right way or else you can become dependent on them and not learn how to code on your own.

What is the right way to learn?

Here are my five steps for learning with tutorials:

1. Stop and think about what you are going to build. It would help to write down the basic components of the project.
2. Try building some of it own your own first. It is totally fine to make mistakes because it is part of the learning process.  
3. Watch the video and pause periodically to process the information and ask questions. Remember that Google is your friend.
4. Take the finished project and break it. You can learn a lot from error messages.
5. Rebuild the project from the beginning but in your own way. This will test if you really understood the concepts in the tutorial.

Step 1: Think about the project first

A lot of beginners, including myself, will just dive straight into the video without first thinking about the project. A key part of becoming a developer is thinking about the problem first and then worrying about the implementation.

Let’s say you want to watch a tutorial on how to create a random background color changer. Your basic thought process might look something like this:

• create a collection of different colors
• create a button that when clicked will change the background color
• create some sort of random function for the color selections

Even if you don’t know how to implement that into code, at least you are starting to think about the problem.

Step 2: Try building it on your own first

A lot of people are afraid to build something on their own because of the fear of not having the skills or knowledge. But there is nothing wrong with at least trying some things first.

Before you watch a video, you could try to translate step 1 into code. If you Google “collection of colors JavaScript”, then one of the results will mention an array.

Or if you Google, “random function JavaScript”, then the first result will be for Math.random().

This is a way that you can slowly start to translate step 1 into code. It is fine if your code is not 100% correct.

The goal is to start learning how to research and think about the problem first.

Step 3: Pause the video to process and ask questions

Now that you have thought about the project and started trying some things on your own, you are ready to start watching the video.

I would not advise you to sit down and watch the entire video without stopping. Your brain can only consume so much information at once.

It would be better to periodically pause the video to process what you have just learned. It will also give you an opportunity to research concepts that confused you in the video.

Asking questions and researching is an important skill for becoming a successful developer.

Step 4: Intentionally break the finished project

Once you finish the video and the project is complete, I would challenge you to break it. Creating small bugs in your project will teach you to read error messages.

Error messages are not always a bad thing. You can learn a lot from these errors.

For example, maybe you were wondering why the instructor chose to use let instead of const in a particular situation. Try changing it to const and see what happens.

Is there an error message? If so, then read through that error message and you will learn why the instructor chose to use let  over const.

Step 5: Rebuild the project your own way

If you want to test yourself on the concepts learned in the video, rebuild the project in your own way.

You can start by choosing different styles or methods from the instructor.

For example, if the instructor used if/else statements, maybe you want to change it to switch statements. Or if the instructor used a simple for loop, maybe a forEach loop would work too.

You can also add an extra feature to the project. Maybe you want to create some custom animations or experiment with adding sounds.

Or maybe you want to take that single page application and turn that into a multipage website.

Learning how to rebuild the project your own way will start to give you the confidence to build projects on your own. It will also teach you how to research, ask questions, and debug your code.

Conclusion

Project tutorials can be a great learning tool if you use them the right way.

The wrong way would be to leap from tutorial to tutorial and not process what you just learned. You also don’t want to develop a dependency on these tutorials and get trapped in tutorial hell.

The end goal is to learn how to build projects on your own.  My five steps for learning with tutorials will help you get to that end goal.

1. Stop and think about what you are going to build. It would help to write down the basic components of the project.
2. Try building some of it own your own first. It is totally fine to make mistakes because it is part of the learning process.  
3. Watch the video and pause periodically to process the information and ask questions. Remember that Google is your friend.
4. Take the finished project and break it. You can learn a lot from error messages.
5. Rebuild the project from the beginning but in your own way. This will test if you really understood the concepts in the tutorial.

I hope you found this article helpful and will approach tutorials in a different and more effective manner.

Happy coding!