---
title: 'Claude Code Crash Course for Beginners — Build an App'
source: 'https://youtube.com/watch?v=HpnISrNvo0U'
video_id: 'HpnISrNvo0U'
date: 2026-07-31
duration_sec: 1707
---

# Claude Code Crash Course for Beginners — Build an App

> Source: [Claude Code Crash Course for Beginners — Build an App](https://youtube.com/watch?v=HpnISrNvo0U)

## Summary

This beginner-focused crash course demonstrates how to use Claude Code, an AI coding tool, to build a personal finance web application from scratch. It also covers using Claude Code on larger codebases, fixing bugs, configuring claude.md and skills.md files, and leveraging Git integration.

### Key Points

- **Claude Code as a game-changer** [00:02] — Metaphor of a crane vs hammer/nails: Claude Code lets anyone build complex applications (skyscrapers) without needing a technical background.
- **Subscription setup** [00:47] — Choose the $17 plan (Claude Code) from plans and pricing; heavy usage requires the $100 plan.
- **Using VS Code for preview** [01:42] — The Claude UI doesn't show previews for complex apps, so use VS Code with the Claude Code plugin.
- **Voice input with WhisperFlow** [03:11] — Install WhisperFlow to convert audio into text, minimizing typing during AI-first coding.
- **Brainstorming requirements** [03:23] — Ask Claude to build a simple personal finance app and brainstorm requirements before coding.
- **Creating a PRD** [04:37] — Ask Claude to write a PRD.md (product requirement document) to lock requirements, features, and database schema.
- **Iterative development** [06:52] — Build features one by one, test and verify each to avoid bugs and save tokens.
- **Switching to a database** [09:52] — The initial app stores data in browser local storage; upgrading to SQLite requires a Node.js backend.
- **Running the app** [11:26] — Run 'node server.js' to start the full-stack app; verify transactions persist in the finance.db database.
- **Speed of AI coding** [13:28] — What would take 1-2 days manually was completed in about 30 minutes with Claude Code.
- **Modes and models** [13:44] — Use plan mode, ask-before-edits, or automatic editing; switch between Opus 4.6, Sonnet, and Haiku models.
- **Working on large codebases** [15:26] — Load an existing repo, let Claude run it, and use @file to add context for bug fixing.
- **claude.md for standards** [18:44] — Create claude.md to enforce coding standards, package managers, and workflow expectations on every command.
- **Git integration** [22:14] — Run git commands like add and commit through Claude Code; reference commit IDs to replicate changes in other files.
- **skills.md for dynamic skills** [25:33] — skills.md loads task-specific instructions (e.g., PDF handling) only when needed, unlike claude.md which is always loaded.

### Conclusion

Claude Code turns natural language into production-ready code, making app development accessible to beginners and boosting productivity for experienced engineers. The key is to iterate, verify, and give the agent explicit context and standards.

## Transcript

Everyone has hammer, nails, and wood. Now, one person walks in with a crane. They're not just faster, they're playing a totally different game. While other people can build chairs, tables, and cupboard, this new person can build
cupboard, this new person can build skyscrapers. That crane is Claude Code. Claude Code has completely changed the game of how we write code and build applications. With this amazing AI tool,
anyone can code. You don't need to have a technical background. In this beginner-friendly tutorial, I'm going to first [music] build personal finance application using Claude Code. We'll walk through all the necessary steps,
[music] and then we will see how you can use it on a large code base. All right, let's get started. Let's go ahead and set things up. In Google, type Claude Code subscription and go to this plans and pricing page.
and pricing page. You have this free version of Claude.ai, which is ChatGPT-like chatbot, but if you want to write code, which is this option, it will open this particular UI. For
it will open this particular UI. For this, you need $17 plan. If your usage is heavy, you need more tokens, then you can go ahead with $100 plan. Let's start with $17 plan, and if you want to build something complex, you can always
upgrade it to max plan. Now, folks, you can write code here, but this UI doesn't show you a preview. Let's say if you're building a mobile app or any complex software, it will not show you a preview. Therefore, I like VS Code
personally. If you are a programmer, you will have VS Code installed on your will have VS Code installed on your computer. Okay, so let's create a folder here in my C code directory. I'm going to go, and I will just create a folder
called personal finance. We are going to build a personal finance app, okay? And build a personal finance app, okay? And open that folder here. So, I will open that folder here. All right, personal finance. Select that folder.
It is an empty folder, and I'm going to now install the um plugin, okay? So, let's click on this and here type in Claude Code.
So, there's a plugin uh that you can install to get Claude Code here, okay? So, just install this particular plugin. I already installed it. So, in my case, I will see this particular icon here. You might have to restart your VS Code.
But, let's click on this, and let's start Claude Code here. So, it simply ran this Claude command, and I have Claude ready to accept my commands,
okay? So, the setup is done. Other than this terminal, it also gives you this native chat, where you can type in your questions. So, I'm going to use native chat only. Let's go ahead and now install a software called WhisperFlow.
install a software called WhisperFlow. WhisperFlow is a software that lets you convert your audio into text. And when it comes to AI uh first coding, I don't
uh want to type too much, okay? So, let me I have installed it, by the way. I'm going to give my requirements. Please build a simple personal finance application. Uh before building it, give me uh
requirements. Let's brainstorm. I want to keep the application very simple. It should be web application. Uh and let's not add any complex Uh and let's not add any complex features. Very simple applications.
into text when I typed that in. Now, it will take my instructions, and it will brainstorm with me uh on what exactly I want to build.
uh you have a feature to add transactions, mark as income, expense, delete a transaction, dashboard, categories, transaction list, and so on. We're going to leave out all this. Now, folks, we
can do all of this, but it's a tutorial, and um if you have limited token in $17 subscription plan, so that is the reason I'm going ahead with simple application.
You can also create a requirement document. So, I will say, "Can you create a uh PRD document, product requirement document first?" So, product requirement
document, if you are a software engineer, you will know already. It's basically a list of your requirements, then database schema, etc. It is something that you prepare before you start writing code. What I like to do
personally is lock my requirements and my brainstorming sessions into PRD file, so that later on, if I want to go back to my original stage and start all over to my original stage and start all over again, at least my product ideas, etc.,
is locked into this particular document, okay? It will keep on asking this kind of questions, like you can just say, "Yes, yes, yes," and it will continue "Yes, yes, yes," and it will continue doing its work, okay? So, PRD.md
file has been created. You can click on this, and see, here you see the file, okay? So, it's a markdown file. Any file which is uh MD file is essentially a markdown file,
and what it is containing is see, this is the problem statement, target users. These are the features you are building. Summary dashboard, categories, and so on, okay? Now, it will also
contain database schema sometimes. So, here it is asking you some clarifying questions. If you uh build a software using a software developer, they will ask you these clarifying questions, okay? So, here it is saying balance,
show all-time total or just the current month's net. So, you here you can say,
All right, my PRD is updated. Now, I want to start building, and for this, I will ask it again using WhisperFlow. Start building. Implement features one by one. Once you build a feature, I would like to test and verify it.
Now, folks, I like to do this because once I started building a complex application, and I built a huge PRD, and I said, "Build the whole thing." It uh spent a lot of time in building it, and then it was not working. So, the
lesson I learned is it is better that you build iteratively, so that it builds something, you verify it, and make sure it is up to your expectation, then you
build the next feature. This way, you will avoid um these unintended bugs as well, and overall, you'll be wasting less tokens of your Claude subscription. Now, see, it has created this to-do list, okay? It
is working on all this, and feature one is implemented. Then, it will work on feature two, and so on. Okay? So, now, this one is ready. You can click on this. So, see, I have this index.html. It's some simple HTML file.
index.html. It's some simple HTML file. Here, I can add, let's say, expense. So, Here, I can add, let's say, expense. So, let's say I went out for lunch or let's say I went out for lunch or dinner, whatever.
Okay, today's date, food and drink. You can say, "Okay." transaction, and your transaction is saved. Okay? You can change these
saved. Okay? You can change these categories as well, shopping. will say that yes, let's build. Now, of course, you
will build step by step, but I'm going to fast-track things. So, I will say that let's uh implement all other features. In real life, uh you will build step by
step and verify it. Let me take a pause and talk about interesting trend we are and talk about interesting trend we are observing in the industry. Many software engineers nowadays are learning AI engineering skills because there is a
huge demand for building AI engineering projects across many industries. To satisfy this upskilling need, we are launching a live AI engineering cohort exclusively for software engineers with minimum 2 years' experience. This will
minimum 2 years' experience. This will be 75-day program with sessions on weekends, where we will learn how to build AI engineering projects in a most practical, industry-relevant way. When the cohort ends after 75 days, you will
be able to build AI features in your current software application or transition to full-time AI engineering role. If you want to know more, I have placed a link of our page in a video description below. Now, let's go back to
our video. Now, folks, in my folder, I saw only index.html file. So, I had this question, where are you storing your data? And it is saying it is storing it data? And it is saying it is storing it in a browser's local storage, which is
fine because we asked it to build a simple application, but I would like to save it in a local database. So now I'm saying, can you save it in a local database? How about SQLite? If you're a programmer, you can give suggestions,
SQLite, Postgres, whatever. And it is saying, okay, that is fine. Then it saying, okay, that is fine. Then it asked me if I want to build a Node.js based backend or something else. Because when you're storing data in a database,
you need backend. Okay, backend can be Node.js, FastAPI. I will go ahead with Node.js. If you're a non-technical users, don't worry, it will give you suggestions, and it will say this is recommended. So you just
have in-depth knowledge. If you have in-depth knowledge as a programmer, it can help on certain occasions. Okay, so I just say Node.js. It is working on it, and here it has built the backend. So let me just
it has built the backend. So let me just check the code. So here, okay, index.html is a frontend, server.js, and it has created all these modules and so on. See, the data will go to
finance.db. These are the rest endpoint. You can you can open finance.db to view your data. data. Um so now here is saying to run CD into
Um so now here is saying to run CD into this and just say node So what I will do at this stage is I will open view terminal,
And from this terminal, run this command, node server.js. So personal finance application is running at this particular
location. See? It is running now. So let me add some transactions. So I'm going to add some expenses.
it is showing up. Now let's let me add some income. So income, let's say some income. So income, let's say this is my salary.
You can change them later. And see, these are the transactions that I have. Now I'm going to close this application. Essentially, when you launch it in a new new one,
because now they are saved in our database. Wonderful. You just built frontend, backend, and database. You can verify your data here. Uh finance.db, see? To open this, you might need uh some extension. So um say
might need uh some extension. So um say I'm going to install this SQLite viewer. And once the extension is installed, you can double click and you can view uh database. So in in my database, I have one table, which is transactions.
have one table, which is transactions. It has all these fields, okay? And as you can see, there's a transaction ID, expense, amount, date, category, note, etc. Now you can go ahead and implement new features. Folks,
you see the power of AI first coding. If you want to write code manually, this would have taken you probably one or two days. We just did it in like 30 minutes. It's like magic. Now let's talk about the different modes that you have. Here
we have plan mode, which means Claude will explore the code and present a plan before editing. So if you're implementing a new feature, building a new app, you will have it in plan mode. Then ask before edits means it will
ask you uh before it writes a block of code, okay? I generally keep it in the third mode, which is edit automatically, so that it will not prompt you too much, basically. You don't have to babysit it.
You can also uh switch between the models. So here, when you type slash, see? You can switch different models that you You can switch different models that you have. This is most capable for complex
work, Opus 4.6. Sonnet, you have Haiku for fastest, for quick answers, and so on, okay? So let's go back to slash. And here, you can see your account and usage. You can clear conversation. You
usage. You can clear conversation. You can mention a file, okay? So here, for example, I want to when you say at, you know, if you want to make a change in any file, you can say at, and you can
specify that file, let's say articles. dot py, okay? And here, if you type any anything, it knows that this articles.py is in the context, okay?
Context is very important when it comes to AI first coding. So you should be folks, I have uh this another repository, which is kind of like a blogging platform. And I'm going to show you a bunch of
things using this repository. So imagine you are working as a software engineer in some organization, and you have this huge codebase. And now you want to use Claude Code to fix issues, to implement new features, and so on. How would you
new features, and so on. How would you do it, okay? So here, let's first uh run do it, okay? So here, let's first uh run this code to see what it is doing.
frontend, and it is asking me to run this bash command, okay? So let's run it. So let's run it. Once you have clear uh readme.md file,
Uh even if you don't have this, it will figure it out anyway. Uh but if you have readme.md, it will make things easier for this agent, okay? Just click on yes, yes, yes. And now it is saying that backend is running on
is saying that backend is running on this particular port, and here you are this particular port, and here you are starting the frontend. Okay, so at this stage, my backend is running here, frontend is
running here. So let me click on it. Okay, so here is a website where you can post your articles. So I'm just going to say publish, say publish, and publish few articles.
let's say one article is on yoga. So I want to See, there is a bug here. So now I can talk to Claude Code, and I can say, okay, can you fix that bug? So here, I'm going to open a new session
for Claude Code, okay? And I will say that articles, it gives you this particular error. So now it's going to
take that error. It will start debugging it, and it will try to fix that error.
saying it is mismatching the query parameter. If you're a programmer, you will review it. I reviewed it. It looks good, so I'm allowing all the edits. Now folks, let's go ahead and
Now folks, let's go ahead and research that article, okay? So here, Haha, see? You see how easy is it to fix issues using Claude Code? Similarly, you can ask it to implement a
feature. So folks, this is an exercise for you. Below the article, nowadays, um uh button where you can upvote, downvote. So go ahead and implement
downvote. So go ahead and implement upvote, downvote button, or some other interesting feature that you want to try it out. Now let's talk about claude.md file. Many times, organizations have their coding
standards, their own way of implementing things, some architecture patterns that they adhere to. You can specify all of that in claude.md file. So what you can that in claude.md file. So what you can do is go here and
create this file called claude.md. And claude.md is short of like read MD file for your agent. And you can specify, for example, coding standards that you want to follow, okay? So here, I'm specifying my coding standards. You can preview it
here, of course, see? So I want to have coding standards where for Python, use PEP 8, JavaScript use ES6 plus syntax, CSS, and so on. You can also give it instructions on,
let's say, package management. How in this particular project, this is how we do package management. Some projects use pip, some projects use UV. Claude is not pip, some projects use UV. Claude is not going to know magically all of that. So
in your organization, in your team, if you have a practice that you follow, then just specify it in this. You can also give some other instructions such as okay
like a rule and tone, workflow expectations, and so on. So essentially the Claude agent will read these the Claude agent will read these instructions and then it will use them
to implement features right and write code. You are essentially guiding the agent here, okay? Now let's say I have this particular file where I want to make some change, okay? In back end I have services and here in article
service I want to make some change. Now note that when I click on this file here it is adding that in your context meaning whatever change you're doing now, it will consider this file
in its main content. It can go ahead and make changes in other files also. You can also use this add, okay? You can say articles.py and here let's say I want to implement structured logging, okay? So this is a
structured logging, okay? So this is a Python file. I don't have logging here. Python file. I don't have logging here. So I will just say add structured logging and that's it. It knows that it needs to add it to
articles.py. It's not going to do it in all the files. It will just make change all the files. It will just make change in this particular file.
py file now I am seeing structured logging, you see? logger.info logger.info Now it is adding these logs at the
Now it is adding these logs at the beginning and end both. If you want to change it, you can say okay, add the logs only at the beginning. When I was working at Bloomberg and many other companies, this
is a standard practice where you add logs usually at the beginning. And also end depends on the organization needs, but I used to do it only at the beginning, okay? Now let's look at the Git integration. Here let's say these
changes look good. What you can do is now say uh commit this change. So now it is going to use Git. See Git
status, Git log. Usually you will say Git add whatever Usually you will say Git add whatever then Git commit etc. Here with AI assisted coding, you don't need to do it. You can just run Git commands via
this. See it is running this command Git add this and then it will run the add this and then it will run the uh commit command.
instruction. So I'm saying yes and now when I do So I'm saying yes and now when I do Git log, see here. So when I do Git log here, I am seeing this commit ID.
Look at this. This is so wonderful. Now you can take this commit ID, okay? Let me show you a different use case. I'm going to copy it. Now let's say you want to make similar change into some different file. I made
this change in articles.py. I want to now make similar change in search.py, okay? See I can say add structured logging, but sometimes you have specific requirement. For example, you want to
add logging only at the beginning and you want to log information in certain way. You have certain specifier. So if you have done all those changes in Git commit, now what you can do is you can start a new chat. It's recommended. You
start a new chat. It's recommended. You can say that now in let's say users.py. Okay, users I think users.py I will say in API. So okay, so users.py. Let me
Let me select the right one. Okay, users.py. Uh implement changes similar to this Git
commit ID. So now it will look at that commit and in in this file. If you're a programmer, you would know that you're working on a big code base, somebody has made some changes and 1
month down the road, you want to make similar changes in a different file. Usually what you do is go to Git, look at that commit and and you know, use your brain to transfer those changes in the new file. Now here
you can do all of that through Claude code. Okay, so now see it is looking at the commit ID. I did not say add structured logging or whatever. It will follow the pattern and it will make those changes.
There is another thing called skills.md file. So skills are folders of that Claude loads dynamically to improve performance on specific tasks. Now this term dynamically is important because
Claude.md file that we added, okay? So we added this Claude.md file, correct? This file will be loaded for every command. It's like it gets added into your context in every command. It will make your context your prompt longer.
If you have some instructions that you want Claude to load dynamically want Claude to load dynamically then you will use skills.md file, okay? then you will use skills.md file, okay? So here in in this Anthropic repository
they have skills. It's like you know, people have different skills. Someone uh knows how to talk better, someone knows how to play sports. These are skills, okay? Common sense. Similarly, let's say um
you are building a software for PDF, for example. Okay? example. Okay? And you have this PDF skill. Use this skill whenever the user wants to do anything with PDF file.
It's like you're importing that skill into your project and it will guide your AI agent. Basically let's say AI agent wants to write some code on
PDF. So now it will use let's say if you have this skills.md included in your project it skills.md included in your project it will use PyPDF. See? PyPDF.
Uh if you don't have skills.md file, then it will use common general internet knowledge and it may end up using some other module that you don't want to use organization I have 20 different teams and we have
decided our CTO of the company has decided uh organization has decided that we will use PyPDF. In that case, you can just include this file into your project. Also you can have multiple levels of Claude.md and
skills.md. See, if you have Claude.md at this level, it will use this. Sometimes you have nested structure. You can have multiple of them and it will use the Claude.md file which is very closest to the project and then it can use
uh any higher level files, okay? So that's that's the short preview of Claude.md and skills.md file. Now folks, let's say we have specific guidelines for adding logging. In that case, you have you can have a skills file for
logging, okay? It is like logging skills. And here I can specify log only at the start of it. Always include timestamp. Use logging.info only. Do not add extra logs, okay? And you can give this kind of boilerplate code. So now it
will use these instructions to add logging. And it will load skills.md file whenever it's needed dynamically. It will not load it all the time like Claude.md file. That's it, folks. If you have any questions, please post in the
comment box below. In video description, you will find the code repository etc. you will find the code repository etc. Thank you very much for watching.