Claude Code Tutorial for Beginners

0:00 I don't write code by hand anymore.

0:02 I just ask Claude.

0:03 And in this video, I've partnered with Anthropic to break down three

0:07 things that I wish I knew about Vibe Engineering before I started.

0:11 Starting with number one, how to create apps from scratch.

0:14 Head to the link in the description

0:16 below and let's install Claude Code together.

0:19 First up, for Mac users, from the homepage,

0:22 use this copy button to copy the bash script and run it in a terminal window.

0:28 But for Windows users,

0:29 that script looks like this, and it's actually PowerShell.

0:32 Now, I ran into problems with this script.

0:35 So, I'm going to show you another approach using npm.

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

0:45 Click this big green button that says get NodeJS.

0:49 Scroll down and click the green button to download the installer.

0:53 After you successfully install node,

0:55 you should be able to open a command prompt,

0:58 type in node-v and see the node version returned that you have installed.

1:03 Then you use npm install to install cloud code.

1:07 You can copy this exact line from the description under the resources section.

1:11 Then type claude and press enter to set it up.

1:15 First, choose your text style.

1:16 I'm going to stick with dark mode.

1:18 Then choose how you want to set up your subscription.

1:20 I'm going to stick with my cloud account.

1:22 Go ahead and sign in and I'll see you on the other side.

1:26 Once you've connected your account, success means you see something like this.

1:29 Now, Claude Code is great inside of a terminal window,

1:32 but it's even better when it's integrated with your IDE.

1:35 For that reason, I'm going to take you

1:38 through using Cloud Code inside of Visual Studio Code.

1:41 Now, two more quick things for setup and then let's jump into our first app.

1:45 First, let's set up a Git repo.

1:47 You can do that by opening

1:49 a new terminal window by pressing control shiftbacktick.

1:51 Then type get and then press enter.

1:54 Next, we need a command prompt to open claude code.

1:58 So click on this drop-own arrow and then click on command prompt.

2:02 Then type in claude and press enter.

2:04 Press one to trust this directory and off we go.

2:07 Let's create a chore app to manage chores at the office.

2:10 Here are the requirements.

2:12 Show a calendar view like Outlook to see all our current chores.

2:16 allow adding and removing chores, make chores recurring on a schedule,

2:20 assigning chores to team members, and adding and removing team members.

2:25 So, what do you write inside this little box to get started?

2:28 If you were vibe coding, you might put in something like this.

2:32 Make a chore app to manage chores at the office.

2:34 It should show a calendar view like Outlook to see all our current chores.

2:39 But these product requirements are really vague and it

2:42 misses out on technical requirements like the tech stack

2:44 or the storage solution or even the architecture as well

2:47 as engineering principles like how you want the code written.

2:50 So here's what I recommend instead.

2:52 I'll press escape twice to clear the prompt area.

2:54 I'll write a new prompt which lists the high priority requirements as bullets

2:58 and then at the end tells Claude to ask me questions to clarify requirements,

3:03 engineering principles, hard constraints, etc.

3:05 By the way, you can type new lines

3:08 in the prompt by holding Alt or Option and pressing enter.

3:11 Finally, you need to go into plan mode.

3:13 So, hold the shift key and press tab until you see plan mode in the bottom left.

3:17 Now, when you press enter, Claude gets to work.

3:20 It starts reasoning about the code to write and then figuring out what are

3:23 the right questions to ask you to get to the next step of its plan.

3:27 When it's in plan mode, it will never write code automatically.

3:31 It will always confer with you first.

3:34 By the way, I've included this prompt and all the prompts

3:37 from the video under the resources section in the description.

3:40 Here's the first set of questions.

3:42 Your questions may differ.

3:43 Let's make this a React app by pressing one.

3:46 We'll keep things simple by choosing local storage.

3:48 This will run on a big TV screen in the office, so no off is needed.

3:53 Claude's also asking us about extra features, so let's turn on two and three.

3:57 If you ever need to change your answers in this model,

4:00 you can use the left and right arrow keys to switch between questions.

4:04 Then press one to submit your answers.

4:06 Claude will now keep going until it reaches

4:08 the next set of questions or it completes your plan.

4:11 Now it's asking us some more questions about product requirements.

4:15 I found that when you include this ask me

4:18 questions to clarify the requirements part of your prompt,

4:20 you'll get a richer discussion in plan mode.

4:23 So now it's got all the information that it needs.

4:26 It's going to create the implementation plan for our review.

4:29 I find this process is like working with a teammate or fellow senior

4:34 engineer to help plan exactly what you're going to do before you execute.

4:38 And a few seconds later, we get the plan.

4:41 This is your opportunity to review before Claude starts writing code.

4:45 Be on the lookout for design decisions

4:48 Claude has made that you might disagree with.

4:51 Here, for example, we never said anything about Vit or Tailwind.

4:54 Scrolling down, you'll see a good summary of the data models,

4:58 the project structure, implementation steps, etc.

5:01 One thing that stands out to me is that this is in JavaScript, not TypeScript.

5:06 So, here's how we tell Claude to make changes.

