tutorial hell - freeCodeCamp.org

How to Learn from Tutorials the Right Way – and Not Get Trapped in Tutorial Hell

Jessica Wilkins — Fri, 26 Mar 2021 17:15:22 +0000

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

_Photo by [Unsplash](https://unsplash.com/@wanderluly?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Ludovica Dri / What is the right way to learn?

_Photo by [Unsplash](https://unsplash.com/@jcosens?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Jonathan Cosens Photography / 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.

Stop and think about what you are going to build. It would help to write down the basic components of the project.
Try building some of it own your own first. It is totally fine to make mistakes because it is part of the learning process.
Watch the video and pause periodically to process the information and ask questions. Remember that Google is your friend.
Take the finished project and break it. You can learn a lot from error messages.
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!

How I Escaped Tutorial Purgatory – and How You Can, Too

freeCodeCamp — Mon, 23 Nov 2020 17:50:41 +0000

By Daniel Chae

Tutorial purgatory. We've all been there. The mindless scrolling, pausing, and playing. All the copying, and pasting of the coding snippets. It's a lukewarm place to be.

You're "learning" because you're making your way through structured content. But when you leave the tutorial, you can't code any of what you "learned".

The great thing is that you don't have to stay stuck in tutorial purgatory. I'm going to share with you my own experience about how I broke out of tutorial purgatory and how you can too.

Whatever method you decide to use, I'll share the key metrics for breaking out of the tutorial rut.

_Photo by [Unsplash](https://unsplash.com/@dchuck?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Daniel Chekalov / Painful Realizations About My Learning Approach

When I first started learning how to code I looked forward to learning anything and everything.

I'd Google "easy programming projects" and browse the first few search results. I kept my eyes peeled for tutorials because I thought I could avoid failure with the tutorial's help. I also believed that the more tutorials I completed, the more I would learn.

I couldn't have been more incorrect in my learning approach.

The unfortunate aspect was that I wasn't retaining the knowledge of what I was coding. After several months of "completing" tutorials, I soon came to grips with my lack of progress. I couldn't understand the code I was writing.

An example of this was when I completed a Flask tutorial. I thought I knew and understand Python from completing a tutorial. I decided to take w3 school's Python quiz and was confident I would pass. Unfortunately, I failed.

After I discovered I wasn't learning what I thought I was, I felt pretty hopeless. I thought tutorials were the key to learning. I thought about trying projects without tutorial help, but I was too scared to fail. I was burning with desire to become a great programmer, but I was out of ideas for how to do that.

How I Broke Free from Tutorial Purgatory

_Photo by [Unsplash](https://unsplash.com/@pabloheimplatz?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Pablo Heimplatz /

I sat and pondered answers to those two questions. I started researching different types of programming and various career paths. It was illuminating.

I found articles and forums on data science and analysis. I found helpful graphics that explained the difference between the front-end and back-end. I discovered how the front-end and back-end interact. I also found videos that explained what APIs were and how to view, receive, and write data from an API.

I would encourage you to ask the same questions:

What is it that you want to work on?

What type of programming is out there?

As you reflect on what it is you want to work on and explore, you'll begin to narrow down your learning path.

You'll feel less inclined to learn everything there is to know and more of what you are most interested in. You'll also feel less overwhelmed as you focus in on what type of programming interests you the most.

Meetups Changed My Life

_Photo by [Unsplash](https://unsplash.com/@windows?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Windows /

This is What Freedom Feels Like

_Photo by [Unsplash](https://unsplash.com/@micahtindell?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Micah Tindell / Meetup.com.

I would also encourage you to check out the r/learnprogramming subreddit. There are some snarky individuals on Reddit who may give you a hard time for asking questions. But there are also plenty of people who are more than willing to guide, inspire, and help you. If you allow them to, they'll help you become a better programmer.

Your Keys to Success When Learning to Code

_Photo by [Unsplash](https://unsplash.com/@mlightbody?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Malcolm Lightbody /

Tutorial purgatory is a miserable place to be. You don't know if you're heading in the right direction and learning to program can feel hopeless.

But take heart, you don't have to stay stuck in tutorial purgatory. Keep asking questions! Distill your vision so that you're not overwhelmed with having to learn everything. You're heading in the right direction if you're producing results and feeling confident. Time to break out of tutorial purgatory and you'll thank yourself later.

How learning to skateboard helped me find a way out of tutorial hell

freeCodeCamp — Thu, 20 Feb 2020 17:00:00 +0000

By Kevin Powell

I've been creating websites for years now. I started making my first websites back in highschool in the late 90s.

For the past six years, I've also been teaching introduction to HTML & CSS classes (among others) in the classroom. About 3 years ago, I also started my YouTube channel which primarily focuses on CSS.

In other words, I've been making websites for awhile, but I also have a lot of experience with helping people learn how to do it as well.

A bit over a year ago we got my son a skateboard for his birthday and, at age 34, I thought it would be fun to learn along with him.

It's been fun, but it's also changed both how I learn new things, as well as how I teach people how to make websites.

Escaping tutorial hell

Have you ever heard of tutorial hell? A lot of people who are trying to learn to be front-end devs find themselves stuck in tutorial hell.

It's this place where you feel like you understand things. You watch a tutorial and can follow along and you understand what they are doing.

This understanding makes you feel like you know how to do it as well. That is until you try and use it later on.

The problem is, people watch tutorials a ton, and that's about it.

It's not that simple

The problem is, understanding how to do something isn't the same as being able to do it yourself.

I've watched a ton of skateboarding videos about how to do an ollie. I could even describe out all the steps to do one to you in excruciating detail.

Someone doing an ollie

I still took me an embarrassing amount of time to actually be able to do one, and I'm still terrible at them.

I understand the steps to do one. I can't implement those steps properly.

And I can hear you right now saying "but doing an ollie isn't the same as writing out some code!" Sure, one is a little more physical than the other, but they are much more related than you might think.

Going back to the very basics

One of the problems with learning to create websites is that it's easy to get ahead of yourself.

You figured out how to make an

so you think you know how to markup a site.

You understand that `display: flex` creates columns, so you start feeling like you get flexbox.

You watch people doing more complex things and it all makes sense. But just like I know the steps to ollie but can't do one more than an inch off the ground, just because you understand the steps of that tutorial doesn't mean you're ready to do it on your own yet.

You need to go back to the basics and practice.

And practice.

And practice.

This is where skateboarding is better than learning to code. When you learn to code, you think you know what you're doing, but it's only a false sense of knowledge. With skateboarding, when you try something you don't know, you end up with a few bruises and a pretty good idea that you need to keep trying.

Practicing the basics

I was told that the first step to learning to skateboard is to push.

A guy pushing on his skateboard

You know, standing on the board with one foot and pushing with the other so that you can move. That's sort of foundational, so it makes sense that you need to start there.

The thing is, even though you can start to push within a few minutes, it doesn't mean you are very good at pushing.

You need to practice, practice, practice.

You build up your balance and develop a feel for your board. I mean, how the hell can I make my board jump into the air and then land on it if I haven't properly developed my balance on the board?

So you need to learn the steps to pushing. Then you start to practice. The more you practice, the more comfortable you feel balancing on your board and that starts opening the doors to more things.

The ollie of page layouts

Trying to do an ollie without being comfortable riding a board is like someone trying to create a layout but who doesn't understand the box model.

The ollie of CSS is probably something like flexbox. It's a pretty essential skill in the long run, but not a foundational skill like the box model, cascade, and inheritance are.

And yes, you could learn flex right away and get something working, but it's going to be a lot harder to make changes. And when something goes wrong (which it eventually will), you'll have no idea why or how to fix it.

Learning to push, the code version

When you're learning to stand on your skateboard, and then to push, you don't feel comfortable balancing on your board. The more you do it, the more you develop your balance and the easier it gets.

Some languages have a bigger issue with this than others. CSS might be the worst at giving people a false sense of knowledge. The problem with CSS is it's easy to hear someone talk about how the cascade works and think that you know it.

You run into issues later because you didn't actually understand it, even though you thought you did at the time.

Then, later on, you get a little stuck so you read a tutorial and use it to help you muddle your way through making a navbar using flexbox. That's great! But you don't really understand how it works or how to make changes to it.

You get stuck, or even worse, it doesn't work like it did in the tutorial and you have no idea why.

Or worse yet, you think you got it, but then go to make it on your own without a tutorial and stare blankly at the screen with no idea where to start.

The same happens when learning JavaScript, or any other language though. In JavaScript, you learn how a simple loop works and then you move on, try to make a function that needs one, and then it starts throwing errors at you.

When you followed that tutorial, you learned how a loop works, and maybe you even made one, but you didn't cement that knowledge before moving on.

How to practice the fundamentals

So when you decide to learn something new, or you come across something you haven't heard of before, you need to nail that thing down.

That doesn't mean reading a quick article on it and saying "I've got this!". It means following a tutorial. Not watching a tutorial, but following along with it writing the code yourself.

Let's say you're learning how to make a navigation menu with an unordered list. Go and watch a video on it and follow along.

Then go and do it again. The exact same thing, but this time don't watch anything. See if you can remember how to do it.

Now make it but with the logo in the middle of the nav links instead of the logo on the left and the links on the right.

Now make that first one again from scratch. Can you still remember how to do it?

Now make a vertical navigation that sticks to the side of the site.

You get the idea. This is the part people skip, but it's so important! We need to practice, practice, and practice some more. It's not as exciting, but this is how you're going to learn.

And by doing this, you'll not only learn how to make one specific navigation, but you're also going to learn how to make all the possible variations. And you'll learn more about how flexbox works and that skill will roll over to other things that you're working on too!

Twice to make it true

We don't feel the need to do it when we're coding because we get something to work and we feel like we can move on. But imagine if I did that with skateboarding, or any manual task really.

Doing something once doesn't mean "you got it!", it means you managed to make it work one time, in one very specific situation.

In skateboarding you'll hear "twice to make it true", meaning you can only really say you've landed a new trick once you've landed it twice in a row.

It's the same when you're learning something new. First you do it following a tutorial, then you do it without any help at all.

Forget something when trying to do it without help? You can't just go back to that tutorial and get the missing key. Follow along with the tutorial and then do it again without it.

There is a framework to learning something properly

Starting to learn how to skateboard made me remember 2 things about learning:

Even small, simple things have a lot of steps
You need to practice a lot

Those small, simple things with a lot of steps often rely on foundational knowledge that people gloss over when they're learning.

Some of these foundational things are simple and others don't really get in the way. So even if you don't understand block formatting context, you can still do things and get them to work.

But if from the very start you can learn the foundational skills of the language you're trying to learn (like pushing for when you learn to ride a skateboard), then it'll make the rest of it all so much easier!

So I looked at how I teach in the classroom, and how I see students learn and succeed (and fail). I've also taken some tips from how I've had to break tasks down as I learn to skateboard. Then I turned it into a framework to help people learn front-end development better and faster.

If you'd like to get that framework, follow this link. You'll get both an e-book that dives into the specifics of it, as well as a PDF flowchart that outlines all the steps in a visual way, all for free ?.

It might sound simple (and really, it is), but by following along a specific path whenever you're learning something new, it's going to help you be more consistent with your learning.

All the repetition might seem excessive at first, but once you get into the groove of it, it'll help speed things up because it ensures that you understand the foundational skills which everything then builds upon.