Preview Your Site

Now that the AI has built your site, let's see it in action.

---

Open the Preview Panel

In the bottom of your workspace, click the Preview tab. This opens a live preview of your site right inside the editor.

If preview is not open you can toggle the Preview using the eye button at the top of the code editor.

Note: The first time you open it, the preview environment needs to start up — this can take up to a minute. You'll see a "Starting dev server..." message. Once it's ready, your site appears automatically.

---

Make Changes in Real Time

Try asking the AI to make a change:

• "Make the heading bigger"
• "Add a section for our menu"
• "Change the background to dark gray"

After the AI updates the code, the preview refreshes automatically. You can see every change as it happens. If for some reason it fails to update, click Restart at the top of the preview panel.

---

Open in a New Tab

Want a bigger view? Click the open in new tab icon (the arrow in the top-right of the preview panel). This opens your site in a full browser tab so you can see exactly how it looks on a real screen.

This preview URL is live — you can even share it with someone to get quick feedback before you deploy.

---

Iterate Until You're Happy

This is your chance to fine-tune. Go back and forth between the AI chat and the preview until the site looks exactly how you want it. Common tweaks:

• Adjusting spacing and layout
• Adding or removing sections
• Changing colors and fonts
• Adding images or logos

Once you're satisfied, move on to the next lesson where we'll push your code to GitHub and deploy it live.