Automatically refresh the browser while writing HTML

By Andre Lombaard | 14 April 2022

My 8-year-old son recently started coding, and I got frustrated watching all the inefficiencies that come with inexperience. I quickly had to remind myself that shortcuts, tricks, and more effective ways of doing things come with time and that it’s part of the journey that is fun to figure out. I observed him as he spent hours creating HTML pages, each time refreshing the browser manually to see his creations come to life on the screen. Although, if I’m frank, I did enjoy seeing the expression on his face when I mentioned that he could set up Visual Studio Code to automatically refresh the browser while writing HTML.

This tutorial will show you how to set up your VS Code environment to automatically refresh the browser while making changes to your files. Visual Studio Code has a rich set of plugins, and we will use one such plugin to make our development process more efficient if you are unfamiliar with or do not have VS Code installed, head to their website and install the latest version.

As a first step, let’s open a web project in Visual Studio Code. Open a command prompt, change the directory to your project folder, and type the following.

code.

VS Code also gives you the option to open files or folders from the File menu or the Get Started screen within the IDE if you are not a fan of the command prompt.

You can also open a file or folder from the File menu or Get Started screen

Next, click on the extensions quick access menu on the left. Or press Ctrl + Shift + X. Search for and install the extension called Live Server, by Ritwick Dey. Create or open an HTML file and click on the Go Live icon in the taskbar at the bottom of the screen. The extension will launch the browser, automatically updating as you write new HTML and save it.

Automatically refresh the browser while writing HTML — The browser would automatically update when you save your changes

If you feel in any way that this post was helpful, please consider buying me a coffee to help me create more blog posts, videos, and tutorials.

If you want to keep up to date with my latest posts, check out the list of posts on the home page and make sure that you follow icode4coffee on Facebook, Twitter and LinkedIn.