How to Build Websites course

solarityStudio • new course

How to Build Websites

Learn the exact process I use to build 5-10k+ custom websites that don't look like AI (using AI).

Get presale access Explore the curriculum

Presale $97 USD $489

Video sales letter

Video coming soon

Placeholder for the How to Build Websites video sales letter.

The complete build process

A repeatable system from blank repo to client handoff.

The value is not one magic prompt. It is the foundation, context, design judgment, quality control, and delivery process working together.

Start with a system

Build on a reusable boilerplate with the design, code, SEO, and accessibility defaults already handled.

Direct AI properly

Give your coding agent the client context, references, constraints, and checkpoints it needs to do useful work.

Apply real judgment

Refine typography, spacing, rhythm, imagery, responsiveness, and interaction until the site feels intentionally designed.

How to Build Websites course cover

The methodology

Boilerplate → context → build → refine → ship.

Follow the same project sequence from one client website to the next. AI makes execution faster; the workflow keeps the output coherent, maintainable, and recognizably yours.

  • Build from a reusable foundation instead of starting every website from scratch
  • Give AI the context and direction it needs to produce distinctive client work
  • Refine generated code into polished, responsive, production-ready websites
  • Ship, hand off, and improve a website-building system that compounds over time
Get presale access

What you’ll be able to do

Build custom websites with speed and standards.

Build custom

Use Next.js by default, with SvelteKit as a practical alternative.

Work systematically

Plan, prompt, generate, and refine in an order that reduces rework.

Ship confidently

Test accessibility, content, performance, metadata, forms, and breakpoints.

Improve each time

Feed every good component, prompt, and lesson back into your system.

Full curriculum

Everything from setup to handoff.

Fourteen modules cover the full workflow, including AI setup, context, planning, visual refinement, responsive design, CMS, forms, QA, deployment, and maintenance.

14 modules • Complete build workflow

Course curriculum

See every lesson.

1
What we’re building
2
Why custom code over Wix/Squarespace/Webflow
3
Why AI changes the economics of custom websites
4
Why the boilerplate matters more than the AI model
5
The workflow: boilerplate → context → build → refine → ship
6
Next.js as the default stack
7
SvelteKit as the alternative
1
The Boilerplate
2
Why you should never start from scratch
3
Project structure
4
Typography / type scale
5
Color variables
6
Spacing system
7
Container widths
8
Breakpoints
9
Buttons
10
Forms
11
Navigation
12
Footer
13
Common sections
14
Reusable components
15
Image handling
16
SEO defaults
17
Accessibility defaults
18
Animations / transitions
19
Make It Yours
20
Branding the boilerplate
21
Default footer details
22
Default metadata
23
Your preferred fonts
24
Your preferred component patterns
25
Removing things you never use
26
Maintaining the boilerplate over time
1
What an AI coding harness actually does
2
T3 Code / Pi
3
Claude / ChatGPT if you want better models
4
OpenCode Go + open-weight models if you want lower costs
5
Pointing the agent at your codebase
6
Giving the agent persistent project instructions
7
What belongs in global context vs project context
8
Preventing AI from destroying good existing code
9
Git and checkpoints
1
Why context determines the quality of the website
2
Client questionnaire
3
Business information
4
Customers
5
Offers
6
Differentiators
7
Brand voice
8
Existing content
9
Testimonials
10
Competitors
11
Visual references
12
Scraping the existing website
13
Turning messy client information into a clean context file
14
My context collection template
1
Before asking AI to code anything
2
Define the goal of the site
3
Define the primary customer
4
Sitemap
5
Page hierarchy
6
Conversion paths
7
Content hierarchy
8
What belongs above the fold
9
Section planning
10
Choosing reference websites
11
Establishing visual direction
12
Output: a clear website plan the agent can actually build from
1
The website build prompt
2
Feeding in the boilerplate
3
Feeding in client context
4
Feeding in references
5
Generating the first page
6
Building page-by-page vs everything at once
7
Getting AI to reuse existing components
8
Keeping the design system consistent
9
Getting useful output instead of generic AI slop
1
Why the first generation is never finished
2
Typography
3
Spacing
4
Hierarchy
5
Composition
6
Section rhythm
7
Image placement
8
Color usage
9
Buttons and CTAs
10
Removing unnecessary UI
11
Breaking repetitive layouts
12
Avoiding obvious AI design patterns
13
Using references without copying
14
Giving effective visual feedback to the agent
15
Iterating one problem at a time
1
Desktop-first vs mobile-first in this workflow
2
Testing breakpoints
3
Mobile navigation
4
Responsive typography
5
Responsive spacing
6
Images
7
Grids
8
Awkward tablet layouts
9
Getting AI to fix responsiveness without breaking desktop
1
Sanity
2
When a website actually needs a CMS
3
Connecting Sanity
4
Schemas
5
Pages
6
Blog/content
7
Images
8
Portable text
9
Fetching content
10
Preview / draft workflow
11
How the same architecture applies to another headless CMS
1
Contact forms
2
Next.js Server Actions
3
SvelteKit form actions equivalent
4
Validation
5
Spam prevention
6
Email notifications
7
Error states
8
Success states
9
When you actually need a database
10
When you don’t
1
Test every page
2
Mobile testing
3
Accessibility
4
Broken links
5
Forms
6
Metadata
7
Open Graph
8
Favicons
9
Structured data where appropriate
10
Performance
11
Image optimization
12
Lighthouse
13
Cross-browser testing
14
Copy/content QA
15
Getting AI to perform a structured QA pass
1
GitHub
2
Vercel
3
Environment variables
4
Sanity production configuration
5
Domains
6
DNS
7
Redirects
8
Analytics
9
Search Console
10
Final production checks
1
Giving the client CMS access
2
Explaining how editing works
3
Recording a handoff video
4
Ownership/access
5
Maintenance
6
What you keep access to
7
What you remove yourself from
8
Final invoice / project closure
1
This is what makes the methodology valuable long-term
2
Every project improves the boilerplate
3
Extracting good components from finished projects
4
Updating dependencies
5
Improving your prompts
6
Improving your context templates
7
Building your own component library
8
Keeping AI-specific instructions separate from your actual development methodology

Questions

Before you join.

Presale pricing

Learn the full system for building better client websites.

Lock in presale access now. The full price after launch is shown below.

Presale
How to Build Websites course

Presale access

How to Build Websites

WHAT'S INSIDE

  • ✓ All 14 course modules
  • ✓ The complete custom website workflow
  • ✓ Next.js and SvelteKit implementation guidance
  • ✓ Future course updates

Presale price

$97
USD

Regular price

$489

Save $392 during presale

One-time payment in USD

Checkout is intentionally not connected yet.