Education series · Week

Week 3 — Your first real website (HTML+CSS, no framework)

Three pages. Live in 12 minutes. Fifteen dollars a year.

📹 Video shipping soon

Drafted + scripted. Recording in queue. Subscribe to the Founder Plan to be notified the moment it lands.

What you'll walk away with

A scene-by-scene walkthrough of every beat in the video. Plain English. Real numbers. Real workflow.

The walkthrough

  1. Three pages. Live in 12 minutes. Fifteen dollars a year.
  2. Education Series · Module 3 · Your First Real Website
  3. Last week's plan → this week's site
  4. Pages: index.html · services.html · contact.html
  5. what we're NOT using
  6. what we ARE using
  7. The 02_ROOFING_INTAKE folder from week 2
  8. public/ · ├── index.html · ├── services.html · ├── contact.html · ├── styles.css · └── images/
  9. Build index.html — hero, value props, CTA. Mobile-first. Use the brand colors in CLAUDE.md.
  10. Real index.html with semantic tags — header, main, section, footer
  11. Code on left, browser preview on right
  12. Browser DevTools — phone view (iPhone 14)
  13. Now services.html — three service cards: roof install, repair, inspection.
  14. Browser showing three cards in a clean grid
  15. contact.html — form with fields from CLAUDE.md, no JS yet.
  16. Variables block · reset · typography · layout · components · utilities
  17. :root { --yellow: #F4C430; --red: #DC2626; ... }
  18. / mobile default / ... @media (min-width: 768px) { / tablet+ / }
  19. Hero with yellow accent · centered text · big CTA button
  20. CSS Grid, three columns desktop, one column phone
  21. Inputs full-width on mobile, side-by-side on tablet+
  22. favicon.ico, og:image, og:title, og:description
  23. Every img tag has descriptive alt
  24. 100 / 100 / 100 / 100 (Performance / Accessibility / Best Practices / SEO)
  25. git add public/ then commit then push
  26. Netlify · New site · Import from Git · GitHub · pick repo
  27. Building... Deploying... Live
  28. random-word-12345.netlify.app
  29. GoDaddy: roofing-business.com · $14.99/yr
  30. DNS records: CNAME + A
  31. Lock icon in browser
  32. git push → Netlify webhook → 30s build → live with HTTPS
  33. Domain: $15/yr · Netlify: $0 · GitHub: $0 · Total: $15/yr
  34. Wix Pro $32/mo · $384/yr — 25x more
  35. 1. Using inline styles · 2. Skipping mobile-first · 3. Big unoptimized images · 4. No meta tags
  36. Use WebP · max 1600px wide · TinyPNG before uploading
  37. HOMEWORK: Build YOUR site. Three pages. Push to GitHub. Connect Netlify. Send me the URL.
  38. NEXT WEEK: Making it dynamic — vanilla JavaScript + Netlify Functions for the contact form
  39. localmodeldojo.com · LAUNCH30 · 30 days only

Cut your AI bill 90%+

I built Local Model Dojo so the same kind of bot work that costs $100/mo on the Claude or OpenAI API runs on hardware you already own. Founder pricing locks in for the life of your account.

See Founder pricing → Code LAUNCH30 · 30-day window

← Week 2 — Planning with AI (architecture before code) Week 4 — Making it dynamic (drop-in JavaScript) →

— Jake Morris · Oklahoma veteran · localmodeldojo.com