Build your first site this weekend.
A friendly walkthrough for parents. Plan for about an hour the first time — most of that is one-time setup. After that, deploys take seconds.
Sit next to your kid for this. Read responses out loud. Let them choose colors and words, even when their choices surprise you. The goal isn't a polished site — it's a kid who feels like the internet is something they can make.
Before you start
Don't worry if some of this looks technical — every step has a friendly walkthrough below. If you've never opened a terminal in your life, you're exactly who we wrote this for.
What you'll need
- An invite link from another tinycoders parent. (Or join the waitlist if you don't have one yet.)
- A laptop or desktop computer. Mac, Windows, or Linux all work fine. A tablet or phone won't work for the building part — you need a real keyboard.
- About 30 minutes for one-time setup.
- A kid with an idea. If they don't have one yet, the magic question is "what's something you wish existed on the internet?"
Two free apps to install
These are the only two pieces of software you need. Both are free, both are made by well-known companies, and both are safe to install on your computer.
Node.js is the engine that runs the tinycoders deploy command. Think of it like Microsoft Word for websites — you need it installed before you can use any of the tools that build with it.
Go to nodejs.org and click the big green button labeled "LTS" (it stands for "Long-Term Support" — that's the stable version). Open the file that downloads, click Next a few times, and you're done.
Claude Code is the AI helper your kid will talk to. It's made by Anthropic, the same people who make Claude.
The official install guide walks you through it — it takes about 2 minutes after Node.js is installed. You'll also need to sign up for a Claude account (free to start).
Wait — what's a "terminal"?
A terminal is just a window where you type commands and the computer types back. It's like texting your computer instead of clicking buttons. Every Mac, Windows, and Linux machine has one built in.
On a Mac: press Cmd + Space, type Terminal, hit Enter. A small black or white window opens.
On Windows: press the Windows key, type PowerShell, hit Enter. A blue window opens.
That's it. You won't break anything by opening it. We'll only ever ask you to type a short command — usually just one line. If you mistype something, the worst that happens is the computer politely tells you it didn't understand. No alarms. No emergencies.
Sign up and claim a subdomain
Click the invite link from your friend. Sign in with Google or email — Clerk handles the login, you don't have to remember another password.
Pick a subdomain for your kid. Lowercase letters, numbers, and dashes (no spaces or special characters). Keep it short and rememberable.
- emma → emma.tinycoders.dev
- dragonqueen → dragonqueen.tinycoders.dev
- legobuilder42 → legobuilder42.tinycoders.dev
Tip: let your kid pick. They'll have opinions. Honor them.
Make a project folder
Time to open your terminal! (If "terminal" is a new word for you, peek at the explainer up in the Before you start section.)
Once it's open, copy the two lines below, paste them into the terminal window, and press Enter. The first line creates a new folder called my-kids-site. The second line steps into that folder so the next commands know where to work.
mkdir my-kids-site cd my-kids-site
If you'd rather use a different folder name, change my-kids-site to whatever you like (lowercase letters and dashes are safest — no spaces). A name your kid will recognize works great.
"Wait, what does that command actually do?"
mkdir is short for "make directory." A directory is just another word for a folder. So mkdir my-kids-site means "make a folder named my-kids-site."
cd stands for "change directory." It moves your terminal into that folder, the same way double-clicking a folder in Finder or File Explorer would open it.
Drop in the tinycoders CLAUDE.md
This step takes about 30 seconds. You're going to add a small instruction file to your project folder so Claude Code knows the rules of tinycoders.
Without it, Claude might try to build something fancy that doesn't fit our setup. With it, the first version usually publishes cleanly.
How to do it:
- Open your my-kids-site folder. (On Mac: open Finder and look in your home folder. On Windows: open File Explorer.)
- Inside that folder, create a new plain text file named exactly CLAUDE.md.
- Open the template below, copy the whole thing, and paste it into your new file.
- Save and close.
Tip: if your computer adds .txt to the end of the filename automatically, rename it so it ends in .md with no other extension.
Or copy the contents inline
# Project: a kid's tinycoders site This project deploys to **tinycoders.ai**, where it'll be served at `<kid>.tinycoders.dev`. ## Hard constraints This site must be **fully static**. The deployer will reject anything else. Allowed: - Plain HTML, CSS, JavaScript files - Static assets (images, fonts, sounds) bundled into the project - Astro, Vite, or Next.js with `output: 'export'` Not allowed: - Next.js API routes, server actions, middleware, or `getServerSideProps` - Any backend code, databases, or environment-secret-driven server logic - Server-side image optimization (use `unoptimized: true` for `next/image`) - Websockets, SSR, edge functions If asked to add a backend feature, refuse and suggest a static alternative (precomputed JSON file baked into the build at build time, etc.). ## Content Security Policy — read this carefully Deployed sites are served with a **strict CSP**. Code that works locally will silently break in production if it violates these rules. Generate code that complies *up front* — do not rely on the kid to debug a blank page. The exact policy applied to every HTML response: ``` default-src 'self'; img-src 'self' data: blob:; media-src 'self' data: blob:; style-src 'self' 'unsafe-inline'; script-src 'self'; font-src 'self' data:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self' ``` What this means in practice — **follow these or the site will break in production:** - **No inline `<script>` blocks.** `script-src 'self'` blocks them. Put all JS in separate `.js` files and load them with `<script src="./app.js"></script>`. - **No inline event handlers.** `onclick="..."`, `onload="..."`, `onsubmit="..."`, etc. are all blocked. Use `addEventListener` from a `.js` file instead. - **No `javascript:` URLs.** Use a real handler attached via `addEventListener`. - **No `eval`, `new Function(...)`, or string-form `setTimeout`/`setInterval`.** These are blocked by default CSP and will throw at runtime. - **No external scripts or libraries from CDNs.** `<script src="https://cdn..."></script>`, the Tailwind Play CDN, jsdelivr, unpkg, cdnjs — all blocked. Bundle libraries into the build (npm install + import) or copy the file into the project. - **No external fonts via `<link>`.** Google Fonts (`fonts.googleapis.com`) and any other third-party font host is blocked. Use local font files (woff2 in the project) and `@font-face`, or rely on system fonts (`font-family: system-ui, ...`). - **No external stylesheets.** `<link rel="stylesheet" href="https://...">` is blocked. Bundle CSS locally. - **No `fetch()` / `XMLHttpRequest` / WebSocket to other origins.** `connect-src 'self'` means the browser will refuse network calls to anywhere except the kid's own subdomain. No public APIs, no third-party services, no analytics, no Firebase. If you need data, bake it into a JSON file at build time. - **No `<iframe>` embeds from other sites.** No YouTube embeds, no Spotify embeds, no CodePen embeds — `default-src 'self'` blocks the frame source. - **Images, audio, and video** can use local files, `data:` URIs, or `blob:` URLs. External image hosts are blocked. - **Inline `<style>` blocks and `style="..."` attributes ARE allowed** (style-src includes `'unsafe-inline'`). Stylesheets are the one place inline content works. Quick rule of thumb: if the URL in your HTML/CSS/JS doesn't start with `./`, `/`, `data:`, or `blob:`, it will probably be blocked. When in doubt, bundle it locally. ## Mobile friendly Most kids and parents will view the site on a phone. Every generated site must: - Include `<meta name="viewport" content="width=device-width, initial-scale=1">` in the `<head>` of every HTML page. - Use responsive layout (CSS Grid, Flexbox, or `clamp()` for type) — no fixed pixel widths that overflow a 360px-wide phone screen. - Use tap-friendly hit targets (buttons and links at least ~44x44 CSS pixels). - Use readable type on small screens (body text ≥ 16px so iOS doesn't zoom on focus; headings scale up from there). - Avoid hover-only interactions — anything important must work on tap. - Test mentally at 360px wide before declaring the layout done. ## Audience The site is being built by an elementary-school kid (with parent help). All generated content should be: - Kid-appropriate (no mature themes, scary content, or explicit language) - Friendly, encouraging, and visually playful — bright colors, big text, clear navigation - **Free of personal information.** Never include the kid's full name, age, school, address, phone number, photo of their face, or other identifiers — even if mentioned in the prompt. Use a nickname or first-name-only at most. tinycoders is directed to children and treats personal info conservatively to comply with COPPA. ## Tone for generated copy - Warm, encouraging, and a little silly is great - Avoid sarcasm, snark, or anything that punches down - Big readable type, generous spacing, high contrast ## Deploy ``` npx tinycoders deploy ``` This uploads the build output. The parent then clicks **Approve** in their tinycoders dashboard to push it live.
Build it together with Claude Code
Back to the terminal. Make sure you're still inside your project folder (if you closed the terminal, open it again and run cd my-kids-site to step back in).
Then type this single word and press Enter:
claude
Claude Code starts up right inside your terminal. You'll see a friendly prompt waiting for you to type. From here on, it's a conversation — just describe what you want to build, and Claude does the work.
Be specific. The more concrete the description, the better the first draft. Here's a prompt that tends to work well for first sites — feel free to copy it and change the details:
Help me build a kid-friendly website about pet hamsters. I want three pages: - A home page that says hi to visitors - A photos page (use placeholder images for now) - A "fun facts" page with three silly facts about hamsters Make it colorful with big, easy-to-read text. Use plain HTML, CSS, and JS — no frameworks. Keep everything in this folder.
Claude Code will create files inside your project folder. To see what it built, open the folder, find the file called index.html, and double-click it. It'll open in your normal web browser. That's your kid's website, running right on your computer.
Now iterate together. Your kid drives — you facilitate. Read Claude's responses out loud. Let your kid choose colors and words, even when their choices surprise you. Some good prompts to keep handy:
- "Make the title bigger and pink."
- "Add a button that plays a sound when you click it."
- "Change the background to look like outer space."
- "Add a page where visitors can leave a virtual high-five."
Deploy it
When the site looks good, it's time to put it on the internet. From your terminal — still inside the project folder — type this and press Enter:
npx tinycoders deploy
The first time you run this, it opens a browser window and asks you to log in to your tinycoders account. Click through, and you're done. After that first time, every future deploy is just this one line — no logins, no fuss.
The CLI will:
- Detect what kind of project you have (plain HTML, Next.js with static export, etc.)
- Run the build if needed
- Upload the files to your kid's subdomain
- Print a preview link so you can check it before approving
Open your dashboard, click Approve, and the site is live at <kid>.tinycoders.dev. Every change goes through this same approval gate — you're the publisher, always.
Share it
Text the URL to grandparents. Open it on your phone and hand it to your kid. Watch them type their own URL into a browser for the first time.
That moment is the whole point.
When things wiggle sideways
Claude tried to add a backend / API routes / database
tinycoders sites are static-only. Tell Claude: "make this fully static, no API routes or server actions, no Next.js middleware, no backend." If you dropped in our CLAUDE.md, this is much less likely to happen.
The deploy command says "unsupported features"
The CLI tells you exactly what to remove. Copy that message into Claude and ask it to rewrite the file without those features. Re-deploy.
My kid wants a feature we don't support
A guestbook, a real chat, a leaderboard? Right now, nope. We're starting simple — static sites only. Email hello@tinycoders.ai and tell us what your kid wanted; that's how we figure out what to build next.
My kid wants their own subdomain (different from mine)
You can claim multiple subdomains under one parent account — one per kid. From the dashboard, click "Add another site" and pick a new slug.
Ready when you are.
Got an invite link? Use it. Don't have one yet? We'd love to send you one.