How to Build a Multi-Page Website with GitHub Copilot in VS Code

A step-by-step guide to building a five-page website with AI. Every prompt is here, ready to copy, with [square brackets] marking the details you swap for your own business, plus a short explanation of why each prompt is worded the way it is.

What You’ll Build

In this guide you’ll build a complete, multi-page website for a small business. The examples use a catering company, but the same structure works for any business with a few services and something to show or sell. Each page is its own HTML file, linked together through a shared navigation bar:

Home (index.html): hero banner, about teaser, services preview, and testimonials
Menu (menu.html): a full menu or product list with four categories and prices
Services (services.html): four detailed service packages
About (about.html): the founder story, the team, and the mission
Contact (contact.html): an enquiry form, business details, and a map

The example design is warm and elegant rather than dark: an ivory background (#FAF6EF), deep burgundy (#7A2E2E), soft gold (#C9A15D), and charcoal text (#2B2320), with Playfair Display headings and Lato body text. In the styling step, you can swap in your own colors and fonts.

You don’t need to know how to code. You do need to read what Copilot produces, notice what looks wrong, and ask for a fix. This guide shows you how.

What You Need

VS Code installed on your computer.
GitHub Copilot, signed in. Recent versions of VS Code include it built in. The free plan is enough to follow along, but it has monthly limits on chat requests, so check GitHub’s current plan details. This guide uses seven prompts.
The Live Server extension (by Ritwick Dey). It previews your site in the browser and refreshes when you save.
About a dozen photos, covered in the next section.
Your business details: name, tagline, services, contact information, and address. You’ll type these into the prompts.

Prepare Your Images First

Copilot can write code, but it can’t create photo files. The fix is to put real photos in your project before you start, with exact filenames, and then reference those filenames in your prompts. That way every page shows real photography the moment you preview it, instead of empty boxes.

Download free photos from Unsplash or Pexels, rename them exactly as listed below, and place them in a folder called images inside your project folder.

Suggested filenames (use any names you like, as long as the prompts below use the same ones)

hero-image.jpg: the main photo at the top of your homepage. Shape: wide landscape.
about-owner.jpg: a portrait of the founder, or the owner at work. Shape: portrait or square.
about-team.jpg: your team or your workspace. Shape: landscape for a group shot.
service-1.jpg, service-2.jpg, service-3.jpg, service-4.jpg: one photo for each of your four main services. Shape: square or 4:3.
menu-banner.jpg: a wide banner for the top of the menu page. Shape: wide landscape.
menu-category-2.jpg and menu-category-3.jpg: header photos for the second and third menu categories. Shape: wide landscape.

Not sure what to search for? Combine your business type with the kind of shot you need. For a catering business, good searches are ‘elegant banquet table setting’, ‘chef plating dish’, and ‘dessert table wedding’.

Two rules that save you trouble. First, filenames must match exactly: lowercase, with hyphens, and the right extension (.jpg is not the same as .jpeg or .png). Second, don’t worry about cropping the photos perfectly. If an image looks stretched or cut off later, ask Copilot to crop images to fit their containers using object-fit: cover.

Step 1: Create the Project Files

Create a folder for the project, for example my-website, and open it in VS Code (File, then Open Folder).
Make sure the images folder with your renamed photos is inside it.
In the main folder, create seven files: html, menu.html, services.html, about.html, contact.html, style.css, and script.js.

The five HTML files are your pages. All five share one style.css and one script.js, which is what keeps the colors, fonts, and navigation consistent across the whole site.

How to Run Every Prompt in This Guide

The routine is the same each time:

Open the file named in the step (for example html) so it’s the active tab.
Open Copilot Chat: Ctrl+Alt+I on Windows or Linux, Cmd+Ctrl+I on Mac, or click the chat icon in VS Code.
Paste the prompt and press Enter.
Apply the result. In Edit or Agent mode, Copilot edits the file directly and you click Keep to accept the change. In Ask mode, use the apply button on the code block, or copy the code into the file yourself.
Save the file (Ctrl+S, or Cmd+S on Mac), then preview it. Right-click html and choose Open with Live Server.

Copilot’s output varies from run to run. If your wording or layout differs slightly from the examples in this guide, that’s normal, not a mistake.

Five Rules Behind These Prompts

The prompts below look long, but they follow five simple rules. Learn these and you can write your own for any website.

Name real files. Write ‘linking to menu.html’ instead of ‘add a menu link’, and use exact image filenames. Copilot then builds real connections instead of guessing.
List sections in the order you want them. If you don’t set the structure, Copilot decides it for you.
Give one example of the format you want. A single sample dish with a name, description, and price makes every other dish follow the same pattern.
Say what you don’t want. Telling Copilot to avoid lorem ipsum and placeholder text is what produces real copy.
Describe problems precisely. ‘The prices are hard to see’ gets a better fix than ‘make it look better’.

How to Customize the Prompts

Every prompt below has details in [square brackets]. Before you paste a prompt, replace each bracketed part, brackets included, with your own information. For example, [Business Name] becomes the real name of your business. Where a bracket contains ‘e.g.’, the text after it is only an example of the kind of detail to write.

Three more points:

The examples use a catering company, so words like ‘dish’, ‘menu’, and ‘event’ appear in the prompts. If you run a different kind of business, change those words too. A photographer might write ‘package’ instead of ‘dish’ and ‘session’ instead of ‘event’.
The image paths must match the files in your images folder exactly.
Everything outside the brackets is the structure that makes these prompts work. Change it only when something doesn’t fit your business.

Step 2: Build the Home Page (index.html)

Open index.html, open Copilot Chat, and paste this prompt:

Create a full HTML5 page for index.html, the homepage of a [luxury catering business] called ‘[Business Name]’. Link style.css and script.js. Include:

A header with the business name as a logo and a navigation menu linking to actual pages: index.html (Home), menu.html (Menu), services.html (Services), about.html (About), contact.html (Contact).
A hero section using the image [images/hero-image.jpg] as a full-width background, with an eyebrow label ‘[Short Tagline, e.g. Fine Dining, Delivered]’, a large heading ‘[Main Headline, e.g. Exquisite Catering for Unforgettable Occasions]’, a short paragraph about [what your business offers and who it is for, e.g. premium chef-crafted catering for weddings, corporate events, and private celebrations], and two buttons: ‘[View Menu]’ linking to menu.html, and ‘[Book a Tasting]’ linking to contact.html.
A short ‘About’ teaser section with the image [images/about-owner.jpg], 2-3 sentences about [the founding chef’s story and philosophy], and a ‘Learn More’ link to about.html.
A services preview section with 4 short cards ([Service 1], [Service 2], [Service 3], [Service 4]), each with a one-sentence real description, using images [images/service-1.jpg], [images/service-2.jpg], [images/service-3.jpg], and [images/service-4.jpg], and a ‘See All Services’ link to services.html.
A testimonials section with 3 realistic, specific client quotes (not generic placeholder text) and client names/event types.
A footer with the business name, a short tagline, contact details ([phone number], [email address], and [street address]), and copyright text.
Write full, realistic copy throughout, no lorem ipsum or ‘insert text here’ placeholders.

Why it works: The navigation links point to real filenames, which is what makes this a true multi-page site instead of one long page with scroll links. The sections are listed in the exact order you want. And the last line bans placeholder text, which stops Copilot from defaulting to lorem ipsum.

What you should see: a full-width hero photo with a headline and two buttons, an about teaser, four service cards, three testimonials, and a footer. It will look plain and unstyled until Step 7. That’s expected. The navigation links won’t lead anywhere useful yet either, because the other pages are still empty.

Step 3: Build the Menu Page (menu.html)

Open menu.html and paste:

Create a full HTML5 page for menu.html for ‘[Business Name]’, using the same header/navigation and footer structure as index.html (link style.css and script.js). Include:

A page banner section using the image [images/menu-banner.jpg] as a background, with the heading ‘[Our Menu]’ and a short subheading about [seasonal, chef-crafted dishes].
A full menu broken into four categories: [Starters], [Main Courses], [Desserts], and [Bar & Beverage Packages]. In each category, write 4-5 realistic dish items, each with an actual-sounding dish name, a one-sentence appetizing description, and a price (e.g., ‘[Seared Scallops – citrus beurre blanc, micro greens – $18]’). Do not use generic placeholder names like ‘Dish 1’ – invent specific, realistic fine-dining dish names and descriptions.
Use [images/menu-category-2.jpg] and [images/menu-category-3.jpg] as section header images for the [Main Courses] and [Desserts] categories.
At the bottom, a short note: ‘[Menus are fully customizable based on your event and dietary requirements]’ with a button linking to contact.html labeled ‘[Discuss Your Menu]’. Style the menu items in a clean, elegant list or grid layout, not plain paragraphs.

Why it works: The example dish shows Copilot the exact format for every item (name, description, price), so it copies the pattern instead of inventing one. Stating how many dishes to write per category gives you a full menu instead of a few random items.

What you should see: a menu banner, four categories, and four to five named dishes in each with descriptions and prices. Click Menu from the home page to confirm it opens as a separate page.

Step 4: Build the Services Page (services.html)

Open services.html and paste:

Create a full HTML5 page for services.html for ‘[Business Name]’, using the same header/navigation and footer as index.html. Include a page banner with heading ‘[Our Services]’, then 4 detailed service sections — [Service 1], [Service 2], [Service 3], and [Service 4]. Each section should have: the relevant image ([images/service-1.jpg], [images/service-2.jpg], [images/service-3.jpg], [images/service-4.jpg]), a real 2-3 sentence description of what’s included, a bullet list of 3-4 realistic features (e.g., ‘[Dedicated event coordinator]’, ‘[Custom menu tasting session]’, ‘[Full setup and cleanup]’), and a starting price range (e.g., ‘[Starting at $65 per guest]’). End the page with a CTA section encouraging visitors to get in touch, linking to contact.html.

Why it works: Naming the four services means none gets skipped or invented off-brand. Specifying the content of each section (a description, a feature list, and a price) makes Copilot write real detail instead of one vague paragraph.

What you should see: four service sections, each with a photo, a short description, a feature list, and a starting price, ending with a call to action.

Step 5: Build the About Page (about.html)

Open about.html and paste:

Create a full HTML5 page for about.html for ‘[Business Name]’, using the same header/navigation and footer as index.html. Include a page banner with heading ‘[Our Story]’, a founder/chef bio section using [images/about-owner.jpg] with a realistic 3-4 sentence backstory about [starting the business and culinary philosophy], a ‘Meet the Team’ section using [images/about-team.jpg] with 3 realistic team member names, roles (e.g., [Head Chef], [Event Coordinator], [Pastry Chef]), and one-sentence bios each, and a short mission statement section about the brand’s values ([quality ingredients, personalized service, memorable experiences]). End with a CTA linking to contact.html.

Why it works: Naming actual job titles such as Head Chef, Event Coordinator, and Pastry Chef pushes Copilot to write specific, believable bios instead of generic ones.

What you should see: a founder story with a photo, a team section with three named people and their roles, and a mission statement.

Step 6: Build the Contact Page (contact.html)

Open contact.html and paste:

Create a full HTML5 page for contact.html for ‘[Business Name]’, using the same header/navigation and footer as index.html. Include a page banner with heading ‘[Plan Your Event With Us]’, a contact form with fields for Name, Email, Phone, Event Type (dropdown: [Wedding, Corporate, Private, Other]), Event Date, Estimated Guest Count, and a Message textarea, with a ‘Send Enquiry’ submit button. Next to or below the form, add a business info block with contact details ([phone number], [email address], and [street address]), [business hours], and a Google Maps embed using an iframe with [your business address] that’s easy to swap. Add social media icon links ([Instagram], [Facebook]) at the bottom.

Why it works: The form fields are specific to the business. In this example they are event type, event date, and guest count, which are the details you need to quote someone, so the form collects useful information from the start instead of just a name and email. Change them to fit what you need to know about a new customer.

What you should see: an enquiry form, a business details block with hours, a map, and social links.

One honest limitation: a plain HTML form does not send messages anywhere on its own. It needs a backend service. See the section ‘Make the Contact Form Send Messages’ near the end of this guide.

Step 7: Style the Whole Site (style.css)

Up to now the site is structurally complete but visually plain. Open style.css and paste:

Write complete CSS in style.css for a [luxury catering] website with a warm, elegant look — NOT a dark or black theme. Use this palette: [warm ivory] background ([#FAF6EF]), [deep burgundy] accent ([#7A2E2E]), [soft gold] highlight ([#C9A15D]), and [charcoal] text ([#2B2320]). Import and use ‘[Playfair Display]’ from Google Fonts for all headings, and ‘[Lato]’ for body text. Style consistently across all pages (index.html, menu.html, services.html, about.html, contact.html) that share this file: a fixed navigation bar with a subtle shadow and [gold] hover underline on links, hero/banner sections with a soft dark overlay on background images so white text stays readable, pill-shaped [burgundy] buttons with a [gold] hover state, card and section styling with generous padding, soft shadows, and rounded corners, and a consistent footer style. Use a max content width of 1200px, centered, with generous spacing throughout.

Why it works: Exact hex codes make the result reproducible. If you only say ‘warm colors’, Copilot could land anywhere. With these three codes locked in, you get this exact palette every time.

Check the fonts: Copilot sometimes adds the Google Fonts link to only one page. Open the head section of each HTML file and confirm it contains a font link. If one is missing, paste this inside the head tag (it loads Playfair Display and Lato; for other fonts, copy the link from fonts.google.com):

Save everything and refresh Live Server, then click through all five pages. Because they share one stylesheet, every page should now match.

Step 8: Make It Mobile-Friendly

Most visitors will see your site on a phone, so test it. In your browser, press F12 and click the device toolbar icon to preview a mobile screen. You’ll likely see a cramped navigation bar and columns that don’t fit. Then open style.css and paste:

Add responsive design to style.css using media queries, applied consistently across all five pages that share this stylesheet. On screens under 768px: collapse the navigation into a hamburger menu, stack all multi-column sections (services, menu categories, team members) into a single column, reduce heading sizes appropriately, and make buttons full-width. Also add the JavaScript in script.js needed to toggle the mobile menu open and closed.

Why it works: Giving an exact breakpoint (768 pixels) and listing exactly what should happen at that width stops Copilot from guessing at a generic ‘make it responsive’ treatment. You control the mobile experience.

Refresh the mobile preview and click through all five pages. The menu should collapse into a hamburger icon that opens and closes, and the sections should stack in a single column.

Swap In Your Own Photos

Every image on the site is just a file in the images folder, referenced by name in the HTML. To use your own photography, you don’t have to touch any code:

Drag your photo into the images
Rename it to match the existing filename exactly, for example hero-image.jpg, replacing the old file.
Refresh the page in Live Server.

If you’d rather keep a different filename, find the image’s line in the HTML and change the src value to the new path. Keep the file extension in sync, since .jpg and .png are different. If you’re changing a lot of images, ask Copilot instead: ‘Update every image path in index.html to use these new filenames.’ Then list the old and new names.

Make the Contact Form Send Messages

The form Copilot built looks complete, but HTML alone can’t deliver a message to your inbox. You need a form service. One free option is Formspree: create a form there, copy the endpoint URL it gives you, and paste it into the form’s action attribute in contact.html, with the method set to post. You can also ask Copilot to do it: ‘Connect the form in contact.html to this Formspree endpoint: [paste your endpoint].’ Free plans have limits, so check the current terms. Whatever service you use, send yourself a test message before relying on the form.

Troubleshooting

An image shows as broken or is missing. Check the filename and extension against the src path in the HTML. Look at spelling, capital letters, and .jpg versus .jpeg.
A page has no styling. That page’s head is missing the stylesheet link. It should contain <link rel=”stylesheet” href=”style.css”>. Ask Copilot to add it or paste it in yourself.
Navigation looks different on one page. Open html and that page, and ask Copilot: ‘Make the header and navigation in menu.html identical to the one in index.html.’ Use your own filename.
The mobile menu doesn’t open. Confirm that js is linked at the bottom of every page, not just one.
Copilot changed the wrong file. Open the file you want changed before sending a prompt, and name that file in the prompt itself.
The result doesn’t match what you expected. Copilot generates slightly different code each time. In a follow-up prompt, name the page and describe exactly what looks wrong (for example, ‘the prices on menu.html are hard to see’) instead of starting over.

Final Checklist

All five pages open from the navigation, and each link goes to a real page.
Every image loads on every page.
The fonts and colors match across all five pages.
The site looks clean on desktop and in the mobile preview.
The mobile menu opens and closes.
You’ve replaced the sample phone number, email, and address with your own.
The contact form is connected to a form service and tested.

Wrap-Up

The real skill here isn’t memorizing code. It’s describing what you want clearly, checking what Copilot gives you, and asking for specific fixes when something is off. Name real files, set the structure, show an example format, ban placeholder text, and describe problems precisely. Those habits work for any website you build next.