Claude Code Tutorial: Your First Real Project

TL;DR

• This claude code tutorial walks you through building a real project, not a toy example.
• You need a CLAUDE.md file. Without it, Claude has no context and gives generic output.
• Numbered steps below take you from install to working feature in under an hour.
• The biggest mistake beginners make is skipping setup. Do not skip setup.
• Once it clicks, you will use Claude Code for almost everything.

What is Claude Code and why should you care?

Claude Code is a terminal-based AI coding tool from Anthropic. It runs in your project folder and reads your files. You talk to it. It writes, edits, and explains code.

It is not a chat window you copy-paste from. It is an agent that works inside your codebase.

I use it every day at Devwiz to build client projects and internal tools. It is the first AI tool that actually changed how I work, not just how fast I type.

This tutorial skips the fluff. You will build something real and understand why it works. For a deeper look at the full feature set, read the Claude Code complete guide.

---

Do you need to know how to code?

No. But you need to think clearly.

Claude Code writes the code. Your job is to give it good instructions and catch when it goes wrong. If you can describe what you want in plain sentences, you can use Claude Code.

That said, knowing a little HTML, JavaScript, or Python helps you spot mistakes faster.

---

Step 1: Install Claude Code

Open your terminal. Install the Claude Code package globally with npm. You only do this once. Then run the claude command to log in and follow the prompts to connect your Anthropic account. Claude Code is ready.

---

Step 2: Create your project folder

Make a new folder for your project. Call it whatever you like. Open that folder in your terminal using the cd command.

Now initialise Claude Code in that folder by running claude init. This creates a CLAUDE.md file. That file is the most important thing in this tutorial.

---

Why does CLAUDE.md matter so much?

CLAUDE.md is where you tell Claude about your project. Without it, Claude gives you generic answers that do not fit your work.

With a good CLAUDE.md, Claude Code knows your stack, your naming conventions, what to avoid, and what you are trying to build. Think of it as a brief for a contractor. The better the brief, the better the work.

Open CLAUDE.md and fill in three things to start:

1. What the project does in one sentence.
2. What tech stack you are using (example: React, TypeScript, Tailwind).
3. Any rules Claude must follow (example: Australian English, no inline comments, keep files under 200 lines).

You can always add more later. Start simple. Read more about getting this right in the CLAUDE.md strategy guide.

A one-page CLAUDE.md will save you more time than any other setup step.

---

Step 3: Build something specific

Vague prompts give vague results. Be specific.

Here is a bad prompt: "Build me a website."

Here is a good prompt: "Create an index.html file with a header that says my name, a short bio paragraph, and a contact button that links to my email. Use plain HTML and inline CSS only. No frameworks."

The good prompt has a clear output, a clear constraint, and a clear reason to stop.

Run the claude command, type your prompt, and hit enter. Claude will write the file. Read it. Check it. Ask it to change anything that is wrong.

---

Step 4: Review the output before you accept it

Do not accept everything Claude writes. Read it.

Look for three things:

1. Does it do what you asked?
2. Does it follow your CLAUDE.md rules?
3. Is there anything you do not understand?

If something looks wrong, describe the problem. Claude will fix it. This back-and-forth is normal. It is part of the process. Claude Code keeps a record of your conversation within a session, so you can refer to earlier instructions without repeating yourself.

---

Step 5: Add a real feature

Now do something harder. Add a feature that involves logic, not just layout.

Example: "Add a form to index.html that lets a user enter their email address. When they submit, show a message below the form that says thanks, we will be in touch. Use vanilla JavaScript. No libraries."

This tests whether Claude can handle multiple files, event listeners, and a small piece of state. Watch what it does. If it imports a library you did not ask for, tell it not to. If it creates a new file you did not expect, ask why. Push back. Claude responds well to pushback.

---

What makes a good Claude Code session?

Three things make the difference between a frustrating session and a productive one.

First, start each session with context. If you closed Claude and came back, it does not remember yesterday. Either re-open the same session or paste the key context at the start.

Second, give one instruction at a time. Stacking five requests into one message makes it hard to spot where something went wrong.

Third, save often. Claude Code makes changes to real files. Use git to commit after each successful step. If something breaks, you can roll back cleanly.

---

How is Claude Code different from Cursor?

Both tools use AI to help you write code. The difference is where they live.

Cursor is an editor. You work inside it. Claude Code is a terminal tool. You stay in your existing editor and call Claude from the command line.

Claude Code is better when you want to work across many files at once, run scripts, or automate repetitive tasks. Cursor is better if you want suggestions as you type. I use Claude Code for building. See the full comparison in Claude Code vs Cursor.

---

How do you get more out of Claude Code over time?

The more you use it, the better your CLAUDE.md gets.

Every time Claude does something you did not want, add a rule to CLAUDE.md. Over a few weeks, it shapes to your style. I also recommend reading how to use Claude Code once you have finished this tutorial. It covers habits and workflows that take you past beginner level fast.

At Devwiz, we built a set of CLAUDE.md templates for different project types. They cut setup time down to minutes. You can build your own as you go.

The developers who get the most from Claude Code treat it like a collaborator, not a search engine.

---

FAQ

How long does it take to set up Claude Code for the first time?
About 15 minutes if you follow the steps above. Install, log in, create your CLAUDE.md, and run your first prompt. Most people have working output inside 30 minutes.

Do I need an Anthropic paid plan to use Claude Code?
Claude Code needs access to your Anthropic account with credits. The cost is low for personal projects and scales with usage.

What if Claude Code writes something that breaks my project?
Commit your code before each Claude session. If a change breaks something, restore the last good state with git. This is not optional. Always use version control with Claude Code.

Can I use Claude Code on a project that already exists?
Yes. Run claude init inside any existing project folder. Write a CLAUDE.md that describes what is already there. Claude Code reads your existing files and picks up from where they are.

---

Ready to take this further?

This tutorial gets you started. But applying Claude Code to a real business problem, with real clients and real stakes, is a different skill.

If you want to see how AI tools like Claude Code fit into a broader business transformation, book a free AI transformation call and we can work through what that looks like for your situation.