Claude Code Tutorial For Beginners: Build Your First App

Claude Code is one of the best ways to use AI right now, but it's one of those tools that sounds way more technical than it actually is. Because it has the word code in it, a lot of people that I've talked to think that it's made for developers, that they need to know how to code in order to use Claude Code. But the idea behind it is actually far more simple than that. It's an app that could create different apps and websites for you, but you don't have to know how to create those with code. All you have to do is tell Claude Code what you want to build, and you do that with plain English, and Claude Code will create all the files it needs to create the actual app for you. So, in this video, I want to show you how to use Claude Code as a complete beginner to it. And what we're going to do here is we're going to create an app from scratch, and then we'll do some follow-up changes, so you could again do that with simple English, and you could ask it to make changes for you, and then I'll show you exactly how you run the app once it's complete. Now, there's lots of different ways to run Claude Code. Some are very technical, some are very straightforward. I'm going to show you the most straightforward way, the way I like to use it, and that's by using the Claude app that has Claude Code built into it. And you could download it for Mac or PC. So, it's just on the Claude website here, and then you'll just go over here to Claude Code, it'll bring you here to download it. They do also have it available on the Claude website. So, if you go to claude.ai/code, this is kind of the similar place where you could use it, and this is where the prompt or your request or question goes. And it's just on this tab. So, instead of being on the home page here where you just use regular Claude Chat, you'll just go to this code section to use it here. But I'm going to show you this right here. This is the desktop app on my computer, and again, the home is going to be the Claude Chat and co-work, but code is where we're going to actually build things with Claude. And I'll show you the pricing here just for a second because you can't use Claude Code for free. You You need at the very least this pro plan at $17 a month here. And if you use it more and more, you probably will have to eventually upgrade to this max plan. And they have two different versions of that. They have a $100 and a $200 a month version. Okay, now back to Claude Code here in the app. First, you'll see a overview window. This is going to show you your recent usage of Claude Code specifically. And then down here, this is where you're going to type out your prompt, which I'll show you. But the very first thing we want to do before we even ask it to do anything is we want to select or give it a folder. When you create a folder, it will create that project for Claude Code specifically, and everything will be saved on your computer. The way Claude Code works is it writes the different files it needs to create apps and websites and things like that on your own computer. So, we're going to press this right here. And when you do select a new folder, it will say trust a workspace because it will have to read files from there, write files to that folder. And that's the folder it's going to get access to. And then over here, you want to set it to local. It's going to create that app or that website on your computer. These other ones get more advanced for a beginner's tutorial. So, those are the two things you want to select here. And then you have this option right here. So, this is really important. You'll see different modes. There is a manual mode. So, every time it goes to make a change, it will ask for your permission. Then you have accept edits. This is a great one to use, especially if you're a beginner, because it will be able to do some things, so it won't constantly ask you for help. And then you have the plan mode. This is a great way to get started, so it won't create, but it will help you plan your idea. And then the auto mode, I actually sometimes set it to auto mode. It will just go to work entirely on its own, and it won't give you any type of pop-ups to give it any type of permission. So, mine I've actually had the bypass permission enabled. This is much more advanced, though. I don't recommend it because it will be able to do all kinds of different things on your computer. So, for beginners here, plan mode to get started so you could figure out exactly what you're going to make, and then once you have that the accept edit mode is a good option here to have checked on. Down here you also have the plus sign so you could give it different files, different photos. You could mimic things for example so you could take a screenshot of an app or a website that you want to start from and it will be able to use that as reference here. So, a lot of different useful options and they also have all these different connectors so you could actually bring things in from other type of apps that you already use for example for Gmail or Google Calendar and incorporate that into any type of thing you're building with Claude Code. Again, you could build apps, websites, but you could also create all kinds of different complex automations. And one free resource that I have with this video that I wanted to share before we make our very first app is this right here which is Claude Code and four complete workflows with Claude Code and 12 prompts to build really really useful things with Claude Code. You just have to copy and paste the prompts and I'll show you an example of one of the workflows here. So, this one is a lead magnet builder and it will show you exactly how to get the most out of it with these four prompts. So, all you have to do with this resource is expand these out here, copy and paste each of these prompts in order into Claude Code here and you'll get really useful things. And he has again other workflows that I think you'll find really really useful. I'll put a link in the description to this resource. Again, it's completely free to access. Okay, now let's build our very first app with Claude Code so you'll see how simple this is. We're going to build a household budget calculator. Okay, so the thing I want to do here is I want to make a budgeting app, right? But But I just say make me a budgeting app, you won't really know exactly what I'm looking for, right? It'll just go and try to create one. Sometimes it will ask you a question. But the best way to do it is actually using the plan mode instead of just building it from scratch. So if I type make a budgeting app and if I switch this to plan mode, it will then try to ask me a set of questions here before it just goes and builds it. The other option you have is you could open up Claude and say, "Help me create a prompt for Claude code for building a budgeting app." And it will create that prompt for you that then you could copy and paste into Claude code if you prefer to do it that way. My preferred workflow is using this plan option if I'm really not sure what I'm looking for. So this will kind of tell me the different things I should ask about here. So this one is asking me to build a simple single file app or build something more complicated. So for beginners, I usually just take the recommendation here, especially if I'm not too sure the technical things it's asking for. Now it's asking, "Well, what do you want to include here? Do you want to include categories? Do you want a transaction log?" In this case, categories is good. I'm going to go ahead and press next. And any of these with these questions, you could type your own if you don't see one that you understand or one that makes sense for you. And you could select multiple here. So for example, I could select two of the things I want here. And I'll press next. Okay, less than a minute, it created this full plan for me. And I usually recommend that you do read through this plan. Some of them may seem a little bit technical, but for the most part, it's actually telling you what it's missing and if it there is any assumption that it made. So I usually do look through it, but sometimes this does seem a little bit technical. So you could ask it over here to explain it to you in a simpler way too if you want. But for the most part, if there's nothing that really stands out where I'm like, "No, that's not at all what I explained here." I'll go and press accept. And in this case, I'm going to change it to auto mode so it could do the work for me. Now, while it's building this app, I do want to show you this option here. So, if you click this right here, it's going to show you a few different things that even as a beginner, these are worth understanding. One is called a context window. So, this is basically how much memory is going to have in this chat. The more complicated of an app or website or automation you're going to create, you may run out of this context window and you'll see a percentage over here. Well, all you have to do is if it hits 90%, just tell it I'm running out of context window, save to memory. And it will save to memory, it'll give you a new prompt, and then you could copy and paste that and start a new chat, but it'll remember everything from before. So, this is a really easy thing to get around for a lot of simpler apps though, this is never going to actually be a problem, but for more complicated apps, it will become an issue. And then, depending on your plan, so if you have a pro plan or a max plan, it's going to show you what kind of limits you have, and then if you are going to hit those limits. I have the max plan here, so I'm only at 1 and 3% here, and I've been using this besides this this one project. So, this is worth looking at from time to time just to make sure you are not hitting your limits or running out of this context window, which is ultimately the memory and how much Claude remembers from this chat here. Okay, so in this case, it did take about 30 minutes to create the first version of this, and the main reason is it actually does a lot of the testing for you. So, you'll find a lot less flaws than where Claude was a couple months ago even. So, I do like this, but it will create this preview right here in a browser, so I could just open this to show you what it's created for us. So, this is our app. It decided to also create a dark mode version of it, so I'll show you this one. And it's everything that I asked for in the planning stage. So, it did ask me questions, it created a plan, and then it implemented that plan exactly the way I wanted. And I was watching it, you could kind of watch it do the testing. It actually does it in this little browser window on its own. And it also did switch it over to mobile view, it did some testing that way. And it created a file on our computer. So, let me show you what that file looks like. In this case, it's just this one file. So, if I press space bar, it's exactly the app here, and then I could click to open it from there. I could always come back to the chat here and press play from here to see it this way as well. And this is right now sitting on my computer. And I could do some follow-up. So, the one thing I recommend is this will tell you everything it did, but usually in a technical way. So, I usually like to tell it, "Tell me exactly what you created or what you made in simple, non-technical terms." Because if you look through some of this, it will give you some technical things that may not make sense to you. That's the whole point I was making this video, so it's not technical. And then this will show you exactly what it's done, what it's for, how to use it, and you could tell it, "Hey, just tell me in three sentences." Right? So, this is just like any chat you have inside of Claude or ChatGPT. Now, next I want to show you how to do revisions here. So, if you type in a prompt so to add a savings goal, it's going to just go to work again and create an updated version of the app. If you do close this window, by the way, the preview one, you could always press this globe, this browser icon here. And I'm going to go back to the responsive mode, and I'll get this back here, and then I'll see once it's done this change, I'll show you exactly what that looks like. And after a little bit of time, it actually created what we asked for, and it fully again tested it. So, if you're used to using Claude, and you feel like this is far slower than that, it's because it's actually doing a lot of the heavy lifting for you. With Claude, you have to go and do a lot of back and forth. And one final prompt I like to usually add is, check this project for any obvious issues, and also check it for any type of layout problems. So, if it's confusing for someone else to use, let me know, and you could even set this to back to planning mode to tell you what is going to change, or you could just let it go to work here. But, this is typically my final prompt here before I'm happy with what I have. And one thing I'll point out here is this is now a local app, meaning it's sitting on your computer, and you could use it anytime. If you do want to publish these and share it with other people, that does get more complicated as of right now with Claude Code. But, Claude does have something called artifacts over here, and artifacts are far easier to share. They're nowhere as complex and as in-depth as what you could do with Claude Code, but if you want a easy way to share things like mini tools and apps, artifacts are the way to go. But, Claude Code lets you do a whole lot more. But, right now, for beginners at least, it's easy to create things that you're going to run for yourself on your own computer. But, if you want to see how artifacts are made, and some examples with those, I did cover that in a video right over here.