Previewing Your AI-Generated Page

1. What We Are Learning

Today, we'll learn how to preview the AI-generated page using Live Server to check for visual accuracy. Live Server is an extension for VS Code that creates a mini-development web server on your computer, allowing you to see your webpage live in a browser.

Our Analogy:
Think of this as the equivalent of hitting the "Present" button in Figma. You've been working on the design file—arranging frames, applying styles, building components—but to truly evaluate it, you need to see it as a user would. Live Server is the "Present" button for your code. It takes your index.html and style.css files and displays them in a real browser, giving you an immediate, interactive preview.

2. Why This Matters

Simply double-clicking your index.html file to open it in a browser can be misleading. It opens the page as a local file (you'll see file:///... in the address bar), which can sometimes behave differently from a real website. Live Server provides a more realistic environment.

• It Creates an Instant Feedback Loop: Live Server automatically refreshes your browser page every time you save a file. This means you can have your code on one side of the screen and your live website on the other, seeing changes instantly. This is vital for quickly spotting and fixing issues.
• It Mimics a Real Website: It serves your files using the same protocol (HTTP) as a live website. This avoids certain technical issues and gives you a more accurate preview of how your site will behave once deployed.
• It's the First Step of Quality Control: Before you can inspect individual elements or compare pixels, you need a stable, live view of the page. This is your primary canvas for evaluation.

To better understand the "why" behind using a server, let's quickly touch on what a "local server" is.

3. Step-by-Step Instructions

We'll use a fantastic VS Code extension called Live Server by Ritwick Dey. The following video provides a complete walkthrough, which we'll then break down step-by-step.

Now, let's go through those steps together.

Step 1: Install the Live Server Extension

First, we need to add this tool to VS Code.

1. Open VS Code.
2. Click the Extensions icon in the Activity Bar on the left side of the window (it looks like four squares, with one flying off).
3. In the search bar that appears, type Live Server.
4. Find the one by Ritwick Dey. It's the most popular one, with tens of millions of downloads.
5. Click the blue Install button.

Once installed, you'll notice a new button appear in the bottom-right corner of your VS Code window: Go Live.

Step 2: Launch the Server

Now, let's fire it up! Make sure you have your project folder open in VS Code, containing the index.html and styles/style.css files from our previous work.

1. In the VS Code Explorer panel on the left, click on your index.html file to make it the active tab.
2. Click the Go Live button in the status bar at the bottom-right.
   • Alternatively, you can right-click the index.html file in the Explorer and choose "Open with Live Server".

Two things will happen:

• A notification will pop up confirming the server has started and telling you the port number.
• Your default web browser will automatically open a new tab showing your webpage!

Look at the address bar in your browser. It will say something like http://127.0.0.1:5500. This is your localhost address—a private URL for content hosted on your own machine.

Step 3: See the Live Reload in Action

This is where the magic happens. Let's create that instant feedback loop.

1. Arrange your windows so you can see both VS Code and your browser at the same time.
2. In VS Code, open your index.html file. Find a piece of text, like the main heading, and change it to something else.
3. Save the file (Cmd+S on Mac, Ctrl+S on Windows).
4. Watch your browser. The page will update instantly with the new text, without you having to hit refresh!
5. Now try it with CSS. Open styles/style.css, find the body selector, and change the background-color. Save the file, and watch the background of your live page change immediately.

Step 4: Stop the Server

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

1. Go back to VS Code.
2. The "Go Live" button will now show the port number (e.g., Port: 5500).
3. Simply click this button to stop the server. The live preview in your browser will stop working, and you'll see another notification confirming the server is offline.

4. What Could Go Wrong

• The "Go Live" button doesn't appear.
  • Reason: You likely opened a single file instead of a folder. Live Server needs to know which folder is the "root" of your project.
  • Fix: In VS Code, go to File > Open Folder... and select the main folder containing your index.html file.
• The browser shows a "404 Not Found" error.
  • Reason: Live Server looks for a file named index.html in the root of your project folder by default. If it can't find it, it doesn't know what to show.
  • Fix: Make sure your main HTML file is named index.html and is located in the top level of the folder you opened in VS Code.
• My changes aren't updating automatically.
  • Reason 1: You forgot to save the file. The auto-reload is triggered by the save action.
  • Fix 1: Make sure you are hitting Cmd+S or Ctrl+S after every change you want to see.
  • Reason 2: Your CSS file might not be linked correctly to your HTML file.
  • Fix 2: Double-check the <link> tag in your index.html's <head> section. Ensure the href path correctly points to your styles/style.css file.

5. Mini Exercise

Time to put this into practice. Let's use the code we generated with the AI in our previous lessons.

1. Open your project folder in VS Code.
2. Install the Live Server extension if you haven't already.
3. Launch Live Server to open a live preview of your index.html page.
4. With the browser and VS Code side-by-side, make a small change to the heading text in index.html and save it. Confirm that it updates in the browser.
5. Now, go to your styles/style.css file. Find a color value (for text, a background, etc.) and change it to something noticeably different (e.g., change a light grey to hotpink). Save the file.
6. Confirm that the color updates instantly in the browser.
7. When you're done, click the port button in the VS Code status bar to stop the server.

This exercise confirms you have mastered the fundamental workflow for visual quality control.

6. Checklist Before Moving Ahead

• I have installed the Live Server extension by Ritwick Dey in VS Code.
• I can start the server by clicking the "Go Live" button.
• I understand that Live Server provides an instant preview that updates every time I save a file.
• I have successfully tested the live reload feature by changing both HTML and CSS.
• I know how to stop Live Server when I'm finished working.

Excellent! You've just set up a professional-grade development environment for rapid visual feedback. This "see-it-as-you-save-it" workflow is the cornerstone of front-end development and is the first and most important step in verifying the code your AI assistant generates.

A Look Ahead:

Being able to see the page is step one. But what happens when the AI's output looks wrong? Maybe the spacing is off, a font is incorrect, or a box is the wrong size. How do you diagnose the problem?

In our next lesson, we'll dive into the primary tool for this: browser developer tools. You'll learn how to "inspect" any element on your page to see exactly which CSS rules are affecting it—much like selecting a layer in Figma to see its properties in the design panel.