Beginner Short Course · Module 001

Build Your First One-Page Website with ChatGPT

Learn how to plan, generate, save, open, test and improve a simple website using ChatGPT and Visual Studio Code. No previous coding experience is required.

Start the Course View the Practical Project

What you will learn

By the end of this short course, you will have a real working webpage saved on your computer and opening in your browser.

🧭

Plan the page

Choose the purpose, sections, colours, wording and call-to-action before generating the code.

🤖

Prompt ChatGPT

Use a clear prompt that tells ChatGPT exactly what kind of website you want.

💻

Test the result

Save the page as an HTML file and open it using Live Server in Visual Studio Code.

The six-step build

Follow these steps in order. Each step moves you closer to a finished website.

Decide what your website is for

A one-page website works best when it has one clear purpose. It could introduce a small business, promote a booklet, display photography, explain a service or provide contact details.

Who is the website for?
What do you want visitors to learn?
What should visitors do next?

💡

Example: “I want a one-page photography website that introduces my work and encourages people to view my gallery.”

Choose the page sections

A simple first website might contain:

A header with your name or brand
A large welcome section
An About section
A Services, Gallery or Features section
A Contact section
A footer

Give ChatGPT a complete prompt

The more useful information you give ChatGPT, the more suitable the finished page will be.

Create a complete self-contained one-page HTML website for a beginner. Purpose: A personal photography website. Style: Dark navy background with gold highlights. Sections: Header, hero, about, featured photos, contact and footer. Requirements: - Mobile friendly - All CSS inside the HTML file - Clear navigation buttons - Large readable text - No external libraries - Include simple comments in the code

Create and save the HTML file

Open Visual Studio Code.
Create a new folder for your website.
Create a new file.
Name it index.html.
Paste the code from ChatGPT into the file.
Press Ctrl + S to save.

📁

Important: The home page of most websites is called index.html.

Open the website with Live Server

Find index.html in the Explorer panel.
Right-click the file.
Select Open with Live Server.
Your default browser should open the page.

Every time you save a change, Live Server normally refreshes the webpage for you.

Improve the website one change at a time

Ask ChatGPT for small, clear improvements rather than rebuilding everything.

Please improve my existing HTML page. Change only the hero section: - Make the heading larger - Add a gold button - Keep all other sections unchanged - Return the complete updated HTML file

✅

Best practice: Always keep a backup copy before making a major change.

Simple starter website

This small example shows the basic structure of a complete HTML page.

<!DOCTYPE html>
<html lang="en-NZ">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Website</title>

  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #07111f;
      color: white;
      text-align: center;
    }

    header {
      padding: 80px 20px;
    }

    h1 {
      color: #f4d88b;
      font-size: 3rem;
    }

    .button {
      display: inline-block;
      margin-top: 20px;
      padding: 12px 20px;
      background: #d6aa4a;
      color: #07111f;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <header>
    <h1>Welcome to My First Website</h1>
    <p>I created this page with ChatGPT.</p>
    <a class="button" href="mailto:[email protected]">Contact Me</a>
  </header>
</body>
</html>

Before you publish

Use this checklist to make sure your page is ready.

I saved the main page as index.html. The page opens correctly in my browser. The headings and text are easy to read. All buttons and links work. The page looks good on a phone-sized screen. I removed placeholder wording and added my own details.

Practical Project

Create a one-page website about yourself, your hobby or your service

Your goal is to finish one working webpage rather than trying to create a large website all at once.

1. Write the content

Create a title, short introduction, About paragraph and contact message.

2. Choose the look

Select two main colours, one highlight colour and a simple visual style.

3. Generate the code

Use the prompt from Lesson 3 and replace the example details with your own.

4. Test and improve

Open the page with Live Server and ask ChatGPT to repair or improve one item at a time.

Build a complete self-contained one-page website for me. Website topic: [write your topic] Website name: [write your name or brand] Main colours: [write your colours] Sections required: Header, hero, about, features, contact and footer. Style: Clean, modern and beginner friendly. Make it mobile friendly. Place all HTML and CSS in one file. Return the complete index.html code.

Check your understanding

Open each question after deciding on your answer.

1. What is the usual filename for a website home page?

Answer: index.html

2. What does Live Server do?

Answer: It opens your local website in a browser and refreshes it when you save changes.

3. Why should your ChatGPT prompt include colours and sections?

Answer: Clear instructions help ChatGPT create a page that better matches your intended design and purpose.

4. What should you do before a major change?

Answer: Save a backup copy of the current working file.

5. Is a one-page website a real website?

Answer: Yes. A well-designed single page can provide information, display work, promote a service and collect enquiries.

🏆

Course Complete

You have taken the first step into website building

You now understand how to plan a page, prompt ChatGPT, save an HTML file, open it with Live Server and improve it through small controlled changes.

Return to the Top Student Dashboard