5d • General discussion
Lesson 2 — Build Your Own Creator Site using Claude Code
Build a small multi-page marketing website for a brand called "vibethecoder".
vibethecoder is a YouTube series + free community that teaches non-technical
founders how to build and ship real products with AI coding tools — calm and
intentional, no hype. Tagline: "Ship real products without writing code."
Create FOUR pages that share one stylesheet and one JS file:
1. index.html (Home)
2. lessons.html (Lessons)
3. community.html (Community)
4. about.html (About)
Plus: styles.css (shared design system) and app.js (shared behavior).
DESIGN LANGUAGE — bold and colorful, on a clean white / soft off-white base:
- Brand gradient used for accents, buttons, icon tiles, and headline highlights:
linear-gradient(100deg, #ff7a18 0%, #ff2e92 35%, #8b2fc9 68%, #2d6cff 100%)
- Ink/text color #16121f, body text #4a4358, hairline borders #ece8f3.
- Headings: "Plus Jakarta Sans" (700-800, tight). Body: "Inter".
- Big confident headlines with one phrase in gradient-filled text.
- Rounded "pill" buttons (border-radius 999px): gradient primary, dark, and white ghost.
- Generous whitespace, soft shadows, cards that lift on hover.
SHARED COMPONENTS on every page:
- Sticky, blurred top nav: left = brand wordmark, right = links (Home, Lessons,
Community, About) + a gradient "Join free" button. Hamburger menu on mobile.
- Dark footer: brand, tagline, an "Explore" column, a "Connect" column
(Skool, YouTube, Email), and a bottom copyright row.
- A reusable full-width gradient "call to action" band.
PAGE CONTENT:
- HOME: hero "Ship real products without writing code" (last phrase in gradient),
subtext, two buttons (Join free / Get the Lesson 1 prompt), hero image placeholder
with a soft colored glow. Then: a 3-card "who it's for" section; a "promise" section
linking to a live demo; a "free prompt" section showing a prompt in a dark terminal
box with a working "Copy" button; a gradient CTA band; a community CTA.
- LESSONS: hero, the Lesson 1 prompt in the terminal box with copy button, a 4-card
"why this prompt works" grid, and a numbered 12-lesson roadmap where item 1 is tagged
"Live" and the rest "Soon".
- COMMUNITY: hero ("Never build alone"), a 6-card "what's inside" grid, a 3-step
"how joining works" list, and CTA bands. Link join buttons to a Skool URL.
- ABOUT: hero ("Build with intention"), a "why" text section about calm, honest,
ship-first philosophy, a 3-card principles grid, and a closing CTA.
BEHAVIOR (app.js):
- Mobile hamburger toggles the nav links open/closed.
- Any button with data-copy="#id" copies that element's text and shows "Copied!".
TECH: plain HTML, CSS, and vanilla JS only — no framework, no build step. Mobile
responsive. Use a Google Fonts link for the two fonts. Use placeholder links ("#")
for the logo, Skool community, and YouTube channel so I can fill them in.
When done, tell me the command to preview it locally, and list which placeholder
links I need to replace.
0
0 comments
Lesson 2 — Build Your Own Creator Site using Claude Code
powered by
skool.com/vibethecoder-6869
Ship real products without code. Non-technical founders learn to build & launch with AI like Claude Code. New lesson every Tuesday.
Suggested communities
Powered by