DevYarns

5 Tips for Getting the Most out of Video Coding Tutorials

February 15, 2020

When it come to learning a new programming language, concept, framework, or library, I usually have the most success with following video tutorials. There are a few things I want to share about how I approach these tutorials so that I learn as much as I can from them. As always, your mileage may vary!

1. Pause and try it yourself, but not too often.

Instead of watching a whole video all the way through, I like to pause along the way, type the code into my own editor, and try it for myself. However, I don’t do this with every line. I will watch the instructor write an entire block of code and explain what they are doing and why. At that point, I will pause and try to recreate the code myself. That way I’m not copying line by line, but rather applying the concepts I just learned.

2. Debug your code before going back to see how the instructor did it.

If in the process of trying a block of code myself, I’m seeing errors or my code isn’t working as expected, I try to figure it out myself before going back to the video for help. This helps me get a deeper understanding of WHY the code works the way it does, not to mention a deeper sense of accomplishment.

3. Pause every so often to explain your code to yourself (I do this aloud, which helps me).

This is one I sometimes forget, but that makes a world of difference for me. Every few lessons, I like to take a step back, look at my code as a whole, and explain to myself what everything is doing and how it interacts. For example, what functionality does that file I imported provide? How is the data getting from the API to my browser? In this way, I tend to discover holes in my understanding, where I thought things made sense when I was just following the tutorial.

4. Try to break things! And/or give yourself a stretch goal beyond the scope of the lesson.

When I find I don’t understand something, I like to hack at it until I get it. For example, in the first half of the free Level Up TutorialsFull-stack GraphQL with Apollo, Meteor & React’ series, Scott Tolinski uses sample data whose structure exactly matches the GraphQL schema and queries he writes for the app. He mentions that this is usually not the case in the real world, but that we’re doing it that way for now for simplicity.

However, because everything matches, I kept forgetting exactly which piece of code was describing the data and which was querying the data. I decided to add another data field and figure out how to get that to show up on my page. That helped me determine which pieces of code were doing what because I had to figure out what I needed to edit to make that happen. In the end, I had a much better understanding of the foundational concepts and felt ready to continue with the subsequent lessons.

5. Apply your new knowledge to a real project after the tutorial ends.

Let’s be real; tutorial projects can be pretty contrived. I always look for a real-world project I can use to try out my new skills. I do this as soon as possible after finishing the tutorial so I don’t forget everything I just learned.

After I finish the Full-stack GraphQL tutorial, I have an idea for a data manipulation tool that would help with some processes at work. I don’t know yet whether I will have all the skills needed at the end of the tutorial, but I am going to try, which is how I will find and fill my knowledge gaps.

Do you agree or disagree with these tips? Do you have any more you would add? Tweet me at @rleggos to continue the conversation.


Rachel Leggett, an Ann Arbor-based web developer and knitwear designer, spins some yarns about web development, web accessibility, and other tech topics in the DevYarns blog.