Building a marketing website from scratch with Claude Code

01What problem did this site have to solve?

The site had to be the credibility surface for a leadership consultant and author whose paid offer already lived in a separate funnel on another domain. That job produced one page of 18 sections and 26,988 pixels of scroll height at a 1,440 pixel viewport.

The funnel does conversion. The website does authority.The repository README

That line settled most of the design arguments, and it carries one cost: two domains describing one practice compete for the same terms unless something names the original. So the canonical tag, og:url and og:image were repointed at the credibility site, which also fixed a broken Open Graph image the funnel domain had been 404ing.

02Why build it by hand rather than use a template?

It was hand-built because the payload budget and the per-element motion were the product. A template would have been faster to stand up and would have arrived with a responsive grid somebody else had tested, which matters more than it sounds: this build needed 45 media queries and 226 uses of clamp() before the layout held everywhere. A component framework was refused too: eight static pages do not need a runtime.

• A template solves responsive behaviour on day one. Here it was earned one breakpoint at a time: 22 media queries to 45, 139 uses of clamp() to 226, since May.
• A template has an update path: somebody else patches the grid and you take the patch. A hand-written stylesheet has one maintainer.
• A template is legible to the next developer. 6,190 lines of bespoke CSS is not, and the worst bug here came from that.

03The stack, and why each piece is there

The stack is hand-written HTML5, one 6,190-line stylesheet, three vanilla JavaScript files totalling 933 lines, and two CDN libraries for motion. There is no framework, no bundler and no package.json, so the npm dependency count is zero.

One part runs somebody else code: a GoHighLevel chat widget, webhooks for both forms, Meta Pixel and Google Analytics 4. That is 10 third-party hosts, most of them the widget alone.

04The whole motion system is 256 lines, and it can switch itself off

All the scroll-driven motion lives in one 256-line file holding 18 GSAP calls and 9 distinct ScrollTrigger configurations. It opens with a guard that disables the entire layer if the visitor prefers reduced motion, or if any of the three libraries failed to load.

const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduced || !window.gsap || !window.Lenis || !window.ScrollTrigger) return;

Treating a failed CDN load as the same event as a reduced-motion preference is what makes the layer genuinely optional, because a third-party script will eventually not arrive. The page is three layers that each work alone: static HTML carries every word, an IntersectionObserver adds the reveal class with no library, and GSAP is the only part allowed to disappear.

05How the work actually split between a person and the model

Claude Code wrote most of the lines and almost none of the decisions. Across 100 commits the model was fastest at bulk mechanical work, and reliably wrong about one thing: whether a change had worked in production. Only an executed check against the served artefact was allowed to close a bug.

The commit breakdown shows where time went: 33 feat against 28 fix, plus five each of style, refactor, redesign, perf, content and chore. Roughly as much of it was correcting the build as extending it. This is the method now used to build Kape Tools.

• Good at volume work with a clear specification: breakpoints, a tablet range between 721 and 1,199 pixels, fluid type, and the repetitive half of an accessibility pass.
• Good at throwaway diagnostics and encoding pipelines, where the job is knowing the right awk or ffmpeg invocation rather than inventing anything.
• Not able to decide information architecture. Moving the About section to thirteenth of eighteen came from an argument about a specific audience, and a model with no access to that audience gives a plausible order rather than a correct one.

06What went wrong, including the fixes that were wrong

Four bugs cost more than the rest of the project combined: an <img> nested inside a <video> that could never paint, an !important block at line 5,531 that silently beat three correct fixes, a form that reported success while delivering nothing, and scroll lag with two different causes.

curl -sL "https://…/styles.css?cb=$(date +%s)" \
 | awk '/@media/ { last_media=$0 } /\.hero-actions/ { print "---",last_media,"---";print;for(i=0;i<4;i++){getline;print} }'

That process failure is more useful than the fix: the earlier check confirmed the webhook URL was in the source, never that the CRM parsed the body, and holding a Certified GHL Admin credential on that CRM helped not at all. Re-verification ran with the webhook blocked at the network level, so nothing junk reached a live system.

The same habit caught a layout bug nothing else would. The full-bleed idiom overshoots on mobile because 100vw includes the scrollbar gutter: driven with Playwright at 390 pixels, the left edge measured -9 pixels, and +18 pixels after.

07Is a hand-built static page easier for an AI crawler to read?

Yes, for one structural reason rather than any technique: every word of all 18 sections is already in the HTML the server sends. The document is 74,160 bytes raw and 13,736 compressed, so a crawler that runs no JavaScript still receives the entire page.

