Claude Code Tutorial for Beginners

I 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

npm. If you don't have npm installed or you're not sure, head over to nodejs.org.

nodejs.org.

Click this big green button that says get NodeJS. Scroll down and click the

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 from the description under the resources section.

Then type claude and press enter to set it up. First, choose your text style.

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

subscription. I'm going to stick with my cloud account. Go ahead and sign in and

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 of 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

shiftbacktick. Then type get and then press enter. Next, we need a command

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

command prompt. Then type in claude and press enter. Press one to trust this

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

office. Here are the requirements. Show

a calendar view like Outlook to see all our current 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

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 what I recommend

written. So here's what I recommend instead. I'll press escape twice to

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

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 its plan. When it's in plan mode, it will never write code

automatically. It will always confer

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 to 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

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

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

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

plan. This is your opportunity to review before Claude starts writing code. 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

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

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, and 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.

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

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 accept 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

of tools. But if you believe a tool is safe to use, I recommend choosing option two here. After a few more approvals

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, let'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

adding myself. I'll give myself a green color. And then let's add Kevin. Give

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

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

Kevin. We'll make this a recurring chore. Repeat it once a week and click

chore. Repeat it once a week and click add. That looks good. So, let's check

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

up here. Finally, let's try adding a chore for me just by clicking on the calendar. So, we'll say maintenance and

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

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

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

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 is a great time to review the code and iterate with Claude. You can try making architecture

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

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

first time. One mental block I had when I got started was not knowing how AI would possibly understand 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

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

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 how 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

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

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 those

principles is to use progressive disclosure. So instead of including all

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

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

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 to make a small change to the adding new feature section. I'll change this to adding new

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

the chore. Let's go fix this using Claude. Now, just to prove that Claude

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 the 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

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

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

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

the office. Put it in the kitchen category and assign it to me. Then

click add. So, this is good. The bug is fixed here. Now, it's time to check the

fixed here. Now, it's time to check the code itself. Again, it's useful to think

code itself. Again, it's useful to think of Claude as another engineer on your team. You're going to review its code

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

change. Changes to chores should automatically show up on other tabs without refreshing. So, how do we get

without refreshing. So, how do we get that test chore to show up on other tabs? Let's head to Claude and find out.

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

permissions switch. In this mode, Claude doesn't ask for your approval to run commands. It just does them. Of course

commands. It just does them. Of course

there's risk with this, but I'm showing you because one day the speed might be worth it. You can now toggle this mode

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

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

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 also applies here.

After a few minutes given us our options. Now there's no web server on

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

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

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

coding. So, let's go all the way with option three. I'll give it a minute and

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 as key design

decisions. You could continue to modify

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

by side. Let's start by adding a new team member. Let's add Elizabeth and

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

fish. We'll assign it to her and then click add. That chore successfully shows

click add. That chore successfully 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

description below. Let me know what else you want to learn about cloud code in the comments and I'll see you in the next