All right guys so in this video I want to show you how to install something called live server which
is something we’ll be using through the course.
And basically it’s an extension to V.S. code that allow us to open our aged e-mail pages on a little
development server as opposed to open them in the file system.
So right now you can see that the website is open and if you look at the you are Albar it’s file colon
with three slashes and then basically just shows the path to the file.
So the server will actually open it on what’s called our local host and not only that it will or it
will auto reload.
So when we save in each team I’ll file or CSX or JavaScript or anything else it’s going to just auto
You don’t have to keep hitting the reload button every time we make a change.
So we’re gonna go ahead and do that and I’m gonna just create a new file here.
I’m going to call it 0 2 underscore Liv underscore server dot age to email just naming it after what
we’re doing here.
And there’s something else that I want to show you guys instead of typing out the whole structure here
like we did in this file with this code we can use Emmett’s to generate that structure.
So what I’m going to do is just put an exclamation and I can either hit enter or tab and it’s just going
to kind of create that structure for us so we don’t have to type it out for every age HTML page we create.
Now notice there are some some added things here we have some meta tags we’re going gonna go over meta
tags including these ones in the next video.
But for now I just wanted to show you that we can quickly generate our structure our our doc type each
team all had body tags and stuff like that.
So we’re going to change the title here to live server and we’ll go down here and just put an H1 and
we’ll say we’ll say hello world does it really matter.
I just want to put something and then I’m gonna save this with control s and we want to now install
Live servers somewhere and go over here to this extensions icon and make this a little bigger and we’re
going to search for live dash server and it’s gonna be this this one here this first one with this purple
Now to install an extension and V.S. code you just want to click the little green install button once
it installs you want to click reload to activate.
So it’s just going to kind of reset the EDI editor and now under enabled you’re going to see live server
and any other extensions that you install will also be displayed here.
So now what we can do is instead of leaving and going and opening up the file we can simply right click
and we can say open with live server and the browser will automatically open and it will display the
web page and notice that you are all now is different.
It’s not just that file path.
It’s 1 2 7 0 0 1 which is what’s called the loop back address and this is always going to loop back
to your local machine.
So this is your local host.
And then this colon 50 500 this is the port number that it’s running on.
You can run things on different ports and then you just have the name of the file that’s loading.
So from now on we’re going to use live server to open our files instead of you know leaving and going
and opening the file manually.
Also if I change something like let’s change this to we’ll just add a paragraph here and we’ll say this
is a test and I’ll just save and now if I go to Chrome you can see this is a test is displayed.
I didn’t have to go and reload it.
It just auto loads and this is great for when you when you actually have you know your editor on one
side and then the browser because it automatically updates.
Now I don’t want to do that because I only have so much screen real estate here for you guys and I don’t
want to make that the editor too small.
We might do that in some videos later on but for now I’m just going to switch back and forth.
So to stop the server if you go down here you can see this port fifty five hundred.
If you click that it will stop the server from running.
And if I go back to the browser and reload you’ll see it and it no longer works if I want to start it
again I can either again do open with live server or I can click this go live link down here if I click
that it will start it back up and open it in the browser.
All right.
So I just wanted to show you guys that and let you know that that’s what we’ll be using as opposed to
just opening the opening our HD him all files right on the file system.
So in the next video we’re going to take a look at meta tags we’ll look at the ones that are generated
here as well as some others.


<script async src=""