Your project folder is the product

A website you can touch is just files in a folder. If the folder is tidy, AI tools and humans can find things. If it is messy, everything hurts. This lesson is doing, not reading for hours.

You will reuse my-static-site in later modules — see Practice site thread.

Do this — build the skeleton (15–20 minutes)

You will create:

my-static-site/
  index.html
  about.html
  css/
    style.css
  images/
    (empty for now — add a small .jpg or .png later if you want)

Step 1 — Make the folder

1. On your computer, create one folder named my-static-site (or another name you like—keep it short).
2. Inside it, create css and images folders.

Step 2 — Create index.html

1. Open a text editor (your IDE in the next lesson is better; plain editor is OK for now).
2. Create a new file named index.html inside my-static-site.
3. Paste this minimal HTML (you will change the words later):

<!DOCTYPE html>
<html lang="en-AU">
  <head>
    <meta charset="utf-8" />
    <title>My static site</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>Home</h1>
    <p>This is my home page.</p>
    <p><a href="about.html">About</a></p>
  </body>
</html>

4. Save the file.

Step 3 — Create about.html

1. New file: about.html in the same folder as index.html.
2. Paste and adjust:

<!DOCTYPE html>
<html lang="en-AU">
  <head>
    <meta charset="utf-8" />
    <title>About</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>About</h1>
    <p><a href="index.html">Back home</a></p>
  </body>
</html>

3. Save.

Step 4 — Create css/style.css

1. Inside css, create style.css.
2. Paste:

body {
  font-family: system-ui, sans-serif;
  margin: 1rem;
}

3. Save.

Step 5 — Open in your browser

1. Find index.html in your file manager.
2. Double-open it (or right-click → open with browser).

You should see “Home” and a link to About. Click it. If it breaks, check spelling: about.html, css/style.css.

Why paths matter (30 seconds)

• href="about.html" works because both files sit in the same folder.
• href="css/style.css" means: “go into css, load style.css.”

Wrong folder = broken styles. You just proved you can control that.

Check

• Clicking About works.
• Text looks styled (system font + margin) — means CSS loaded.
• You can draw your folder tree on paper in under one minute.

Key takeaways

• One folder = one site in this course’s simple model.
• Relative paths connect HTML, CSS, and images—no magic.
• Structure first makes Module 03 (preview and search) feel easy.

What’s next

Next up: Opening the IDE and the workspace