Build path · Intermediate

Fast Static Sites

Build fast static sites that cost little to run and almost never break, then launch them from GitHub on your client's own domain.

Who this course is for

This course is for people who already build small websites, usually with WordPress, and keep meeting the same kind of client: a local business with five or six pages that hardly ever change, running on a full WordPress install with a database, a stack of plugins and updates every month. You want to give those clients something faster, safer and cheaper to run, and you want to know honestly when static is the right call and when WordPress is still the better choice. It suits freelancers, small agency developers and confident hobbyists who want to add static sites to what they can offer and charge for.

What you should know first

This is an intermediate course, so you should be comfortable finding your way around the WordPress dashboard and have built at least one site with it. If you have worked through Elementor Beginner on Begin2Code, you are ready. You should also be able to read basic HTML and CSS: you know what a heading tag, a link and a class are, even if you would look up the details. You do not need any experience with Git, the command line, Node or DNS. Most tutorials assume you already know those. This course does not, and teaches each one from the first command.

By the end of the course you will be able to

Decide honestly when a static site beats WordPress and when it does not, and explain the trade-offs to a client in plain English.
Build a multi-page static website by hand with a shared stylesheet, clean structure and good performance scores.
Convert an existing WordPress site to static HTML without losing pages, images, links or search rankings, including redirects for changed URLs.
Add contact forms and other "dynamic" features to a static site without PHP, using form services and third-party embeds, with spam protection and UK GDPR in mind.
Build a small site with Astro using layouts, components and Markdown content, including a blog.
Use Git and GitHub to keep a full history of your work and undo mistakes safely.
Deploy automatically to Netlify or Cloudflare on every push, connect a custom domain and set up DNS and HTTPS.
Launch with solid SEO, privacy-friendly analytics and an editing workflow and handover pack you can give to a client.

Your course project

Throughout the course you work for one client: Jess Holroyd, who runs Muddy Paws Grooming, a dog grooming salon in Harrogate, North Yorkshire. Her current site is six pages built with WordPress and Elementor (Home, Services and prices, About, Gallery, Blog and Contact), with a Contact Form 7 form, several plugins and a "Book now" button that links to her third-party booking system. You use a practice WordPress copy to stand in for her live site, so you can experiment without risk.

Each module moves the project forward one step:

Module 1: a written recommendation for Jess on whether static suits her business, with the trade-offs explained.
Module 2: a hand-built five-page static version of the Muddy Paws site.
Module 3: a static conversion of her WordPress site, cleaned up, with redirects for every changed URL.
Module 4: a working contact form that sends enquiries to Jess without PHP.
Module 5: an Astro rebuild of the site with a grooming tips blog written in Markdown.
Modules 6 to 8: the site versioned on GitHub, launched on muddypawsharrogate.co.uk through Netlify or Cloudflare with HTTPS, SEO and analytics in place, plus a handover pack Jess can use to keep it up to date.

By the end you have a finished, live-ready client site and a repeatable process you can use for your own paying clients. Your capstone project gets personal written feedback from Shaz.

Curriculum

Module 1: When static beats WordPress (and when it does not) · 11 lessons
- 1.0 Course trailer and welcome
- 1.1 What you will build and how this course works
- 1.2 What "static" really means
- 1.3 The benefits: speed, security, cost
- 1.4 The trade-offs
- 1.5 The static toolbox
- 1.6 Hosting options, free tiers and the small print
- 1.7 Talking to clients about static
- 1.8 Project 1: your static-or-WordPress recommendation, with a worked example
- 1.9 Module 1 recap
- Module 1 worksheet
- Module 1 check (quiz)
Module 2: Building a static site by hand · 10 lessons
- 2.1 Project structure and clean URLs
- 2.2 A shared stylesheet and design tokens
- 2.3 Header, navigation and footer
- 2.4 Images and performance
- 2.5 Local preview and testing
- 2.6 Putting your site online for testing
- 2.7 Performance checks
- 2.8 Project 2: your hand-built five-page site, with a worked example
- 2.9 Module 2 recap
- Module 2 worksheet
- Module 2 check (quiz)
Module 3: Converting a WordPress site to static · 10 lessons
- 3.0 Module intro and version check
- 3.1 Is this site a good candidate?
- 3.2 Export options
- 3.3 Cleaning the output
- 3.4 Assets, fonts and third-party scripts
- 3.5 URLs and redirects
- 3.6 Testing before switching over
- 3.7 Project 3: your WordPress site converted to static, with a worked example
- 3.8 Module 3 recap
- Module 3 worksheet
- Module 3 check (quiz)
Module 4: Forms and dynamic features without PHP · 9 lessons
- 4.1 How form services work
- 4.2 Netlify Forms
- 4.3 Formspree, Web3Forms and similar
- 4.4 Spam protection and validation
- 4.5 Privacy, consent and UK GDPR
- 4.6 Other dynamic features
- 4.7 Project 4: your contact form, privacy notice and embeds, with a worked example
- 4.8 Module 4 recap
- Module 4 worksheet
- Module 4 check (quiz)
Module 5: Astro basics · 11 lessons
- 5.0 Module intro and version check
- 5.1 Why use a static site generator
- 5.2 The command line without fear
- 5.3 Installing Node and creating a project
- 5.4 Pages, layouts and components
- 5.5 Styling in Astro
- 5.6 Markdown and content collections
- 5.7 Images, fonts and building for production
- 5.8 Project 5: your site rebuilt in Astro, with a worked example
- 5.9 Module 5 recap
- Module 5 worksheet
- Module 5 check (quiz)
Module 6: Git and GitHub · 9 lessons
- 6.1 Why version control matters
- 6.2 Installing and setting up Git
- 6.3 Your first repository
- 6.4 GitHub, safe sign-in and pushing
- 6.5 Branches and undoing mistakes
- 6.6 GitHub Desktop and VS Code Git tools
- 6.7 Project 6: your site on GitHub, with a worked example
- 6.8 Module 6 recap
- Module 6 worksheet
- Module 6 check (quiz)
Module 7: Deploying, custom domains and DNS · 11 lessons
- 7.0 Module intro and version check
- 7.1 Deploying to Netlify from GitHub
- 7.2 Branch deploys and Deploy Previews
- 7.3 Deploying to Cloudflare Workers
- 7.4 GitHub Pages for simple sites
- 7.5 DNS explained simply
- 7.6 Connecting a custom domain
- 7.7 Redirects, headers and caching
- 7.8 Project 7: your site live on your own domain, with a worked example
- 7.9 Module 7 recap
- Module 7 worksheet
- Module 7 check (quiz)
Module 8: SEO, analytics and client editing workflows · 12 lessons
- 8.1 On-page SEO for static sites
- 8.2 Sitemaps, robots.txt and Search Console
- 8.3 Structured data
- 8.4 Privacy-friendly analytics
- 8.5 Editing workflows for clients
- 8.6 Handover, maintenance and pricing
- 8.7 Project 8: your editing workflow and handover pack, with a worked example
- 8.8 The capstone: what to submit and how it is marked
- 8.9 A worked example: Sallowmere Ceramics' capstone, marked out loud
- 8.10 The final exam, your tutoring and what comes next
- 8.11 Course recap
- Module 8 worksheet
- Module 8 check (quiz)
Final exam · 0 lessons
- Final exam (quiz)