Lesson 3 of 4

Claude Code

Your AI pair-programmer. Describe what you want in plain English; it writes, edits, and explains the code.

What is Claude Code?

Claude Code is Anthropic's AI coding assistant. Instead of you memorizing every HTML tag or Git command, you describe your goal in plain language and Claude does the hands-on work: creating files, editing them, running commands, and explaining what happened — all while you stay in control and approve the changes.

Fun fact: this entire website — every page, the styling, the dark-mode toggle — was built with Claude Code. You're looking at its output right now.

Ways to use it

Terminal (CLI)

On your computer

Install once, then run claude inside any project folder to start a chat that can touch your files directly.

Web & app

In the browser

Use Claude Code from claude.ai/code, the desktop app, or IDE extensions — great for starting from a GitHub repo with nothing to install.

To install the command-line version, you run a single command (see the official docs for the current one), then launch it inside your project:

terminal

# Go into your website folder, then start Claude Code
cd my-website
claude

How to talk to it

Treat Claude like a skilled teammate who's new to your project. The clearer you are, the better the result. A good request usually has three parts:

What you want — "Add a contact section".
Where / details — "below the hero, with name, email, and a message box".
Any style — "match the existing orange buttons".

🚫 Vague

"make my site better"

✅ Clear

"On the home page, add a footer with my email and a link to my GitHub, styled like the rest of the site."

A real example

Here's the kind of back-and-forth that builds a site. You type the bold lines:

a conversation with Claude Code

You:    Create a simple personal homepage with my name "Kadir",
        a short bio, and a dark-mode toggle.

Claude: Created index.html, style.css, and script.js. The toggle
        remembers your choice between visits. Want me to preview it?

You:    Looks great. Make the accent color teal instead of orange.

Claude: Updated the --accent variable in style.css to teal (#14b8a6).

You:    Perfect. Commit this and push it to GitHub.

Claude: Committed "Add homepage with dark mode" and pushed to main. ✅

Notice the last step: Claude can run your Git commands too, so Lessons 2 and 3 blend into one smooth flow.

Tips to get the most out of it

Iterate in small steps. Ask for one change, look at the result, then ask for the next.
Ask it to explain. "Why did you use a CSS variable here?" It's a patient tutor.
Review before you accept. Read the changes; you're still the author.
Let it do the boring parts. Renaming files, fixing typos, writing repetitive markup.
Commit often. Ask Claude to commit after each working change so you can always rewind.

You're the pilot. AI can be confidently wrong. Preview your site, test the links, and don't push code you don't understand — ask Claude to explain it first.

You can now build a site and save it to GitHub. The final step: put it on the internet so anyone can visit. Let's deploy with Cloudflare Pages.