Visual Studio Code Live Server Quickstart Guide

hi welcome to Don's key Tech in this short video I'm going to show you how you can use the light server extension of Visual Studio code if you have been writing HTML web content with Notepad and testing it by running it in a browser so for example in here I have my index start HTML starter company and if I wanted to see how it looks in the browser so I'll just have to double click it the output of my HTML content if I wanted to edit my HTML page so for example I'm going to change it into then if I wanted to see how it looked in the browser all I have to do is to click refresh and I would you would notice that the H1 has now reflectedly changes so if I do this multiple changes back and forth then you'll notice that it will be quite clearing in the long run so there's got to be an easier way right so enter the live server extension and Bs code all you have to do is to open your project in vs code and then just click this go live button at the lower right hand status bar template and what will happen is that it will open up my page and it will load my index.html so for example if you would check the URL it is change that it is running some local web server and then it automatically hosts my index.html page to use the live server extension then all you have to do is just go to the extension Tab and in the extension tab select type in like server and once you see the live server in here just click the install button once the live server is installed all you have to do to use the live server is just click the button here which is go live or you can go to your index.html and then click open with live server so let's do some testing so in my case in here let's add a new paragraph under the H1 tag and then let's see what will happen if I add the paragraph in here if I add the paragraph in here and you would notice that it automatically refresh my browser and I am able to see the new paragraph in the in my web browser next we do some testing in the index.css or css files so if for example we wanted to change the color of our H1 plug all we have to do in here is just at a CSS selector and then let's change the color to for example input thank you and you would notice that the color changes into clean if I turn it back into red and you would notice that the H1 tag turns into a red color so that's how easy it is to do the changes in the index CSS index.css and now if we test some some JavaScript so for example if I wanted to change the X in the paragraph I just add some code in my index.js so to do that I'm just going to add a new JavaScript functioning here and you would notice that I change the value of the HTML content and it's now saying that it is yes live server is really awesome but you can see whatever changes that you are doing in the virtual Studio code is automatically reflected in the web browser and you don't have to do any changes or reload anything in our web browser so this extension is really helpful when doing web development that's it I hope you learned something happy exploring [Music]

Channel: DonskyTech

Views: 131

Keywords: vscode, liveserver, visualstudiocode

Id: i6fOTdxtxHA

Length: 4min 17sec (257 seconds)

Published: Sun Jan 01 2023