Claude Code Module 2: Multi-File Projects, Git Integration & The Debugging Tricks That Actually Work

Claude Code Course · Module 2 of 3

Module 1 Beginner — Setup & First Commands

Module 2 Intermediate — Real Projects & Workflows

Module 3 Advanced — Agents, APIs & Deployment

Claude Code Module 2 — Build Real Projects Without Writing a Single Line of Code

June 2026 · 18 min read · Module 2 of 3 · Git · Multi-file · Debugging

Module 1 got you installed and running. Module 2 is where things get serious. You're going to learn how to use Claude Code on real, multi-file projects — with Git, with debugging, with team-style workflows — and still never have to write code manually.

Most people stop at "Claude Code can build a simple page." What they miss is that it can manage an entire project — tracking changes, fixing bugs, refactoring messy code, adding features to existing files, and working across dozens of files at once. That's what this module is about.

By the end you'll know how to use Claude Code the way developers actually use it — with version control, structured workflows, and the confidence to tackle complex projects without touching code directly.

Why Git Is Non-Negotiable When Using Claude Code

Git is a version control system. It tracks every change made to your files so you can see what changed, when, and why — and roll back anything that breaks. When Claude Code is making changes to your files automatically, Git becomes your safety net.

Without Git: Claude Code makes a change you don't like, and you have no way to undo it cleanly.

With Git: Every change is tracked. One command and you're back to where you were.

Setup

Initialize Git in Your Project

Do this once in every project folder before using Claude Code. It takes 30 seconds.

Terminal — Git Setup

# Initialize Git in your project folder
git init

# Stage all current files
git add .

# Save the first snapshot (commit)
git commit -m "Initial project setup"

Run these three commands once before starting Claude Code on any new session. Now every change Claude makes can be reviewed and undone.

Daily Habit

Commit Before Every Major Claude Code Task

Before asking Claude Code to do anything big — restructure a file, add a major feature, refactor existing code — commit what you have first.

Terminal — Before Big Changes

# Save current state before a big change
git add .
git commit -m "Before: adding dark mode feature"

# After Claude Code finishes, review what changed
git diff HEAD~1

# If something broke, undo Claude's changes
git checkout -- .

git checkout -- . resets ALL files to the last commit. Your nuclear option when things go sideways.

Let Claude Code handle Git too. Inside a Claude Code session you can say "commit the current changes with the message: Add dark mode toggle" and it will run the Git commands for you. You don't have to touch the terminal at all if you don't want to.

Working With Multi-File Projects

Real projects aren't one HTML file. They have dozens of files — HTML, CSS, JavaScript, images, config files, data files. Claude Code handles all of them simultaneously. Here's how to think about multi-file work.

Concept

Claude Code Reads Your Entire Project Context

When you run Claude Code inside a project folder, it scans every file. It knows your CSS class names, your JavaScript function names, your HTML structure — all of it. This means you can say things like "update the .hero-section styles in styles.css to match the card design in components.css" and it knows exactly what you mean.

This cross-file awareness is what makes Claude Code genuinely useful for real projects — not just toy examples.

Pattern

How to Structure Your Claude Code Instructions for Multi-File Work

For multi-file tasks, be explicit about which files you want changed and how they should relate to each other:

Claude Code — Multi-file Prompt Pattern

# Bad — too vague for a multi-file project
Add a newsletter section

# Good — specific, references existing files
Add a newsletter signup section to index.html.
Place it between the posts grid and the footer.
Style it in styles.css using the same color variables
already defined at the top of that file.
The button should use the existing .btn-primary class.
Add a handleNewsletterSubmit() function to main.js
that validates the email and shows a success message.

Reference existing classes, functions, and variables by name. Claude Code will find them and keep everything consistent.

The CLAUDE.md File — Your Project's Brain

This is the most underused feature in Claude Code — and the one that will save you the most time once you start using it properly.

