Build Your First Web App

Who This Guide Is For

You've seen the posts on Twitter/X. Someone shares a screenshot of a web application they built over the weekend. The comments are full of excitement. Then you read the words: "I just described what I wanted to Claude and it built the whole thing."

And you think: I could do that.

But then you try. And immediately hit a wall. The AI gives you code, but... where do you put it? The tutorial mentions "pushing to GitHub" - what does that mean? Someone says "just deploy it to Cloudflare Pages" as if that explains anything. You Google "how to deploy a website" and fall into a rabbit hole of conflicting advice, outdated tutorials, and assumed knowledge you don't have.

This guide is for you.

You're comfortable with technology. You use Canva, Mailchimp, maybe QuickBooks. You've probably written some basic HTML at some point. You're not afraid of computers. But you've never used Git, never deployed to a server, never touched an API key, and the developer ecosystem feels like a foreign country where everyone speaks a language you almost-but-don't-quite understand.

What This Guide Is NOT

This is not a coding tutorial. This is not "Learn JavaScript in 30 Days." You won't write much code yourself - that's what AI is for.

This is the guide that explains the ecosystem. The accounts you need. The tools you install. The concepts you need to understand. How everything connects. It's the prerequisite knowledge that every vibe coding tutorial assumes you already have.

Think of it this way: AI can write the code, but you need to know where to put it, how to save it safely, and how to get it onto the internet. That's what this guide teaches.

Chapter 1: The Moment We're In (And Why You're Reading This Now)

It's February 2026. Something unprecedented has happened, and most people haven't noticed yet.

For the first time in history, non-developers can build and deploy real, functional web applications. Not toy projects. Not limited prototypes. Actual software that does useful things, runs on the internet, and works reliably.

Three things converged to make this possible:

What "Vibe Coding" Actually Means

In early 2025, Andrej Karpathy - one of the original OpenAI researchers, former Tesla AI director, and generally one of the smartest people in the field - coined the term "vibe coding." He was describing his own experience: writing software not by typing code character by character, but by having conversations with AI, describing what he wanted, and letting the AI generate the implementation.

By January 2026, he posted an update that should make you sit up straight:

"I really am mostly programming in English now."

This isn't a random influencer making bold claims. This is someone who could hand-write neural networks from scratch choosing to describe what he wants in plain language instead. The tools have gotten that good.

Boris Cherny, an engineer at Anthropic itself, shared something even more striking: "Pretty much 100% of our code is written by Claude Code + Opus 4." The company building the AI is using the AI to build the company.

The Gap This Guide Fills

Here's the problem: AI tutorials assume you have developer knowledge. Developer tutorials assume you don't have AI. Both leave you stranded in the middle.

When someone on Twitter says "just have Claude write a contact form and deploy it to Cloudflare," they're assuming you know:

• What files Claude should create
• Where to save those files
• What Git is and why you need it
• How to get files from your computer to GitHub
• What Cloudflare is and how deployment works
• What an API key is if your form needs to send email
• How to keep secrets out of public code

That's a lot of assumed knowledge. And if you don't have it, you can't even get started.

What You'll Be Able to Do

By the end of this guide, you'll understand the complete pipeline from "I have an idea" to "it's live on the internet." Specifically, you'll be able to:

1. Describe what you want to build to an AI tool
2. Save the generated code properly using Git
3. Push your code to GitHub where it's stored safely
4. Deploy automatically to Cloudflare so it's live on the internet
5. Iterate by having more conversations with AI and repeating the cycle

The first time you push code to GitHub and see your site update automatically on Cloudflare... it never gets old. There's something magical about describing what you want in English, and then seeing it exist on the internet minutes later.

Chapter 2: The Map - Understanding How Web Applications Actually Work

Before we dive into specific tools, let's build a mental model of how web applications work. This chapter demystifies the full picture so that when something goes wrong (and it will), you'll know where to look.

What Happens When Someone Visits a Website

When you type a URL into your browser and press Enter, here's what happens in roughly one second:

