Claude Code Tutorial #1 - Introduction & Setup

All right then gang. In this course,

we're going to be diving into claude

code which is an AI powered agentic

coding tool created by Enthropic which

you can use to analyze, plan, write and

edit code within your projects. Similar

to other agentic coding tools like

copilot or cursor or windsurf. But

whereas those other tools typically come

with a user interface embedded within

code editors themselves, claude code

lives directly in the terminal and we

interact with it through the terminal.

And that means it can integrate with

your existing development workflow a

little more seamlessly without forcing

you to switch your IDE. On top of that,

you can use cloud code within GitHub

workflows to automate code reviews on

pull requests to provide feedback as

well as have it work independently on

open issues in your repository. I also

think it sets itself apart in its

ability to really understand the

codebase of whatever project I use it

on. And in my own personal experience, I

found the code it generates to be more

tailored and appropriate on a project by

project basis. So, in this series, we'll

be diving into how to set up Claude Code

on your computer, how to provide it

context and learn about your codebase,

have it generate code for us in a

targeted and specific way, and we'll

also set it to work on our GitHub repo

to work autonomously on simple issues

and books. On top of that, we'll be

looking at MCP servers to provide

additional tools to Claude code, custom

commands for common tasks, and we'll

even try spinning up a sub agent to work

alongside Claude. And just to clarify,

this will not be a VI coding course

where we just let the AI loose to code

everything for us. In my opinion, that's

not a productive workflow, and it can

lead to more bugs, sloppy code, and

technical debt, making the code much

harder to maintain in the future. So,

we'll be taking a more hands-on

approach, coding alongside Claude on

tasks and features, which are more

narrow and focused in scope, and also

checking the work it does as we go. And

I feel this approach generally keeps the

code cleaner, less buggy, and I stay

fully in the loop and in control,

dipping into the code to make manual

changes where I need or want to. Anyway,

before we do anything, we'll need to

install Cloud Code and sign up for a

plan.

[Music]

Okay, then. So, I'm on the Cloud Code

homepage, and if you scroll down a

little bit, you're eventually going to

see an npm command we can run to install

it on our computer. Now, it used to be

that on Windows you would have to

install it via WSL, but now you don't

have to, and you can just run this

command directly in your Windows

terminal, so copy that for later. You'll

also need to sign up for an account and

choose a pricing plan, which you can do

right here on the pricing page. So, you

can use Claude Code with a pro plan or a

max plan. The free plan gives you access

to the Claude models on the web and the

desktop app, but not Claude Code itself,

at least not at the time of recording

this video. The pro plan is $17 a month

and for that you get some fairly decent

usage limits which reset I think every 5

hours and you do also get a warning when

you're nearly reaching your limit. You

also get access to more models like

Sonic 4 and Opus 4.1 but the Opus model

does eat through your limits much

faster. So I default to Sonic for most

things. The Max plan is way more

expensive but it gives you more usage

and access to all the latest features as

they ship. So sign up, choose a plan and

then crack open your terminal. All right

then. So inside a terminal now we want

to run that command we just copied npm

install g to install this globally

atanthropicai/claude

code. So press enter to install this.

Okay. And then the next thing you want

to do once you've installed that is

navigate to a project that you want to

work with claude on. So I've already

navigated to this one called shinobi.

This is what we're going to be using for

this course. And then you can type

claude and press enter. And this starts

up a claude session inside this project

for you. Now, when you first start using

Claude, the first time you use it, it's

going to ask you a few questions. It's

going to ask you for a mode. So, I'm

going to go for dark mode. And then it's

going to say you can log in using the

console account, which is API usage, or

with a subscription. Now, I showed you

those plans a moment ago, and I've

already got a pro subscription. So, I'm

going to sign up with this sign in

rather, and that's going to open a

browser for you, which I'm going to

authorize off screen.

And now you can see it says login

successful. Press enter to continue. And

then it says here Claude can make

mistakes. So always review Claude's

responses especially code. And it says

due to prompt injection risks only use

it with code you trust. All right. So

press enter to continue. And then when

you first start Claude in a particular

project, it's going to ask you if you

trust the files in the folder. Yes, I

do. And now we can start chatting with

Claude. So just try asking it about your

current project. That's what I'm going

