L11. Plan your personal website

Prepare the content and brief for your first page, allowing about 25 minutes. You need an AI conversation in your browser and Documents\AI-practice\about-me.txt. If that file is missing, create it with Olena’s practice details using Lesson 4.

Olena enjoys books, walking and organising the home. She wants to introduce three learning projects: a personal website, the My Day app and a planned video about tidying a desk. One page is enough. A menu at the top will take visitors to sections further down that same page.

In class

The teacher will compare a vague request with Olena’s brief. Together, we will choose suitable public details and define four checks for the finished website.

Turn an idea into a brief

A brief describes what to make and how to check it. “Make a nice website” leaves the content undefined. “Make one page with my introduction, three projects and a contact link” gives it a structure. We will also name the checks that show whether the page works.

[[VIS:b5_site_brief]]

• In File Explorer, open Documents → AI-practice. Create a folder named personal-site. Keep the website materials here so they do not get mixed up with the app we will make later.
• Open about-me.txt. Find Olena’s first name and interests: these will go on the practice page. Do not add a home address or personal documents.
• Start a new conversation in ChatGPT, Claude or Gemini. Paste the following prompt. Keep Olena’s name and interests for the main worked example because the next lessons use them too. Make a personal variation in the separate home-practice copy. Press the send button.

> [PROMPT]

> Help me plan a one-page personal website in English. Its author is Olena, whose interests are books, walking and organising the home. Sections: “About me”, “Projects”, “Contact”. Projects: a personal website, My Day with three tasks, and a planned 30–45 second video about tidying a desk. Do not describe planned projects as finished. Write an introduction of no more than 40 words, one sentence about each project, and four acceptance checks. Do not write code yet. Do not invent experience, awards or clients.

• Read the answer as a visitor would. Can you tell who the author is and what she does? Replace “delivering innovative solutions” with something concrete, such as “learning to make a website and a task list”. Correct any inaccurate details in the text.
• Open Notepad. Copy the agreed text and save it as Documents\AI-practice\personal-site\brief.txt. Add these checks underneath: “Opens locally; contains three projects; menu links jump to their sections; no sideways scrolling on a narrow screen.”

An expected introduction is: “I enjoy books, walking and organising the home. I am learning to turn small ideas into finished projects.” Next lesson, this introduction will become part of the page. Check the AI’s wording against the brief.

What we will make

The page will use two files inside personal-site. In index.html, HTML markup will identify headings, paragraphs and links. In styles.css, CSS rules will define their colours, spacing and letter sizes.

The practice contact section uses [email protected]. This is an example address for teaching, not Olena’s real mailbox. Before publication, replace it with an address you want to make public, or remove the link. This first website does not need a message submission form.

> [FIX]

> If the AI proposes a shop, registration and ten pages, reply: “Return to the brief: one page, three sections, no accounts or sales. Give me only the revised content.”

Home practice

• Open brief.txt in Notepad and use Save as to create brief-home.txt beside it. Keep the main brief for the next lesson.
• In the copy, replace one interest with your own and rewrite the introduction in no more than 40 words, yourself or with AI. Add no invented experience.
• Save the copy. Add one content check and one menu check. Success means the interest changed, all three projects remain, and both checks describe something you can verify.

Self-test

• Which file should planning leave behind if you have not created code yet?
• What is missing from “Make a nice website”?
• The AI says Olena has five years of experience, but the brief never mentions this. What should change before you save?

Terms

• Brief: a short assignment describing the content and required result.
• HTML: markup that identifies headings, paragraphs, links and other page elements.
• CSS: rules controlling how a web page looks.