Your First Conversation with an AI Builder

This is the chapter where everything changes.

In the next 15 minutes, you're going to ask an AI to build something for you. Not a chatbot response. Not an essay. An actual thing — a webpage with your name on it, styled with colors, visible in your browser. Something you made.

The Prompt

Open your terminal (or the terminal inside VS Code). Navigate to your exercises folder:

# Move to your exercises folder
cd ~/Desktop/builders-bible-exercises
 
# Create a new folder for this exercise
mkdir my-first-page && cd my-first-page

Now launch Claude Code:

# Start Claude Code in this folder
claude

You'll see Claude Code's prompt appear, waiting for your instruction. Type this:

Create a file called index.html that shows my name in big, colorful letters
centered on the page. My name is [YOUR NAME]. Make it look fun and modern
with a gradient background.

Press Enter.

Watch what happens.

Claude Code reads your request, thinks about it, and starts writing. You'll see it creating a file called index.html, filling it with HTML and CSS code. It might take 10-30 seconds. When it's done, it'll tell you the file has been created.

What Just Happened

Let's pause and understand the extraordinary thing that occurred.

You described something you wanted in plain English — "big, colorful letters, centered, gradient background." Claude Code translated that into HTML (the language that describes the structure of a webpage) and CSS (the language that describes how it looks). It wrote dozens of lines of code that work together to create exactly what you described.

This is not autocomplete. This is not filling in blanks. Claude Code understood your intent, made design decisions (which gradient colors? which font size? how to center?), and wrote working code. It's the same process a human web developer would follow, compressed from hours to seconds.

See Your Creation

Open the file in your browser:

# On Mac: open the file in your default browser
open index.html
 
# On Windows: start the file in your default browser
start index.html
 
# On Linux:
xdg-open index.html

Your name. In big, colorful letters. On a gradient background. In your browser.

You built that. Not by memorizing syntax. Not by studying for months. By describing what you wanted to someone (something) that knows how to translate intent into code.

Making It Better

Your page exists, but it's version 1. Let's iterate. In the same Claude Code session, type:

Add a photo placeholder (a nice rounded circle with my initials) and a
short bio underneath my name. Also add a subtle animation where the name
fades in when the page loads.

Claude Code modifies the existing file. It adds new HTML elements, new CSS for the animation, and a styled circle with your initials. Open the file again (or refresh your browser) to see the changes.

Now try:

Add a dark mode toggle button in the top right corner. When clicked, it
should switch between a light and dark color scheme. Make the transition
smooth.

This one is more complex. Claude Code needs to write JavaScript — the language that makes webpages interactive — to handle the button click and swap the color scheme. Watch it work through the problem.

Each time you make a request, you're doing what software developers call iterating — building in small steps, reviewing each result, and refining toward your vision. The AI doesn't need to get everything perfect on the first try. Neither does a human developer. The skill is in knowing what to ask for next.

When AI Makes Mistakes

Let me be honest about something: the AI will make mistakes. Maybe the animation stutters. Maybe the colors clash. Maybe the dark mode toggle doesn't quite work right on the first try.

This is normal. Professional developers experience this all day, every day, with or without AI. The difference is how you respond.

Bad response: "It's broken. I give up."

Good response: "The dark mode toggle changes the background but the text color stays the same, so it becomes invisible. Can you fix that?"

The second response is called debugging — identifying specifically what went wrong and communicating it clearly. You already do this in daily life. "The coffee machine makes coffee but the milk frother doesn't heat up" is debugging. "The coffee machine is broken" is not.

With an AI coding tool, you debug by describing the problem:

The dark mode button works, but when I switch to dark mode, the bio text
is still dark colored, so I can't read it against the dark background.
Please fix the text color to be light in dark mode.

Claude Code reads the file, understands the issue, and fixes it. This back-and-forth — describe, review, refine — is the fundamental loop of building with AI. It's a conversation, not a command.

The CLAUDE.md Concept

Here's something that separates casual AI use from serious building: the CLAUDE.md file.

Create one now. In Claude Code, type:

Create a CLAUDE.md file for this project with the following:
- Project name: My Personal Page
- Description: A personal profile page to learn web development
- Style preferences: modern, clean, uses gradients and subtle animations
- Tech stack: HTML, CSS, vanilla JavaScript (no frameworks yet)

The CLAUDE.md file sits in your project folder. Every time you start a new Claude Code session in this folder, it reads this file first — like a new team member reading the onboarding document before starting work. The better your CLAUDE.md, the better the AI's output, because it has context about your project's goals and constraints.

This concept extends far beyond Claude Code. In Cursor, similar context goes into .cursorrules. In GitHub Copilot, it's .github/copilot-instructions.md. The principle is the same: teach your AI about your project, and its suggestions improve dramatically.

Model-Agnostic Building

Throughout this book, we use Claude Code as our primary tool. But everything you learn works with alternatives:

The AI coding landscape will continue to evolve. New tools will appear. Some of these tools may not exist when you read this. But the skill — describing what you want clearly, reviewing AI output, iterating toward your goal — transfers perfectly across all of them.

What You've Learned

In this chapter, you:

1. Asked an AI to build something — and it did
2. Iterated — made it better through a series of requests
3. Debugged — identified problems and communicated them clearly
4. Added context — created a CLAUDE.md file to make the AI smarter about your project
5. Understood the pattern: Describe → Review → Refine → Repeat

This is the loop you'll use for the rest of this book. And for the rest of your building career.

Chapter endnotes

[1] Boris Cherny, an Anthropic engineer instrumental in building Claude Code, published a widely-cited thread on "10 Principles for Claude Code" that emphasizes investing heavily in CLAUDE.md files. His observation: "The best Claude Code users spend more time writing CLAUDE.md than writing prompts."

[2] The CLAUDE.md concept builds on a long tradition of "README-driven development" — the idea that writing documentation first forces clarity of thought. Tom Preston-Werner (GitHub co-founder) popularized this approach in his 2010 blog post "Readme Driven Development."

[3] When we say "vanilla JavaScript" (no frameworks), we mean pure JavaScript without additional libraries like React or Vue. The term "vanilla" means "plain, unmodified" — like vanilla ice cream is the base flavor. Every framework is built on top of vanilla JavaScript, so understanding it first is valuable.