howtocodeai.com
40 tutorials

Build something real, today.

Every tutorial ends with something working — a live site, a playable game, an app that remembers. Copy the prompts, follow the steps, ship.

Start here

The foundations: what this is, how to begin, and the skills every build uses.
Beginner12 min read

What Is Vibe Coding? An Honest Guide for Normal People

The plain-English explanation: what vibe coding actually is, what it's genuinely good for, where it breaks, and how to start without paying anyone.

Read the tutorial →
Beginner45–60 min

Build Your First Website With AI and Put It Online (No Coding Experience)

The complete beginner path: use an AI chat to generate a real one-page website, then get it live on your own domain in under an hour. No installs, no frameworks.

Read the tutorial →
Beginner15 min read

Which AI Coding Tool Should You Start With? (An Honest Decision Guide)

Chat window, app builder, AI editor, or coding agent — the four categories explained, who each is for, and the one-question test that picks yours.

Read the tutorial →
Beginner10 min read

How Much Does It Cost to Build a Website With AI? (Real Numbers)

The complete budget, itemized: $0 paths that genuinely work, the realistic $50–150/year setup, where subscriptions earn their keep, and the credit-billing traps that ambush beginners.

Read the tutorial →
Beginner20 min read

The 9 Prompt Patterns That Do 90% of the Work

Stop prompting by vibes. These nine reusable patterns — constraints, evidence, full-file, spec extraction, and more — are the difference between fighting the AI and directing it.

Read the tutorial →
Beginner30 min read, lifetime of use

How to Fix AI Code When You Can't Read Code

The debugging playbook for non-developers: seven techniques that resolve almost every broken AI build, from console errors to the nuclear option.

Read the tutorial →
Beginner15 min read, 1 hour to apply

Is AI-Generated Code Safe to Ship? The Checklist for Non-Developers

The uncomfortable truth and the practical fix: where vibe-coded projects actually get burned, and the pre-launch checklist that catches most of it — no security degree required.

Read the tutorial →
Beginner+60–90 min

Claude Code for Non-Developers: Your First Terminal Project

The terminal is less scary than it looks. Set up Claude Code, learn the six commands you actually need, and build a multi-page site by talking to your computer.

Read the tutorial →

Websites & content

Portfolios, blogs, event sites, and the site types that earn.
BeginnerEvening

Build a Portfolio Website With AI That Doesn't Look Like a Template

For job hunts, freelancing, or grad school: a personal site with real personality, a projects grid, and the details recruiters actually check — built in an evening.

Read the tutorial →
Beginner+An afternoon for the engine, then just writing

Start a Blog With AI — No WordPress, No Subscriptions

A fast, hack-proof blog you own completely: write posts as simple text files, run one build command, upload. AI builds the engine; you just write.

Read the tutorial →
Beginner+An evening (+ the easy data tutorial if RSVPs are new to you)

Build a Wedding or Event Website With Working RSVPs

Skip the $40-and-ads event-site platforms: a beautiful event page with schedule, directions, FAQ, and an RSVP form that lands in a spreadsheet-ready table you own.

Read the tutorial →
Intermediate2–4 hours

Build a 200-Page Website From One JSON File (Programmatic SEO With AI)

The pattern behind every big directory and converter site: a JSON data file, a Python build script, and AI writing both. Generate hundreds of static pages in seconds.

Read the tutorial →
Intermediate1 weekend

Build an Affiliate Niche Site With AI in a Weekend

The honest version: how to use AI to build a 25-page affiliate site that doesn't read like AI slop, what actually gets approved by affiliate networks, and what to skip.

Read the tutorial →
Beginner+One evening + one week of waiting

Validate a Business Idea With a Landing Page + Waitlist (One Evening)

Before you build the product, build the page: a landing page that sells the idea, a waitlist that counts believers, and a number that tells you whether to proceed.

Read the tutorial →
Beginner30–60 min

Add a Working Contact Form to a Static Site (3 Ways, All Cheap)

The first wall every static-site builder hits: forms need somewhere to send. Three solutions ranked by effort — form services, a Worker endpoint, and the spam armor every option needs.

Read the tutorial →

Apps & data

Personal apps, dashboards, databases, accounts, and mobile.
Beginner+90 min

Build a Habit Tracker App With Claude (Charts, Streaks, Your Data)

A real personal app: daily check-ins, streak counting, progress charts, and data export — in one file that's yours forever. The template for every 'tracker' app idea you have.

