Claude Code Tutorial for Beginners

0:00I don't write code by hand anymore. I just ask Claude. And in this video, I've partnered with Anthropic to break down three things that I wish I knew about Vibe Engineering before I started. Starting with number one, how to create apps from scratch. Head to the link in the description below and let's install Claude Code together. First up, for Mac users, from the homepage, use this copy button to copy the bash script and run it in a terminal window. But for Windows users, that script looks like this, and it's actually PowerShell. Now, I ran into problems with this script. So, I'm going to show you another approach using npm. If you don't have npm installed or

0:41you're not sure, head over to nodejs.org. Click this big green button that says get NodeJS. Scroll down and click the green button to download the installer. After you successfully install node, you should be able to open a command prompt, type in node-v and see the node version returned that you have installed. Then you use npm install to install cloud code. You can copy this exact line

1:09from the description under the resources section. Then type claude and press enter to set it up. First, choose your text style. I'm going to stick with dark mode. Then choose how you want to set up your subscription. I'm going to stick with my cloud account. Go ahead and sign in and I'll see you on the other side. Once you've connected your account, success means you see something like this. Now, Claude Code is great inside of a terminal window, but it's even better when it's integrated with your IDE. For that reason, I'm going to take you through using Cloud Code inside

1:39of Visual Studio Code. Now, two more quick things for setup and then let's jump into our first app. First, let's set up a Git repo. You can do that by opening a new terminal window by pressing control shiftbacktick. Then type get and then press enter. Next, we need a command prompt to open claude code. So click on this drop-own arrow and then click on command prompt. Then type in claude and press enter. Press one to trust this directory and off we go. Let's create a chore app to manage chores at the office. Here are the requirements. Show a calendar view like Outlook to see all our

2:15current chores. allow adding and removing chores, make chores recurring on a schedule, assigning chores to team members, and adding and removing team members. So, what do you write inside this little box to get started? If you were vibe coding, you might put in something like this. Make a chore app to manage chores at the office. It should show a calendar view like Outlook to see all our current chores. But these product requirements are really vague and it misses out on technical requirements like the tech stack or the storage solution or even the architecture as well as engineering principles like how you want the code written. So here's

2:51what I recommend instead. I'll press escape twice to clear the prompt area. I'll write a new prompt which lists the high priority requirements as bullets and then at the end tells Claude to ask me questions to clarify requirements, engineering principles, hard constraints, etc. By the way, you can type new lines in the prompt by holding Alt or Option and pressing enter. Finally, you need to go into plan mode. So, hold the shift key and press tab until you see plan mode in the bottom left. Now, when you press enter, Claude gets to work. It starts reasoning about the code to write and then figuring out what are the right questions to ask you to get to the next step of

3:26its plan. When it's in plan mode, it will never write code automatically. It will always confer with you first. By the way, I've included this prompt and all the prompts from the video under the resources section in the description. Here's the first set of questions. Your questions may differ. Let's make this a React app by pressing one. We'll keep things simple by choosing local storage. This will run on a big TV screen in the office, so no off is needed. Claude's also asking us about extra features, so let's turn on two and three. If you ever need to change your answers in this model, you can use the left and right arrow keys to switch between questions. Then press one

4:04to submit your answers. Claude will now keep going until it reaches the next set of questions or it completes your plan. Now it's asking us some more questions about product requirements. I found that when you include this ask me questions to clarify the requirements part of your prompt, you'll get a richer discussion in plan mode. So now it's got all the information that it needs. It's going to create the implementation plan for our review. I find this process is like working with a teammate or fellow senior engineer to help plan exactly what you're going to do before you execute. And a few seconds later, we get the plan. This is your opportunity to review before Claude starts writing

