Claude Code Module1: For Beginners: Install It, Use It, Deploy It — Step by Step
Claude Code — Module 1: Complete Beginner's Guide to Getting Started
You don't need to be a developer to use Claude Code. You just need to know what you want built. This first module takes you from zero — installing the tool, understanding how it thinks, and making your first real project — with every single step shown, explained, and ready to copy.
Claude Code is Anthropic's command-line AI tool that lets you build, edit, and ship code using plain English. You describe what you want, and Claude Code writes it, tests it, fixes it, and pushes it — all from your terminal. This guide covers everything you need to get started even if you've never opened a terminal before.
By the end of this module you'll have Claude Code installed, configured, and you'll have used it to scaffold a real project from scratch. Module 2 covers more complex workflows, and Module 3 gets into advanced deployment — but start here. Everything builds on this foundation.
What Exactly Is Claude Code?
Claude Code is a command-line tool — meaning you run it from a terminal window on your computer. Unlike the claude.ai chat interface where you talk to Claude in a browser, Claude Code runs directly in your project folder and can read, write, edit, and run your actual files.
This is the key difference. Claude in a browser knows what you tell it. Claude Code knows what's actually on your computer — your files, your code, your directory structure. It can see everything in your project and take real actions.
| Claude.ai (Browser) | Claude Code (Terminal) |
|---|---|
| You paste code in, get text back | It reads and writes your actual files |
| You copy and paste manually | It makes the changes directly |
| No access to your file system | Full access to your project folder |
| Great for ideas and questions | Great for actually building things |
| Free / subscription | Requires API credits or Pro subscription |
Think of claude.ai as having a conversation with a very smart consultant. Claude Code is that same consultant actually sitting at your keyboard, working inside your project.
What You Need Before You Start
Claude Code runs on Mac, Windows (via WSL), and Linux. Here's what you need installed before anything else.
Node.js (version 18 or higher)
Claude Code is a Node.js package. If you don't have Node.js installed, go to nodejs.org, download the LTS version, and run the installer. It takes about two minutes.
To check if you already have it, open your terminal and run:
node --versionAn Anthropic Account
You need either a Claude Pro subscription (which includes Claude Code access) or an Anthropic API key from console.anthropic.com. The API key approach charges per use, which can be cheaper if you use it occasionally. The Pro subscription is better if you're using it daily.
Go to anthropic.com → Sign up or log in → That's it for now. You'll connect this in Step 3 of the install process below.
wsl --install before proceeding. This gives you a Linux terminal inside Windows. All the commands in this guide work the same way inside WSL.
Installing Claude Code — Step by Step
Installation takes under five minutes. Open your terminal and follow these steps exactly.
Install Claude Code Globally
This single command installs the claude CLI tool on your machine. Run it in your terminal:
npm install -g @anthropic-ai/claude-codeYou'll see a bunch of text scroll by. When it stops and you see your terminal prompt again, the install is done.
Verify the Installation
Check that Claude Code installed correctly:
claude --versionAuthenticate with Your Anthropic Account
Now connect Claude Code to your account. Run:
claudeA browser window will open asking you to log into your Anthropic account. Log in, approve the connection, and come back to the terminal. You'll see a message confirming you're authenticated.
That's it. Claude Code is installed and ready to use.
Understanding How Claude Code Works
Before you start using it, spend two minutes understanding what Claude Code actually does when you give it an instruction. This makes everything that comes later much more intuitive.
When you run claude inside a project folder, it does three things automatically:
- Reads your entire project folder structure — all files, directories, and content
- Understands the context — what kind of project it is, what languages are used, what's already built
- Executes your instructions — writing new files, editing existing ones, running commands, and reporting back
This means the quality of your results depends heavily on where you run Claude Code and how you describe what you want. Always navigate into your project folder first. Always be specific about what you want.
Your First Project — A Personal Blog in 20 Minutes
Let's build something real. We'll create a complete personal blog with Claude Code — including HTML, CSS, and content structure — from a single folder. This is your hands-on introduction to how Claude Code works in practice.
Create and Navigate to Your Project Folder
Open your terminal and create a new folder for your blog, then navigate into it:
# Create your project folder
mkdir my-blog
# Navigate into it
cd my-blogNow you're inside an empty folder. This is where Claude Code will build your project.
Start Claude Code
From inside your project folder, simply type:
claudeGive Your First Instruction
Now type your first real prompt. Be specific — describe what you want, what it should look like, and what it should do. Here's a strong first prompt to try:
Create a personal blog website with the following structure:
- index.html as the homepage with a clean, modern design
- A header with my blog name "The Digital Notebook" and navigation links
- A featured posts section with 3 placeholder post cards
- Each card should show a title, date, category tag, and excerpt
- A simple footer with social links
- styles.css with a minimal, readable design using a neutral color palette
- Use Google Fonts — Playfair Display for headings, Inter for body text
- Make it fully responsive for mobile
The design should feel editorial — like a real publication, not a generic template.Claude Code will now read your empty folder, plan the structure, and start creating files. You'll see it working in real time — showing you each file it creates and the decisions it's making. This is normal. Watch it and you'll start to understand how it thinks.
Review and Iterate
Once Claude Code finishes, open the index.html file in your browser (just double-click it in your file manager) and look at what it built.
Now go back to the Claude Code terminal and refine. This is where the magic is — you don't have to edit code manually. Just describe what you want changed:
# Change the color scheme:
Change the primary color to a deep teal (#0d9488) and update
all buttons, links, and accents to match.
# Add a new section:
Add an "About Me" section below the posts grid with a short
placeholder bio and a circular avatar placeholder.
# Fix something specific:
The navigation links are too close together on mobile.
Add more padding and make the menu stack vertically below 600px.Claude Code doesn't guess what you want. It executes what you describe. The skill isn't coding — it's describing your vision clearly enough that nothing gets lost in translation.
Essential Commands Every Beginner Should Know
You don't need to memorize terminal commands to use Claude Code. But knowing these five will save you a lot of confusion in the early days.
Navigate Folders — cd
Always navigate into your project folder before starting Claude Code. cd stands for "change directory."
# Go into a folder
cd my-blog
# Go back up one level
cd ..
# Go to your home folder
cd ~List Files — ls
See what files are in your current folder. Useful for confirming Claude Code actually created what you asked for.
# List files in current folder
ls
# List files with details (sizes, dates)
ls -laOne-shot Mode — Run Claude Without Entering a Session
You can give Claude Code a single instruction from the terminal without entering the interactive session. Great for quick tasks.
# Run a single instruction and exit
claude -p "Add a meta description tag to index.html for SEO"
# Another example
claude -p "Create a contact.html page that matches the style of index.html"Exit Claude Code — /exit
When you're done with a session, type /exit to leave the Claude Code environment and return to your normal terminal.
/exitGet Help — /help
Inside a Claude Code session, type /help to see all available commands. It's worth doing once just to know what's available.
/helpHow to Write Better Prompts — The Beginner Essentials
The single biggest factor in the quality of what Claude Code builds is the quality of what you ask for. Here are the principles that will get you dramatically better results from day one.
Be specific about the outcome, not just the task
Don't say "make a button." Say "add a green Subscribe button below the hero section that's 180px wide, has 12px vertical padding, and navigates to /subscribe on click." The second version leaves nothing to interpretation.
Include context about your project
Claude Code reads your files, but telling it the broader context helps. "This is a blog for a freelance photographer" is better than assuming it knows. Say what it's for and who it's for.
One change at a time for precision
Especially as a beginner, make one request per message. When you bundle five things into one prompt and three of them don't come out right, it's hard to understand why or how to fix it. Single instructions are easier to review and refine.
If something's wrong, just say so directly
Don't edit files manually to fix Claude Code's output — just tell it what's wrong and let it fix it. "The header is overlapping the hero section on mobile. Fix the z-index and add top padding to the hero" is exactly the right approach.
Module 1 Practice — Set Up a Blog on Blogger Using Claude Code
This is your hands-on assignment for Module 1. You're going to use Claude Code to build a complete Blogger-compatible HTML template — the kind you can paste directly into Blogger's theme editor and have a working blog in under an hour.
Create Your Project
mkdir my-blogger-theme
cd my-blogger-theme
claudeScaffold the Blogger Theme with Claude Code
Use this prompt inside your Claude Code session. Customize the blog name and description to match your idea:
Create a complete Blogger XML theme file called theme.xml with:
Blog details:
- Name: "My AI Journal"
- Tagline: "Practical AI guides for real people"
- Color scheme: deep teal (#0d9488) primary, white background,
dark slate text (#1e293b)
Design requirements:
- Clean, editorial layout — minimal but professional
- Sticky header with logo text, main navigation, and a dark mode toggle button
- Homepage shows a 3-column post grid with thumbnail, category badge,
title, excerpt, date, and read-more link
- Single post page with: breadcrumb, post title, author line, post body,
share buttons (Twitter, Facebook, Copy Link), and a related posts section
- Sidebar on post pages: table of contents (auto-generated from H2/H3 tags),
a newsletter signup box
- Footer with 4 columns: brand tagline, tutorial categories, resources, company links
- Fully responsive for mobile — hamburger menu below 768px
- Google Fonts: Playfair Display for headings, Inter for body text
- Reading progress bar at the top of post pages
Include all required Blogger XML tags (b:skin, b:includable, b:if, data:blog.pageType etc).
The theme must be pasteable directly into Blogger's Edit HTML editor.Upload to Blogger
Once Claude Code generates your theme.xml file:
- Go to blogger.com and create a new blog (or open an existing one)
- Go to Theme → Customise → Edit HTML (click the dropdown next to Customise)
- Select all the existing code and delete it
- Paste your new theme.xml content in its place
- Click Save — your new theme is live
Refine With Claude Code
After uploading, look at your blog on blogger.com and note anything you want to change. Go back to your Claude Code session and use targeted prompts to fix or improve things:
# Change a color
Update the primary color from teal to emerald green (#10B981)
and make sure all buttons, links, and borders update too.
# Add a feature
Add a GDPR cookie consent banner that appears at the bottom of the page
on first visit. Include Accept All, Reject, and Manage Preferences buttons.
# Fix a layout issue
The post cards on mobile are showing two columns but the text
is too small to read. Make it single column below 600px.Module 1 — What You've Learned
- What Claude Code is: A CLI tool that reads and writes your actual project files using plain English instructions
- Installation: npm install -g @anthropic-ai/claude-code → claude → authenticate
- How sessions work: Navigate into your project folder, run claude, give instructions, exit with /exit
- One-shot mode: claude -p "your instruction" for quick single tasks without a full session
- Better prompts: Specific, contextual, one change at a time
- Practice project: A complete Blogger theme generated and deployed from scratch
That's Module 1. If you've followed along, you now have Claude Code installed, you understand how it works, and you've built and deployed a real blog. The basics are solid — now it's time to get into more complex workflows.