Website Guide Academy | Download, Edit & Publish Tutorials

Module 1 – Downloading Templates

Learn how to browse, select, and download free HTML templates from our library. Understand ZIP extraction and what files you'll receive.

Step 1: How to download a template from our website

Follow these steps to download any template from our library:

Visit freewebsitetemplates.co.uk/templates to browse available templates.
Click on any template card to open the live preview page.
Review the template on desktop and mobile to make sure it fits your business.
Click the "Download Free" or "Download ZIP" button.
The file will download as a .zip archive to your Downloads folder.

💡 Pro Tip

Before downloading, check if the template matches your industry. We have specialised templates for electricians, plumbers, restaurants, salons, and more.

Step 2: How to extract (unzip) the downloaded file

Template files come compressed in a ZIP archive. You need to extract them before editing.

Windows Instructions

1. Navigate to your Downloads folder
2. Right-click on the .zip file (e.g., "restaurant-template.zip")
3. Select "Extract All..." from the context menu
4. Choose a destination folder (e.g., Desktop or Documents)
5. Click "Extract" — a new folder appears with all template files

Mac Instructions

1. Navigate to your Downloads folder in Finder
2. Double-click the .zip file
3. macOS automatically extracts it into a folder
4. The new folder appears in the same directory as the .zip file
5. You can now move this folder anywhere you like

⚠️ Important

Never edit files directly inside the ZIP archive — always extract first. Editing inside a ZIP can corrupt your files and lose your changes.

Step 3: How to open the template in a browser to preview

Once extracted, you can preview the template locally in your browser before making any changes.

Open the extracted template folder.
Find the file named index.html — this is the homepage.
Double-click index.html to open it in your default web browser.
The template will load as a fully styled webpage (works offline!).
Navigate through links to check all pages work correctly.

💡 Pro Tip

If the page looks unstyled (plain text), make sure you extracted ALL files from the ZIP, not just the HTML file. The CSS, JavaScript, and image files must be in the same folder structure.

Module 2 – Understanding File Structure

Learn what each file and folder does inside a template package. Understanding the structure helps you know exactly where to make changes.

Step 1: Typical template folder structure explained

Here's what you'll typically find inside a downloaded template:

Folder Structure