1. DNS lookup: Your browser asks "what's the IP address for this domain?" Think of DNS as the internet's phone book - it translates human-readable names (like example.com) into computer-readable numbers (like 104.21.55.162).
2. Connection: Your browser connects to the server at that IP address.
3. Request: Your browser asks for specific files (usually starting with index.html).
4. Response: The server sends back HTML, CSS, JavaScript, and images.
5. Rendering: Your browser turns those files into the page you see.

This entire process happens in under a second for most websites. Understanding it helps you troubleshoot: if your site isn't loading, is it a DNS problem? A server problem? A file problem?

Three Types of Web Applications

Not all websites are built the same way. Understanding these categories helps you know what you're building:

There's also a third category that's become increasingly important:

Front-End vs. Back-End

You'll hear these terms constantly. Here's the simplest explanation:

For many projects, you might only need front-end code. A portfolio site, a landing page, a simple blog - these can be entirely front-end. But the moment you need to send emails, save data, or process payments, you need back-end logic. That's where serverless functions come in.

Where Your Code Lives

Understanding the journey of your code is crucial:

1. Your Computer: Where you create and edit files (with AI's help)
2. GitHub: Where your code is stored safely in the cloud, with full version history
3. Cloudflare: Where your application actually runs and serves visitors
4. The Internet: Where anyone with the URL can access your application

The beautiful part: once you set this up, the flow from GitHub to Cloudflare to the Internet is automatic. You push code to GitHub, and within minutes it's live. No manual deployment steps.

The Development Pipeline

Here's the workflow you'll use hundreds of times:

This might seem like a lot of steps, but each one exists for a reason. And once you've done it a few times, it becomes muscle memory. The whole cycle can take less than a minute.

Chapter 3: Your Developer Toolkit - The Free Accounts You Need

Before you can build anything, you need to set up your toolkit. The good news: almost everything is free. Let's walk through each account and tool, explaining what it does and why you need it.

GitHub Free

Think of GitHub as Google Drive for code, but with three crucial additions:

• Version history: Every change you've ever made is saved and reversible
• Collaboration: Multiple people can work on the same code without conflicts
• Deployment triggers: Other services (like Cloudflare) can automatically deploy when you push new code

Even if you're working alone, GitHub's version history is invaluable. When AI generates code that breaks something, you can roll back to a working version instantly.

Cloudflare Free

Cloudflare is where your website actually lives and runs. Their free tier includes:

• Cloudflare Pages: Host unlimited static sites with unlimited bandwidth
• Cloudflare Workers: Run serverless code (100,000 requests/day free)
• Free SSL: Your site gets https:// automatically
• Global CDN: Your site loads fast from anywhere in the world
• Free subdomain: yourproject.pages.dev at no cost

We'll dive deep into Cloudflare in Chapter 6. For now, just create an account.

Claude Pro $20/month

Claude is where you'll spend most of your time. The Pro subscription ($20/month) is the only paid tool I consider essential for this workflow. Here's what you get:

• Claude.ai chat: For planning, writing code, debugging, understanding errors
• Cowork: Works on local files in a sandboxed environment - perfect for non-developers (macOS only currently)
• Claude Code access: Terminal-based coding agent for when you're ready to level up
• Higher limits: Free tier runs out fast when you're actively building

If you're on a tight budget, start with the free tier to validate that this approach works for you. But expect to upgrade quickly once you start building.

VS Code Free

VS Code is a text editor designed for code. You mostly need it to:

• View the files AI generates
• Make small edits when needed
• Understand the structure of your project

Don't let VS Code intimidate you. You don't need to master it. Think of it like how you use Microsoft Word - you can create documents without knowing every feature. Same principle.

GitHub Desktop Free

Git from the command line is confusing. GitHub Desktop gives you buttons and visual feedback instead. You'll use it to:

• See what files you've changed
• Commit your changes (save a snapshot)
• Push to GitHub (upload to the cloud)
• Pull updates (download if working on multiple computers)

This single tool removes about 80% of the frustration new developers face with Git.

Optional: Custom Domain $10-15/year

You don't need a custom domain to get started. Cloudflare gives you a free subdomain like yourproject.pages.dev. But if you want yourbusiness.com, you'll need to buy a domain.

Cloudflare sells domains at cost (no markup) and makes setup seamless. Namecheap is another good option. Budget $10-15/year.

Optional: ChatGPT Plus $20/month

OpenAI's ChatGPT is an alternative to Claude. Some people prefer it. Their Codex agent can work on multiple tasks in parallel and integrates with GitHub. It's not essential - Claude is enough - but good to know about.

Your Toolkit Summary

Total to get started: $20/month (just Claude Pro - everything else is free)

Chapter 4: Git and GitHub - Version Control for Humans

This chapter might save you more confusion than any other. Git is the #1 barrier to entry for non-developers. It doesn't have to be.

What Git Actually Is

Git is a system that tracks every change you make to your files, so you can always go back. That's it. That's the core concept.

Think of it like "Save As" but smarter. Instead of having files named website_v1.html, website_v2.html, website_final.html, website_FINAL_FINAL.html... you have one file, and Git remembers every version automatically.

Why Git Matters Even More With AI

When AI generates code, you need a safety net. Sometimes AI will:

• Make a change that breaks something that was working
• Overwrite code you actually wanted to keep
• Generate something that doesn't work and needs to be undone

Git IS that safety net. Every commit is a checkpoint you can return to. When Claude generates code that breaks your site, you don't panic - you revert to the last working commit and try again.

The 6 Git Concepts You Actually Need

Ignore everything else. These six concepts cover 99% of what you'll do:

That's it. Six concepts. You don't need to know about rebasing, cherry-picking, stashing, or any of the advanced Git features. Those exist for complex team scenarios.

GitHub Desktop Walkthrough

Let's create your first repository step by step:

The .gitignore File: Your First Security Practice

Some files should NEVER be uploaded to GitHub. API keys, passwords, secret configuration - these need to stay on your computer only. The .gitignore file tells Git to ignore certain files.

Every project should have a .gitignore file that includes at minimum:

# Environment variables (secrets!)
.env
.env.local
.env.production

# Operating system files
.DS_Store
Thumbs.db

# Editor folders
.vscode/
.idea/

# Dependencies (can be regenerated)
node_modules/

What To Do When Something Goes Wrong

It will. Here are the most common scenarios:

"I made changes but broke everything"

• In GitHub Desktop, right-click the changed file(s) and select "Discard Changes"
• This restores them to the last committed version

"I committed something I shouldn't have"

• If you haven't pushed yet: Right-click the commit in History → "Undo Commit"
• If you already pushed: Ask Claude "how do I remove [file] from my Git history"

"It says I have a merge conflict"

• This happens when the same part of a file was changed in two places
• Don't panic. GitHub Desktop will show you the conflicts
• You choose which version to keep (or combine them manually)

Chapter 5: API Keys - The Passwords to the Internet's Services

The moment you want your application to do something - send an email, save data, process payments, use AI - you'll encounter API keys. Understanding them is non-negotiable.

What an API Is

API stands for Application Programming Interface. It's how software talks to other software. That's literally it.

When you use a website's interface, you're clicking buttons and filling forms. When software uses an API, it's doing the same thing programmatically. Instead of you clicking "send email," your code sends a request to an email API that says "send this email to this person."

What an API Key Is

An API key is your personal password that identifies YOU when your application talks to a service.

Why does the service need to know who's making requests?

• Billing: Many APIs charge per use. They need to know who to charge.
• Rate limits: Services limit how many requests you can make. They track this per key.
• Security: If someone abuses the service, they can disable that specific key.
• Access control: Different keys can have different permissions.

Where You'll Encounter API Keys

The "Never Do This" Section

I cannot stress this enough. The #1 way people get their accounts compromised or run up huge bills is exposed API keys. Services like Anthropic and OpenAI will automatically disable keys they detect in public repositories, but you shouldn't rely on that safety net.

How to Handle API Keys Safely

Environment variables are the solution. They're like secret settings your app can read, but that don't appear in your code.

The pattern works like this:

1. Create a .env file in your project (on your computer only)
2. Put your keys there: ANTHROPIC_API_KEY=sk-ant-your-key-here
3. Add .env to .gitignore so it never gets uploaded
4. Your code reads from environment variables instead of having keys written directly in it

# .env file (NEVER commit this)
ANTHROPIC_API_KEY=sk-ant-api03-xxxxx
RESEND_API_KEY=re_xxxxx
STRIPE_SECRET_KEY=sk_live_xxxxx

For deployed applications on Cloudflare Workers, you use Secrets instead of .env files. The Cloudflare dashboard has a section for encrypted environment variables that your Worker can access but that never appear in your code.

What To Do If You Accidentally Expose a Key

It happens to everyone. Here's the damage control process:

1. Revoke immediately. Go to the service's dashboard and disable/delete that key.
2. Generate a new one. Create a fresh key to replace the compromised one.
3. Check for damage. Look at usage logs to see if the key was abused.
4. Remove from Git history. If you committed the key, removing it from current files isn't enough - it's in the history. Ask Claude how to clean Git history.
5. Update your application. Replace the old key with the new one in your environment variables.

Chapter 6: Cloudflare - Your Free Application Platform

If GitHub is where your code lives, Cloudflare is where your application lives. This is the secret weapon that makes the free + powerful combination possible.

Why Cloudflare Is the Answer for Non-Developers

• Free tier is absurdly generous - Unlimited bandwidth, unlimited sites, 100K Worker requests/day
• Easy deployment from GitHub - Connect once, auto-deploy forever
• Global CDN included - Your site loads fast from anywhere
• Free SSL/HTTPS - Security handled automatically
• No server management - You never touch a Linux box

Compare this to traditional hosting where you'd pay $5-20/month minimum, configure servers, worry about security updates, and manually deploy changes. Cloudflare handles all of that at no cost for most use cases.

Cloudflare Pages: For Static Sites and Front-End Applications

Cloudflare Pages takes your code from GitHub and turns it into a live website. The magic: every time you push to GitHub, Cloudflare automatically rebuilds and redeploys your site. No manual steps.

Cloudflare Workers: The Serverless Magic

"Serverless" means your code runs on Cloudflare's computers, not yours. You don't rent a server, configure anything, or worry about it crashing. You write a function, deploy it, and Cloudflare runs it whenever someone calls it.

This is what lets you add dynamic functionality without becoming a systems administrator.

What can you build with Workers?

• Contact form handlers that email you submissions
• API proxies that hide your API keys from the front-end
• Data processing that transforms information
• Authentication systems that manage user sessions
• Webhooks that respond to external events

Cloudflare's Full Ecosystem

Cloudflare offers additional services that work seamlessly together:

The ecosystem advantage: everything works together. One dashboard, one account, consistent interfaces. When you outgrow the free tier (which takes significant traffic), the paid tier is $5/month for Workers Paid - still remarkably affordable.

When You Need Workers Paid ($5/month)

The free tier handles most small business use cases. You might need paid when:

• You exceed 100K requests/day (that's substantial traffic)
• You need more than 10ms CPU time per request (complex processing)
• You want better debugging and analytics
• You need scheduled tasks (cron triggers)

Chapter 7: Your AI Development Team - Choosing the Right Tool

The AI landscape for building applications is evolving rapidly. Here's what you need to know as of February 2026.

Claude (Anthropic)

Claude is my primary recommendation for this workflow. The key distinction to understand: Cowork is the operational product designed for business users, while Claude Code is the agentic tool for those comfortable in the terminal.

Claude.ai chat is where you'll do most of your planning and prototyping. Describe what you want, get code back, iterate through conversation. Great for understanding code, debugging errors, and learning concepts.

Cowork (launched January 2026, expanded to Pro users January 16) is specifically designed to lower the adoption barrier for non-technical users. It provides a friendly graphical interface for working with files on your computer - no terminal, no command line, no scary black screen. Point it at a folder, describe what you want in plain English, and it creates files for you. Both Cowork and Claude Code can plan and execute complex multi-step workflows, but Cowork does it through a visual interface that feels familiar to anyone who uses desktop applications. This is the tool most readers of this guide should start with.

Claude Code is the power tool for those ready to graduate to the terminal. It runs as a command-line application and can execute shell commands, run tests, manage Git operations, and interact with your full development environment directly. Over $1B in annualized revenue by late 2025 - it's what professional developers are using. But it requires comfort with terminal basics. If you're not there yet, Cowork gets you 80% of the capability with 20% of the learning curve.

ChatGPT/Codex (OpenAI)

OpenAI's Codex is interesting because it runs in the cloud (not on your computer) and can work on multiple tasks simultaneously. It integrates directly with GitHub, which some people find convenient. The CLI version is open source.

When to Use What

The Conversational Development Workflow

Here's how the actual process works:

The key insight: you're having a conversation, not writing specifications. You can be vague. You can change your mind. You can say "actually, let's try something different." The AI adapts.

The Consensus Rule: Your Virtual Development Team

Here's a technique that dramatically improves code quality: don't rely on a single AI. Use multiple models to cross-check each other's work.

I am using [Claude/ChatGPT/Gemini] to build a [describe your project]
on Cloudflare. Here is the code it just generated:

[Paste Code Here]

As an expert Security and Performance Auditor, please:
1. Identify any logic errors or bugs.
2. Flag security vulnerabilities (e.g., non-parameterized queries,
   exposed secrets, missing input validation).
3. Suggest performance optimizations for the Cloudflare environment.
4. If the code is production-ready, simply state "CONSENSUS REACHED."

Other Tools Worth Knowing About

• Cursor: AI-native code editor (like VS Code but with AI built in)
• Replit: Browser-based development environment, good for beginners
• Lovable: Frontend-focused, great for UI components
• Windsurf: Another AI-powered editor with strong agent features

You don't need any of these to get started. Claude + the basic toolkit from Chapter 3 is enough. But know they exist if you want to explore.

Chapter 8: Your First Web Application - A Complete Build-Along

This is the centerpiece chapter. We're going to build a real, working web application together: a contact form that emails you submissions, saves them to a database, and has a simple dashboard. This demonstrates the full stack: Pages + Workers + D1.

What We're Building

A contact form system with three components:

1. Front-end: A beautiful form users can fill out
2. Back-end (Worker): Processes submissions, sends you email, saves to database
3. Dashboard: Simple page to view all submissions

This is genuinely useful - you could use this on a real business website.

Pre-Flight Checklist

Before we start, confirm you have:

• ✅ GitHub account (and GitHub Desktop installed)
• ✅ Cloudflare account
• ✅ Claude Pro subscription (or free tier for this exercise)
• ✅ VS Code installed
• ✅ A folder on your computer for projects

Phase 1: Planning with AI

Open Claude.ai and start a conversation:

Claude will explain what files you need and what each does. Ask follow-up questions until you understand the structure. You don't need to understand every line of code, but you should know what role each file plays.

Typical structure for this project:

my-contact-form/
├── index.html          # The form page users see
├── style.css           # Styling for the form
├── script.js           # Front-end JavaScript (form handling)
├── dashboard.html      # Page to view submissions
├── worker/
│   └── index.js        # Cloudflare Worker code
├── wrangler.toml       # Worker configuration
└── .gitignore          # Files to exclude from Git

Phase 2: Creating the Front-End

Ask Claude to generate the HTML and CSS:

Save the generated files to your project folder. Open index.html in your browser (just double-click it) to see how it looks. Iterate with Claude: "Make the button bigger," "Add more padding," "Change the color to match my brand."

Phase 3: Setting Up Git and GitHub

Now let's save your work properly:

Your code is now safely stored on GitHub with version history.

Phase 4: Deploying to Cloudflare Pages

🎉 Your form is now live on the internet! Visit the URL Cloudflare gives you (something like your-project.pages.dev).

The form displays but doesn't actually send anything yet - that's what the Worker is for.

Phase 5: Adding Back-End Functionality with Workers

Now for the dynamic part. Ask Claude:

Claude will generate Worker code and configuration. For the email functionality, you'll need a Resend account (free tier available at resend.com) and API key.

Deploy your Worker through the Cloudflare dashboard or using the Wrangler CLI (Claude can walk you through either approach).

Update your front-end JavaScript to submit to your Worker's URL instead of nowhere. Push the changes to GitHub. Cloudflare auto-deploys.

Phase 6: Testing and Iteration

Test the complete flow:

1. Fill out the form on your live site
2. Click submit
3. Check that you received an email
4. Check the Cloudflare D1 dashboard to see the saved submission

Something not working? This is normal. Check error messages. Paste them to Claude. Iterate.

"You WILL break something. I break things regularly. That's what Git is for."

The beauty of this workflow: making changes is a conversation. "The error message says CORS - what does that mean?" "Add a success message after submission." "Make the dashboard show submissions in a table." Claude helps you iterate until it's right.

Chapter 9: When Things Go Wrong - The Troubleshooting Survival Guide

Things will break. That's not a failure - it's a normal part of building software. This chapter covers every common error a beginner hits.

Reading Error Messages

The single most important troubleshooting skill: actually read the error message. It's usually telling you exactly what's wrong. Most beginners see red text, panic, and miss the useful information.

Error messages typically contain:

• What went wrong: "Cannot read property 'x' of undefined"
• Where it happened: "at line 42 in script.js"
• Sometimes why: "Expected '}' but found 'EOF'"

When you see an error: read it, copy it, paste it to Claude with "What does this mean and how do I fix it?"

Common Errors Explained

"Permission denied"

You're trying to do something you don't have access to. Common causes: wrong file permissions, trying to write to a protected location, or authentication issues with a service.

"Merge conflict"

Git detected two different changes to the same part of a file. This happens if you edit on multiple computers or branches. GitHub Desktop shows you the conflicts - you decide which version to keep.

"Build failed"

Cloudflare couldn't build your project. Check the build logs in the Cloudflare dashboard - they show exactly what went wrong. Often it's a syntax error in your code or a missing file.

"404 Not Found"

The file or page doesn't exist where expected. Check that: (1) the file exists, (2) the name matches exactly (case-sensitive!), (3) it's in the right folder.

"CORS error"

Your front-end and back-end aren't configured to talk to each other. CORS (Cross-Origin Resource Sharing) is a security feature. Your Worker needs to return the right headers. Ask Claude to help add CORS headers to your Worker.

"Rate limited"

You've made too many requests to a service. Wait and try again. If it's happening in production, you might need to upgrade to a paid tier or optimize your code to make fewer requests.

"API key invalid" or "Unauthorized"

Your API key is wrong, expired, or missing. Check: (1) the key is correct, (2) it's in the right environment variable, (3) the service hasn't revoked it.

When to Ask AI for Help

Claude is excellent at debugging. The format that works best:

The more context you provide, the better the answer. Include:

• The full error message
• What you were trying to do
• The relevant code
• What you've already tried

When to Ask a Human

Know your limits. If you've been stuck for over an hour and Claude isn't helping, consider:

• Cloudflare Discord: Active community, official support
• GitHub Discussions: Good for open source project issues
• Stack Overflow: Search first - your problem is probably already answered
• Hire help: Sometimes 30 minutes with an experienced developer saves days. Upwork, Fiverr, or asking in communities.

Chapter 10: What to Build Next - Project Ideas by Skill Level

You've deployed your first application. What now? Here are project ideas organized by complexity.

Beginner (You Just Finished This Guide)

Intermediate (You're Comfortable With the Workflow)

Advanced (You're Ready to Push Boundaries)

Chapter 11: The Cost of Free - Understanding What You're Actually Paying

Let's be completely transparent about costs.

Complete Cost Breakdown

Total to get started: $20/month (just Claude Pro)

Total for a production app: $25-35/month (AI + domain + possibly Workers Paid)

Compare to Traditional Development

Where Costs Can Grow

• API usage: Using Claude or OpenAI APIs in your app costs per token
• Storage: Free tiers have limits; heavy usage needs paid
• Workers compute: Complex processing may exceed free tier
• Premium AI: Claude Max ($100/month) for heavier building

When Free Isn't Enough

Signs you need to upgrade:

• Hitting rate limits on Cloudflare Workers
• Running out of Claude messages during active building
• Need more database storage or queries
• Want better analytics and debugging tools

The good news: even paid tiers are remarkably affordable. Workers Paid is $5/month. Database upgrades are similar. You can run serious applications for under $50/month total.

Chapter 12: Security, Privacy, and Responsibility

You're building things that live on the internet now. That comes with responsibility.

The Big Three Security Rules

This principle has specific implementations:

Use Allow-Lists, Not Block-Lists

A block-list tries to catch "bad" input (block these specific characters, block these patterns). An allow-list only accepts "good" input (only these values are valid). Allow-lists are more secure because attackers constantly find new ways around block-lists.

// WRONG: Block-list approach (trying to catch bad input)
if (input.includes("<script>") || input.includes("DROP TABLE")) {
  reject();
}

// RIGHT: Allow-list approach (only accept known good values)
const validCountries = ["US", "CA", "UK", "AU"];
if (!validCountries.includes(input)) {
  reject();
}

Use Parameterized Queries for Databases

Never build SQL queries by concatenating user input. This is how SQL injection attacks work - attackers put SQL code in form fields. Parameterized queries (also called prepared statements) prevent this by separating the query structure from the data.

// WRONG: String concatenation (vulnerable to injection)
const query = `SELECT * FROM users WHERE email = '${userEmail}'`;

// RIGHT: Parameterized query (safe)
const query = db.prepare("SELECT * FROM users WHERE email = ?").bind(userEmail);

AI-generated code often uses the wrong (concatenation) approach because it's simpler to write. When you see database queries in generated code, specifically ask: "Is this query parameterized? Can you rewrite it to prevent SQL injection?"

Privacy Basics

If you collect any user data (emails, names, messages), you have obligations:

• Privacy policy: Required if you collect emails. Templates available online.
• Data storage: Know where data lives and who has access.
• Retention: Don't keep data longer than needed.
• GDPR/CCPA: If serving EU or California users, additional rules apply.

For a simple contact form, a basic privacy policy stating what you collect and why is usually sufficient. Consult a lawyer if you're building anything handling sensitive data.

AI-Generated Code and Security

AI can generate code with security issues. It's not malicious - it's just that AI optimizes for "works" not "secure by default." Common issues:

• Missing input validation
• SQL injection vulnerabilities
• Hardcoded credentials in examples
• Overly permissive CORS settings

After AI generates code, ask: "Are there any security concerns with this code? How would you make it more secure?" Claude is good at reviewing its own output for security issues when explicitly asked.

"Good Enough" vs. Professional Security

For a personal blog or business landing page, basic security practices are sufficient. For anything handling payments, sensitive personal data, or health information, consider professional security review.

The line is roughly: if a breach would cause financial harm or serious privacy violation, get expert help.

Glossary: Technical Terms in Plain English

API (Application Programming Interface)

How software talks to other software. Like a waiter taking your order to the kitchen - you don't go to the kitchen yourself, you use the waiter as an interface.

API Key

Your personal password for a service's API. Identifies your requests so they know who to charge and what limits apply.

CDN (Content Delivery Network)

A network of servers worldwide that caches your content. When someone in Tokyo visits your site, they get files from a Tokyo server, not your original server far away. Cloudflare provides this automatically.

CLI (Command Line Interface)

A text-based way to interact with your computer by typing commands. The "terminal" or "command prompt." Powerful but intimidating for newcomers - that's why we use GitHub Desktop instead.

Commit

A saved snapshot of your project in Git. Like a save point in a video game.

CORS (Cross-Origin Resource Sharing)

A security feature that controls which websites can talk to your API. If your front-end and Worker are on different domains, you need CORS headers.

Deploy

The process of making your code live on the internet. "Deploy to production" means making it available to real users.

DNS (Domain Name System)

The internet's phone book. Translates human-readable domain names (google.com) into computer-readable IP addresses (142.250.80.46).

Edge Computing

Running code close to users instead of in a central data center. Cloudflare Workers run "at the edge" - on servers near your visitors worldwide.

Environment Variable

A setting stored outside your code that your application can read. Used for secrets like API keys so they don't appear in your code files.

Front-End

The part of a web application users see and interact with. HTML, CSS, JavaScript running in the browser.

Back-End

The part of a web application that runs on servers, invisible to users. Databases, API logic, server-side processing.

Git

A version control system that tracks changes to files. Created by Linus Torvalds (Linux creator). The most widely used version control in the world.

GitHub

A platform for storing Git repositories in the cloud. Adds collaboration features, deployment integrations, and more on top of basic Git.

HTML (HyperText Markup Language)

The language that structures web content. Defines what's on the page: headings, paragraphs, buttons, links, images.

CSS (Cascading Style Sheets)

The language that styles web content. Defines how things look: colors, fonts, spacing, layout.

JavaScript

The programming language of the web. Makes pages interactive: form validation, animations, dynamic updates without refreshing.

JSON (JavaScript Object Notation)

A common format for storing and transmitting data. Human-readable, looks like: {"name": "John", "email": "[email protected]"}

KV (Key-Value)

A simple type of data storage where you save items with a key (name) and retrieve them by that key. Like a dictionary or phone book.

Merge

In Git, combining changes from one branch into another. Taking your experimental work and adding it to the main version.

npm (Node Package Manager)

A tool for installing JavaScript packages (pre-written code libraries). If you see "npm install" in instructions, it's adding dependencies to a project.

Repository (Repo)

A project folder tracked by Git. Contains all your code files plus the complete history of every change.

REST (Representational State Transfer)

A common style for designing APIs. Uses standard HTTP methods (GET, POST, PUT, DELETE) to manipulate resources.

SDK (Software Development Kit)

Pre-written code that makes it easier to use a service. Instead of manually writing API calls, you use the SDK's simpler functions.

Serverless

Running code without managing servers. You write functions, a platform (like Cloudflare) runs them. No server configuration, scaling, or maintenance required.

SSL/TLS

Encryption that secures web traffic. The "S" in HTTPS. Makes sure data between browser and server can't be intercepted. Cloudflare provides this free.

Static Site

A website made of pre-built files served directly. No server-side processing. Fast, secure, cheap to host.

Token (AI context)

The unit AI models use to measure text. Roughly 3/4 of a word. "Hello world" is about 2 tokens. API pricing is often per-token.

Webhook

An automated message sent from one system to another when something happens. "When someone pays, send a message to my server."

Worker

In Cloudflare context, a serverless function that runs on their network. Handles dynamic requests, API logic, data processing.

Frequently Asked Questions

Resources

Official Documentation

• Cloudflare: developers.cloudflare.com - Excellent documentation, tutorials, and examples
• GitHub: docs.github.com - Git and GitHub guides for all skill levels
• Claude: docs.anthropic.com - API documentation and prompt engineering guides

Communities

• Cloudflare Discord: discord.cloudflare.com - Active community, official support
• GitHub Discussions: Available on most open-source repos for questions
• r/webdev, r/learnprogramming: Reddit communities for web development

Learning Resources

• freeCodeCamp: freecodecamp.org - Free interactive coding curriculum
• MDN Web Docs: developer.mozilla.org - Comprehensive web technology reference
• Cloudflare TV: cloudflare.tv - Video tutorials and talks

Related Guides

• The Small Business CTO's AI Guide - Using AI for business operations
• From Legacy CMS to Lightning-Fast Static - Migration guide for existing websites