how to build

Project · ★ · Beginner

My Site

Your own page on the internet, at an address you can send to anyone. Your name, a sentence about you, three things you made, your links, and a "Now" section that says what you are up to this month. It looks right on a phone, follows dark mode, and shows a proper preview card when you paste the link into a chat. This is the first thing you build that is worth sharing.

You need

What you'll learn

What this shows the agent can do

The brief

Make a new folder for the project. Copy the brief below into a file called BRIEF.md in that folder, or download BRIEF.md. Open the agent in the folder and say:

Read BRIEF.md and start with milestone 1. Stop after each milestone so I can check it.
# My Site — a personal page worth sharing (★)

Build a one-page personal site in a single `index.html` and put it online. It has my name, one sentence about me, three things I made, my links, and a small "Now" section that says what I am up to this month. It looks good on a phone, follows the phone's dark mode, and shows a proper preview card when I paste the link into a chat. It should look like a real person made it, not a template.

## Done looks like

- One `index.html` opens in a browser and shows: my name, one sentence about me, three things I made, a "Now" section with a date, and my links.
- Every word on the page is mine. Nothing is invented, nothing is placeholder text.
- On a phone it reads in one column with no sideways scrolling. On a laptop the text stays a comfortable width.
- It follows the system light or dark setting. A toggle button switches it, and the choice is remembered after reload.
- The browser tab shows a small icon I chose. Pasting the link into a chat app shows a title, a description and a picture.
- It is live at `<something>.pages.dev` and opens on my phone over mobile data.

## Constraints

- One file: `index.html` with inline `<style>` and a small inline `<script>` only for the theme toggle. Pictures go in an `img/` folder next to it.
- No frameworks, no build step, no webfonts. Use the system font stack.
- Pictures resized so each is under 300 KB.
- Before writing any content, ask me for: the name I want shown, one sentence about me, three things I made (title, one line, a link or a picture each), my links, and what I am doing now. Do not invent facts about me.
- Ask before adding a surname, school, town, age or a photo of my face. A first name or a nickname is fine.
- No tracking, no analytics, no cookies, no contact form, no email address in plain text.
- Publish with GitHub and Cloudflare Pages, following the guide chapters "Save it on GitHub" and "Put it online with Cloudflare Pages".
- Phone works: check on a real phone before calling it done.

## Milestones

1. **My words first.** Ask me the questions above. Build a plain page with my name, my sentence and the section headings, no styling yet.
   Check: the page opens in a browser and every word on it came from me.
2. **Three things I made.** Three cards, each with a title, one line and a link or picture. Resize pictures into `img/`. Cards sit side by side on a laptop and stack on a phone.
   Check: three cards with my real things; on a narrow window they stack in one column; each picture file is under 300 KB.
3. **Look and dark mode.** System fonts, one accent colour I pick, a readable line length, generous spacing. Light and dark colours via `prefers-color-scheme`, plus a toggle saved in localStorage.
   Check: switch the computer to dark mode and the page follows; press the toggle, reload, and the choice sticks.
4. **Now and links.** A "Now" section with a few lines and a "last updated" date. A list of my links with clear names.
   Check: click every link on the page; each one opens the right place.
5. **Ready to share.** A `<title>`, a meta description, Open Graph tags (title, description, image) and an SVG favicon.
   Check: the browser tab shows my icon and my name.
> The page is finished and works from the file on your computer. Publishing puts it at an address anyone can open.
6. **Publish.** Put the folder on GitHub and connect it to Cloudflare Pages (framework preset None, build command blank, output directory `/`).
   Check: the `.pages.dev` address opens on my phone over mobile data, and pasting it into a chat shows the preview card.

## Stretch

- A custom domain, if I have one (Pages project, then Custom domains).
- A "say hi" button that opens the contact app I prefer, instead of a form.
- A page for each of my three things with screenshots and the story of how I made it.
- A colour scheme generated from one colour I choose.
- A print stylesheet so the page prints as a one-page CV.

## Leave out

- Blogs, CMS tools, site builders, frameworks.
- Contact forms, comments, visitor counters, analytics.
- Stock photos and filler text.

Start by reading WRITING.md and the guide chapter on data if you need storage.

Milestones

The same milestones as the brief. Tick each one off when its check passes. Do one per sitting if you like. The dot in the list marks the point where you have something that works on its own. Everything after it makes it remember things or work for more than one person. Stop at the dot and use what you built before you go on.

  1. My words first. Ask me the questions above. Build a plain page with my name, my sentence and the section headings, no styling yet.

    Check: the page opens in a browser and every word on it came from me.

  2. Three things I made. Three cards, each with a title, one line and a link or picture. Resize pictures into img/. Cards sit side by side on a laptop and stack on a phone.

    Check: three cards with my real things; on a narrow window they stack in one column; each picture file is under 300 KB.

  3. Look and dark mode. System fonts, one accent colour I pick, a readable line length, generous spacing. Light and dark colours via prefers-color-scheme, plus a toggle saved in localStorage.

    Check: switch the computer to dark mode and the page follows; press the toggle, reload, and the choice sticks.

  4. Now and links. A "Now" section with a few lines and a "last updated" date. A list of my links with clear names.

    Check: click every link on the page; each one opens the right place.

  5. Ready to share. A <title>, a meta description, Open Graph tags (title, description, image) and an SVG favicon.

    Check: the browser tab shows my icon and my name.

  6. The page is finished and works from the file on your computer. Publishing puts it at an address anyone can open.
  7. Publish. Put the folder on GitHub and connect it to Cloudflare Pages (framework preset None, build command blank, output directory /).

    Check: the .pages.dev address opens on my phone over mobile data, and pasting it into a chat shows the preview card.

Make it yours

Once it works, pick one of these and ask for it as a new milestone.

If it goes wrong

The page on .pages.dev is blank or shows "404".

The build output directory is wrong, or index.html is inside a subfolder. Say this to the agent:

My pages.dev address shows a 404. Check that index.html is at the top of the repo and tell me exactly what to set as the build output directory.

The preview card in chat shows no picture.

The Open Graph image needs a full address, not a relative path, and chat apps cache old previews. Say this to the agent:

The link preview shows no image. Make og:image a full https address to the picture on my live site and check the picture is under 1 MB.

It looks fine on the laptop but squashed on the phone.

Usually a missing viewport tag or a fixed width somewhere. Say this to the agent:

On my phone the page is tiny or scrolls sideways. Check the viewport meta tag and find anything with a fixed width.