Project Vera: 20-Week Commercial Website Course

Learn websites, coding with ChatGPT, HTML, CSS, JavaScript, calculators, quizzes, SEO and launch QA — with one commercial-quality project completed every two weeks.

Week 2: Turn One Page into a 3-Page Business Website

This week in plain English

ObjectiveCreate services and contact pages, add navigation, and finish the first commercial mini website.
Why this mattersMost real business websites need more than one page. Navigation teaches how pages connect.
What she will makeA 3-page local business website with homepage, services page and contact page.
What “done” looks likeAll three pages are online, linked together, and easy to understand.
At the end, she should be able to say:
“A business website needs clear pages and navigation so visitors can find what they need.”
Fortnight project: Commercial Project 1 completed.

Skills: multi-page sites, navigation, basic business copy, contact page, upload testing

Suggested session structure: 10 minutes objective, 10 minutes ChatGPT planning, 25 minutes building, 10 minutes testing, 5 minutes recap.

Commercial outcome

By the end of this week: Vera’s Pet Sitting should look like a simple real website. It does not need a real form yet, but it should have a clear contact page and services page.

Step-by-step

  1. Create services.html.
  2. Create contact.html.
  3. Add the same navigation menu to all three pages.
  4. Ask ChatGPT to improve the services wording.
  5. Manually choose the best wording and simplify anything too fancy.
  6. Add a “contact us” call-to-action on every page.
  7. Upload all three files.
  8. Click every menu link online.

Navigation code

<nav>
  <a href="index.html">Home</a>
  <a href="services.html">Services</a>
  <a href="contact.html">Contact</a>
</nav>

ChatGPT prompt for business copy

Prompt:
Please write simple, friendly service descriptions for a small local pet sitting website. Services are dog walking, pet feeding visits and holiday pet check-ins. Keep it clear and not too salesy. Write for parents and families.

services.html outline

<h1>Pet Sitting Services</h1>

<h2>Dog Walking</h2>
<p>Short description goes here.</p>

<h2>Pet Feeding Visits</h2>
<p>Short description goes here.</p>

<h2>Holiday Pet Check-ins</h2>
<p>Short description goes here.</p>

<p><a href="contact.html">Ask about availability</a></p>

contact.html outline

<h1>Contact Vera's Pet Sitting</h1>
<p>For this practice website, this page does not collect real details.</p>

<h2>Example Contact Details</h2>
<p>Email: hello@example.com</p>
<p>Service area: Local neighbourhood</p>

<p><strong>Safety note:</strong> Do not publish real phone numbers, addresses or school information.</p>

Commercial quality checklist

  • Homepage explains what the business does.
  • Services page explains each service.
  • Contact page tells people what to do next.
  • Navigation works on every page.
  • Text is clear, simple and believable.
  • No private information is published.
Previous week Next week