How to Run HTML Files using Visual Studio Code

hello everyone this is yanin and in this tutorial I'm going to show you how you can run your htl file on your Visual Studio board so first of all you must have Vis Studio Port installed in your device so I already have Vis Studio installed so I'm just going to search a here his studio and here you caness see Vis Studio board so I'll just open it and there you caness see it open over here so first of all we're going to create a folder and in that folder we give out H file so let me just go to my folder over here and let's say we create a folder in my new volume B so let's go inside and here I'll just write click and then click new and then click on folder so here we're going to give a name let's say the name will be simple HTML there you can see we get our folder so right now we're going to move in this folder using F Studio board so we'll go about here this studio board then click on file and here see open folder over here so click on open folder then we need to go to the location where we create our folder so it does in New volum D it will just make it bigger and the folder name was simple HTML which is this all here you can see simple HTML I just click and then click select folder so here we only have a folder there's nothing so in order to create a new file or HL file in this we need to click on this icon here you can see new file I'll click here and then we need to give it a name let's say the name will be index do HTML make sure that the extension is HTML just press enter and then you can see index. HTML is created so here we're going to write our HTML structure so I just write this and then click here and there you can see it give us a HTML structure so in the body let me just zoom in in the body I'm just going to say here h2 tag and for this h2 tag I'm going to say here hello form HL so we want to open this in a browser so how can we do it so here you can see we have a extension option here so just click on this option this option is called extension and you can also open this by clicking control+ shift plus X so I just click here and then here I'm going to search for open open in browser this one so here you can see open in browser we need to choose the first one just click here opening browser then you will see this install option just click on install there can see it is installing and it will take a few second and this extension is enabled globally so after installing we can just close this on and since we install opening browser so right now if we just right click on our Port I mean right click on our Port over here just click anywhere in the port and then here you'll see two option opening other browser and opening default browser so if I now click on opening other browser it will show you all the browser that you have installed in your device so if I now choose Google Chrome there you can see it opening Google call there you can see hello from HTML if you write on here different things like hello found HTML tutorial and then you can just click over here and then click here open in other browser select it and it will open in the browser so this how you can run your HL file in P Studio C I hope this was easy for you make sure to subscribe and I hope to see you in the future tutorials

Channel: Web Tech Knowledge

Views: 95

Keywords: visual studio code, how to run html code in visual studio code, how to run html in visual studio code on windows, visual studio code html, visual studio, how to install live server in visual studio code, run html visual studio code, run html code in windows visual studio code, visual studio code windows, visual studio code tutorial, how to run html and css code in visual studio code, how to run html in vscode, visual studio code live server, open in browser visual studio code

Id: 188zup5hQ1U

Length: 3min 57sec (237 seconds)

Published: Mon May 27 2024