to do. And this is good if you ever

start work on a project that you've not

worked on before. It could be your

friends or colleagues. You can just say,

can you provide me with a summary of

what this project is

and press enter. And you can see right

now it's reading different files. It's

looking at the codebase.

And now it's come with a response. So

you can see it's a simple blog

application built as a starter project

for a claude code crash course which is

pretty cool. It's detected that from my

readme file. I think it's a nextjsbased

web application that serves as a

practical learning platform for AI

assisted development. So there's a text

stack here uh learning focus areas etc.

Now, personally, I like to see the code

that I'm working on as Claude or any

other coding tool makes changes to it

because then I can easily check any

edited or new code and also go into the

weeds myself to work on the code

manually when I want to or need to. So,

for this series, I'm going to be running

Claude Code in the terminal within VS

Code. And when we run the Claude command

inside here, Claude is automatically

going to install the Claude Code

extension for VS Code. And that allows

it to integrate more seamlessly within

the editor by adding a few extra

features like diff viewing, adding text

selection as context, um some keyboard

shortcuts, and also active tab awareness

so that Claude can see exactly what file

we're working on. Now, if the extension

doesn't automatically get installed,

then you can manually install it by

coming to the extensions tab and

searching for Claude Code. Anyway, I've

got that same Shinobi project open in VS

Code, which is the project I'm going to

be working on for the duration of this

course. And the first thing I'm going to

do is run the project by opening the new

terminal over here and then typing npm

rundev. That's going to spin up a local

dev server. So, we can preview this

thing in a browser using localhost port

3000. So, then on the homepage, we've

got two buttons right here. One to go to

the blog and one to go to the preview

page for new UI components. So, if we go

to the preview page, first of all, you

can see that I've already added a few

different things to this page like

headings, regular text, button

components, etc. And during this course,

I'm going to get Claude Code to make

some more reusable UI components for me

and then add them to this page so that

we can preview them before we use them

in the actual project. Now, if we go

back and then go to the blog section, we

can see a really simple blog design

where we list out a bunch of blogs and

they're all coming from High Graph,

which is a headless CMS, and also a

sidebar over here with some dummy data

inside it. There's also a light and dark

mode, which we can toggle with this

little icon in the header. So, this is

the project we're going to be working on

with Claude Code, but you can use

whatever project that you want. It

doesn't really matter. What I would say

is to begin with, make sure it's a

throwaway project in case things go

horribly wrong or at least use version

control so you can get rid of any

unwanted changes. All right, so before

we move on and start doing any real work

with Claude Code, I just want to set up

a few things. First, I'm going to use a

special command Claude Code gives to us,

which is forward slash terminal setup.

And when we run this command, it's going

to install the shift plus enter

keybinding for new lines when we're

chatting with Claude code. So if you

wanted to start a new line in the chat

window, you'd press shift and enter.

Next, to make sure I don't end up

wrecking this starter project, I'm going

to ask Claude to switch to a new branch

called Claude edits. And Claude can do

this, by the way. It has knowledge about

your local git repository and it can run

bash commands to do things like stage

and commit changes, switch branches,

merge branches, and even resolve

conflicts. And you can also ask it about

commits or branches or changes made

between commits. And it's going to be

able to look that up for you. Anyway,

when we tell it to do any of these

things, it's going to show us the bash

command it wants to run and ask us for

permission to run it. We'll say yes for

now to let it run that command and then

we'll end up on that new branch so that

we can start making some edits. So now

we've got cla uh claude code installed,

configured, and ready to go inside VS

Code. In the next lesson, we're going to

start making some actual code edits, and

we'll also talk about adding memory to

Claude using a claude.md file. And by

the way, if you want early access to the

entire course, you can get it now on the

net.dev site. So I will leave this link

down below the video. You can buy the

course for $3 or if you want you can

sign up for a Net Ninja Pro subscription

which is just $9 a month and for that

you get access to all of my courses. You

get early access to every course as well

plus access to my premium masterclass

courses too. So the first month is half

price when you use this promo code down

here and I will leave this link down

below the video so you can go ahead and

sign up. Otherwise my friends, I'm going

to see you in the next lesson.

Heat. Hey, Heat.

Heat. Heat.

Nat.