HTML Practice Tools

What Is It?

You need a text editor to write HTML and a browser to see the page.

What the Tags Mean

• Editor: a program where you type and save code.
• Browser: a program that opens your HTML page.

Set Up VS Code and Live Server

Step 1: Install and Open VS Code

1. Download Visual Studio Code from the official VS Code website.
2. Run the installer for your operating system and complete the setup. On macOS, move the app into Applications when prompted.
3. Open VS Code. You will use its Explorer to manage files and its editor area to write code.

Step 2: Open a Practice Folder

1. Create a folder on your computer named web-practice.
2. In VS Code, choose File > Open Folder, select web-practice, and open it. On macOS, File > Open can also open a folder.
3. If Workspace Trust asks, trust the folder only when it contains your own practice files or code you trust.
4. Open the Explorer from the left sidebar. Create a file named index.html using its New File button.
5. Copy the complete HTML from Example 1 below into index.html.
6. Save with Ctrl+S on Windows/Linux or Cmd+S on macOS. Check that the filename ends in .html, rather than .html.txt.

Your starting folder should look like this:

web-practice/
  index.html

Step 3: Install the Live Server Extension

1. Open Extensions in the left sidebar. The shortcut is Ctrl+Shift+X on Windows/Linux or Cmd+Shift+X on macOS.
2. Search for Live Server.
3. Select Live Server by Ritwick Dey. Its extension ID is ritwickdey.LiveServer; check this so you install the intended extension.
4. Choose Install. If VS Code requests a reload, complete it before continuing.

Live Server runs a local web server and reloads the browser after you save supported project files. It previews files on your computer; it does not publish your website to the internet.

Step 4: Open Your Page with Live Server

1. Keep the web-practice folder open in VS Code.
2. In Explorer, right-click index.html and choose Open with Live Server. You can also open that file and choose Go Live in the status bar.
3. Your browser should open a local HTTP address, for example http://127.0.0.1:5500/index.html. Use the actual address Live Server opens; the port can differ.
4. Check that the heading and paragraph from Example 1 appear.
5. Keep both the editor and browser open side by side so you can compare your code with its result.

Step 5: Edit, Save and See the Change

1. In index.html, change the text inside the main heading.
2. Save the file with Ctrl+S or Cmd+S.
3. Return to the browser tab opened by Live Server. The updated heading should appear automatically.
4. Change another line, save again, and repeat. For CSS practice, change a rule in the HTML style element or linked stylesheet, then save that file too.

The practice loop is edit → save → inspect the browser. Editing browser DevTools is useful for experiments, but those edits do not normally update your saved source files.

Step 6: Stop and Restart the Server

1. Open the Command Palette with Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS.
2. Run Live Server: Stop Live Server when you finish.
3. To continue later, reopen your practice folder and use Open with Live Server on index.html again.

If Something Does Not Work

• No Go Live button: confirm that the extension is installed and enabled, open the practice folder, then right-click index.html. You can also run Live Server: Open with Live Server from the Command Palette.
• A directory listing opens: select index.html, or start the server by right-clicking that file instead of the folder.
• Changes do not appear: save the file, make sure the browser is showing the local HTTP page from the same folder, and refresh once. Restart Live Server if needed.
• A stylesheet does not load: save both files, check the spelling and letter case of styles.css, and check that its href matches the file location.
• The browser does not open automatically: use the local address shown by Live Server. Check VS Code notifications if the server fails to start.

The lesson's Try in new tab button is a separate built-in editor. It works without installing VS Code or Live Server. Use Live Server when practicing with files saved on your own computer.

Official help: VS Code getting started and Live Server extension instructions.

Example 1

Save each example as index.html and open it in your browser. Each code block is a complete page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Practice Tools</title>
 
</head>
<body>
<h1>My first page</h1>
<p>I am learning HTML.</p>
</body>
</html>

What you see: You see a heading and a sentence.

Example 2: Another Use

Use the browser’s Inspect tool to look at an element. Right-click the heading and choose Inspect.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Practice Tools</title>
 
</head>
<body>
<h1>My changed heading</h1>
</body>
</html>

Simple Tip

Save the file before refreshing the browser. Name it index.html, not index.html.txt.

Try It Yourself

Create your practice folder, open Example 1 with Live Server, change the heading, and save. Does your new heading appear automatically? Then try the CSS tools lesson to add a separate stylesheet.