WATCH A SITE GET BUILT
Seven stages, one page, code on the left and the result on the right. Drag the slider backwards and watch a finished website come apart into the pieces somebody had to type. This is what you are actually paying for.
<!-- the words. the layer Google reads --><header><a class="logo">Sabine Diner</a><nav> … four links … </nav></header><section class="hero"><h1>Breakfast all day.</h1><p>Home cooking on Toledo Bend.</p><a class="btn">Today's Plate</a></section><!-- … cards, footer, contact … -->/* structure — where the eye goes first */.site {max-width: 860px;margin-inline: auto;}.cards {display: grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap: 1.5rem;}/* brand — what everybody thinks is the job */:root {--ink: #2b1d14;--warm: #c8562b;--paper: #fdf6ec;}body { background: var(--paper); }h1 { font-family: Bitter, Georgia; }/* motion — tells you what is clickable */.card {transition: transform .35scubic-bezier(.16, 1, .3, 1);}.card:hover { transform: translateY(-6px); }@media (prefers-reduced-motion: reduce) {.card { transition: none; }}/* one layout, every screen. not a 2nd site */@media (max-width: 640px) {nav { display: none; }.cards { grid-template-columns: 1fr; }.hero h1 { font-size: 7vw; }}# the invisible half. nobody praises it,# everybody feels it.Header always set Content-Security-Policy \"default-src 'self'"Header always set Strict-Transport-Security \"max-age=63072000"Header always set X-Content-Type-Options \"nosniff"# ✓ brotli · self-hosted fonts · schema.org# ✓ 0.4s to first paint on a cold cache--- ours/index.html+++ builder/index.html@@ the header @@<header><a class="logo">Sabine Diner</a></header><div class="pb-section pb-s-1"><div class="pb-container"><div class="pb-row"><div class="pb-col pb-col-12"><div class="pb-wrap"><div class="pb-widget pb-text"><div class="pb-widget-inner"><div class="pb-el pb-el-a1f"><span style="font:700 22px Arial">Sabine Diner</span>… and eight closing </div>s …@@ what changed @@the picture on the right: nothing at allthe layer Google reads: all of itno <header>, no <nav>, no <h1> —a screen reader is handed a stack of boxes
- CSS Rules 0 0 34 61 78 92 92
- Page Weight 0 KB 4 KB 11 KB 96 KB 103 KB 103 KB 41 KB
- First Paint — 0.1s 0.2s 0.9s 1.0s 1.0s 0.4s
- Mobile Score 0 41 58 66 71 88 100
An empty page.
This is what a domain serves before anybody has done anything to it.
Why it costs money: Plenty of small businesses are here right now, paying for a domain that shows a parking page. It is costing them every search they do not appear in.
Raw HTML, no styling at all.
The words, the headings, the links and the buttons — with the stylesheet taken away completely.
Why it costs money: This is the layer search engines and screen readers actually read. Get it wrong and no amount of design above it will rank. It is also the layer a page-builder buries under nine nested containers.
Layout and hierarchy.
Spacing, alignment, a real grid, and a clear order of importance — still with no colour and no brand.
Why it costs money: This is where a visitor decides in under a second whether your business looks organised. It is the difference between a page and a wall of text.
Colour, type and identity.
The palette, the typefaces, the imagery and the tone — the part everybody thinks is the whole job.
Why it costs money: This is what makes the site look like YOUR business and not a template with your logo dropped in the corner. It is maybe a fifth of the work.
Interaction and feedback.
Hover states, transitions, and elements that arrive as you scroll rather than sitting there.
Why it costs money: Motion tells a visitor what is clickable and confirms that something happened when they clicked it. Done badly it is a carnival; done right you never notice it, you just trust the site.
The same page on a phone.
The frame just narrowed to phone width. Nothing was rebuilt — the layout reflowed.
Why it costs money: More than half your visitors are on this. A separate "mobile site" is how it used to be done and it doubles the maintenance; one layout that reflows is how it should be done.
Fast, secure and live.
Compressed assets, cached fonts, security headers, structured data for search engines.
Why it costs money: The invisible half. Nobody praises a site for loading in under a second or for having a locked-down content security policy — they just quietly stay on it, and it quietly stays out of trouble.
- This stage 0% 12% 15% 20% 15% 15% 23%
- Build complete 0% 12% 27% 47% 62% 77% 100%
- Work to here $0 $200 – $400 $400 – $950 $700 – $1,650 $950 – $2,150 $1,150 – $2,700 $1,500 – $3,500
Labour is $60/hour. The range above is this share of a multi-page site, rounded — your job gets its own number. Price yours.
The code is shortened for readability, the numbers under the preview are the shape of a real build rather than measurements of this page, and the split above is how the effort divides on a typical job — not a quote. The actual files are a great deal longer, which is rather the point.
WHY A TEMPLATE LOOKS CHEAPER
A page-builder gets you to stage 4 in an afternoon, and that is genuinely impressive. What it does not do is the two stages either side — and those are the ones that decide whether the site earns anything.
- Stage 2 gets buried — page-builders wrap your content in layers of empty containers, and that is the layer search engines read
- Stage 6 never happens — you get whatever speed and security the platform gives everybody, and you cannot change it
- You are renting, not owning — stop paying and the site goes away, along with the address customers have bookmarked
- Every competitor using the same platform picked from the same forty templates
WANT TO WATCH IT HAPPEN TO YOURS?
Tell us what your business does. We will tell you what it costs and roughly how long each of those seven stages takes — no obligation, and no pretending stage 4 is the whole job.