Easier Way to Learn Coding?

Annotated code printout, or a 3 year old’s coloring?

Online learning has taken root and there are countless opportunities to learn valuable coding skills via online video tutorials.

One problem I found is that I would spend lots of time very carefully writing code from each lesson out by hand, and then going back to watch the lesson again. My handwriting is awful and one tiny mistake might create annoying problems later.

Here’s an approach that works well for me, and might be worth a try (Annotated Code Printouts):

1 Before each individual lesson, print out the final source code for that lesson, reflecting all the changes that occur during that lesson.

Note: Tutorial source code is often on GitHub. To copy-paste without formatting problems, click “Raw” (see top-right in the image below) and copy from there.

Try to use small enough fonts and spacing so everything is on one page, so it’s easy to follow what’s happening.

Also, only print code that’s new and relevant to what you’re learning. A minor CSS change when you’re learning about Hooks is probably not worth printing.

Lastly, label printouts clearly, so you know its topic and lesson number.

Use “Raw” for clean copying, without formatting problems

I prefer to paste all the changed code from each lesson into a single document, with very clear labels for each page, and then print it all at once.

The class where I discovered this approach has a branch for each lesson, so I only print the source files where changes take place in that lesson.

The screenshot below is for lesson#15. The right-hand column shows that only Home.js has changes in this lesson, so that’s the only one I print.

The tutorial during which I discovered this approach is Shaun Pelling’s free (and terrific) Full Modern React Tutorial (NOT an affiliate link: https://www.youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d)

I regret not thinking of this until lesson #14 of doing this, but here is a PDF on Google Docs with all the code for that and the subsequent lessons: https://drive.google.com/file/d/1JuGLgq6CcYWB82_1jwmbX8FECbPx9OjJ/view?usp=sharing

2 Make notes and highlight code on the printout, to help you understand and remember what’s happening, and how one thing relates to another.

Consider investing in colored pens and highlighters, which might make it easier to track complicated activity on the page. As you can see from the photos below of my notes, this can get a little out of hand.

Annotated code printouts

Yes, my handwriting is terrible!

And that’s it!

Instead of wasting time writing code by hand, print the code and then write notes, highlights, arrows and other annotations as you watch the tutorial videos.

Depending on the tutorial, I’ll also actually type the code in my IDE (I had to look this up, but it means “Integrated Development Environment” like Visual Studio Code, etc.).

And of course, what works for me may not work for you.

Best of luck! -Mark

P.S. Here’s my latest project: Zagnetic