5:08 When asked, would you like to proceed, select option three,

5:12 and I'll type use TypeScript instead of JavaScript.

5:15 I'll press enter, and Claude will reconfigure its plans.

5:19 By the way, notice how I'm talking to Claude.

5:22 It's like a senior engineer that I respect.

5:26 Clear, firm, and specific.

5:27 You don't need to be overly polite, and you don't need to be overly aggressive.

5:32 Just the facts.

5:33 Okay, the new plan's generated, and we see file extensions with TS and TSX.

5:38 That means we're on the right path.

5:40 And let's assume we're good with the rest of the plan.

5:42 So, it's time to move forward.

5:44 You have two options.

5:45 You can auto accept all of Claude's changes or manually approve them one by one.

5:50 If you're just getting started,

5:51 you might want to choose option two just to be sure,

5:54 but I'll tell you, you're going to get tired of it pretty quickly.

5:58 So, I've suggested to auto accept edits here.

6:00 Let's see what happens in just a minute.

6:02 Claude's just written the entire app, which we can see here.

6:06 Now, it's asking approval to run npm install.

6:09 Claude's default user experience is that it always

6:11 asks for approval for these sorts of tools.

6:13 But if you believe a tool is safe to use, I recommend choosing option two here.

6:18 After a few more approvals, Claude asked to run the dev server.

6:22 I'm actually not keen on having Claude do this, so

6:25 I'm going to start up a new terminal window,

6:27 go to the app directory, and then start it myself.

6:31 With the server up and running, let's check out the app.

6:34 Okay, we've got a decent looking page here.

6:36 Let's add a few team members.

6:38 So, I'll start by adding myself.

6:40 I'll give myself a green color.

6:42 And then let's add Kevin.

6:43 Give him a blue color.

6:45 Now, that looks okay.

6:46 So, let's try testing the add chore functionality.

6:49 Let's get Kevin to bake us cookies every week.

6:52 So, we'll assign that to kitchen and then assign that to Kevin.

6:56 We'll make this a recurring chore.

6:58 Repeat it once a week and click add.

7:01 That looks good.

7:02 So, let's check out the week mode.

7:04 And we should be able to see bake cookies down below.

7:07 Looks like we've got a little highlighting bug up here.

7:10 Finally, let's try adding a chore for me just by clicking on the calendar.

7:14 So, we'll say maintenance and we'll assign this to David.

7:18 And oh, interesting.

7:19 The time is also wrong here.

7:21 Let's click add and see where it puts it, though.

7:24 Yeah, it looks like it went down to 8:00 p.m.

7:27 when it shouldn't have.

7:28 Now, we're all tempted to go back into Claude

7:30 and start prompting it to fix these bugs.

7:32 But you need to follow a principle of committing early and committing often.

7:36 That's because when you add more prompts,

7:39 there's always a chance of introducing more regressions.

7:41 So always make it easy to revert to the last known good state.

7:45 By the way, I'm assuming that you're working inside of a branch when you commit.

7:49 This is a great time to review the code and iterate with Claude.

7:52 You can try making architecture changes or even making test cases.

7:55 Great job.

7:56 You just built your first app with Claude code,

7:59 but that's not enough to be successful with it.

8:02 That leads us to scenario number two.

8:04 Using cla code with an existing app.

8:06 We want to pretend that this is

8:08 existing code that you're bringing Claude code to.

8:10 To do that, I'll press escape here and then type slashcle.

8:14 As you can see, that clears all

8:16 of our conversation history and frees up context.

8:18 So, it's like Claude is looking at this codebase for the first time.

8:22 One mental block I had when I got started was not knowing how AI

8:27 would possibly understand all of my coding

8:29 standards so it could keep building on them.

8:32 The answer is a file called claude md.

8:35 According to this blog post on humanaylayer.dev,

8:38 dev, which I'll also link in the description.

8:40 Claude MD onboards Claude onto your codebase.

8:43 The contents of this file get injected into every Claude session.

8:46 So, it's super important that the instructions in this file

8:50 are almost universally applicable to the prompts that you write.

8:53 Otherwise, Claude might ignore them.

8:55 So, we can break down what you put in this file into three layers.

8:59 First, you tell Claude about the tech stack,

9:01 the project structure, what the packages are, components, etc.

9:04 Then explain the function and purpose of each component in the project.

9:09 Finally, describe how you want Claude to work with the project.

9:12 For example, you can instruct Claude to run test

9:15 cases and verify success after every change it makes.

9:18 You have two options to create that cloud MD file.

9:22 You can start with the /init command, but in my experience,

9:25 that doesn't create the three types of information we just reviewed.

9:29 So, I prefer to use a prompt.

9:32 Grab this prompt from the resources section and paste it in.

9:35 As you can see, it covers some

9:37 of the essentials from that blog post I just shared, the what, the why, the how,

9:41 and it pulls in a couple of other principles as well.

9:45 One of those principles is to use progressive disclosure.

9:48 So instead of including all the instructions for everything at once,

9:52 create an index that points to other markdown files.