CLAUDE.md is a special file you create in the root of your project. Claude Code reads it automatically at the start of every session. Put everything Claude needs to know about your project in here — and you never have to repeat yourself again.

Best Practice

Create a CLAUDE.md in Every Project

Here's a real CLAUDE.md template for a Kodexon-style blog project. Customize it for your own:

CLAUDE.md — Project Context File

# Project: Kodexon AI Blog Theme

## What This Project Is
A custom Blogger XML theme for kodexon.com — an AI tutorial
blog covering ChatGPT, Gemini, Cursor, and Claude.

## Tech Stack
- Pure HTML, CSS, JavaScript (no frameworks)
- Blogger XML template syntax (b:if, b:loop, data: variables)
- Google Fonts: Playfair Display (headings) + Inter (body)
- No external JS libraries unless absolutely necessary

## Brand Colors
--emerald: #10B981
--teal: #14B8A6
--accent: #8B5CF6
--bg: #F8FAFC
--text: #1E293B

## Design Rules
- Always mobile-first, fully responsive below 768px
- Dark mode support via data-theme="dark" on html element
- No inline styles — use CSS custom properties
- Keep CSS class names consistent with existing patterns

## File Structure
- theme.xml — main Blogger template (all CSS inside b:skin)
- posts/ — sample HTML post files for testing
- assets/ — any standalone images or icons

## Important Rules
- Never break the Blogger XML structure
- Always test Blogger template tags before suggesting changes
- When adding features, check if a similar pattern already exists
- Commit message format: "feat: description" or "fix: description"

Create this file once and Claude Code reads it every session. No more re-explaining your project from scratch every time.

Debugging With Claude Code — The Right Workflow

Something breaks. Here's exactly how to handle it with Claude Code — efficiently, without panic.

The 4-Step Debugging Workflow

1

Describe the symptom, not your theory. Don't say "I think the z-index is wrong." Say "The mobile menu is appearing behind the hero image." Let Claude Code diagnose it.

2

Include the error message exactly. If the browser console shows an error, paste the full error text into Claude Code. Word for word. No paraphrasing.

3

Describe what you expected vs. what happened. "Expected: button stays at the bottom. What happened: button jumps to the top on scroll." This context cuts debugging time in half.

4

Test the fix before moving on. Don't ask Claude Code to fix ten bugs at once. Fix one, confirm it works, then move to the next.

Example

Real Debugging Prompt — What a Good One Looks Like

Claude Code — Debugging Prompt

# Weak debugging prompt (avoid this)
The menu is broken, fix it

# Strong debugging prompt (use this)
On mobile (below 768px), clicking the hamburger menu button
opens the nav correctly, but clicking a nav link doesn't close
the menu. The menu stays open until you click the hamburger again.

Browser console shows this error when clicking nav links:
  TypeError: Cannot read properties of null (reading 'classList')
  at closeMobileNav (main.js:47)

Expected behavior: clicking any nav link should close the mobile
menu and navigate to the target page.

Please find the bug in main.js and fix it.

The error message and exact symptom description are what make this prompt work. Claude Code can pinpoint the bug immediately.

Adding Features to an Existing Project

This is where most people underestimate Claude Code. It's not just for building from scratch — it's equally powerful for extending and improving something that already exists. Here's how to add features without breaking what's already working.

Strategy

The Extend-Don't-Replace Approach

When adding a new feature, tell Claude Code explicitly to extend the existing code rather than rewriting it. This preserves what's already working.

Claude Code — Feature Addition Prompts

# Adding dark mode to an existing theme
Add a dark mode toggle to the existing theme. Do not rewrite
the CSS — add a [data-theme="dark"] selector block at the end
of the stylesheet that overrides only the color variables.
The toggle button already exists in the header with id="theme-btn".
Wire it to a toggleTheme() function in main.js that adds/removes
the data-theme attribute on the html element and saves the
preference to localStorage.

# Adding a search feature
Add a search overlay to the existing header. The search button
with class .btn-search is already in the HTML. When clicked,
it should show a full-screen overlay with a search input.
Use the existing --emerald and --surface CSS variables for styling.
Keep the existing header layout intact — don't move any elements.

