Roles in the loop — and why this course lives in an IDE

Cloud AI tools all sound like “one thing,” but in practice you use them in different roles. This lesson names those roles in plain language. It also states the course rule: you may use browser chat for quick questions, but the main learning path is inside an IDE (or editor-integrated workflow) so your work stays tied to real files in your project folder.

Note — Tools change fast. Product names, UIs, and install steps go stale. Follow each publisher’s current docs and your IT/security policy before installing anything at work.

The four roles (simple map)

Think of a small static site task: “Add a navigation bar with three links.”

Role	What you are doing	Typical tool shape
Plan	Decide pages, labels, order, mobile behaviour	Chat or notes—you own the brief
Generate	Produce HTML/CSS draft	IDE assistant, chat, or CLI
Explain	Understand a tag, error, or pattern	Chat (browser or sidebar)
Refactor	Rename, restructure, clean up without changing meaning	IDE shines—multi-file, search, diff

No single brand owns a role. Cursor might generate and refactor in place. ChatGPT in the browser might generate text you paste into a file. Gemini CLI might run in a terminal next to your IDE. The point is the role, not the logo.

Browser chat: great for some things

Browser-based chat (for example chat.openai.com, claude.ai, or Gemini in the browser) is useful when:

You want a concept explained (“what is a <nav>?”).
You are not yet in a project folder.
You want a one-off paragraph of copy to paste somewhere.

Limits for this course’s goals:

The model does not see your whole folder unless you paste paths or files.
It is easy to lose track of which version of the page is “real.”
Copy-paste loops get slow and error-prone when you have many files.

So: browser chat is a valid helper. It is not where we pretend the “real” static site workflow lives for professionals.

IDE-first: why the course insists on it

An IDE (integrated development environment) or editor like VS Code, Cursor, or OpenCode (see Module 2) opens your workspace: the folder that is your site.

When AI is integrated in the IDE (or paired with your folder), you get:

Files on disk you can save, diff, and publish.
Search across files when something breaks.
A straight line from draft → save → refresh browser (or preview).

That line is what you will use for your capstone: a shipped static site with evidence you can point to.

Course posture
Use browser chat when it helps. Spend most practice time with your project open in an IDE, following Lessons 2–5.

Example — same task, three modes (illustrative)

Task: “Explain what a <nav> element is.”

Explain mode: Browser chat or IDE chat — short answer, no files needed.

Task: “Generate a <nav> with Home, About, Contact matching my about.html links.”

Generate mode: Works better when the tool sees index.html / about.html (IDE or paste both).

Task: “Rename all class=\"top-bar\" to class=\"site-nav\" in every HTML file.”

Refactor mode: IDE search-and-replace or AI refactor — browser chat is the wrong hammer.

When browser chat is the right first step

Sometimes you do not have your laptop workspace with you. You might sketch an idea on a phone or borrow a machine where you cannot install extensions. In those moments, browser chat is a reasonable place to:

Learn a definition or compare two HTML elements.
Draft placeholder copy you will later paste into a file at home.
Get unstuck on an error message you type out (without pasting confidential code).

The skill to build is transfer: whatever you learn in the browser, you ground in the IDE when you are back at your project. Professionals do both; they do not confuse chat history with version-controlled files.

When the IDE must lead

Use the IDE as the lead tool when:

You are editing more than one file (navigation, CSS, shared images).
You need search across the project to keep class names consistent.
You are preparing evidence for assessment or review (your teacher or client can open the folder).
You want Gemini CLI or Copilot-style assistance to see paths relative to your workspace.

That is why Module 2 had you build my-static-site before this module piled on AI connectors.

Practice

Part A — Match roles (your answers may vary)

For each tool type below, assign one primary role from: Plan, Generate, Explain, Refactor.

Cursor (or similar IDE-integrated assistant)
Claude in the browser
A terminal tool such as Gemini CLI (you will install in the next lesson)
You, with a written creative brief

Part B — One paragraph

In six to eight sentences, explain why this course asks you to learn the IDE path even though browser chat is “easier to start.” Mention files, folder context, and shipping at least once.

One line to remember

Chats teach and draft; folders ship. If your answer lives only in a chat tab, you have not shipped a website—you have shipped a conversation.

Key takeaways

Plan / generate / explain / refactor are different jobs; mix tools on purpose.
Browser chat is fine for explanation and quick drafts; the professional static site loop is file-based in an IDE.
Next lesson: how to connect major LLM families (Claude, OpenAI, Gemini) via extensions and Gemini CLI, still with IDE + folder as home base.

What’s next

Next up: Wire AI into your workspace