Webbie website.co.jp A free training site for building websites with ChatGPT
Step 09

Make the Detail Pages One by One

Now that the structure, filenames, images, and shared site files are ready, you can begin generating the actual detail pages. This is where many projects either become disciplined or become messy. The rule here is simple: build one approved page at a time.

Workflow diagram showing the order of website building steps
Website planning with ChatGPT before page generation
Webbie pointing at a checklist
Webbie says

This is where your earlier discipline starts paying off.

You already defined the site, approved the filenames, stabilized the images, and created shared CSS and JS. That means detail-page generation can now be much cleaner and more controlled.

What is a detail page?

A detail page is an individual page inside a section. It is not the main homepage and it is not the section index page. It is one of the pages that the section index will eventually point to.

Examples

/en/tools/putty-basics.html
/en/tools/winscp-basics.html
/en/tools/vi-basics.html

/en/training/step-01-build-locally-first.html
/en/training/step-02-define-the-site.html
/en/training/step-03-decide-filenames.html

These are excellent pages to generate first because they are concrete, useful, and easier to define than broad index pages.

Core principle

Detail pages should come before section index pages.

A section index works best when it can summarize real completed pages instead of pages that only exist in theory.

Why detail pages come first

1. They are easier to define

A detail page usually has one clear topic. That makes prompts more precise.

2. They build real site substance

The site becomes real through useful inner pages, not just broad landing pages.

3. They make later section indexes better

Once the detail pages exist, the section index can link to them properly and summarize them honestly.

4. They reduce homepage guesswork

A homepage built later will be stronger if the real destination pages already exist.

What you should already have before generating detail pages

By this step, you should already have:

  • the site definition
  • the approved filename tree
  • the approved image set
  • the saved live image URLs
  • the shared site.css and site.js

That is what makes this step so much stronger than simply saying, “make me a page.”

Important workflow lesson

Do not start inventing new pages outside the approved tree unless you consciously revise the tree first.

Once page generation begins, structure discipline matters even more.

The best way to generate detail pages

The strongest method is:

1

Name the exact target file

Always specify the precise file you want generated.

2

State the page’s purpose

Explain what the page is meant to teach or do.

3

Provide the approved images

Include the exact live image URLs relevant to that page.

4

Tell ChatGPT to use shared CSS and JS

Keep the page HTML clean and avoid bloated page-level styling.

5

Generate one page, review it, then move to the next

This pacing is one of the keys to staying in control.

What a strong detail-page prompt looks like

Here is the kind of prompt this workflow encourages: 

Make /en/tools/putty-basics.html

Use the existing shared files:
/site.css
/site.js

Use these approved images:
https://website.co.jp/images/website-putty-terminal.jpg
https://website.co.jp/images/webbie-pointing.jpg
https://website.co.jp/images/professor_webbie.jpg

The page should:
- teach PuTTY to beginners
- be practical and clear
- include examples
- use a strong feature image
- include a Webbie callout
- use the site-wide header and footer
- be mobile responsive
- keep HTML clean and rely on shared CSS/JS

That is much stronger than a loose request like “make a page about PuTTY.”

What makes a good detail page?

Quality What it means
Focused The page stays on one topic
Useful It teaches or explains something real
Structured Clear headings, sections, examples, and next-step logic
Consistent It matches the rest of the site visually and structurally
Connected It clearly belongs to a section and fits the site’s larger purpose

How to know which detail pages to build first

A good order is usually:

  1. pages with the clearest purpose
  2. pages with strong support images already available
  3. pages that future section indexes will clearly need
  4. pages that establish the tone of the section

For a tools section, this often means starting with: 

/en/tools/putty-basics.html
/en/tools/winscp-basics.html
/en/tools/vi-basics.html

For a training section, it often means building the sequential lessons themselves.

Illustration showing detail pages being made before a section index page

Why one-by-one generation is so important

If you ask for too many detail pages at once, several problems often appear:

  • the pages begin to blur together
  • their structure becomes repetitive in a shallow way
  • specific images get assigned weakly
  • the quality of examples tends to drop
  • review becomes harder

One-by-one generation lets you:

  • review each page carefully
  • improve the prompt style as you go
  • keep the section coherent
  • notice what the site still needs
Big lesson

This workflow is not slow. It is controlled.

Fast, messy page generation usually creates more cleanup later than careful, deliberate page generation does.

How to review each detail page after generation

Each time a page is generated, check:

  • is the filename correct?
  • does the page stay on topic?
  • does it use the right images?
  • does it rely on the shared CSS and JS?
  • does the tone match the rest of the site?
  • does it clearly point forward or back where useful?

This review process is one of the reasons the site gets stronger over time.

Example: a detail page as part of a section system

Imagine the tools section. A strong detail-page build sequence might look like: 

1. /en/tools/putty-basics.html
2. /en/tools/winscp-basics.html
3. /en/tools/vi-basics.html
4. /en/tools/index.html

That order is excellent because the tools index can be written after the real pages exist.

How this applies to bilingual sites

On a bilingual site, one strong approach is:

  1. generate the English detail pages first if English is your drafting language
  2. review and improve them
  3. then create the corresponding Japanese pages carefully

Or, if Japanese is the main editorial language, you can reverse that order. The point is not which language comes first. The point is that each page should still be generated deliberately.

What not to do at this stage

Avoid these habits:

  • making section indexes before the detail pages exist
  • making the homepage too early
  • inventing new filenames mid-stream without updating the file tree
  • using placeholder images when real image URLs already exist
  • stuffing pages with page-specific CSS that should live in site.css
Important

Do not confuse “many pages” with “a finished site.”

A finished site comes from coherent pages connected by structure, not just from the raw number of files.

How detail pages make later steps easier

Once enough detail pages exist:

  • section index pages can summarize real content
  • sitemap files can reflect a real site
  • the homepage can highlight real sections and destinations
  • grading the site becomes more meaningful

That is why this step sits at the center of the build process.

Illustration showing that the homepage should be built after the rest of the site

A simple detail-page workflow you can reuse

1

Pick one approved file

Example: /en/training/step-04-make-images.html

2

State what the page must teach or do

The page should have one clear purpose.

3

Provide relevant approved image URLs

Keep the images aligned to the page topic.

4

Require shared CSS and JS usage

Do not let each page become its own style system.

5

Review and save before moving on

Quality improves when each page gets its own review.

Common beginner mistakes

1. Asking for many pages in one giant batch

This often reduces clarity and makes review much harder.

2. Forgetting to state the exact filename

That invites ambiguity and increases the chance of drift.

3. Using weak page purposes

A page should not just “be about something.” It should teach, explain, guide, or support something clearly.

4. Letting pages ignore the shared system

Once site.css and site.js exist, pages should be built around them.

5. Building section indexes too early

The more honest and useful method is still: detail pages first, section indexes after.

Practical principle

Each detail page should strengthen the section, not just increase the file count.

Think in terms of usefulness and structure, not page volume.

What you should have by the end of this step

By the end of Step 09, you should have:

  • multiple real detail pages built from approved filenames
  • pages using approved image URLs
  • pages relying on the shared CSS and JS foundation
  • clearer substance inside each major section
  • a stronger base for section index pages later

Mini cheat sheet

For detail pages:
- use the approved filename
- define the page purpose clearly
- include relevant approved image URLs
- rely on /site.css and /site.js
- build one page at a time
- review before moving on

Detail pages first.
Section indexes later.
Homepage later still.
Ready check

Can you do these six things?

Completed: 0/6

Next step After the detail pages are done, it is time to build the section index pages that organize and link them properly.
Next: Make Section Index Pages