A better way to learn coding online

A self-learning structure to help you learn 10x better

I’d been taking online tutorial courses on Vue School, to learn the fundamentals of Vue.js and Nuxt. As I go through it, I realised there’s a few things I fell into doing along the way that helps with my learning. There’s a certain structure that helped me learned 10x better. This is as much a note to self as it is for others who might be trying to pick up coding via online classes.

1. Build your semantic tree

Read through the whole course first, without watching the videos. Get a sense of what’s being covered, even if I don’t quite understand the technical terms yet. This helps build up a rough semantic tree where I can hang the more specific bits later on.

2. Watch the entire video first – no coding yet

At the start of each video tutorial, watch through the entire video once, without typing any code. I didn’t used to do this, and would jump right in into coding as the tutorial progressed, starting and stopping the video so that my typing can catch up. That broke the flow and didn’t aid my understanding of why I’m typing the stuff I’m typing. Better to watch it through beforehand, so that I understand the starting and ending points better, what we’re trying to achieve, and the coding would make more sense as I type.

3. Watch & type, blow-by-blow – no copy-paste

Next, type as the tutor explains and types on the video. Yes, do not download or copy-paste the code provided in the class materials. This forces you to type out character by character, and to start getting used to the syntax. This also make you start to look out for idiosyncrasies of the syntax, like forgetting commas or semi-colons. I used to pre-download the code, and without the blow-by-blow typing, it hindered my learning more than helped.

4. Inline code comments are your class notes

Leave comments in the code as you type along. The tutor will share why he’s typing certain things, what this method/directives are for, how the syntax works. Try to type it above each line of code, as much as possible, especially the parts which are new and unfamiliar. The commentary will serve as your class notes. It also helps you break out of a monkey-see-monkey-do mode of blinding copy-typing away, let’s you take a step back to reflect on what you just did. It’s slow yes—a ten minute tutorial can take an hour maybe—but it ensures quality learning.

5. Google to reduce ‘leakiness’

Along the way, he’s going to gloss over something or do something which you didn’t understand, or questions pop up in your head. Feel free to stop and go google it to understand more first before proceeding. That way, your knowledge will be less ‘leaky’. But sometimes it gets annoying because googling mid-way through the tutorial might mean you get distracted and wander too deep into the internet rabbit hole, potentially spending even more time on the tutorial, breaking your momentum. When that happens, I try to quickly google a question and leave the tab there for further learning after I’m done with the tutorial.

6. Make it public and share

Finish the tutorial and save your code in a separate file, so that you can see the progress from one stage to another. I like to code them on Codepen, so that it’s public and shareable –not just for showing off, but also to send it to mentors to ask for help or ask them to comment on what your code quality.

7. Don’t be shy to break away part-way when it no longer serves you

The upside with structured coding courses is how it makes you want to complete the course to have a full closure. But I realised that’s also a major downside. Because very often only some bits of the entire course are brilliant or helpful to you. Other ones, are confusing, or poorly laid out. The problem is that you don’t know enough to be sure that it sucks…yet. But when you have to rewatch the video over and over, do some research outside of it to understand what’s going on, maybe it’s not worth the effort then. So when you find you’re going around in circles, feel free to skip, or jump to a different course that teaches that part better. This isn’t school where you have to stick to the syllabus. You make your own learning pathway, and it doesn’t have to be rigid like back in school.

8. The best learning is always on your own terms (and your own project)

I like the current approach of coding course where they walk you through the syntax by creating something. At Vue School, it was first a to-do app, followed by a pricing subscription page for coffee. All great, but I find I learn and retain things best when it’s my own project. Yes, even learning the basics. Because even if I’m super diligent and do the above-mentioned Steps 1-6 well, I find my retention is still not as good as I would like. I would learn and understand a class today, but forget about the content the day after. But if the learning project was something I wanted to make myself, then the understanding goes deeper.

9. Pain is the best teacher

I hate to say this, but I’m beginning to feel that maybe following courses might not be the best way to even learn the basics. Because sometimes I get distracted and veer off the course to code up my own thing for a bit, and stumbled and hit brick walls. It’s painful, and hard work trying to figure out how to debug it. But when I finally find the solution, that’s when I truly learn and retain the lessons from all the detours and mistakes I made along the way. In fact, I dare say, better to hit some walls and experience pain, then come back to a relevant course to learn the concepts and tactics of how industry veterans solve it. That’s when the a-ha moment is brightest. Like how they always say, don’t take your MBA right out of university. Go work in the real world, get some work experience (and pain), then taking the MBA would make much more sense. I think this is the same context.

Any other tips to learn better?

Follow my daily writings on Lifelog, where I write about learning to code, goals, productivity, indie hacking and tech for good.