Opening the IDE and the workspace

You already built my-static-site (or a similar folder) in Lesson 1. Now you open it the professional way: as a workspace so the editor knows your whole project. This lesson is a short do list.

Do this — open the workspace (10 minutes)

Step 1 — Install an IDE if you need one

Pick one you can keep using:

• Visual Studio Code (free), or
• Cursor (editor + AI features), or
• OpenCode (free to download; open-source AI coding workflow—often a strong choice if you want to wire in local / open-weight LLMs alongside cloud providers), or
• Another code editor your workplace allows.

Install it like any normal app. If IT must approve, request “code editor for static HTML.”

Step 2 — Open the folder (not a single file)

1. Start the IDE.
2. Choose Open Folder (wording may vary: “Open…”, “Add folder to workspace”).
3. Select my-static-site — the folder, not index.html alone.

Why: The IDE shows a file tree. That tree is how you and AI tools stay oriented.

Step 3 — Verify the tree

You should see something like:

my-static-site
  about.html
  index.html
  css
    style.css
  images

If files are missing, go back to Lesson 1 and add them.

Step 4 — Open index.html in the editor

1. Click index.html in the tree.
2. Change the <h1> text from Home to Home — test.
3. Save (Ctrl+S / Cmd+S).

Step 5 — View in browser again

Open index.html from your file manager or use “Reveal in Finder/Explorer” from the IDE if available. Confirm your heading change appears.

Concept — Workspace
Workspace = the root folder the IDE opened. Search, extensions, and AI (later) use everything inside that root.

Check

• You opened the folder, not one file.
• You can switch between index.html, about.html, and css/style.css in clicks.
• Saving the HTML updates what you see in the browser after refresh.

Key takeaways

• Treat the folder as the product; the IDE is your cockpit.
• Opening the workspace once beats juggling loose files forever.

What’s next

Next up: Edit, preview, search, format