Already comfortable with Git and the terminal? Skip to Step 1 →
Large Language Models aren’t just code generators—they’re context-dependent learners. The question isn’t “Can AI write code?” It’s “Can you teach it to write the right code, consistently, across an entire project?” This guide documents the framework used to do exactly that: build an 11-page portfolio from scratch, then retrofit it with a pedagogical system so anyone can replicate the process.
Before we write a single line of code, let’s meet the three tools that make this entire workflow possible. If you’ve never opened a terminal or pushed code to GitHub, this section is for you. If you have, skim the analogies—they’ll reframe these tools in a way that makes the rest of the guide click.
The Digital Time Machine (GitHub)
GitHub is your project’s Time Machine. It’s a cloud-based home for your code where you save “checkpoints” called commits. Every time you reach a milestone—a page looks right, a feature works, the colors finally match—you save a checkpoint. If anything breaks later, you don’t panic. You just teleport back to a version that worked.
Think of it like the “undo” button in a word processor, except it remembers every version you’ve ever saved, with a note about what changed and why.
The Engine Room (The Terminal)
The Terminal is where you talk directly to your computer using text commands instead of clicking icons. It might look intimidating at first—a blinking cursor on a dark screen—but it’s simply a conversation. You type a command, the computer responds.
Every action you take in this guide—creating files, saving checkpoints, talking to your AI agent—happens here.
~ $ whoami
ashima
~ $ _whoami — the simplest command. You ask the computer who you are, and it tells you.
The Collaborative Partner (Claude Code)
Claude Code is an AI agent that lives inside your terminal. It’s not a chatbot in a browser window—it sits right next to your project files, can read them, edit them, and run commands on your behalf. Think of it as a collaborative partner: you describe what you want to build, and it translates your ideas into code.
But here’s the key insight: like any collaborator, it works best when you give it clear instructions. That’s where your skills as a communicator, a teacher, or a project manager become your biggest advantage—not your ability to memorize syntax.
HTML
11 pages, zero frameworks
Tailwind CSS
Loaded from a CDN link
Vanilla JS
One file: main.js
GitHub Pages
Free hosting, custom domain
Change Directory
Move between folders. It’s how you navigate to your project.
$ cd ashima-portfolioList
See what’s inside your current folder. Your “look around” command.
$ ls
index.html css/ js/ projects/Summon Your Agent
Start a conversation with Claude Code inside your project.
$ claude
> "Help me build a project page for my portfolio"The Onboarding Checklist
Already have a GitHub account and the CLI set up? Skip to Create Your Project →
Before you can use any of these tools together, there are two one-time setup steps. Onboarding matters. A student who feels lost in the first five minutes of a course rarely recovers. So let’s make sure your first five minutes are smooth.
Create Your Home (GitHub Account)
Go to github.com and sign up for a free account. This is your project’s permanent home—the cloud address where your code lives, your checkpoints are stored, and (later) your website will be published from.
Create your account
Username
ashima441
you@email.com
The Handshake (Connecting Claude to GitHub)
Claude Code needs permission to “talk” to GitHub on your behalf—to push your code, save checkpoints, and publish your site. This is a one-time handshake.
~ $ gh auth login
? What account do you want to log into?
GitHub.com
? What is your preferred protocol for Git operations?
HTTPS
? Authenticate Git with your GitHub credentials?
Yes
? How would you like to authenticate GitHub CLI?
Login with a web browser
! First copy your one-time code: A1B2-C3D4
Press Enter to open github.com in your browser...
✓ Authentication complete.
✓ Logged in as ashima441You only need to do this once. After the handshake, every git push automatically goes to your GitHub account.
Create Your Project
Already have a project folder with an index.html? Skip to Step 1 →
Now that your tools are connected, let’s create the folder where your site will live. Open your terminal and run these four commands, one at a time.
~ $ mkdir my-portfolio # Create a new folder
~ $ cd my-portfolio # Enter it
~/my-portfolio $ touch index.html # Create your first webpage
~/my-portfolio $ touch CLAUDE.md # Create your syllabusThat’s it. You now have a project folder with two empty files: index.html (your website) and CLAUDE.md (your syllabus for the AI agent).
Put It on GitHub
Now let’s give your project a home in the cloud. Go to github.com/new in your browser. You’ll see a form like this:
Create a new repository
General
Owner
Repository name *
✓ my-portfolio is available.
Description (optional)
Configuration
Choose Public so your site can be hosted for free. Leave everything else off—we already have our files. Click Create repository.
Now connect your local project to GitHub and push your files up:
~/my-portfolio $ git init
Initialized empty Git repository
~/my-portfolio $ git add index.html CLAUDE.md
~/my-portfolio $ git commit -m "Initial commit"
[main (root-commit) 1f14eb3] Initial commit
2 files changed, 2 insertions(+)
~/my-portfolio $ git remote add origin https://github.com/your-username/my-portfolio.git
~/my-portfolio $ git push -u origin main
To https://github.com/your-username/my-portfolio.git
* [new branch] main -> mainYour project is now saved in the cloud. Every future git push will update it. You’ve just created your first checkpoint in the Time Machine.
Select your work. Tells Git which files you want to include in your next checkpoint. Like highlighting the pages of an essay you’re ready to submit.
Save a checkpoint. Takes a snapshot of your selected files and labels it with a message describing what changed. This saves it locally—on your computer only.
Upload to the cloud. Sends your local checkpoints to GitHub so they’re backed up, shareable, and (once Pages is enabled) live on the web.
Check your work. Shows which files have changed and whether they’ve been added or committed yet. Your “where am I?” command.
If Git feels like too much right now, here’s a secret: Claude can do it for you. Just ask in plain English:
$ claude
> "Commit my changes and push them to GitHub"
Claude will run git add, git commit, and git push for you—and explain what it’s doing along the way. You’ll learn Git by watching, not by memorizing. Over time, you’ll start typing the commands yourself because you’ve seen them enough times.
Human-to-Human: In education, we know that students learn best in low-stakes environments—spaces where mistakes are expected, not penalized. These three tools create exactly that. The Time Machine (Git) means you can always roll back. The Partner (Claude Code) means you never have to solve a problem alone. Together, they transform the learning experience from a high-stakes test into an iterative experiment where there are no “wrong” moves, only lessons.
Pro-Tip: If you feel stuck or overwhelmed, remember: git log shows you every checkpoint you’ve saved, and git checkout can take you back to any one of them. You literally cannot break anything permanently.