Write, tweak, look again. Two ways to make this loop easier — reloading the browser, and Live Server's automatic preview.
You managed to open your HTML in the browser. But from here on, you’ll repeat “tweak a little, then look” over and over. Reopening the file every time is a pain. So this time, let’s learn a few tricks for checking your work in a flash. Once you know these, your practice will move along much faster.
Which should I use?
First, get a feel for how it works with ① save → reload
Once you’re used to it and reloading feels like a chore, switch to ② Live Server
Either way, you’re doing the same thing: “checking the HTML you wrote on screen.” Go with whichever feels easier for you.
Summary of this lesson
After editing, save → reload the browser to check (⌘/Ctrl + S → ⌘/Ctrl + R)
With Live Server, changes show up automatically the moment you save
When nothing changes, the first thing to suspect is that you forgot to save or reload
Try it: the two preview methods
① Save, then reload the browser
This is the most basic way. Just two steps.
After editing in VSCode, save (Ctrl + S / on Mac, ⌘ + S)
Switch to the browser and reload (Ctrl + R / on Mac, ⌘ + R. The F5 key works too)
Then your edits show up in the browser. “Save → reload.” Remember these two as a set.
The two big causes of “it doesn’t change!”
When you edit but nothing changes, the culprit is usually one of these. ① You forgot to save (a ”●” on the VSCode tab is the sign of unsaved changes), or ② you forgot to reload the browser. Saying “Did I save? Did I reload?” out loud is the quickest way to check.
② Auto-preview with Live Server
“Pressing ‘reload’ every single time is a bit of a hassle too…” — that’s exactly what Live Server is for. The extension you installed earlier finally gets its moment.
It’s easy to use. With index.html open in VSCode, just right-click on the file → choose “Open with Live Server.”
Right-click index.html → Open with Live Server
Then the browser opens automatically and shows the page. The amazing part starts here. The moment you edit and save in VSCode, the browser instantly updates to show the latest version. No more pressing “reload.”
Now the “write → look” loop has become much easier.
FAQ
Is a page shown with Live Server published on the internet?
No, it isn't. The localhost in the address bar (and 127.0.0.1 next to it) is a special address that means "inside your own computer," and basically only you can see it from your own machine. So you can practice with peace of mind.
How do I stop Live Server?
Click the little "Port: 5500" label in the bottom-right of VSCode and it stops. Closing the browser tab alone won't stop it, so click here when you're done working.
I saved, but the browser doesn't show my changes.
Besides forgetting to save or reload, it's also common to be looking at a different file or an old tab. Check the address bar and make sure you're really viewing the file you're editing.
