Claude Sonnet 4.6 Coding Tutorial From Scratch

Last year I spent three weeks trying to get a developer to build me a simple lead capture form that would automatically tag incoming inquiries by property type and budget range. Three weeks, two freelancers, and €340 later, the form still didn’t do exactly what I wanted. Then I sat down with Claude Sonnet for 45 minutes and built it myself. I have zero coding background. I studied economics, I sell property in Madeira, and the closest I get to “technical” is setting up a Typeform. That experience changed how I think about what’s actually possible without hiring anyone.

This tutorial is specifically for people like me — solo operators, consultants, agents — who need functional code-based tools but don’t want to learn programming. Claude Sonnet 4.6 is genuinely the best AI I’ve tested for this use case, and I’ll walk you through exactly how I use it, step by step, with the actual prompts that work.

What You’ll Build by the End of This Tutorial

By the time you finish reading and working through these steps, you’ll have:

• A working HTML/JavaScript snippet you can embed anywhere (website, Notion, email)
• A repeatable prompting framework you can use for any small coding task
• A debugging process that doesn’t require knowing what any of the code means
• A concrete understanding of what Claude Sonnet 4.6 can and cannot do for non-developers

I’ll use a real estate example throughout — a property inquiry router — but the same process applies to any small web tool you need built.

Prerequisites: What You Need Before Starting

You don’t need much. Seriously.

• A Claude account. The free tier works for basic tasks, but Claude Pro ($20/month) gives you access to Claude Sonnet 4.6 with higher usage limits. For any serious build session, you’ll hit the free limit fast.
• A text editor. Notepad on Windows, TextEdit on Mac (in plain text mode), or a free tool like VS Code if you want syntax highlighting. You don’t need to know how to code in it — just paste and save.
• A browser. Chrome or Firefox for testing your output.
• A specific problem to solve. Vague requests get vague code. Write down in plain English exactly what you want the thing to do before you open Claude.

That’s it. No GitHub account, no terminal, no hosting setup required for the core tutorial.

Step 1: Define Your Task in Plain Language Before Touching Claude

This is the step most people skip, and it’s why they get bad results. Before you type anything into Claude, write out your requirement as if you were explaining it to a very literal-minded assistant who will do exactly what you say and nothing more.

For my lead router, I wrote this out in a notes doc first:

“I need a single HTML page with a form. The form asks: property type (dropdown: villa, apartment, land), budget range (dropdown: under €300k, €300k–€600k, over €600k), and name + email fields. When submitted, the form should show a custom thank-you message based on the combination of property type and budget. No backend needed — everything happens in the browser.”

Notice what I specified: the inputs, the output behavior, the constraint (no backend). The more specific your plain-English spec, the better the code Claude returns on the first attempt.

Step 2: Write Your First Prompt Using the “Role + Task + Constraints + Output Format” Structure

Claude responds well to structured prompts. For coding tasks especially, I use this four-part format every time.

Here’s the exact template I use:

You are a web developer helping a non-technical small business owner build a simple browser-based tool.

TASK:
[Paste your plain-English spec from Step 1 here]

CONSTRAINTS:
- Pure HTML, CSS, and JavaScript only — no frameworks, no libraries, no external dependencies
- All code in a single .html file
- Must work when opened directly in a browser (no server required)
- Keep the code simple and commented so a non-developer can understand it

OUTPUT FORMAT:
Give me the complete, ready-to-use HTML file. 
After the code, give me a plain-English explanation of how it works (3–5 sentences max).
Do not ask me clarifying questions — make reasonable assumptions and note them at the end.

The “do not ask clarifying questions” instruction is important. By default, Claude will sometimes pause and ask what you mean. That’s fine in a conversation, but for code generation it breaks your flow. Tell it to assume and proceed.

Step 3: Paste the Code Into a File and Test It Immediately

Claude will return a block of code. Copy everything between the <!DOCTYPE html> tag and the closing </html> tag — or just copy the entire response if Claude wraps it cleanly.

Then:

1. Open your text editor and paste the code
2. Save the file as test.html (make sure it saves as .html, not .txt)
3. Find the file in your file explorer and double-click it — it should open in your browser
4. Test every interaction you specified: fill out the form, click submit, check that the thank-you messages show correctly

