How codeforcreatives.com Got Made

17 requirements across 4 categories:

Page Structure (7)

• Hero section with headline + CTA
• "What you'll build" cards
• Use cases gallery
• Testimonials section
• About the instructor
• Pricing/CTA block
• FAQ

Email Capture (4)

• Application form
• Loops API integration
• Success confirmation state
• Subscriber tagging

Content (4)

• Real use case descriptions from Alex's tools
• Paul Millerd testimonial
• Ownership-focused copy
• Competitive positioning vs Cursor/Windsurf

Deployment (2)

• Netlify with custom domain
• Social metadata + OG image

• Phase 1 - Foundation: Project setup, promote v7-colorful template to index.html, archive 6 earlier mockups
• Phase 2 - Page Structure: Build all 7 sections (hero, build, use cases, testimonials, about, CTA, FAQ)
• Phase 3 - Content: Populate with real content from research and discovery calls
• Phase 4 - Email Integration: Wire application form to Loops API
• Phase 5 - Deployment: Deploy to Netlify with codeforcreatives.com

All 17 requirements mapped to specific phases before any code was written.

There were already 7 HTML mockups (v1 through v6 + intake form). The v7-colorful template was picked as the winner and promoted to index.html. The other 6 versions were archived, not deleted.

Starting point: a 425-line HTML file with the C4C color palette (coral, cream, yellow, mint, lavender) already locked in.

Use Cases Gallery

A lavender-block gallery with 6 external examples of things people built:

• dharm.is - Personal site
• Drift - Writing app
• Verdant Biodome - Creative project
• Simon's Tools - Custom tool suite
• Syntopic Reading - Research tool
• Social HQ - Dashboard

Expanded What You'll Build

Went from 4 cards to 6, adding photo organizer and meeting transcript tools.

FAQ

Expanded from 4 to 6 questions. Added "How is this different from Cursor/Windsurf/Copilot?" and "What's included in the $500?"

Ownership-focused copy

Every "What you'll build" card was rewritten to emphasize ownership: you own the code, you own your data, no monthly fees, no platform dependency.

Competitive positioning

• vs Cursor/Windsurf/Copilot: "Those are coding tools. This is a creative tool. You don't need to know how to code."
• vs Cowork (a similar cohort): Tool-agnostic framing, focus on what you build rather than which AI you use

FAQ expanded to 7

Final FAQ added handling for: "I already use ChatGPT, why do I need this?" and "Will this work if I'm not technical?"

A guided "skill builder" demo that creates a skill live in front of the student, producing an "aha moment" rather than just outputting a template. The idea: show don't tell. Let them watch Claude build something for them in the first 5 minutes.

Three commits in quick succession turning the static mockup into a real application:

• Form: Application modal wired to Loops API for email capture
• Photos: Alex's headshot, zine photos, testimonial headshots (Paul Millerd, Lawrence Yeo)
• Polish: Form validation, success confirmation state, "Email me" button as fallback, copy refinements throughout

"Why Live?" addressed the #1 objection: "Can't I just watch recordings?" Real-time troubleshooting, learning from what others build, bring your own projects, accountability.

Favicon (smiley face), 1200x630 OG image, Open Graph + Twitter Card meta tags. The site could now be shared on social and look legit.

Newsletter form placed right above "OK that's enough sales page" - a tongue-in-cheek section break. Connected to Loops c4c mailing list for drip campaigns.

A 4-file starter kit (SKILL.md, inbox.md, session-log.md, README.md) that gives every student a personal AI chief of staff from day one. One-line install script. Sets up their CLAUDE.md automatically.

Later expanded with a self-extending room builder: the CoS detects recurring topics during brain dumps and offers to create dedicated /skills (rooms) on the spot. By Feb 4, it was proactively suggesting 1-3 rooms during the first session.

One-liner bash install puts the /slides skill anywhere. Teaches Claude how to create editable HTML slide decks with inline editing, notes panel, and feedback export. First public skill from the course.

Problem

Email signup was buried at line 903. Most visitors never scrolled that far. No analytics. No urgency. A passive info page.

Three fixes in one commit

• Sticky Email Bar: Appears after 400px scroll at bottom of viewport. Non-intrusive, dismissible. Auto-hides after signup. Expected 3-4x improvement in capture (2-3% to 8-12%).
• Plausible Analytics: Privacy-friendly tracking. Event tracking for newsletter signups and cohort form submissions.
• Urgency Signals: "7 spots left (3 taken)" in top banner. "Feb 24 start / Feb 17 deadline" in hero. Timeline in FAQ and modal success message.

Turned the homepage from a passive info page into an active conversion funnel.

robots.txt, sitemap.xml, Schema.org Course markup. Alex Chung testimonial showcasing her Goodword report with cross-promotion link.

Full Hugo blog infrastructure in one commit: templates matching C4C design system, client-side search with Fuse.js, RSS feed, search index. Netlify config updated to build Hugo on deploy. Blog link added to nav.

Then 7 blog posts published: "hello-world", "coming-soon", "oh-you-bunt-too", "all-you-gotta-do-is-ask", "just-ask-claude", "it-really-does-feel-like-magic", and more. Newsletter signup added between posts and CTA. Several rounds of fixes (empty posts, redirect loops, listing bugs).

Two real use cases for the cohort page: a step-by-step Reddit scraping guide and a live market research example analyzing networking painpoints. Show, don't tell.

New blog post with an inline annotation system: an alex Hugo shortcode that renders yellow-highlighted text for human commentary on AI-written summaries. Alex's voice as the main text, AI summary as supporting context lines. A new kind of blog post format.

Mint-colored quote cards and yellow "My thoughts" labels - establishing a visual language where AI-generated content and human commentary are visually distinct. StrongDM attribution links for source crediting.

Full mobile responsive pass: hamburger navigation menu, testimonial card layout fixes, spacing and typography adjustments across all breakpoints. The site now works properly on phones.