![]() If we now take a look at our initial browser then you would see that our web page is now updated. Open your index.html file again and add a new paragraph below our H1 tag. To see how powerful this VSCode Live Server extension is then let us try adding a new paragraph to our HTML starter page and see what will happen. Don’t close this browser while you are doing this post as this browser user interface would get updated automatically as we do more coding. If everything goes well then you should be able to see the following message displayed on your browser. You can find this in the lower right-hand corner of your IDE.Īnother option is to right-click the file and “ Open with Live Server“ To see how our web page will look in our browser then just click the “Go Live” button at the status bar of VSCode. This is just a basic HTML starter template code with a title and a message called “ Hello Live Server“ In the file explorer, create a new file called index.html and place the following code. Select a folder that will serve as the root of our application and open it in your Visual Studio Code IDE. Once the VSCode is installed then click the Extensions tab and search for Live Server then click the Install button. Install Visual Studio Code or VSCode on Windows Select the appropriate installer for your operating system and install it accordingly. Steps on how to install Live Serverįirst, download the Visual Studio Code or VSCode from this link. I have installed Chrome as my default browser as well. I am using a Windows PC as my workstation but the following steps are applicable to a Linux or Mac. You also should have basic knowledge of how to use VSCode and Basic knowledge of HTML/CSS/Javascript as I won’t be discussing these web technologies here. You only be needing your laptop or desktop workstation in order to follow along with this post with sufficient memory. The Live Server extension sort of creates a local web server for you where it would host your web files such as HTML/CSS/Javascript Prerequisites Luckily, Live Server is a cool VSCode extension that will allow you to see your changes in your browser in an almost real-time fashion as you do your changes. Testing changes done on your HTML/CSS/Javascript is a very cumbersome task, especially for web developers. You can also watch this on my YouTube channel. If you want to see this project in a video format then please see below. ![]() ![]() This post will talk about using the Live Server extension and how to get started using it. ![]() What is more awesome about this IDE aside from its built-in code assist feature is the presence of a multitude of extensions that would even help you in your task. Using Visual Studio Code or VSCode Integrated Development Environment (IDE) in web development really speeds up your project development. My Live Server browser is not showing my web page.How to run multiple HTML files in Live Server VSCode?. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |