Week 1: Websites, Files and ChatGPT as a Coding Helper
This week in plain English
ObjectiveUnderstand what a website is, learn how ChatGPT can help with coding, and create the first live HTML page.
Why this mattersBefore building anything commercial, she must understand that websites are made from files and that AI is a helper, not magic.
What she will makeA live homepage for a pretend local business.
What “done” looks likeThe homepage is uploaded online, has a heading, intro text, services preview and a link to the next page placeholder.
At the end, she should be able to say:
“A website is a folder of files. ChatGPT can help write and explain code, but I still need to test and understand it.”
“A website is a folder of files. ChatGPT can help write and explain code, but I still need to test and understand it.”
Fortnight project: Commercial Project 1 starts: Local Business Starter Website.
Skills: HTML basics, file names, index.html, ChatGPT prompting, FileZilla upload
Suggested session structure: 10 minutes objective, 10 minutes ChatGPT planning, 25 minutes building, 10 minutes testing, 5 minutes recap.
Commercial objective for Weeks 1–2
Two-week commercial outcome: Build a simple 3-page website for a pretend local business. By the end of Week 2, it should look good enough to show as a beginner portfolio project.
What ChatGPT is allowed to do
ChatGPT can help: <ul> <li>explain code in simple words</li> <li>write starter HTML</li> <li>suggest better wording</li> <li>find mistakes</li> <li>create checklists</li> </ul> ChatGPT should not be trusted blindly. She must test the page herself.
First ChatGPT prompt
Prompt to use:
I am 11 years old and learning to build websites. Please create a simple homepage for a pretend local business called Vera’s Pet Sitting. Use beginner-friendly HTML only. Include a heading, short introduction, three services and a link to services.html. Explain the code after you write it.
I am 11 years old and learning to build websites. Please create a simple homepage for a pretend local business called Vera’s Pet Sitting. Use beginner-friendly HTML only. Include a heading, short introduction, three services and a link to services.html. Explain the code after you write it.
Step-by-step
- Create a folder called veras-pet-sitting.
- Create a file called index.html.
- Ask ChatGPT for starter HTML using the prompt above.
- Paste the code into index.html.
- Read the code and identify the heading, paragraph, list and link.
- Open the file in a browser.
- Change at least three words manually without ChatGPT.
- Upload it with FileZilla to public_html/project-vera/veras-pet-sitting/.
- Visit the live URL.
Starter fallback code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vera's Pet Sitting</title>
<meta name="description" content="Friendly pet sitting for local families.">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Vera's Pet Sitting</h1>
<p>Friendly pet sitting for local families who want their pets cared for properly.</p>
<h2>Services</h2>
<ul>
<li>Dog walking</li>
<li>Pet feeding visits</li>
<li>Holiday pet check-ins</li>
</ul>
<p><a href="services.html">View services</a></p>
</body>
</html>End of week check
- The page opens on the computer.
- The page opens online after upload.
- The filename is exactly index.html.
- The page has no private information.
- She can explain what ChatGPT helped with and what she changed herself.