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