The ONLY Claude Code Tutorial You'll Ever Need in 2026

Key Takeaways

I've been using Claude Code for over 6 months now, and it's become part of almost every project that I work on. From building websites to automating workflows to debugging entire code bases. And in today's video, I'm going to walk you through everything that you need to know from complete beginner [music] setup all the way to advanced features that most people don't even know exist. You'll learn how to set it up properly, understand the different models, and see every major feature in action with real examples. And if you want our free Claude Code templates, and also the system prompts that we are going to be using, go and join our free school community. The link is down in the description below. But right now, let's get over to the PC. So now we are over to the PC, and I need to say this first. The way most people use Claude Code, and the way I recommend, is inside Visual Studio Code. And there's a good reason for that. When you go over there, VS Code basically gives you everything in one place. That means the files on the left, the code is in the middle, and Claude Code on the right side. >> [music] >> Now, you can see exactly what Claude is doing to your project in a real time. Every file that it creates, every line that it changes, [music] all of that matters, especially when you are learning the basics in the beginning. You want to understand what exactly is going on. Not have Claude making changes in the background that you can't see. >> [music] >> So, here's how to set it all up. Go to code.visualstudio.com and download VS Code for your operating system. Remember, it's completely free, and once it's installed, open VS Code and go to the extensions marketplace on the left sidebar. It's basically the four little squares. Then you are going to search Claude Code, and you're going to install the official extension from Anthropic. And then make sure that it's the one with millions of downloads and a check mark just to be completely safe. It's important to mention that to use Claude code, you do need a paid Claude plan. And the bill goes for about $20 per month. And it's a good starting point for you. And once the extension is installed, you'll see the little orange icon in the top right. And then you're going to click on that and Claude code opens up right inside VS Code. Before we start building, open a project folder. Go to file and then open folder and select or create a new folder. And then Claude code works within whatever folder you have open. It can read, it can create, it can edit [music] files inside that folder. It's pretty simple. But before we start building, let me quickly explain the models so that you understand it a little bit better. Claude code gives you access to two different models and it's important to know which ones to use. So, Sonnet 4.6 is faster and it's cheaper on your token usage. It's great for the [music] team tasks like quick edits, simple components, or when you need something done extremely fast. Then you have Opus 4.6. Now that is more powerful. It thinks deeper, it handles complex problems better, and it's it's basically what you want for [music] planning the architecture, for debugging the tricky issues, or even just building something from scratch. Now my recommendation is to use Opus for planning and [music] complex builds, and then use Sonnet for quick edits and simple tasks. Now that we got that out of the way, let's actually build something. Okay, so let's build a premium chocolate website. It's going to be a luxury brand, it's going to have a beautiful design, product showcase, a contact form. It's going to be the entire thing. The first mistake that people usually make is just prompting without any planning involved. Don't do that, okay? Instead, use planning mode and then you're going to type in your prompt and you're going to turn [music] on planning mode. And then Claude will ask you clarifying questions such as the brand name, the color scheme, [music] e-commerce or showcase product images or placeholders. Claude creates a plan that shows you the file structure and then it starts building the index.html, the styles.css, script.js, hero section, navigation, product grid, the about, the contact form, etc., etc. Now, you are going to open it in browser and there we go, a luxury chocolate website [music] in literally just a few minutes. Now, before we get too deep into the building, let me show you something that is going to save you a ton of time and that [music] is Claude code skills. Now, skills are the usable instruction files that teach Claude how to handle specific [music] tasks. Think of them as saved workflows that you can call on demand. Like making a section mobile-friendly, um optimizing for SEO, or even writing product descriptions in a specific format. Okay? Now, here's how they work. A skill is just [music] a skill.md file that lives in your project's Claude skills folder. You can create your own or you can install them from the plugin marketplace. To make it even easier, let me show you. I'm going to open the plugin marketplace right here in Claude code by typing {slash} plugin. I can browse the available skills, I can search for what I need and install one command. Okay, cool. Now, once it's installed, I can invoke it by typing in a slash command and then Claude applies all the best practices automatically for me. But, here's where it gets really useful, [music] creating your own. Okay? So, let's say I always want my product descriptions to follow a certain format. What do I do? I just create a skill.md file with those instructions, I drop it in Claude skills, and now I can call it up whenever I need it. Claude [music] even picks up on a when to use it automatically based on the the at hand. Skills keep your workflow consistent. It saves you time and it makes sure that you are always following your own best practices. [music] So, I couldn't recommend it anymore. And also, on that note, I do recommend exploring the plugin marketplace and creating a few of your own as you start building, okay? Right now, our website looks pretty decent, but it doesn't look luxury yet. This is where one of Claude's most powerful features comes in. And that is image [music] input. Take a screenshot of a luxury chocolate brand website and then drag it into Claude and then you're going to say, "Make my website look more like this. I want the same elegant high-end feel." Okay, let's use that. Now, Claude analyzed the image, it updates the CSS, and you get a high-end look instantly. Iterate by saying something like, "Make the header more elegant. Add a subtle animation to the header section and make the product grid more premium with hover effects." And then, what does Claude do? Claude updates everything in real time. Now, here's another powerful feature, the at symbol. Let's say I want to make specific changes to the styles, but I don't want Claude touching any other files. What am I going to do? I'm going to type at styles.css, "Make all the buttons gold with a hover effect that makes them slightly darker." See, by using the at symbol, I'm telling Claude exactly which file to edit. And [music] as you can see, it's doing it right now. You can see it's only editing styles.css. It's not touching the HTML. It's not touching the JavaScript, just the CSS file. Now, let me refresh the page quickly. Okay, and perfect. All the buttons are now gold and when I hover over them, they get darker. Super clean, and that's the power of the at symbol. As you can see, you get that surgical precision on which files Claude edits. [music] Now, let's say I notice a layout issue, for example. Maybe the product grid looks weird on mobile. I'm going to open up the browser mobile view, and there we go. Okay. Now, look at this. The products are stacking [music] pretty weirdly. They're overlapping, the space is kind of off, and it just it just doesn't look right. So, instead of trying to explain these in words, what I'm going to do is I am going to take a screenshot of the issue. I'm just going to drag the screenshot that into Claude, and then I'm going to say, "Fix this alignment problem, and the products are stacking weird on mobile, and the spacing is off." And watch what Claude does. It's analyzing the screenshots. It's looking at the layout, the spacing, the breakpoints. It's identifying the issue in the CSS. Probably a media query problem, or a flexbox issue. And now, it's rewriting the CSS to fix it. Okay. So, let's [music] refresh the mobile view, and here we go. It's fixed. The products now stack properly on smaller screens, the spacing is even, and everything looks clean, which is what we are going for. And this is screenshot [music] debugging. And as you can see, it's a game-changer. You don't need to explain the problem in words, you don't need to know CSS or media queries. You just show Claude the problem, and it fixes it for you. This alone has saved hours of debugging time. Now, let's say you want Claude [music] to always follow certain rules in your project. What you're going to do is create a Claude.md file. This is a specific file. The it has to be called Claude.md uppercase. And you put it in your project root folder and Claude reads this file automatically at the start of every session and it's it's it's basically like setting a rulebook for your project. So, I'm going to say create a Claude.md file for this project. Always use the Noir chocolate brand colors, which is dark brown, gold, and cream. Always add comments to the code. Always make sure the site is mobile responsive. Okay, cool. Claude is then going to create that file right away. And from this point on, every [music] time I now start a new session in this project, Claude reads those instructions before doing anything. Now, let me show you, okay? Let's test it out. I'm going to say add a new section for customer testimonials. And now, watch. Claude is now using the brand colors. It's adding in the comments. It's making the section responsive. And I don't have to repeat any of that. It just knows because it reads the Claude.md. On top of that, you can also nest Claude.md files in subdirectories for folder-specific rules, like conventions for your test folder versus your components folder. And I mean, to add on to that, there's also the auto memory. So, Claude works on your project and then it actually saves useful patterns [music] and preferences to a memory.md file in a project-specific directory. Things like this project uses flexbox for layouts. Like that. Or even the developer prefers detailed comments. It's not magic. It's file-based. But, it means that Claude gets smarter about your project the more you work with [music] it. Now, that is genius. Now, you can view and you can edit all of this anytime with the {slash} memory command. So, you're always in control of what [music] Claude the members. Now, let's take things a step further and connect Claude code to an external service using MCP, [music] model context protocol. MCP lets Claude talk to outside [music] tools, things like Gmail, Google Sheets, Notion databases, you name it. Let's set up Gmail so I can get an email notification every time someone fills out the contact form. And here's how all of this works. Open your integrated terminal in VS Code and type /mcp and this is where you configure MCP servers. You'll need to add a Gmail MCP server. Claude then walks you through the setup including [music] authenticating your Google account through OAuth and you can also install MCP servers through the plugin system. Just [music] type /plugin and then search for a Gmail integration and then just install it from there. Once it's connected, I can prompt, "Whenever someone submits the contact form, send me an email notification to my Gmail with the name, email, and message." Claude then writes the integration code, it hooks up the form, and now every new contact triggers [music] an email in my inbox automatically. And I mean, you can use MCP to connect all kinds of services. And as your projects grow, this is how you go from just building a website to actually automating your workflow. Now, our website is looking amazing. Now, let's deploy it so it can actually live on the internet. Now, before we do that, always remember to run a security check. Just type in, "Review this project for security issues." Claude then scans for exposed keys, vulnerabilities, and risks. [music] And then you're just going to type in, "Help me deploy this website to Netlify." And then Claude guides you through the process. Then you're just going to create an account, drag and drop your folder, and your site is now live. You just watched me set up, build, and deploy a complete project using Claude code. We covered the setup in VS Code, the models, the planning, the skills, the HubSpot's free email sales template, the image input multi-file editing, custom instructions, Gmail automation, and deployment. This only clicks when you do it yourself. [music] So, open up VS Code and start building today. Try out skills, connect to Gmail, set up your Claude.md, and see how much faster you can [music] work. And also, if you want our free Claude Code templates and system prompts, join our free school community. The link is in the description below. And also, if you want a full courses on Claude Code, AI automation, and building AI businesses, then be sure to check out what we have going on in the free school. Thanks for watching, [music] and I will catch you on the next one.