my-template/
├── index.html          ← Homepage (main file you'll edit)
├── about.html          ← About page
├── services.html       ← Services page
├── contact.html        ← Contact page
├── css/
│   └── styles.css      ← All visual styling (colours, fonts, layout)
├── js/
│   └── script.js       ← Interactive behaviours (menus, sliders)
├── images/
│   ├── hero-banner.jpg ← Large header images
│   ├── logo.png        ← Your business logo
│   └── services/       ← Service-specific images
└── fonts/
    └── ...             ← Custom font files (if any)

💡 Key Files to Know

index.html = Your homepage. css/styles.css = Controls how everything looks. images/ = Where to put your own photos. These three are the files you'll edit most often.

Step 2: Which text editor to use for editing

You need a proper code editor — not Word or Notepad. Here are the best free options:

Recommended Editors

1. Visual Studio Code (VS Code) — FREE
   → Download: code.visualstudio.com
   → Best choice for beginners and professionals
   → Features: syntax highlighting, live preview, file explorer

2. Sublime Text — FREE trial
   → Download: sublimetext.com
   → Lightweight and fast

3. Brackets — FREE
   → Download: brackets.io
   → Built specifically for web design
   → Live preview built-in

⚠️ Never Use These

Do NOT edit HTML files with Microsoft Word, Google Docs, or TextEdit (Mac rich text mode). They add hidden formatting that breaks your code. Always use a dedicated code editor.

Step 3: How to open a template project in VS Code

Opening the entire project folder (not just one file) gives you access to all template files in the sidebar.

Download and install Visual Studio Code from code.visualstudio.com.
Open VS Code and go to File → Open Folder.
Navigate to your extracted template folder and click "Select Folder".
The left sidebar now shows all your template files in a tree view.
Click on index.html to start editing the homepage.
Install the "Live Server" extension for real-time preview in your browser.

💡 Live Preview Setup

In VS Code, press Ctrl+Shift+X (Windows) or Cmd+Shift+X (Mac), search for "Live Server" by Ritwick Dey, and install it. Then right-click your index.html and select "Open with Live Server". Every time you save, your browser refreshes automatically!

Module 3 – Editing HTML Content

Learn how to change text, headings, links, phone numbers, addresses, and business information in your template files.

Step 1: How to change headings and text content

Text in HTML is wrapped in tags like <h1>, <h2>, and <p>. Simply replace the text between the opening and closing tags.

Template Default

<h1>Welcome to Our Business</h1>
<p>We provide excellent services to our valued customers.</p>

Your Customised Version

<h1>Professional Plumbing Services in Manchester</h1>
<p>24/7 emergency plumbing, boiler installation, and bathroom renovations. Trusted by 500+ homeowners since 2015.</p>

💡 Finding Text Quickly

Press Ctrl+F (Windows) or Cmd+F (Mac) in your editor and search for the placeholder text you want to replace. This is much faster than scrolling through code.

Step 2: How to update phone numbers, emails, and addresses

Contact details appear in multiple places — header, footer, and contact page. Use Find & Replace to update them all at once.

Template Placeholder

<a href="tel:+441234567890">01onal 234 567 890</a>
<a href="mailto:info@example.com">info@example.com</a>
<p>123 High Street, London, UK</p>

Your Real Details

<a href="tel:+440161XXXXXXX">0161 XXX XXXX</a>
<a href="mailto:hello@yourbusiness.co.uk">hello@yourbusiness.co.uk</a>
<p>45 Deansgate, Manchester, M3 2AY</p>

💡 Find & Replace All

Press Ctrl+Shift+H (Windows) or Cmd+Shift+H (Mac) in VS Code to open "Find & Replace in Files". This searches ALL files in your project and replaces every instance at once.

Step 3: How to change navigation menu links

Navigation menus use <a> tags with href attributes. Change both the display text and the link destination.

Template Default

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

Customised Navigation

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About Us</a>
  <a href="services.html">Our Services</a>
  <a href="gallery.html">Gallery</a>
  <a href="contact.html">Get a Quote</a>
</nav>

⚠️ Remember

If you rename a page file (e.g., portfolio.html → gallery.html), you must update EVERY link pointing to it across all HTML files, including the mobile menu and footer links.

Step 4: How to add or remove entire sections

HTML sections are marked with comments like . Delete everything between the opening and closing tags to remove a section.

How Sections Are Structured

<!-- Testimonials Section -->
<section class="testimonials">
  <h2>What Our Clients Say</h2>
  <!-- ... all testimonial content ... -->
</section>
<!-- End Testimonials Section -->

<!-- To REMOVE this section, delete everything from
     the opening <section> to the closing </section>
     including the comments -->

💡 Before Deleting

Always make a backup copy of your original files before removing sections. You can simply copy the entire template folder and rename it "template-backup" just in case you need to restore something later.

Module 4 – Customising CSS Styles

Learn how to change colours, fonts, spacing, and layout without breaking the template design. No CSS knowledge required.

Step 1: How to change the primary brand colour

Most templates use CSS variables or repeated hex colour codes. Find and replace the primary colour throughout the stylesheet.

Step-by-Step

1. Open your css/styles.css file
2. Look for a :root section at the top — it often contains colour variables:

   :root {
     --primary-color: #4928FD;
   }

3. Change #4928FD to your brand colour (e.g., #1e3a8a for navy blue)
4. Save the file — all elements using this variable update automatically!

If there's no :root section, use Find & Replace:
   → Find: #4928FD (the template's primary colour)
   → Replace with: #1e3a8a (your brand colour)
   → Click "Replace All"

💡 Finding Your Brand Colour

Use coolors.co or color.adobe.com to generate a harmonious colour palette. Pick a primary colour, a lighter shade for hover effects, and a dark shade for text.

Step 2: How to change fonts

Templates often use Google Fonts. You can swap them by updating both the font import link and the CSS font-family property.

Template Default Font

<!-- In the <head> section of index.html -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Changing to a Different Font

<!-- Step 1: Go to fonts.google.com, pick a font, copy the link -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

<!-- Step 2: In your CSS file, find the font-family declaration -->
<style>
body {
  font-family: 'Poppins', sans-serif; /* Changed from 'Inter' */
}
</style>

Step 3: How to adjust spacing and padding

If sections feel too tight or too spaced out, adjust the padding and margin values in CSS.

Common Spacing Adjustments

/* Make sections more spacious */
.section {
  padding-top: 80px;     /* Space inside the top */
  padding-bottom: 80px;  /* Space inside the bottom */
}

/* Reduce gap between heading and paragraph */
h2 {
  margin-bottom: 16px;   /* Space below the heading */
}

/* Add breathing room to containers */
.container {
  padding-left: 24px;
  padding-right: 24px;
}

💡 Quick CSS Edits with DevTools

Right-click any element on your page and select "Inspect". You can test CSS changes live in the browser! Once you find values you like, copy them into your CSS file.

Module 5 – Adding Images & Media

Learn how to replace placeholder images with your own photos, resize them properly, and optimise them for fast page loading.

Step 1: How to replace template images with your own

Find the image tag in HTML and update the src attribute to point to your new image file.

Template Placeholder

<img src="images/placeholder-hero.jpg" alt="Hero Image">

Your Custom Image

<!-- Step 1: Place your image in the images/ folder -->
<!-- Step 2: Update the src and alt attributes -->
<img src="images/my-shop-front.jpg" alt="Smith's Bakery storefront on High Street, Manchester">

💡 Image Naming Rules

Use lowercase letters, hyphens instead of spaces, and descriptive names. Good: team-photo-2024.jpg. Bad: IMG_20240315_143022.jpg or Photo (1).JPG.

Step 2: How to optimise images for web performance

Large images slow your website down dramatically. Optimise before uploading.

Image Optimisation Checklist

1. RESIZE: Photos from phones are often 4000px+ wide.
   → Resize to max 1920px wide for hero banners
   → Resize to max 800px wide for content images
   → Resize to max 400px for thumbnails

2. COMPRESS: Use free tools to reduce file size:
   → tinypng.com — drag and drop, free
   → squoosh.app — Google's free tool with previews
   → imageoptim.com — Mac desktop app

3. FORMAT: Use modern formats when possible:
   → JPEG for photographs (aim for under 200KB)
   → PNG for logos/graphics with transparency
   → WebP for best compression (70% smaller than JPEG)
   → SVG for icons and simple graphics

4. TARGET SIZES:
   → Hero banner: under 300KB
   → Content image: under 150KB
   → Logo: under 50KB

Step 3: How to change the logo

The logo usually appears in the header and footer. Update all instances across every page.

Create your logo as a PNG (transparent background) or SVG file.
Name it logo.png or logo.svg and place it in the images/ folder.
Search all HTML files for the existing logo image tag (usually class="logo").
Update the src attribute to point to your new logo file.
Adjust the logo height in CSS if needed (typically 40px-60px).

💡 No Logo Yet?

Use canva.com (free tier) to create a professional logo in minutes. Export as PNG with transparent background. You can also use text-based logos with Google Fonts.

Module 6 – Setting Up Contact Forms

Make your contact form actually send emails. Learn about form services, validation, and spam protection for static HTML sites.

Step 1: Why HTML forms don't send emails by default

Static HTML cannot send emails on its own — you need a form processing service. Here are the best free options:

Free Form Services

1. Formspree (formspree.io)
   → Free tier: 50 submissions/month
   → No backend needed — just change the form action URL
   → Spam filtering included

2. Getform (getform.io)
   → Free tier: 50 submissions/month
   → File upload support
   → Integrations with Slack, Google Sheets

3. FormSubmit (formsubmit.co)
   → Completely free, unlimited submissions
   → No registration required
   → Anti-spam captcha included

4. Netlify Forms (if hosting on Netlify)
   → 100 submissions/month free
   → Just add netlify attribute to your form
   → Built-in spam detection

Step 2: Setting up Formspree (easiest method)

Formspree is the simplest way to make your contact form work. Just change the form action attribute.

Non-Functional Form

<form action="#" method="POST">
  <input type="text" name="name" placeholder="Your Name">
  <input type="email" name="email" placeholder="Your Email">
  <textarea name="message" placeholder="Your Message"></textarea>
  <button type="submit">Send Message</button>
</form>

Working Form with Formspree

<!-- Step 1: Sign up free at formspree.io -->
<!-- Step 2: Create a new form and get your endpoint ID -->
<!-- Step 3: Replace the action URL below -->

<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <input type="hidden" name="_subject" value="New website enquiry!">
  <button type="submit">Send Message</button>
</form>

Module 7 – Hosting & Deployment

Deploy your finished website live on the internet. Learn free and paid hosting options, uploading methods, and going live in minutes.

Step 1: Free hosting with Netlify (recommended)

Netlify offers the fastest, simplest way to deploy a static HTML website for free. No server setup needed.

Go to app.netlify.com and create a free account (use GitHub, GitLab, or email).
On the dashboard, find the "Sites" tab.
You'll see a large drag-and-drop zone that says "Drag and drop your site output folder here".
Open your file manager and navigate to your template folder (the one containing index.html).
Drag the entire folder (not just index.html!) onto the Netlify drop zone.
Wait 5-10 seconds — Netlify gives you a live URL like https://random-name-123.netlify.app.
Your website is now LIVE on the internet! Share the link with anyone.

💡 Free Tier Includes

100GB bandwidth/month, free SSL certificate (https://), custom domain support, and automatic CDN distribution across the globe. More than enough for small business websites.

Step 2: Free hosting with GitHub Pages

GitHub Pages is another excellent free hosting option, ideal if you're comfortable with basic Git or want version control.

Create a free account at github.com.
Create a new repository (click the "+" icon → New repository).
Name it yourusername.github.io for a personal site, or any name for a project site.
Upload your template files using the "uploading an existing file" link.
Drag all your template files into the upload area and click "Commit changes".
Go to Settings → Pages and set the source to "Deploy from a branch" → main.
Your site is live at https://yourusername.github.io within 2-5 minutes.

Step 3: Free hosting with Vercel

Vercel is extremely fast and easy to use. It's similar to Netlify with a few extra features.

Go to vercel.com and sign up with GitHub, GitLab, or email.
Click "Add New…" → "Project".
Either import a GitHub repository, or use the CLI to upload your files.
For drag-and-drop: install the Vercel CLI with npm i -g vercel, then run vercel in your template folder.
Follow the prompts — your site deploys in seconds with a live URL.

Step 4: Traditional hosting with cPanel (paid option)

If you have a traditional web hosting plan (GoDaddy, Bluehost, SiteGround, etc.), use the cPanel File Manager or FTP.

Log into your hosting provider's control panel (usually yourdomain.com/cpanel).
Open File Manager from the dashboard.
Navigate to the public_html folder (this is your website root).
Click "Upload" and upload your entire template ZIP file.
Once uploaded, right-click the ZIP and select "Extract".
Make sure index.html is directly inside public_html/ (not in a subfolder).
Visit your domain — your website should now be live!

⚠️ Common Mistake

If your site shows a directory listing instead of your homepage, check that index.html is in the root of public_html/, not inside a subfolder like public_html/my-template/index.html.

Module 8 – Custom Domain & SEO Setup

Connect a custom domain name, configure SSL certificates, and optimise your site for search engines to attract customers.

Step 1: How to buy and connect a custom domain

A custom domain (e.g., yourbusiness.co.uk) makes your website look professional and trustworthy.

Domain Registration

Recommended Domain Registrars:
1. Namecheap (namecheap.com) — from £6/year for .co.uk
2. Cloudflare Registrar — at-cost pricing, no markup
3. Google Domains — simple interface, good DNS
4. GoDaddy — popular, frequent sales

Connecting to Netlify:
1. In Netlify dashboard → Site settings → Domain management
2. Click "Add custom domain"
3. Enter your domain (e.g., yourbusiness.co.uk)
4. Netlify gives you nameservers or CNAME records
5. Go to your domain registrar's DNS settings
6. Add the records Netlify provided
7. Wait 24-48 hours for DNS propagation
8. Netlify auto-generates a free SSL certificate!

Step 2: Essential SEO meta tags for every page

Add these meta tags to the <head> section of every page to help Google understand and rank your website.

Essential SEO Tags

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Page title — appears in Google results (50-60 chars) -->
  <title>Smith's Plumbing | Emergency Plumber in Manchester</title>

  <!-- Description — appears below title in Google (150-160 chars) -->
  <meta name="description" content="24/7 emergency plumbing services in Manchester. Boiler repairs, leak detection, and bathroom installations. Call 0161 XXX XXXX for a free quote.">

  <!-- Open Graph tags for social media sharing -->
  <meta property="og:title" content="Smith's Plumbing | Emergency Plumber in Manchester">
  <meta property="og:description" content="24/7 emergency plumbing services in Manchester.">
  <meta property="og:image" content="https://yourdomain.co.uk/images/og-banner.jpg">
  <meta property="og:url" content="https://yourdomain.co.uk">

  <!-- Canonical URL to prevent duplicate content -->
  <link rel="canonical" href="https://yourdomain.co.uk/">
</head>

Step 3: Submit your site to Google Search Console

Google needs to know your website exists. Submit it to Search Console so it gets indexed and appears in search results.

Go to search.google.com/search-console and sign in with your Google account.
Click "Add property" and enter your website URL.
Choose the "URL prefix" verification method.
Download the verification HTML file Google gives you.
Upload this file to the root of your website (same folder as index.html).
Click "Verify" in Search Console.
Go to "Sitemaps" and submit https://yourdomain.co.uk/sitemap.xml if you have one.
Google will start crawling and indexing your pages within 1-7 days.

💡 Google Business Profile

For local businesses, also set up a Google Business Profile (business.google.com). This shows your business on Google Maps, displays reviews, and links to your website — often more valuable than organic SEO for local service businesses.

Step 4: Create a simple robots.txt and sitemap

These two files help search engines crawl your site efficiently.

robots.txt (place in root folder)

User-agent: *
Allow: /
Sitemap: https://yourdomain.co.uk/sitemap.xml

sitemap.xml (place in root folder)

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourdomain.co.uk/</loc>
    <lastmod>2026-01-15</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://yourdomain.co.uk/about.html</loc>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://yourdomain.co.uk/services.html</loc>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://yourdomain.co.uk/contact.html</loc>
    <priority>0.7</priority>
  </url>
</urlset>

How to Download, Edit & Publish Websites