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.
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.