This is the accidental advantage of having no framework. A page assembled in the browser must be prerendered before an engine that does not execute scripts can read it, and prerendering is a subsystem with its own failure modes. A static page skips that instead of solving it.

Two things were then deliberate. The robots.txt file carries explicit Allow blocks for GPTBot, ClaudeBot, PerplexityBot and Google-Extended. And the structured data is a JSON-LD @graph of five linked schema.org entities, joined by @id rather than repeated, so the page carries one description of the author, not three slightly different ones.

08What shipped for accessibility and for consent

Specific criteria were targeted and specific fixes shipped, all verifiable in the code: a skip link, a global :focus-visible style, scroll-margin-top on every element with an id, FAQ aria-controls with role="region", and a mobile drawer with a real focus trap.

The drawer stores the previously focused element, cycles Tab between its first and last children, sets inert when closed, restores focus to the trigger, and closes on Escape. Four of those five traps a keyboard user rather than serving one.

The marquee got a pause button for WCAG success criterion 2.2.2, defaulting to paused under reduced motion, and type was raised to a 16 pixel floor for a stated audience of roughly 55 to 75 year olds. On consent, Meta Pixel left the inline <head> of all five pages, Google Analytics 4 was gated the same way, and Global Privacy Control suppresses the tracking and the banner itself.

09Was the result any good? What the payload numbers say

The measurable result is payload discipline. The hero video went from 2.65 MB to 762 KB, a 71% reduction; the above-fold total went from roughly 3 MB to roughly 850 KB; and the first-party text payload for an 18-section page is about 63.2 KB compressed.

ffmpeg -i in.mp4 -an -c:v libx264 -crf 31 -preset veryslow -movflags +faststart out.mp4

A later hero repeated that for 2.2 MB to 745 KB. Across the 11 images held in both formats, 18,654,304 bytes of originals became 601,860 bytes of WebP. Two decisions did more than any compression setting: the heaviest video is 21 MB behind preload="none" and a click, and the hero is hidden at 720 pixels and below, a 3.2 MB saving on cellular.

10What was thrown away

Four things were cut and one was rejected on inspection. 21 unreferenced asset files were deleted, taking the assets directory from roughly 26 MB to 9.9 MB; an SMS opt-in page was built, then removed; a phone field was deleted from the booking form; and content-visibility: auto was refused.

• content-visibility: auto on offscreen sections. The textbook fix for a 26,988 pixel page, refused because it conflicts with ScrollTrigger and causes jank.
• A dedicated SMS opt-in page. A carrier proof-of-consent URL: unchecked-by-default box, frequency and rate disclosures, STOP and HELP language, audit fields on the submission. Later removed and 301 redirected.
• The phone field on the booking form. Deleted because collecting numbers before A2P and 10DLC approval is a compliance risk. It was nearly re-added as the opt-in vehicle.
• A rebuild on a mainstream CMS, quoted by an agency and deferred. The hand-built site stayed live, at a cost: one person can maintain that stylesheet.

11What I would do differently

The biggest change would be adding any automated check at all. There is no test runner, no continuous integration and no package.json, and the two most expensive bugs, the !important override at line 5,531 and the form reporting success while delivering nothing, would both have been caught by the crudest smoke test.

1. Check the served artefact, not the source. One assertion that a button is not clipped, and one submission asserting the CRM returned a 2xx, replaces weeks of screenshots.
2. Audit the stylesheet before it reaches 6,000 lines. A periodic dump of every !important would have found the dead block immediately.
3. Put the still image outside the <video> from the first commit. A five-minute fix that cost several rounds of reporting, because the markup read correct.
4. Self-host the fonts. Three families load from Google Fonts: a third-party request in the critical path, and a visitor IP handed away.
5. Ship the first state of every JavaScript-driven component in the HTML. The carousel taught this once; writing it down as a rule is why it was not learned again.

13Related reading

• the content and automation system build

  The other case study covers the content and automation system build, where the hard problems are about what a pipeline should refuse to publish rather than what a browser paints.

• who builds these

  For the background behind these decisions, who builds these covers the working method and what a Certified GHL Admin actually does.

• what it costs to hire this

  The FAQ above declines to publish a project fee, but what it costs to hire this is a real public price list rather than a contact form.

• the free guides

  For output volume rather than one build, the free guides apply the same discipline at length, including 30 Philippine ID guides and Kape Explains.