Chapter 5. Workshop: building a profile page

Key points

• Bring everything to bear: folder, rules, prompt, error handling
• For a simple page, the trick is to deliberately avoid frameworks
• "Draft with placeholder details, then replace with your own" moves fastest

What we are building

A simple profile page you can view in a browser. It contains:

• name, occupation, hobbies
• a profile paragraph of about 120 words
• a frame for a profile photograph
• simple design (colour, layout)

Built as follows.

Step 1: create a project folder

Inside the parent folder decided in Chapter 3, make a folder for this project — something like 20260529_self_introduction. This becomes the reach of the key you hand the AI.

Step 2: open the folder in the AI tool

Start your editor (Antigravity or similar) and use "Open Folder" to open the folder you made. The AI now treats only the inside of this folder as its working range. This is where "narrow the key" from Chapter 3 actually happens.

Step 3: set rules for the project

Set rules specific to this project. Since this is a simple web page, deliberately rule out advanced technology:

Environment

• Build as a web page that runs in a browser.

Technology

• Build with HTML, CSS and JavaScript.
• Do not use frameworks such as React or Next.js.

This is the trick. HTML, CSS and JavaScript are the three most basic technologies for building a web page, and a profile page can be made beautifully with those alone. Frameworks such as React and Next.js (toolboxes bundling commonly used features) are powerful for large applications, but excessive for a simple page: they require installing dedicated software and using the command line, and the difficulty jumps. So we avoid them deliberately.

💡 The word "framework" returns, properly, in Chapter 10. For now, "not for simple pages" is all you need.

Step 4: get the outline built with a first prompt

Using the three elements from Chapter 4:

Build a profile page.

Content

• name (placeholder: "Taro Yamada")
• occupation (placeholder: "physical therapist")
• three hobbies (placeholders: "reading, hiking, coffee")
• a self-introduction of about 120 words (generate placeholder text)
• a frame for a profile photograph (the image will be swapped in later)

Appearance

• a gentle feel, in pastel colours
• prioritise legibility in the typography

The point is the placeholders for name and occupation. Have the AI produce a draft first, then rewrite with your own details; it moves faster that way.

Step 5: check it in a browser

Open the index.html the AI produced in a browser (Chrome, Safari). From the editor's file explorer, right-click index.html, reveal it in the folder, and double-click. If something recognisably like a profile page appears, it worked. A page the AI built is running on your own computer.

If it does not display, or errors appear, recall the error-handling pattern from Chapter 4.

Step 6: add the image

Copy and paste your profile photograph into the editor's file explorer, then ask:

Use [image filename] as the profile photograph.

Once the change is made, reload the browser (Ctrl+R or Cmd+R) to see it.

Step 7: make it yours

Replace the placeholders with your own details. The trick is not to ask for everything at once, but to build up in small steps. Ask for too much in one go and the AI misses parts.

Change the name to "(your name)" and the occupation to "physical therapist and athletic trainer".

Rewrite the profile paragraph to include:

• works in musculoskeletal rehabilitation at a local clinic
• wants to support patients getting back to their lives
• brings what hiking has taught them into clinical work

Change the overall palette to a calm green.

Step 8: done

Once the details are yours and the colour and layout are settled, it is finished. You did not write a line of code, and a profile page is running. That is what building alongside AI means.

But — the page you just made exists only on your own computer. Send a friend a URL and there is nothing for them to see. Publishing it to the world is Part 3.

Chapter 5 summary

• Folder, rules, prompt and error handling together are enough to build a page
• For a simple page, use HTML, CSS and JavaScript rather than a framework
• Draft with placeholders, replace with your own details, and revise in small steps