Instructor: 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 the 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 change 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
and 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 this 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 closed
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's starting and we get this message
that server is started at this port number here.
Let's close that.
And you see 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 want to change this here
and 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 the 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, 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 here
whenever we do some edits.
All right.
And with that
we are now ready to tackle our final and last
two coding challenges in this HTML fundamental section.