| 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 |
| reload. |
| 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 |
| icon. |
| 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="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8318905676201904"
crossorigin="anonymous"></script>}}