Module 4
Your First Real Project
In Module 2 you built a calculator inside a chat window. Today you build something that lives on your own computer as real files — a customer intake page for your business — and, if you choose, put it on the actual internet for free. Set aside about 45 minutes.
Exercise 2: A customer intake website
A customer intake page is a simple website where a potential customer tells you who they are and what they need. Even if you already have a website, building this one teaches you the complete loop: describe, build, review, refine, publish.
In your terminal, create a fresh folder for the project and start Claude Code in it:
mkdir intake-site cd intake-site claude
Now paste this prompt. Before you send it, replace "Riverside Plumbing Co." with your own business name — everything else can stay exactly as written:
Build me a single-page customer intake website for my business, "Riverside Plumbing Co." Requirements: - A welcoming header with the business name and a one-line tagline - An intake form with these fields: full name, email address, what service they need (a dropdown I can easily edit later), and a message box for details - When the customer submits, the form should open their email app with the details pre-filled, addressed to my business email (use a mailto form and put a clearly marked placeholder where my email address goes, then tell me exactly where to change it) - Clean, professional styling: calm colors, readable text, works well on phones - Plain HTML, CSS, and JavaScript in separate files — no frameworks - Add a short comment at the top of each file explaining what the file does in plain English After building it, tell me how to open it in my browser to see it.
Claude Code will plan the files, ask permission to create them, and build the site. Approve the changes and follow its instructions to open the page in your browser (usually just double-clicking index.html in your new folder).
There it is. A real website, with your business name on it, made of files sitting on your computer.
We used a mailto form — the simplest possible approach, where submitting opens the customer's own email app. It needs no accounts and no services, which makes it perfect for learning. For a page you'd actually send customers to, free form services (such as the forms feature built into Netlify, which you'll meet below) collect submissions more reliably. Ask Claude Code about it when you're ready — it knows how.
The review-and-iterate loop
Now practice the skill that makes all of this work. Look at your site the way a customer would, then tell Claude Code what to change — in plain English, one change at a time. Try these three:
Change the color scheme to deep navy blue and warm gray. Keep everything easy to read.
Add an optional phone number field to the form, after the email field. Label it so it's clearly optional.
The tagline doesn't sound like us. Rewrite the header tagline to emphasize fast, friendly service, and make the submit button say "Request a callback" instead.
After each change, refresh the page in your browser and look at the result. Notice the rhythm: look → describe → approve → look again. You're doing code review — the same activity professional software teams do all day — except your job is only the part you're already good at: knowing what your business needs and whether the result looks right.
What are all these files?
Peek in your intake-site folder. Claude Code created three kinds of files, and it's worth knowing what each one does — one paragraph each, no more:
The .html file. HTML is the content and structure of a web page — the headings, paragraphs, form fields, and buttons, written in a markup language the browser reads. If a web page were a house, HTML is the framing and the rooms: what exists and where.
The .css file. CSS is the styling — colors, fonts, spacing, and how the page rearranges itself on a phone screen. In the house analogy, CSS is the paint, trim, and furniture arrangement. Change the CSS and the same rooms feel completely different.
The .js file. JavaScript is the behavior — what happens when someone clicks, types, or submits the form. It's the electrical wiring of the house: press this switch and that thing happens. It's also the same language Node.js runs, which is why we installed Node in Module 3.
Optional stretch: put it on the internet, free
Your site currently exists only on your computer. Publishing a website — called hosting — normally involves accounts and configuration, but there's a beginner-perfect free option called Netlify Drop that is literally drag-and-drop:
- In your browser, go to app.netlify.com/drop.
- Open your file manager (Finder on Mac, File Explorer on Windows) and find your
intake-sitefolder. - Drag the whole folder onto the Netlify Drop page and let go.
In a few seconds Netlify gives you a live web address, something like silly-name-123456.netlify.app. Open it on your phone. That's your website, on the actual internet, reachable from anywhere in the world. Text the link to someone who will be appropriately impressed.
Two honest notes: drag-and-drop sites like this are temporary unless you create a free Netlify account to keep them, and remember that a mailto form means your email placeholder needs to be replaced with your real address before customers use it.
A break-even calculator and a customer intake website — both built by you. In the next module, the capstone: connecting to real business software. It's the most ambitious project in the course, and you now have every skill it requires.