Notes: Your First Real Project

In This Section, You Will Master:

• Building a real project from a single structured prompt, then shaping it feature by feature through conversation
• The three conversation patterns, and reading a task well enough to know which one it calls for
• Judging Claude's output well enough to accept, reject or redirect it with confidence
• Debugging by describing what you see, with no stack traces and no breakpoints
• Taking the whole thing live at a real web address you can send to anyone

How to Use These Notes:

These notes are designed as quick-reference companions to your video learning.

• Use them to review key concepts after watching lectures
• Reference them when you need a quick reminder of frameworks and tools
• 🎯 Core Concepts = Essential terms and frameworks
• 🚀 Actionable Items = Practical implementation steps

The Growth Payoff:

You start this section with an empty folder and finish it with a portfolio site anyone in the world can open. More than the site, you finish with the habit underneath it: describing what you want, judging what comes back, and redirecting when it drifts. That habit transfers to every project you touch from here.

---

Lecture: Where this section takes you (Your First Live Site)

What today builds, and what it deliberately does not build.

🎯 Core Concepts:

• By the end of the day the site keeps working with your laptop shut and in a bag
• What you do not build today matters as much as what you do. A database is an organised store a program writes to and reads back. User authentication is the knowing-who-you-are. Payment processing is where a company in the middle handles the card
• A project with both the page you see and a second program behind it is what people call full-stack. Each of those three pieces is big enough to be somebody's whole job
• What Claude writes for you is yours. Anthropic's terms hand you whatever rights they hold in it, so you can publish it, change it, or sell it

---

Lecture: What makes a good first project with Claude Code? (Project Selection)

The wrong first project makes this tool feel harder than it is, so the choice is worth getting right.

🎯 Core Concepts:

• Too simple, like a single file with a heading, and you get something any chatbot could have handed you
• Too ambitious, like a full-stack app with authentication and payments, and you spend the time fixing configuration errors instead of learning
• A good first project has four qualities: clear scope you can describe in two sentences, visual output you can watch take shape, multiple files, and real utility
• When the project matters to you, you start noticing things. You catch the typo, you see the spacing is off, and you push back when a line sounds generic
• Vocabulary for the build: a hero section is the big intro area at the top, a framework is a pre-built starter kit, boilerplate is the standard starter code, semantic HTML uses tags that describe what each part is, and mobile-first CSS designs for the phone screen before scaling up

---

Lecture: How do I write my very first Claude Code prompt? (Project Kickoff)

One structured prompt turns an empty folder into a complete project, and the structure is what makes it predictable.

🎯 Core Concepts:

• The tempting move is to type build me a portfolio website. Output from a vague prompt is unpredictable
• Be specific about four things: the tech, the structure, the features, and the constraints
• Claude loaded a front-end design skill on its own before writing anything, then committed to a typeface pairing and a colour palette
• The quality of Claude's decisions ties directly to the quality of your instructions. Naming mobile-first CSS and semantic HTML meant those constraints were folded into every file it created
• This is why it is called an agent rather than a chatbot. It reads your intent, plans an approach, and runs the whole thing across your file system

🚀 Actionable Items:

• Screenshot the file tree and the rendered page side by side. That is the minute-zero version of your project, and everything you build sits on top of it

---

Lecture: How does Claude Code read, write, and edit my files safely? (Permission System)

Claude can read every file in your project and rewrite any of them, and nothing changes without your yes.

🎯 Core Concepts:

• Reading happens without asking. Claude needs to see your code, folder structure and naming patterns, the same way a new teammate looks around before touching anything
• Writing a new file or replacing one triggers a permission prompt. Editing part of an existing file triggers a separate one, and the two are independent
• The prompt is a short numbered menu. Option one is yes just this once, option two is yes and stop asking for the rest of the session, option three is no with a chance to redirect. Typing y or n does nothing
• File approvals last only for the current session. Command approvals can be saved permanently for that project directory, which makes sense because git commands are safe and frequent
• Any outside tool Claude uses goes through the same gate
• The real risk is not permissions, it is irreversibility. That menu is the last point where you can stop something you did not mean to start

---

Lecture: What is the 5-stage loop behind every Claude Code session? (The Loop)

Everything in this course is about making one loop faster, cheaper and more reliable.

🎯 Core Concepts:

