Loading video player...
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.
In this course, you'll learn how to harness the power of Claude Code within your development workflow, including how to install, setup a new project, add context, use MCP servers, and create subagents. š„š„·š¼ Get instant access to ALL premium courses on NetNinja.dev: https://netninja.dev/ š„š„·š¼ Get instant access to This Course on NetNinja.dev: https://netninja.dev/p/claude-code-tutorial/ š§ š„·š¼ Coding with AI (Copilot) Course: https://netninja.dev/p/coding-with-ai-copilot https://www.youtube.com/watch?v=6sn6S6nJ22o&list=PL4cUxeGkcC9joeiiVaLExvfSgmdtBbSPM šš Get Claude Code: https://www.anthropic.com/claude-code šš Claude Code Plans: https://www.anthropic.com/pricing šš Claude Code docs: https://docs.anthropic.com/en/docs/claude-code/overview šš Claude Code Tools: https://docs.anthropic.com/en/docs/claude-code/settings#tools-available-to-claude šš MCP docs: https://modelcontextprotocol.io/docs/getting-started/intro šš Playwright MCP Server: https://github.com/microsoft/playwright-mcp šš Context7 MCP Server: https://github.com/upstash/context7