Read the tutorial →
Beginner+2 hours

Build a Flashcard App With Spaced Repetition (Claude Writes the Algorithm)

Anki-style studying without Anki: build a flashcard app where Claude implements the spaced-repetition scheduling — and generates your card decks too.

Read the tutorial →
Beginner60–90 min, then forever tinkering

Build a Personal Dashboard / Start Page With Claude

Replace your new-tab page with a dashboard you designed: weather, links, tasks, countdowns, and any API you care about — the most customizable app you'll ever use, because you use it 50 times a day.

Read the tutorial →
Intermediate60–90 min

Build a Live Data Dashboard From a Free API (No Backend)

Pull real data from a free public API and chart it in a single HTML file. Weather, crypto, earthquakes, sports — same pattern, zero servers, zero cost.

Read the tutorial →
Intermediate2–3 hours

Build an Interactive Map App With Claude (Leaflet + Your Data)

Hiking logs, travel maps, local guides, historical atlases — anything with coordinates becomes an explorable map app. Free tiles, one file, your dataset.

Read the tutorial →
Intermediate90 min

Give Your AI-Built App a Real Database (Supabase, Free Tier)

The wall every vibe coder hits: data disappears on refresh. Here's how to add a real database to a single-file app with Supabase's free tier — guided by AI the whole way.

Read the tutorial →
IntermediateHalf a day

Add User Accounts to Your App (Logins Without the Danger)

The gateway to real web apps: signup, login, password reset, and — the part that actually matters — making sure users can only ever see their own data.

Read the tutorial →
Beginner+2 hours for the skill, 20 minutes per analysis after

Analyze Any Spreadsheet With Claude (From CSV to Charts to Answers)

Sales exports, survey results, bank statements, sports stats — the workflow for turning a messy CSV into cleaned data, real charts, and answers you can defend.

Read the tutorial →
Beginner+ (PWA) / Intermediate+ (native)An hour (PWA) to several weekends (store-published native)

Build a Mobile App With AI (The Honest Guide: PWA First, Native When It Earns It)

'I want it on my phone' has three answers at three price points — and most people are sold the expensive one first. The decision framework, then both builds.

Read the tutorial →

Business tools & SaaS

CRMs, bookings, portals, payments — software that runs an operation.
IntermediateA weekend

Build Your Own CRM With AI (Contacts, Pipeline, Follow-Ups)

Stop renting a bloated CRM for one user: contacts, deal pipeline with drag-and-drop stages, activity notes, and the follow-up list that actually makes you money.

Read the tutorial →
Intermediate+A weekend

Build a Booking System With AI (Appointments Without the Monthly Fee)

Tutors, barbers, consultants, photographers: a booking page where clients pick a real open slot, plus the admin view where you control availability — and the double-booking problem solved properly.

Read the tutorial →
Intermediate+A weekend (auth tutorial required first)

Build a Client Portal With AI (Look Like an Agency, Run Like a Freelancer)

A private space per client: project status, files, deliverables, and messages behind a login. The single biggest 'this person is professional' signal a solo operator can deploy.

Read the tutorial →
Beginner+ to IntermediateAn afternoon per tool

Build Internal Tools for Your Business With AI (The Spreadsheet Graveyard)

Inventory counters, job trackers, sign-out sheets, price calculators — the duct-tape spreadsheets every business runs on, rebuilt as fast little apps in an afternoon each.

Read the tutorial →
Beginner+2 hours

Build an Invoice Generator With Claude (Form → Professional PDF)

The pattern behind every document tool: a form on the left, a live preview on the right, and a pixel-perfect PDF out. Invoices today; contracts, quotes, and certificates tomorrow.

Read the tutorial →
Beginner+60 min

Add Payments to Your AI-Built Site (Stripe, No Backend)

Sell a product, ebook, or service from a static site with Stripe Payment Links — no server, no checkout code, real money in your bank account.

Read the tutorial →
Advanced (as a first project) / Natural (as a tenth)2–4 weekends

Build a SaaS MVP With AI (The Capstone: Auth + Data + Payments + Launch)

The whole arc in one project: a product people log into, use, and pay for monthly. Nothing new to learn — this is every pattern on the site, assembled in the right order.

Read the tutorial →

Games & interactive

Playable things, solo and multiplayer.

AI-powered apps

Apps where the AI is the feature, not just the builder.

Automation

Scripts, scrapers, bots, and sites that update themselves.