Boarding School: Per Borgen

Okay, what do you get if GitHub and YouTube has a child? Well then you get Scrimba.

Let's have a look at that. Here is the Scrimba interface. As you can see here on the home screen, we have a range of different types of content.

We have courses, we have templates, we have standalone lessons, code playgrounds, you name it.

Now, let's say that you want to learn one specific thing. Then you'll head into the topics tab on the left hand side and click on whatever topic interests you.

For example, AI.

Here you'll see the courses listed and also the lessons and templates.

Now let's understand what the deal with Scrimba is through watching one of these lessons.

So here we have different types of subjects. We can, for example, do AI models in the browser using Transformers.js.

I'll click into this one and we are instantly in what looks like a YouTube video.

So I can scrub back and hit play wherever I want and also scrub ahead to where the teacher is writing code.

However, the unique thing is this is actually not a regular video.

I, as the student, can jump into the code whenever I want and change this and run the code and see how that affects the output.

So what I'll do now is I'm actually going to change this text right here to ready like that.

Then I'm going to run the code. And yeah, there we see my changes has affected the output window.

That is just so cool. And when I'm done doing this, when I've understood the code through interacting with it, let me get this playground out of the way here.

Then I can hit play again and check out this.

The object has a label with a score attached. I'm back to the teacher so I can jump into the code, jump out of the code and listen to the teacher however I want.

Now you might think that this is probably super complicated to create, to build one of these scrims.

Actually, you're wrong. It is super simple.

And let me show it to you. Let's go out of this scrim and head over to the templates.

There we can see a bunch of getting started project skeletons. I'm going to choose this react one right here.

And I'm going to choose this template like that.

And perhaps I want to edit the code slightly here. I'm going to add some exclamation marks and bring up the mini browser on the right hand side here.

It is right there.

You can bring it up full screen right there. Now I know that I can run the code.

So I'll click the record button in the bottom left corner, hit start.

And let's go. Today you are going to learn about react. It is a very cool library for building user interfaces.

As you can see when I edit the code, it appears here because we are rendering an h1 tag and shoving it into the DOM through this react DOM dot create route method.

I'll hit the stop button. And now, if I right click on the timeline and choose edit clip here, I have a neat little timeline editor.

And if you hold on for a second, I'm going to transcribe this for you.

Boom. There we go. We now have the text I just recorded right here.

If I messed up at some point, for example, ah, looks like I had a long break here.

I'm going to click here and then click C and boom, that part is gone.

Perhaps I want to remove this. All right. Word right here.

I'm going to click on it and then click C and boom, it's gone. Also, I'm not pleased with this final part.

I'm going to remove that one as well.

And here we have my screen. And let's go. Today you are going to learn about.

Yeah, it is. So that's it. Now I'll click the finish button in the bottom right.

And boom, we have a scrim that you can use by simply copying this link up in the corner and sharing it with whomever you want.

So thank you for watching. And I hope you'll try this out and create some scrims for yourself.

Thank you.