Module 2 Practice — Build a Full Kodexon-Style Blog Post Page

Your hands-on project for Module 2 is building a complete, production-quality blog post page — the kind you'd see on a real AI tutorial site — with every modern feature included.

Project Setup

Start Your Session

Terminal

mkdir kodexon-post-page
cd kodexon-post-page
git init
claude

Main Prompt

The Full Post Page Build Prompt

Claude Code — Blog Post Page

Build a complete AI tutorial blog post page with:

Files to create:
- post.html — the main post page
- post.css — all styles
- post.js — all interactivity

Post content (use this as placeholder):
Title: "10 ChatGPT Prompts That Will 10x Your Productivity"
Category: ChatGPT
Author: Oscar Garcia
Date: June 2026
Read time: 8 min

Design spec:
- Sticky header with logo "Kodexon", nav links, dark mode toggle
- Breadcrumb: Home > ChatGPT > [post title]
- Post title (large, Playfair Display font)
- Author bar with avatar initials, date, and read time
- Reading progress bar at top of page (animates as you scroll)
- Two-column layout: main content (65%) + sticky sidebar (35%)
- Sidebar: auto-generated Table of Contents from H2/H3 tags,
  active section highlighted as you scroll
- Post body with 4 sample H2 sections, each with 2 paragraphs
  and one code/prompt block styled like a terminal window
- In-article share buttons: Twitter/X, LinkedIn, Facebook, Copy Link
- Author box at the bottom with avatar, name, role, bio
- Related posts section: 3 cards in a row, each with thumbnail
  placeholder, category badge, title, and read more link
- FAQ accordion: 4 questions with smooth open/close animation
- Footer with 4-column grid

Color scheme: emerald (#10B981) primary, dark slate text (#1E293B),
white surfaces, very light gray background (#F8FAFC)
Fonts: Playfair Display for headings, Inter for body text

JavaScript features:
- Dark mode toggle (saves to localStorage)
- Reading progress bar
- TOC auto-generation and active state on scroll
- FAQ accordion
- Share button functions
- Back-to-top button (appears after 400px scroll)

Make everything fully responsive. Mobile gets single column,
hamburger menu, and stacked related posts.

This is a complex prompt but that's intentional. You're building a production-quality page in one session — this is the real power of Claude Code at the intermediate level.

Iteration

Enhance With These Follow-Up Prompts

Claude Code — Iteration Prompts

# Add copy button to code blocks
Add a "Copy" button to each .prompt-container block.
When clicked it copies the text inside to clipboard and
briefly shows "Copied!" before resetting. Use the existing
--emerald color for the button.

# Improve mobile TOC
On mobile the sidebar is hidden. Add a floating TOC button
at the bottom right of the screen. When tapped it opens a
slide-up panel with the table of contents. Close it with an X.

# Add scroll reveal animations
Add subtle fade-up entrance animations to the post cards,
FAQ items, and author box as they scroll into view.
Use IntersectionObserver — no external libraries.

The developers who ship the fastest in 2026 aren't the ones who type the most code. They're the ones who describe the clearest picture of what they want built.

Module 2 — What You've Learned

• Git workflow: Commit before every major task, use git diff to review changes, git checkout to undo
• CLAUDE.md: Create one in every project — Claude reads it automatically every session
• Multi-file prompts: Reference existing class names, functions, and files by name for consistent output
• Debugging workflow: Symptom + error message + expected vs actual = Claude Code fixes it fast
• Extend don't replace: Tell Claude to add to existing code, not rewrite it
• Practice project: Full production blog post page with 8+ interactive features, built in one session

Final Module in This Course

Module 3 — Advanced: Agents, APIs & Deploying to the Web

Automate entire workflows, connect to APIs, set up CI/CD pipelines, and deploy your projects live — all with Claude Code as your co-pilot. Continue to Module 3 →