• Prompt, Plan, Execute, Review, Iterate. You handle three of the five
• Single clear request fits a feature where there is only one right way to build it. One prompt, one pass, quick review, accept
• Iterative refinement fits subjective work where the first attempt gets the mechanism right and misses on the judgment call
• Plan-first uses Plan Mode, reached with Shift and Tab. Claude thinks through the approach and shows it to you before writing any code
• A tighter first prompt reaches the result in fewer rounds, and fewer rounds is a smaller bill. Prompt quality is a budget question as well as a quality one
• Part of the skill is knowing when a result is good enough, and when one more round is polishing something nobody will notice

---

Lecture: How can I write better Claude Code prompts in 10 seconds? (Prompt Shortcut)

Use one AI to write the prompt for the other, and hand the hard part of prompting to a tool that never forgets the details.

🎯 Core Concepts:

• Describe what you want in plain English to a chat AI, take the detailed prompt it writes, and paste that into Claude Code
• The generated prompt carries things you know in theory but would not have remembered: specific durations, responsive breakpoints, accessibility labels, and respecting a viewer's motion preferences
• The tool does not matter. Any chat-based AI works, and the output will look slightly different across them. Specificity is what matters, not the exact shape
• The one weak spot: a prompt written by another AI cannot see what is already on your page, so it can quietly specify away things you meant to keep
• Claude reading your real files before it builds is what catches that. You are running two delegations in a row, and staying at the level of intent

---

Lecture: When should I accept, reject, or redirect Claude's output? (Quality Judgment)

The judgment that separates someone who generates code from someone who builds software.

🎯 Core Concepts:

• Ask three questions every time: does it work, can you read and understand it, and is the complexity proportional to what you asked for
• If all three are yes, accept and move on. Accepting good-enough work is one of the harder professional skills to build
• Reject means stopping the work midway and sending Claude in a different direction. Redirect means letting it finish, then keeping what makes sense and cutting what does not
• The Escape key interrupts Claude mid-task, and if nothing was added there is nothing to undo
• Claude often shows restraint on its own, and will push back before adding a dependency your existing tools already cover
• The skill underneath all three is proportionality, calibrated to the project in front of you

---

Lecture: How do I add features to my project through conversation? (Three Patterns)

Three features, three different kinds of problem, and three different ways of asking.

🎯 Core Concepts:

• A simple thing needs one clear ask. A messy thing wants small steps. A detailed thing takes one loaded prompt
• Asking what Claude thinks, instead of ordering it to build, changes what comes back. A command gets you the thing you asked for, a question gets you the thing you actually needed
• Claude refused to build a filter that would have been useless against the real data, and said so before building rather than after
• Moving one verified step at a time means every turn leaves you with something that works, and you always know which step introduced a problem
• Stop typing short commands and start talking to it the way you would talk to a colleague. Say what the problem is, what you want to achieve, and what the constraints are. That is context engineering

---

Lecture: What can Claude tell you about design, and what can't it? (Rules vs Taste)

Claude knows the documented design rules. Whether the result feels right is the part that stays yours.

🎯 Core Concepts:

• Claude knows typography hierarchy, spacing systems, contrast ratios, letter-spacing and grouping by proximity, because these are well documented patterns
• Ask it which of those rules your project is breaking and you get a genuinely useful list, grounded in your real values rather than generic advice
• You need no design vocabulary. Describe what your own eye catches, and Claude turns it into structure
• The right fix is often a single source of truth rather than new numbers, so a section added next year inherits it automatically
• A good review is not a to-do list you accept whole. Pick the ones that actually bother you
• What Claude cannot answer is whether the warmth of a colour matches the personality you want. Those answers are what make it yours

---

Lecture: How do I debug bugs by describing them in plain English? (No Jargon Needed)

No stack traces, no breakpoints. You describe the problem the way you would to a friend.

🎯 Core Concepts:

• Tell Claude what should be happening, tell it what is actually happening, and let it find the gap between them
• Some bugs are quiet, with no error anywhere and a page that looks completely healthy. Those are the ones that take longest to chase by hand
• Some are loud, where one small typo takes down every feature wired up after it, and the pattern of what still works points straight at the cause
• Paste console errors inside brackets so they read as one block, then add your plain-English description. Separating signal from noise is work Claude does better than you
• This works because Claude holds the whole project in context, cross-referencing files in seconds. That is the thing humans are slow at