4:45code. Be on the lookout for design decisions Claude has made that you might disagree with. Here, for example, we never said anything about Vit or Tailwind. Scrolling down, you'll see a good summary of the data models, the project structure, implementation steps, etc. One thing that stands out to me is that this is in JavaScript, not TypeScript. So, here's how we tell Claude to make changes. When asked, would you like to proceed, select option three, and I'll type use TypeScript instead of JavaScript. I'll press enter, and Claude will reconfigure its plans. By the way, notice how I'm talking to Claude. It's like a senior engineer that I respect. Clear, firm,

5:26and specific. You don't need to be overly polite, and you don't need to be overly aggressive. Just the facts. Okay, the new plan's generated, and we see file extensions with TS and TSX. That means we're on the right path. And let's assume we're good with the rest of the plan. So, it's time to move forward. You have two options. You can auto accept all of Claude's changes or manually approve them one by one. If you're just getting started, you might want to choose option two just to be sure, but I'll tell you, you're going to get tired of it pretty quickly. So, I've suggested to auto

5:59accept edits here. Let's see what happens in just a minute. Claude's just written the entire app, which we can see here. Now, it's asking approval to run npm install. Claude's default user experience is that it always asks for approval for these sorts of tools. But if you believe a tool is safe to use, I recommend choosing option two here. After a few more approvals, Claude asked to run the dev server. I'm actually not keen on having Claude do this, so I'm going to start up a new terminal window, go to the app directory, and then start it myself. With the server up and running,

6:33let's check out the app. Okay, we've got a decent looking page here. Let's add a few team members. So, I'll start by adding myself. I'll give myself a green color. And then let's add Kevin. Give him a blue color. Now, that looks okay. So, let's try testing the add chore functionality. Let's get Kevin to bake us cookies every week. So, we'll assign that to kitchen and then assign that to Kevin. We'll make this a recurring chore. Repeat it once a week and click add. That looks good. So, let's check out the week mode. And we should be able to see bake cookies down below. Looks like we've got a little highlighting bug up here. Finally, let's try adding a chore for

7:12me just by clicking on the calendar. So, we'll say maintenance and we'll assign this to David. And oh, interesting. The time is also wrong here. Let's click add and see where it puts it, though. Yeah, it looks like it went down to 8:00 p.m. when it shouldn't have. Now, we're all tempted to go back into Claude and start prompting it to fix these bugs. But you need to follow a principle of committing early and committing often. That's because when you add more prompts, there's always a chance of introducing more regressions. So always make it easy to revert to the last known good state. By the way, I'm assuming that you're working inside of a branch when you commit. This

7:49is a great time to review the code and iterate with Claude. You can try making architecture changes or even making test cases. Great job. You just built your first app with Claude code, but that's not enough to be successful with it. That leads us to scenario number two. Using cla code with an existing app. We want to pretend that this is existing code that you're bringing Claude code to. To do that, I'll press escape here and then type slashcle. As you can see, that clears all of our conversation history and frees up context. So, it's like Claude is looking at this codebase for the first time. One mental block I had when I got started was not knowing how AI would possibly

8:27understand all of my coding standards so it could keep building on them. The answer is a file called claude md. According to this blog post on humanaylayer.dev, dev, which I'll also link in the description. Claude MD onboards Claude onto your codebase. The contents of this file get injected into every Claude session. So, it's super important that the instructions in this file are almost universally applicable to the prompts that you write. Otherwise, Claude might ignore them. So, we can break down what you put in this file into three layers. First, you tell Claude about the tech stack, the project structure, what the packages are, components, etc. Then explain the function and purpose of each component in the project. Finally, describe

9:10how you want Claude to work with the project. For example, you can instruct Claude to run test cases and verify success after every change it makes. You have two options to create that cloud MD file. You can start with the /init command, but in my experience, that doesn't create the three types of information we just reviewed. So, I prefer to use a prompt. Grab this prompt from the resources section and paste it in. As you can see, it covers some of the essentials from that blog post I just shared, the what, the why, the how, and it pulls in a couple of other principles as well. One of

