电动滑板_学习滑板如何帮助我找到摆脱地狱的出路-CSDN博客

电动滑板

I've been creating websites for years now. I started making my first websites back in highschool in the late 90s.

我已经创建网站多年了。我从90年代后期开始在高中时期就建立了我的第一个网站。

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.

在过去的六年中，我还一直在课堂上教授HTML和CSS类的入门课程。大约3年前，我还开设了YouTube频道，主要关注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.

一年多以前，我们给儿子送了一个滑板来过他的生日，而我34岁的时候，我认为和他一起学习会很有趣。

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.

您想出了制作<h1>因此您认为自己知道如何标记站点。

You understand that display: flex creates columns, so you start feeling like you get flexbox.

您了解display: flex创建了列，因此您开始感觉像得到了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.

CSS的缺点可能类似于flexbox。从长远来看，这是一项非常重要的技能，但不是像盒子模型，层叠和继承那样的基础技能。

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.

是的，您可以立即学习flex并获得某些工作，但是进行更改将变得更加困难。当出现问题(最终会发生问题)时，您将不知道为什么或如何修复它。

学习推送，代码版本 (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.

有些语言在这方面的问题比其他语言更大。 CSS可能给人以错误的知识感，这是最糟糕的情况。 CSS的问题是，很容易听到有人谈论级联的工作原理并以为您知道它。

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.

然后，稍后，您会遇到一些困难，因此阅读了一个教程，并使用它来帮助您弄清楚使用flexbox制作导航栏的方法。那很棒！但是您并不真正了解它是如何工作的或如何对其进行更改。

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.

学习JavaScript或其他任何语言时也会发生同样的情况。在JavaScript中，您将学习一个简单的循环的工作原理，然后继续前进，尝试创建一个需要一个的函数，然后它开始向您抛出错误。

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!

通过这样做，您不仅将学习如何进行一种特定的导航，而且还将学习如何进行所有可能的变化。而且，您将了解有关flexbox如何工作的更多信息，并且该技能还将适用于您正在从事的其他工作！

两次实现 (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 🙂.

如果您想获得该框架，请点击以下链接。您将获得免费的电子书，其中包括详细介绍它的电子书以及以可视方式概述所有步骤的PDF流程图。

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.

乍一看，所有重复操作似乎都过分，但是一旦进入其中，它将有助于加快处理速度，因为它可以确保您了解所有内容的基础技能。