From draft to shipped static files

By now you can reach LLMs through IDE extensions, Gemini CLI, or browser chat. This lesson closes Module 3 with a single loop you can repeat until your static site is good enough to hand to a colleague or publish.

Rule: the ship happens from files in your folder, not from a chat transcript.

This loop applies to my-static-site — the folder you created in Module 02. See Practice site thread.

How this connects to assessment language (S / NS)

In this course, Satisfactory work is not “pretty.” It is demonstrable: files exist, they load in a browser, and they meet the checklist at an honest level. Not Satisfactory is often “only exists in chat” or “breaks basic structure.” Keep that standard in mind: your marker cannot mark what you did not save.

Timing and fatigue

Do the short passes first: save, refresh, fix the big structural problems, then polish colours. Beginners often invert that order because palettes are fun. Fun is allowed—after the page makes sense to humans and technology alike.

The loop (five steps)

1. Brief in hand
Use your Module 1 creative brief: audience, pages, tone, must-haves. Paste the brief into IDE chat or Gemini CLI as context when you ask for markup.

2. Generate in context
Prefer requests that name files (“edit index.html”, “create contact.html”) when using IDE tools.
If you used browser chat, copy output into a new file in the IDE and save immediately—do not leave it only in the chat window.

3. Save and name cleanly
Keep the Module 2 pattern: index.html, css/style.css, images/.
If AI creates styles.css vs style.css, pick one and fix links—don’t keep two versions “just in case.”

4. Run the Lesson 4 checklist
Fix structure before you polish colours. Refresh the browser after each meaningful save.

5. Stop when acceptance criteria are met
“Done” = checklist passes and you re-read the brief once. If not, prompt again with a specific fix (“change h2 to h1 for the page title; keep one h1 only”).

IDE vs browser chat in this loop
Browser chat can draft paragraphs; you paste into the IDE. The IDE is where you merge, diff, and save. That is the professional habit.

Optional: tiny version habit

Before a risky experiment, duplicate the folder (Module 2, Lesson 4) or commit in Git if allowed. Fear of breaking files stops learning—cheap backups fix that.

Where each tool fits in the loop (quick map)

Tool	Typical use in this loop
IDE extension (Copilot / Claude / Gemini)	Edit files in place; good for refactor and small inserts
Gemini CLI	Ask questions, run tasks, sometimes multi-file operations—pair with IDE to review changes
Browser chat	Quick explanations; rough drafts you paste into the IDE
You	Approve, reject, and verify—only human at the publish line

None of these replace saving files and refreshing the browser. That sounds obvious; in practice, beginners lose hours to “it works in chat” while index.html on disk is still empty or old.

If the AI gives you three versions

Sometimes a model outputs Option A / B / C. Pick one path:

• Save one option into the file, delete the others from your mind, iterate on that file; or
• Save options as index-option-a.html temporarily, choose, then rename—do not keep three “final” files forever.

Clarity beats hoarding. Your future self thanks you.

Practice

Write your loop in five numbered steps using your own words.
Must include: where you save files, how you test (browser), one check from Lesson 4.

Example starter (do not copy):

1. Open workspace in IDE …
2. Ask AI with brief attached …
3. …

Stretch — simulate a bad day

Describe a failure mode: you used browser chat, copied HTML, forgot to save, refreshed the browser, and thought the site was “done.” How does working IDE-first prevent that? Four to six sentences.

Capstone preview (no extra work yet)

Your capstone will require a live URL. That means this loop eventually ends with upload to a host (you will do that later). For now, mastering save → refresh → checklist on your computer is enough proof you can run the loop under your own control.

Key takeaways

• Shipping = saved HTML/CSS on disk + verified in browser.
• Chat tabs are not the source of truth; files are.
• Module 04 (local/open models) comes next—same loop, different where the model runs.

Bring a beginner’s honesty to your next session: if you cannot point to the file path on disk for what you “finished,” you are not finished. That sounds strict; it is kind—it prevents you from confusing motion with progress.

Before you close Module 3, do one concrete action: open your IDE, open index.html, add a harmless HTML comment at the top (<!-- checked module 3 loop -->), save, refresh. That tiny ritual proves you control the file—and control is what this module was building toward.

When you revisit this lesson before the capstone, re-read the five-step loop aloud. If any step feels vague, rewrite it in your own checklist language—future you will follow a checklist more faithfully than a vague memory.

Notebook optional: keep a one-page log with date, what you shipped, and one lesson learned—even three lines per session beats zero lines. Logs turn this course into evidence of growth, not just a folder of files. One line today is enough to start—that is still a record you can be proud of.

What’s next

Next up: Module 03 check-in