How to edit an HTML website template (no coding needed)

What you need

A free text editor: VS Code (Windows, Mac, Linux), Notepad on Windows, or TextEdit on Mac (choose Format → Make Plain Text). Do not use Word, it adds hidden formatting. Keep the template open in your browser too, and press refresh after each save to see the change.

1. Change the text

Open index.html and use Find (Ctrl+F or Cmd+F) to search for a sentence you can see on the page, then type over it. Only change the words between the tags, for example the part between <h1> and </h1>. Leave the angle brackets alone.

2. Change the browser tab title

Near the top of index.html is a line like <title>Harbor Plumbing &amp; Drain ...</title>. Put your business name and what you do there. Google often shows this as the headline in search results, and the description line just below it as the snippet.

3. Change colors

Open style.css. The first block, starting :root {, lists every color as a variable, such as --primary: #d4ff3a;. Replace the hex code with your own (any online "color picker" gives you one). The whole page updates, because every button and heading uses these variables.

4. Change fonts

In the same :root block, --font-display sets headings and --font-body sets paragraphs. The fonts load from Google Fonts through a link in the <head> of index.html. To switch, pick a font on fonts.google.com, replace that link with the one it gives you, and put the new font name first in the variable.

5. Change the email links

Search index.html for mailto: and replace the sample address with yours, for example mailto:you@yourbusiness.com. Visitors who click it get a new email to you. The local business template also has a quote form: point it at a free form service, or use Netlify Forms if you host there.

6. Add a photo

The templates ship without stock photos. To add one, put your image (JPG or PNG, under about 300 KB) in the folder and add a line like <img src="shop-front.jpg" alt="Our shop front"> where you want it. The alt text describes the photo for screen readers and search engines.

7. Put it online

When it looks right, follow our free hosting guide to publish it with Netlify Drop or GitHub Pages.

Questions

I broke the layout. What now? Undo (Ctrl+Z or Cmd+Z) until it looks right, or copy the file again from the zip. Keeping the original zip means you can always start over.

Can I add more pages? Yes. Copy index.html to a new name like about.html, edit it, and link to it with <a href="about.html">About</a>.