9:55 So like I have an architectural

9:58 patterns file which documents architectural patterns, design decisions, etc.

10:03 After a few minutes, you get a claud file.

10:05 You can view a formatted version

10:07 of this by pressing commandshiftv or control shiftv on windows.

10:10 So now every time you start cla it's acquainted with the text stack,

10:15 the project structure, what are your key files, commands to run everything,

10:20 domain model, and there's a few more things here as well.

10:23 Just to show this in action,

10:24 we're going to make a small change to the adding new feature section.

10:28 I'll change this to adding new features or fixing bugs.

10:31 And then I'll add a disclaimer that it's important when you work

10:34 on a new feature or bug to create a git branch first.

10:38 Let's commit this change.

10:39 And while I do that, you remember that bug that we looked at earlier,

10:43 the one where clicking on the calendar didn't add the right time to the chore.

10:47 Let's go fix this using Claude.

10:49 Now, just to prove that Claude MD is working,

10:52 I'm going to get out of Claude first

10:54 and then restart it and ask the following prompt.

10:57 Notice the prompt is nothing fancy.

10:59 We say it's a bug fix.

11:00 We describe the failure condition and then we let it go.

11:03 Let's see what Claude does.

11:05 After a few minutes, it finds the bug inside of a TSX file,

11:09 but before it implements the fix, it asks to create a new branch.

11:13 Let's let it proceed.

11:14 After a few more permission confirmations,

11:16 it creates the new branch and makes the fix.

11:19 Obviously, you'll verify that fix on the app itself.

11:22 We'll head back into the week mode.

11:24 Then, we'll make a chore at 8 a.m.

11:26 We'll call it bring donuts for the office.

11:29 Put it in the kitchen category and assign it to me.

11:32 Then, click add.

11:33 So, this is good.

11:33 The bug is fixed here.

11:35 Now, it's time to check the code itself.

11:37 Again, it's useful to think of Claude as another engineer on your team.

11:40 You're going to review its code like everyone else's.

11:43 If you don't like something, instead of making a comment,

11:46 use a prompt to get Claude to fix it.

11:49 That was a small bug,

11:50 but how does it perform with scenario number three, a big architecture change?

11:54 I've just made a few more fixes, so our grid is looking good,

11:58 but now it's time to make a bigger change.

12:01 Changes to chores should automatically show up on other tabs without refreshing.

12:05 So, how do we get that test chore to show up on other tabs?

12:10 Let's head to Claude and find out.

12:12 For this change, we'll use a special mode of Claude code called YOLO.

12:16 And no, I'm not kidding.

12:18 It's when you run Claude with the dangerously skip permissions switch.

12:22 In this mode, Claude doesn't ask for your approval to run commands.

12:25 It just does them.

12:26 Of course, there's risk with this, but I'm showing

12:29 you because one day the speed might be worth it.

12:31 You can now toggle this mode on and off by using shift and tab.

12:35 Onto the architecture change.

12:36 Now, Cloud Code best practices advises an explore,

12:40 plan, code, and commit approach.

12:42 You've already got the building blocks for this.

12:45 So, first use shift and tab to switch into plan mode.

12:48 Then, our prompt explains the architecture change and also tells Claude

12:53 to explore these files and give us three options to move forward.

12:57 This request for three options is

12:59 a bit of prompt engineering because remember any

13:01 prompt engineering technique you've learned with LLMs

13:04 like chatgpt or claude also applies here.

13:07 After a few minutes given us our options.

13:09 Now there's no web server on this app right now.

13:13 So I tried to trick Claude into only giving us browser sync solutions.

13:16 But it saw through that and also suggested option three

13:19 which would create a server and do real-time syncing across clients.

13:23 I'm making this video to show you the real power of AI assisted coding.

13:27 So, let's go all the way with option three.

13:29 I'll give it a minute and we'll see the plan together.

13:32 Here we've got Claude's plan.

13:34 Just like our first plan,

13:35 it gives you an overview of the changes, the project structure,

13:39 files, it's changing, a phased approach to implementation,

13:42 as well as key design decisions.

13:44 You could continue to modify this plan by using option three,

13:48 but we'll continue with option one.

13:50 And because we have YOLO mode enabled,

13:52 we can let this run as long as it needs to get the job done.

13:56 In about 5 minutes, it created a websocket

13:58 server and explained to us how it works.

14:01 So the question remains, does it actually work?

14:04 Here I've got two instances of the app side by side.

14:07 Let's start by adding a new team member.

14:10 Let's add Elizabeth and give her red.

14:12 And we see that change in the other browser.

14:16 Now in this browser, let's give her a chore called feed the fish.

14:20 We'll assign it to her and then click add.

14:22 That chore successfully shows up in the first browser.

14:25 Now all that's left is for you to review the code.

14:28 But don't take my word for it that it works.

14:31 Try it yourself.

14:31 If you enjoyed this video and want to get started with Claude Code,

14:35 check out the link in the description below.

14:37 Let me know what else you want to learn about Claude

14:40 Code in the comments and I'll see you in the next video.