9:45those principles is to use progressive disclosure. So instead of including all the instructions for everything at once, create an index that points to other markdown files. So like I have an architectural patterns file which documents architectural patterns, design decisions, etc. After a few minutes, you get a claud file. You can view a formatted version of this by pressing commandshiftv or control shiftv on windows. So now every time you start cla it's acquainted with the text stack, the project structure, what are your key files, commands to run everything, domain model, and there's a few more things here as well. Just to show this in action, we're going

10:25to make a small change to the adding new feature section. I'll change this to adding new features or fixing bugs. And then I'll add a disclaimer that it's important when you work on a new feature or bug to create a git branch first. Let's commit this change. And while I do that, you remember that bug that we looked at earlier, the one where clicking on the calendar didn't add the right time to the chore. Let's go fix this using Claude. Now, just to prove that Claude MD is working, I'm going to get out of Claude first and then restart it and ask the following prompt. Notice

10:57the prompt is nothing fancy. We say it's a bug fix. We describe the failure condition and then we let it go. Let's see what Claude does. After a few minutes, it finds the bug inside of a TSX file, but before it implements the fix, it asks to create a new branch. Let's let it proceed. After a few more permission confirmations, it creates the new branch and makes the fix. Obviously, you'll verify that fix on the app itself. We'll head back into the week mode. Then, we'll make a chore at 8 a.m. We'll call it bring donuts for the office. Put it in the kitchen category and assign

11:31it to me. Then, click add. So, this is good. The bug is fixed here. Now, it's time to check the code itself. Again, it's useful to think of Claude as another engineer on your team. You're going to review its code like everyone else's. If you don't like something, instead of making a comment, use a prompt to get Claude to fix it. That was a small bug, but how does it perform with scenario number three, a big architecture change? I've just made a few more fixes, so our grid is looking good, but now it's time to make a bigger change. Changes to chores should automatically show up on other

12:04tabs without refreshing. So, how do we get that test chore to show up on other tabs? Let's head to Claude and find out. For this change, we'll use a special mode of Claude code called YOLO. And no, I'm not kidding. It's when you run Claude with the dangerously skip permissions switch. In this mode, Claude doesn't ask for your approval to run commands. It just does them. Of course,

12:27there's risk with this, but I'm showing you because one day the speed might be worth it. You can now toggle this mode on and off by using shift and tab. Onto the architecture change. Now, Cloud Code best practices advises an explore, plan, code, and commit approach. You've already got the building blocks for this. So, first use shift and tab to switch into plan mode. Then, our prompt explains the architecture change and also tells Claude to explore these files and give us three options to move forward. This request for three options is a bit of prompt engineering because remember any prompt engineering technique you've learned with LLMs like chatgpt or claude

13:06also applies here. After a few minutes given us our options. Now there's no web server on this app right now. So I tried to trick Claude into only giving us browser sync solutions. But it saw through that and also suggested option three which would create a server and do real-time syncing across clients. I'm making this video to show you the real power of AI assisted coding. So, let's go all the way with option three. I'll give it a minute and we'll see the plan together. Here we've got Claude's plan. Just like our first plan, it gives you an overview of the changes, the project structure, files, it's changing, a phased approach to implementation, as well

13:43as key design decisions. You could continue to modify this plan by using option three, but we'll continue with option one. And because we have YOLO mode enabled, we can let this run as long as it needs to get the job done. In about 5 minutes, it created a websocket server and explained to us how it works. So the question remains, does it actually work? Here I've got two instances of the app side by side. Let's start by adding a new team member. Let's add Elizabeth and give her red. And we see that change in the other browser. Now in this browser, let's give her a chore called feed the fish. We'll assign it to her and then click add. That chore

14:23successfully shows up in the first browser. Now all that's left is for you to review the code. But don't take my word for it that it works. Try it yourself. If you enjoyed this video and want to get started with Claude Code, check out the link in the description below. Let me know what else you want to learn about Claude Code in the comments and I'll see you in the next video.