First attempt success rate in my experience: about 70%. The other 30% of the time something is off — a dropdown isn’t working, a message isn’t showing for a specific combination, or the styling looks wrong. That’s what Step 4 is for.

Step 4: Debug Without Knowing Code — The Exact Prompt to Use

When something doesn’t work, non-developers freeze. You see a wall of code and have no idea where the problem is. Here’s the approach that actually works.

Describe the bug in behavioral terms, not technical terms. Then paste the entire code back to Claude and use this prompt:

Here is the code you gave me. When I test it, [describe exactly what happens].
I expected [describe what you wanted to happen].

Please fix the issue. Return the complete corrected file — not just the changed section.
Keep all comments in the code. Do not change anything else.

[paste your full code here]

The key phrases: “complete corrected file” (so you don’t have to figure out where to paste a partial fix), “not just the changed section,” and “do not change anything else” (prevents Claude from redesigning things you already liked).

For my lead router, the first version wasn’t displaying the message for the “land + over €600k” combination. I told Claude exactly that. Fixed in 2 minutes. No idea what the actual bug was. Don’t need to.

Step 5: Add Features One at a Time, Not All at Once

Once your base version works, resist the urge to ask for everything at once. Adding features one at a time keeps the code manageable and the debugging simple.

My process for the lead router after the base version worked:

1. First: got the form working with correct messages
2. Second: asked Claude to add basic styling to match my brand colors (gave it my hex codes)
3. Third: asked Claude to add a “copy email to clipboard” button in the thank-you message
4. Fourth: asked Claude to add form validation so fields can’t be submitted empty

Each step was a separate message in the same Claude conversation. Each time, I pasted the current working version and described only the one new thing I wanted. This kept the code clean and meant I always had a working backup to return to.

Step 6: Deploy Without a Developer — Your Three Options

Once the .html file works locally, you have three simple ways to use it without touching hosting or servers:

Option	Best For	Cost	Technical Level
Tiiny.host	Quick sharing via link	Free (basic)	Drag and drop
Netlify Drop	Permanent hosting with custom URL	Free	Drag and drop
Embed in WordPress	Adding to existing site	Free	Copy/paste in HTML block

For most of what I build, I use Netlify Drop. Go to app.netlify.com/drop, drag your .html file onto the page, and you get a live URL in under 30 seconds. I’ve shared these links directly with clients via WhatsApp.

For embedding into my WordPress site, I use the “Custom HTML” block in the Gutenberg editor and paste the code between <div> tags. Claude can help you strip the file down to just the embeddable portion if needed — just ask: “Remove the HTML boilerplate and give me only the embeddable snippet.”

My Real-World Experience: Building Tools for a Madeira Real Estate Practice

Let me be specific about what I’ve actually built with Claude Sonnet 4.6 and what the results looked like in practice.

Over the past four months — roughly January through April 2026 — I built or modified seven small browser-based tools for my consulting operation. None of them required a developer. The total time I spent prompting Claude across all seven projects was approximately 9 hours. Getting equivalent work done by a freelance developer at the rates I’ve paid in Madeira (typically €45–€70/hour for front-end work) would have cost me somewhere between €400 and €630 assuming 3–4 hours per tool at the simpler end.

The most useful tool was a property comparison sheet generator. A client gives me their shortlist of three or four properties they’re considering, I fill in the details (price, size, location, features), and the tool generates a clean HTML comparison table I can screenshot or print as a PDF for the meeting. Before this, I was doing this manually in Word every time — about 35 minutes per client meeting. Now it’s under 5 minutes. Across approximately 18 client meetings in those four months, that’s roughly 10.5 hours recovered from a single tool.

The lead inquiry router I described earlier is my second most-used tool. It handles the initial qualification logic so that when someone contacts me through the website, they immediately get a tailored response about process and timeline based on their inputs, rather than a generic “thanks, I’ll be in touch.” Response-to-booking rate improved by what I estimate to be about 20% — though honestly that could also be seasonal, so I won’t overstate it.

I also built a simple mortgage estimate calculator calibrated to Portuguese lending rates (which I update manually each quarter), a rental yield calculator for investment buyers, and a document checklist generator that outputs a personalized list of required documents based on whether the buyer is an EU citizen, a non-EU resident, or a company. That last one alone saves me about 15 minutes of back-and-forth per transaction.

