Viewing Your Page Locally

1. What We Are Learning

This lesson focuses on the learning outcome: Launch the local development server to view your page live in the browser.

We'll explore what a local server is, why it's a critical tool for web development, and how to use the "Live Server" extension in VS Code to create a rapid, real-time feedback loop between your code and your visual output.

2. Why This Matters

Imagine you're designing in Figma. You wouldn't export a PNG every single time you adjust the padding on a button just to see how it looks. You see the changes live on the canvas. That immediate feedback is essential for efficient work.

A local development server does the same thing for web development. It creates a private, live preview of your website on your own computer.

Think of it as a personal proofing station on your desk.

• Without a server: You'd be opening your HTML file directly in the browser. The address bar would show something like file:///Users/YourName/Desktop/my-project/index.html. This is like looking at a static PDF of your design. It works, but to see any updates, you have to manually refresh the browser every time.
• With a server: The browser loads your page from an address like http://127.0.0.1:5500. This address, often called localhost, points back to your own machine. The server "serves" the files to the browser using the same protocol (HTTP) as a real, live website. The "Live Server" extension then takes it a step further by automatically telling the browser to refresh whenever you save a file.

This creates the real-time canvas you need for development and ensures your project behaves on your machine just as it will on the public internet.

To get a clearer definition of these concepts, let's look at a short article from Codecademy.

3. Step-by-Step Instructions

We've used Live Server briefly before, but let's walk through the process formally so you understand each part.

Step 1: Confirm the Live Server Extension

In a previous module, we installed the necessary tools. Let's make sure the Live Server extension is ready to go.

1. In VS Code, click the Extensions icon in the left-hand sidebar (it looks like four squares).
2. In the search bar, type Live Server.
3. You should see the extension by Ritwick Dey. If it's installed, you'll see a blue "Disable" button and a gear icon. If not, please click "Install".

Step 2: Launch the Server

There are two easy ways to start the server. You can use either one.

1. Right-Click Method: In the Explorer panel on the left, right-click on your index.html file. A context menu will appear. Select "Open with Live Server".
2. Status Bar Method: At the very bottom-right of your VS Code window, you'll see a button that says "Go Live". Clicking this will also start the server for your project.

Once launched, your default browser will open a new tab with your webpage. Notice the address bar—it will show an address starting with 127.0.0.1 or localhost, followed by a port number like :5500.

This video provides a quick visual walkthrough of both launching the server and seeing the live-reload feature in action.

Step 3: Stop the Server

When you're finished working, it's good practice to shut down the server.

• Look at the bottom-right of your VS Code window. The "Go Live" button has been replaced by a button that says "Port: 5500" (or a similar number).
• Simply click this button to stop the server. The browser tab with your page will remain open, but it will no longer be connected or auto-refresh.

4. What Could Go Wrong

If Live Server isn't behaving as expected, it's usually due to one of these common issues:

• Page doesn't auto-refresh: You must save the file (Ctrl+S on Windows or Cmd+S on Mac) for the live reload to trigger. The server watches for save events.
• Server won't start: Live Server needs to run from an opened folder, not just a single, floating file. Make sure you have used File > Open Folder... to open your my-landing-page project folder in VS Code.
• A different browser opens: Live Server will use your system's default browser. If you prefer it to open in a different one (e.g., Chrome instead of Safari), you'll need to change the default browser in your operating system's settings.

5. Mini Exercise

Let's put this knowledge into practice by consciously using the full start-stop cycle of the server.

1. If your server is running, stop it by clicking the "Port: 5500" button in the VS Code status bar.
2. Now, start it again by clicking the "Go Live" button. Your browser should open your "Hello World" page.
3. In VS Code, open your index.html file. Change the text inside the <p> tags from "Hello World" to "This is my live-reloaded page!".
4. Save the file. Look at your browser—the text should update instantly without you doing anything.
5. Next, open your styles/style.css file. Change the background-color to a new HEX code, for example, #333 (a dark gray).
6. Save the file. The background of your page should immediately change.
7. Finally, stop the server by clicking the "Port: 5500" button again.

You've just completed the full developer feedback loop: make a change, save, see the result, and stop the process.

6. Checklist Before Moving Ahead

• I can explain why using a local server (like Live Server) is better than opening an HTML file directly from my file system.
• I know how to start Live Server from within VS Code using either the right-click menu or the status bar button.
• I understand that I must save my file to trigger the automatic browser refresh.
• I know how to stop the Live Server once I'm done working.

Fantastic work. You now understand one of the most fundamental tools in a modern web developer's toolkit. This instant feedback loop is something we'll rely on constantly as we begin building more complex layouts.

A Look Ahead: We've created our first project with an index.html and a styles/style.css file. In the final lesson of this module, we'll take a step back and formally review the purpose of each file and folder in this simple structure. This will prepare us to keep our projects organized as they grow.