All language subtitles for 018 Installing Additional VS Code Extensions.en_US

Welcome back.

So we started configuring our VS code editor

in the very beginning of the course, but now at this point,

we are ready to install three additional extensions

that will make our lives a little bit easier

as we code HTML and CSS.

And so let's head over to our extensions panel here.

And the first extension that I want to install here

is called, Image

preview.

So it's this one and I already have it installed.

So I just need to click on enable.

Okay.

So that's the first one.

And what this one is going to do is that here in our HTML,

it now displays this small image preview here in this gutter

as it's called.

So here we have this one

and then this image here is also right here

where we declare it.

So where we include it in our code,

and this can be extremely helpful sometimes.

So that's why I really wanted to show you this one.

The next one that I want to show you is called

color highlighter

or highlight.

So it's this one here

and again, I already have it installed.

I just enable it.

And actually this one, I cannot show you yet

what it looks like, because it will only be relevant in CSS.

But trust me that this extension is really, really helpful

for visualizing colors in CSS.

Next up is an extension called auto rename

tag

So this one,

and you see it's an extremely popular one, once again.

So you have to download it and enable it.

And then what happens here is that,

when we changed the name of an element,

let's say we actually wanted to make this one a div,

then you see it automatically also changes the closing one.

So the closing tag.

Okay.

And this again is extremely helpful

it makes our life writing HTML a bit easier,

because trust me, we need to do this all the time,

like changing the element name.

Okay.

Now another thing that we need to do,

or at least that we can do if we want,

is to go back to our settings and then turn back

on this setting that we deactivated

at the beginning of the section.

So that's the auto,

let's spell that right.

So auto close tag.

So let's enable this back because I think at this point

you will no longer make the mistake of forgetting

a closing tag.

And so now we can allow VS code to do that work for us.

So for example, if we wanted to write a paragraph here.

Then now you see HTML

automatically close that element for us.

Okay. But this we don't need,

and now, we are going to install the most important

and the most useful one of all,

and that is called live server.

So it's this one here,

live server with almost 12 million downloads

and this one is popular for a reason.

So, I just click enable here

and,

so when I go now to my HTML

and let's close this one down.

So close down the sidebar.

Now down here in this bar, we should have

now this go live button.

Okay.

So hopefully after installing this live server extension,

you can also see this button down here

in this status bar.

So when I now click this, then it starting

and we get this message that server is started at

this port number here.

Let's close that.

And you see it, that it opened a new tab,

which contains our page, right?

So basically it looks exactly the same,

but there is one very big difference.

So,

let's,

let's say we wanted to change this here.

I'm going to call it JONAS CODE.

And now, look closely what happens here as I save this file.

So I hit command S now, or control S on windows.

And you see what happened.

It automatically reloaded the page

without us having to do anything.

So all we did was save to code

and what will then happen is that this page here

gets automatically updated.

So all the changes that we did here

will basically get injected into this page.

And,

now, we can then see the reflection

of our changes immediately.

So I put it back now.

I hit again, command or control S to save it

and immediately you see it going back to what it was before.

Now if we wanted to stop this connection,

once we are done developing,

all we have to do is to click down here

on this icon here where it says port 5500.

And by the way, this port number is exactly what we have

here.

Okay.

So just for the sake of curiosity,

this one here means that it's a local host server.

So basically it's like you have now a web server

on your own computer running.

And then we have actually this code running

at this port number.

And so this port,

it's basically like a sub address of your web server.

So of the local local host server,

but this doesn't really matter.

What matters is that this now works

and it is really, really helpful

for our development workflow.

Now, if for some reason you could not make this work

on your computer, then of course don't worry.

So you can still do it the old way.

So basically the way we have been doing it all along,

up until this point.

So you can just open up the file from your file system

like we did, and then keep refreshing it manually.

Right. But we, right now, no longer need this tab here

because we now have our live connection.

So we have our live server serving up this page

whenever we do some edits.

All right. And with that

we are now ready to tackle

or final less two coding challenges

in this HTML fundamental section.