---

Lecture: How do I deploy my first project to a live URL? (GitHub + Vercel Deploy)

From your laptop to an address anyone in the world can open, without leaving the conversation.

🎯 Core Concepts:

• Two free accounts, GitHub and Vercel. Neither asks for a credit card
• Git lives on your machine and keeps the save-history. GitHub is a website holding a copy so it can be shared, backed up and deployed. A commit saves locally, a push shares
• Claude drives the command line tools for you, and correctly hands back the steps only you can do, like a browser login that confirms a human
• Claude checked the live address itself after deploying and caught a protection setting that would have shown every visitor a login wall
• Expect ten to fifteen minutes the first time including signups and authorisation. Every deploy after that takes seconds

🚀 Actionable Items:

• Pin the live URL somewhere you will see it. It is proof you can ship a real project, not only follow along while someone else does

---

Lecture: What of yours just went public? (Your Email and Claude's Name)

Two things went online with your site, and both are a quick fix today and an awkward one later.

🎯 Core Concepts:

• Every time your work got saved it was saved with your email address attached, because that is how the saving records who made the change. Pushing put it on the internet
• GitHub has a switch for keeping your address private, which hands out a stand-in instead, and a second switch that blocks any push that would expose the real one
• None of that touches your contribution history. Everything still counts as yours
• Claude signs its own name on each save, and GitHub reads that and shows it in the contributors list
• Hiding it is not what protects you. Being able to open the project and explain why it is built the way it is, that is what protects you

🚀 Actionable Items:

• The signature comes from a setting inside Claude Code, not from GitHub. Ask Claude to change it, and to commit and push while it is there

---

Lecture: How do I make this portfolio reflect my own work? (Exercise)

The difference between a site that looks like a tutorial and one that looks like yours.

🎯 Core Concepts:

• Drop your images into the folder and let Claude work out where each one belongs. It opens each image and looks at it, so it is reading the picture rather than the filename
• Where no image matches a card, it leaves the placeholder alone and tells you, rather than forcing a wrong one on
• Pick two of five challenges: a footer with social links and an availability badge, a testimonials section, a skills visualisation, a full colour scheme change, or a resume download
• Use whichever pattern fits. One clear sentence for something simple, small steps for something messy, one loaded prompt when you already know exactly what you want
• Everything lives only on your machine until you commit and push

---

Lecture: How do I fix the 5 issues every Claude Code project hits? (Troubleshooting)

The five that show up on most first projects, and why knowing them in advance turns an hour into thirty seconds.

🎯 Core Concepts:

• Files in the wrong place. A clean folder structure is a signal every future prompt benefits from. When the project is organised, Claude files new things where they belong
• Works locally, breaks live. Usually filename capitalisation, because your computer treats Hero.png and hero.png as the same file and the server does not. Or a change you saved and never pushed
• CSS changes not showing. Browser cache. Hard refresh with Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows and Linux
• Git never set up. Make it part of your first prompt on every new project
• Deployment build error. A plain site needs no build step, and the host went looking for instructions that were never there
• Most problems trace to one of two causes: a prompt that was not specific about paths or configuration, or a setup step skipped early

🚀 Actionable Items:

• Three habits prevent most of them: name specific file paths in your prompts, initialise git at the start of every project, and be explicit about deployment configuration up front

---

Lecture: What you can do now that you could not this morning (Agentic Coding)

Every feature got there the same way, and somebody had to make each of those calls.

🎯 Core Concepts:

• You said what you wanted, Claude built it, and you decided whether it stayed. When it did not, you said which part was wrong
• That way of working is called agentic coding, and people call it orchestration too. Same thing, two names
• This morning, if a page had broken, you would have gone looking for somebody to ask. Tonight you would open the project and describe what you saw
• You never have to know what is broken before you ask. Tell Claude what should be happening, tell it what is actually happening, and let it find the gap
• That works tonight, it works in three years, and it works on somebody else's project in a language you have never used

🚀 Actionable Items:

• What you have not done yet is decide in advance which prompts you never want to see again, and write that down somewhere Claude will read it

This resource is part of

Claude Code: From Beginner to Pro Agentic AI Engineer

by Arun Nagarathanam

Take your skills to the next level with

AI GEO 2026: Get Recommended by ChatGPT, Google, Perplexity

by Arun Nagarathanam