Lesson 03 of 4 in Module 02

⏱️ 02 Mins read

Edit, preview, search, format

Small wins stack up. This lesson has four micro-skills. Do them in your workspace from Lessons 1–2.

Do this — four drills (20 minutes)

Drill 1 — Change text in two places (search)

  1. In the IDE, open the search across files panel (often magnifying glass or Ctrl+Shift+F / Cmd+Shift+F).
  2. Search for My static site or Home depending on what you wrote.
  3. Replace one word in index.html only (don’t bulk-replace blindly yet).

Goal: See that your site is small—you can find every string fast.

Drill 2 — Same class name in two files (optional stretch)

  1. Add class="btn" to one link in index.html and one in about.html.
  2. In style.css, add:
.btn {
  font-weight: 700;
}
  1. Reload both pages. Both links should look bolder.

Goal: Feel how one CSS file styles many pages.

Drill 3 — Live preview (if your IDE has it)

  1. Install or open a Live Preview / Live Server-style extension if your setup allows (some workplaces block extensions—skip if so).
  2. Start preview for index.html if you can.
  3. Edit <h1> text; watch the preview refresh or save-refresh.

If you have no preview: Keep using save → refresh browser. That is still valid.

Drill 4 — Format a messy file (once)

  1. Temporarily mess up spacing in index.html (random blank lines).
  2. Use Format Document (command palette: “Format Document”) or your formatter.

Goal: See the computer clean structure so you read faster.

List three wins (2 minutes)

Write down three IDE actions that felt faster than Notepad:

Examples: search all files, jump to file, format, split editor, file tree.

Check

  • You changed content in more than one file without getting lost.
  • CSS updates both pages when classes match.
  • You can name one way you will use search when AI gives you many files later.

Key takeaways

  • Search turns a 3-file site into a 300-file habit later.
  • Formatting reduces noise so mistakes stand out.
  • Preview (when available) shortens the try-see loop.

What’s next

Next up: Optional — a snapshot in time (Git idea)