How to use the templates

What’s in the zip

Every template unzips to the same shape. There is nothing to install and nothing to compile.

template-name/
├── index.html          the page itself
├── css/
│   └── style.css       all styling, with variables at the top
├── js/
│   └── main.js         one file, no libraries
├── images/             demo images, replace them all
└── README.txt          the short version of this page

If you open index.html in a text editor and it looks like readable HTML with comments telling you what each block is, you have the right file.

Opening it

Double-clicking index.html opens it in your browser. That is enough to look at it, and it is enough for most editing.

One caveat: opening a file directly uses the file:// protocol, and a few things behave differently there than on a real server: fonts loaded from another domain, and anything that fetches data. If something looks wrong locally but you have not changed it, test it on a server before assuming it is broken.

Changing the words

Open index.html in any text editor. VS Code, Notepad++, Sublime, even Notepad will do. Find the text you want to change, change it, save, refresh the browser.

Each section is wrapped in a comment saying what it is:

<!-- ===== HERO ===== -->
<section class="hero">
  <h1>Your headline here</h1>
</section>

To remove a whole section, delete everything from its opening comment to the closing </section>. To duplicate one, copy that same block and paste it where you want it.

Changing the colours

Every colour is defined once, at the top of css/style.css, as a custom property. Change the value there and it updates everywhere on the page.

:root {
  --brand:      #ec4899;   /* buttons, links, accents */
  --brand-dark: #db2777;   /* hover states */
  --ink:        #15122e;   /* headings */
  --body:       #4b4763;   /* body text */
}

Do not go hunting for colours further down the file. If a colour is hard-coded somewhere below the variables block, that is a bug. Tell us and we will fix it in the next release.

Swapping images

Replace the files in images/ with your own, keeping the same filenames, and nothing else needs to change. If you use different filenames, update the src attributes in index.html to match.

Two things worth doing before you upload:

• Resize the image to roughly the size it displays at. A 4000px photo in a 600px slot is the single most common reason a hand-built page feels slow.
• Write a real alt description. It is what a screen reader announces and what shows if the image fails to load.

Making the form work

HTML on its own cannot send an email. A form needs something on the server side to receive it. You have three options, roughly in order of effort:

1. A hosted form service. Change the form’s action to the URL the service gives you. Nothing else changes. Easiest by a distance.
2. A mailto link. Replace the form with a plain email link. Ugly, but it works everywhere and never breaks.
3. Your own PHP handler. If your host runs PHP, point the form at a small script that validates the input and sends the mail. Templates that ship with a form include one to start from.

Whichever you pick, submit the form yourself after going live and confirm the message actually arrives. A silently broken contact form is the most expensive bug a small site can have.

Putting it online

Upload the contents of the template folder to your web root, usually public_html, www or htdocs depending on the host. The folder structure must stay intact: index.html at the top, with css, js and images beside it.

Two things to check the moment it is live:

• The address starts with https://, not http://. Nearly every host issues a free certificate now; turn it on.
• The page loads on a phone. Not a narrow browser window, an actual phone.

When something breaks

The page has no styling at all

The css folder is missing or in the wrong place. It has to sit next to index.html, not inside another folder.

Images show as broken icons

Filenames are case-sensitive on most servers even though they are not on Windows. Hero.JPG and hero.jpg are different files once it is live.

It looks right on my screen but wrong on a phone

Something you added has a fixed width. Look for a width in pixels on whatever element is overflowing and replace it with max-width.

The menu will not open on mobile

js/main.js is not loading. Check the path in the <script> tag at the bottom of index.html.