None of these tools would win a design award. They’re functional, clean, and they solve specific problems in my workflow. That’s all I need.

The prompting process I outlined in this tutorial is exactly what I use. Same structure, same debugging approach, same one-feature-at-a-time discipline. The first two or three projects took me longer to figure out the workflow. By the fourth or fifth, I could go from idea to deployed tool in under 90 minutes for anything reasonably straightforward.

What Claude Sonnet 4.6 Does NOT Do Well for Non-Developers

I want to be honest about the limits because they’re real and they matter if you’re planning around this.

It cannot build anything that requires a real backend. If you need data to be saved, retrieved, or shared between users — think a CRM, a booking system, or a database — pure HTML/JavaScript won’t cut it, and Claude will either produce something that looks like it works but doesn’t actually persist data, or it will suggest solutions that require server setup you’re not equipped to do. I learned this the hard way when I tried to build a client portal where I could upload documents and clients could log in to view them. Claude produced something that looked functional in the browser but stored nothing. Took me an hour to realize it wasn’t actually saving any data between sessions.

Long, complex builds degrade in quality. Claude Sonnet 4.6 is excellent for tools up to maybe 300–400 lines of code. Above that, especially in a long conversation with many revisions, it starts making inconsistent changes — fixing one thing and quietly breaking another. I now save and test after every change, and I start a fresh conversation if a project has been running for more than about 8–10 exchanges.

It doesn’t know your context unless you tell it every time. Unlike a developer who remembers your project, Claude has no memory of previous conversations. Every time I start a new session, I have to re-paste the current version of the code and re-explain what the tool is supposed to do. This is a real friction point that adds 3–5 minutes to every session.

Quick Reference: Prompt Templates for Common Non-Developer Coding Tasks

Save these. They work.

For a Calculator Tool

You are a web developer helping a non-technical business owner.
Build a single-page HTML calculator that does the following:
[describe inputs and the calculation]
Output: single .html file, no external libraries, browser-only, with comments explaining each section.
Assumptions: [list any assumptions you want it to make or say "make reasonable assumptions and list them"].

For a Form With Conditional Logic

Build a single HTML page with a form that shows different content based on user inputs.
Inputs: [list your form fields and options]
Logic: [describe what should happen for each combination or scenario]
All logic runs in the browser — no server, no database.
Return the complete file with commented code.

For Restyling Existing Code

Here is a working HTML tool. I want to update the visual design only — do not change any functionality.
New style requirements:
- Primary color: [hex code]
- Font: [font name or "system default"]
- [any other style notes]
Return the complete updated file. Do not change any JavaScript logic.

[paste code]

Rating: Claude Sonnet 4.6 for Non-Developer Coding Tasks

4.2 out of 5. It saved me an estimated €500+ in developer costs over four months and recovered roughly 12 hours of manual work through the tools I built — that’s a concrete return on a $20/month subscription, which makes the score easy to justify. The deductions are for the context memory limitation and the degradation on complex multi-session builds.

Practical Summary and Next Steps

Here’s the workflow in six steps, compressed:

1. Write your spec in plain English before opening Claude
2. Use the Role + Task + Constraints + Output Format prompt structure
3. Paste the code into a .html file and test in browser immediately
4. Debug by describing behavior, not code — always request the complete fixed file
5. Add features one at a time, testing after each
6. Deploy via Netlify Drop or embed directly into your existing site

The constraint to keep in mind: this works for browser-based, single-user tools with no data persistence. Calculators, forms, generators, comparison tables, checklists. The moment you need user accounts, saved data, or anything that connects to another service, you’re past the limit of this approach without additional tools.

If you’re a solo operator running any kind of service business, there are probably five to ten small tools you’re manually recreating every week that could be built once and reused forever. Start with the most repetitive one. Write the spec. Run the prompt. You’ll have a working prototype in under an hour.

If you want to see the actual prompts I use for property description generation and market report automation — the writing side of my Claude workflow rather than the coding side — that’s covered in a separate guide here. The two workflows together cover about 80% of what I use AI for in my practice.