Claude Code Tutorial #1 - Introduction & Setup

Key Takeaways

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.