Part 2 — First Project and Safe Workflow

Now you stop preparing and start using Claude Code

This part creates a throwaway practice repository, teaches the minimum Git loop around AI edits, and walks you through a real Claude Code session using plan mode first.

Chapters 5–9Practice repo onlySmall HTML and CSS target
Chapter 5

Git basics for AI-assisted work

This is not a full Git course. It is the minimum you need to work around AI edits without feeling blind. Think of Git as project memory plus change inspection.

Working tree files you are editing now check with git status Staged changes the snapshot you plan to save use git add Commit history named checkpoints over time view with git log
The minimum loop is simple: inspect what changed, stage what you want, then commit a named checkpoint.
The six commands that matter firstgit init git status git add . git diff git commit -m "message" git log --oneline
Repository

A project folder Git is tracking

When you run git init, Git starts tracking history in this folder.

Commit

A named checkpoint

A commit is a saved snapshot with a message, such as Create first playground page.

Why it matters

AI without Git is reckless

If Claude Code changes a file and you are not tracking the before-and-after state, you lose the simplest way to inspect what happened.

Do this now

Open any empty folder, run git init, then git status. If Git says you are on branch main and the working tree is clean, the repository exists and Git is awake.

Chapter 6

Create a safe playground project

Do not begin with a work repository, a team repo, or a complicated app. Start with a throwaway folder whose entire job is to let you learn the loop safely.

Make the projectmkdir ~/claude-code-playground cd ~/claude-code-playground git init code .
1
mkdir ~/claude-code-playground

Creates a new folder in your home directory. The ~ means home, so this becomes something like /Users/you/claude-code-playground.

2
cd ~/claude-code-playground

Moves you into that new folder. Run pwd afterward if you want proof of your new location.

3
git init

Turns the folder into a Git repository so every change can be inspected and checkpointed.

4
code .

Opens the current folder in VS Code. The dot means "this folder right here," not some other location.

Create the starter files

Inside VS Code, create three files in the Explorer panel:

  • README.md
  • index.html
  • style.css

Then place this text in README.md:

README.md# Claude Code Playground This is my first practice project for learning Claude Code. Please explain things in plain English. Keep the project small and simple.
Why HTML and CSS first

A tiny HTML and CSS page gives you a visible result without adding extra runtime complexity. You do not need Python, Node.js, or a framework to see whether the workflow works.

Chapter 7

First Claude Code session

The safest beginner pattern is: start in plan mode, ask for a small plan, read it carefully, then start a normal session and approve a tiny implementation. This teaches you the loop without handing over too much power too early.

Pass 1: plan only

Start in plan modeclaude --permission-mode plan
Exact first promptI am brand new to coding. Please inspect this folder and propose the smallest possible starter website using only HTML and CSS. Do not edit anything yet. Explain the plan in plain English. Tell me which files you would change and why.
Good behavior

Small and explicit

Claude explains the files, suggests a minimal plan, names index.html and style.css, and waits for approval.

Suspicious behavior

Too much too fast

Claude proposes frameworks, dependencies, build tools, or a major redesign when you asked for a tiny starter page.

Pass 2: small implementation

Exit the plan-only session, then start a normal one:

Normal sessionclaude
Exact second promptImplement the simple starter website we discussed. Keep it extremely small. Use only index.html and style.css. After making the changes, explain what each file does in beginner language.
Beginner rule

If Claude wants to run a command you do not understand, reply with: Explain the command before you run it. That is a strong beginner habit, not a sign of weakness.

What to expect

  • Claude inspects the files in the current folder.
  • Claude proposes or directly requests permission to edit index.html and style.css.
  • You approve only if the scope still looks tiny.
  • Claude explains the outcome in plain English.
How to view the result in a browser

macOS: open index.html

Linux: xdg-open index.html

Windows: start index.html

WSL: explorer.exe . and then double-click index.html.

Chapter 8

Review, approve, commit, recover

The workflow does not end when Claude finishes editing. The whole safety point is that you inspect the change, understand it at a high level, and save a named checkpoint only when it looks right.

Review loopgit status git diff git add . git commit -m "Create first Claude Code playground page" git log --oneline
1
git status

Shows which files changed. This answers: "What did Claude touch?"

2
git diff

Shows the actual before-and-after lines. This answers: "What changed inside those files?"

3
git add . and git commit -m

These turn the current working state into a named checkpoint you can return to mentally and operationally later.

Do not learn panic commands first

As a beginner, you do not need destructive Git reset commands as your first recovery strategy. Use a practice repo, inspect first, commit often, and keep the changes small enough that you can reason about them.

Safe recovery mindset

  • If the result is confusing, ask Claude to explain the diff in plain English.
  • If the result is wrong, ask Claude to make a smaller correction instead of starting a bigger rewrite.
  • If the repo is just a practice repo and everything feels messy, it is acceptable to delete the playground folder and rebuild it from scratch. That is one reason we started with a throwaway project.
Chapter 9

Project memory and CLAUDE.md

Claude Code supports persistent instructions. The project-level memory file is usually named CLAUDE.md. The point is not to write a giant law book. The point is to give Claude a small, useful operating guide for this repo.

Bootstrap project memory/init

After running /init, keep the file short and beginner-friendly. For this playground repo, something like this is enough:

Starter CLAUDE.md# Project Guide ## Purpose - This is a beginner practice project. - Keep the project small and simple. ## Technology - Use only HTML and CSS unless I explicitly approve something else. ## Working Style - Explain changes in plain English. - Prefer small edits over big rewrites. - Ask before adding dependencies. - Explain shell commands before running them. ## Safety - Do not use dangerous commands unless I explicitly approve them. - Do not change files outside this project.
Project memory

Shared with this repo

These instructions travel with the project and help Claude understand local expectations.

User memory

Your broader preferences

This can cover habits or preferences across projects. The important beginner lesson is simply that there are multiple instruction layers.

Anti-pattern

Rule dump

If you stuff a giant wall of rules into CLAUDE.md, it becomes harder to maintain and easier to ignore mentally. Keep it sharp and useful.

Part 2 completion check

Official references used for this page: Claude Code memory, Claude Code terminal config, Claude Code quickstart, and the official Git book sections on installation and first-time setup.