Claude Code Tutorial for Beginners (Step-by-Step)

Claude Code is not just for programmers. Co-work and Claude Code actually run on the same engine. Co-work points that engine at everyday work, like your files and your documents. Claude Code points it at building things. It writes real code, runs commands on your computer, and turns ideas into working software. You still talk to it in completely normal language. The word code describes what it produces, not who it's for. For the finale, I'm going to use two tools together. First, a tool called Claude Design, which turns a description into a finished visual design. Then, Claude Code turns that design into a real working website. First things first, I want to create a brief to explain to Claude Design a little bit about our business. So, in the chat, I'll ask Claude put together a summary of everything we've discussed about Amber Light Candles, so that I may hand that information to Claude Design for a website design project. So, Claude will go through all its memories, all the chats, and put together a document that I can hand off. After a minute, it comes back with this markdown file document, which we can preview in the right side. Yeah, it's looking pretty good. So, I'll go ahead and click copy, and now let's open Claude Design. You can open it in the bottom left of the desktop app. Now, we'll give Claude Design a prompt. We'll say, "Design a warm cozy website for Amber Light Candles. Homepage, shop page, and then about page with our story." I've pasted in a summary of all relevant business details. And now that I've typed in that prompt, I'll simply paste in those details that we copied from our Claude chat earlier. I find that Claude Design tends to do its best work when you give it a powerful model. So, I'll go ahead and switch this to the most powerful model available to me now, which happens to be Opus 5. I'll also change the effort level to be high, cuz I want a really good looking website here. Next, whatever you're designing in Claude Design, you can click the template drop down to see if there's a relevant project type. For example, here we have UI mock-ups, user interface mock-ups, which would be perfect for a website. So, I'll go ahead and click that. All right, let's go ahead and send the prompt. The canvas will appear here, and there's a good chance if you don't have a really detailed prompt, Claude design will come back and ask you some questions. Just like in the regular chat. So, let's go ahead and answer these. Regarding unconfirmed SKUs, let's use the eight example names cuz this is a design mock-up. Show prices. Let's go ahead and use this option. The scent quiz. I'm not really sure how I want it to go, so we'll say decide for me. What does the shop page need to do? We got a few options here. A grid of all the candles, a single product detail view, bundles and sets. Let's do a grid of all the candles. Anything real for the about page? We've already given it plenty of information, so I'll just say info already provided. And you can see it goes on like this. So, I'll just go ahead and answer all of these different questions and skip forward to when I'm done. All right, I filled everything out. We'll click continue. Now, if you're wondering why we'd use Claude design instead of a chat to design a website like we did earlier, it's because the chat's good at making simple designs. But, if you want a full website built out, or really any other kind of graphic design, Claude design is purpose-built for that task. And so, it generally makes much better designs and provides you a proper interface to be able to review and then give feedback and change the designs. It even allows you to tweak some things yourself. This is going to take quite a while to finish. This can take minutes. So, I'll go ahead and let it finish and then fast forward to when it's done. Okay, and now it's done. And here you can see a beautiful website. There's a hero section that has really well-done typography and colors and a placeholder image at the right. As we scroll through, we can see here our scent quiz. If we click on it, it actually takes us through it, which is awesome and even gives us the recommended candle. If we scroll down, we got the full line of candles, some placeholders for a lifestyle shot, and a spot to sign up for the mailing list. This is great. Also, it might open a little tweaks dialogue right away when you first load the site. And here it gives you options to change some things yourself. So, like for example here, I have the offer bar at top, which I can turn off and on to see how that looks. The quiz placement, we can either have it featured or hidden. And then same thing with the prices, we can turn the prices off for the candles if we don't want to display them. This is looking pretty good so far. And just like you can chat with Claude in the regular chat to make modifications to something, you can do the same thing here in Claude design. So, since it put a bunch of placeholders in here for images, let's give it some actual images to use to build out our design. In the bottom left, I'll click the plus button, attach file, and then in my photos folder here, I'll grab all these photos, which are labeled open, and say, "Swap out the placeholders with these real images." And after a few minutes, the photos have been added in where the placeholders were. This is looking really good so far. Now, one thing that's really cool to check out, too, is what the functionality is actually like. You can click through the website using its buttons. So, let's add this Autumn Cabin candle to the cart. We'll click the add to cart button, and we even have this full shopping cart here where we can change the quantity and see how that design would look. Now, while you can click around and interact with the website, this doesn't actually have full store capabilities yet. This is just the design. To actually make this a real website, we have to hand these designs off to Claude Code. Let me show you how to do that. In the upper right, you can click share, and here you have a bunch of different options for how to share this. You can simply publish this as an artifact, and then you'll have a direct link you can use. You can export a PDF if you just want to share what the designs look like, or even get a .zip file with all the HTML files. This is useful if you're handing to a human developer or a different AI agent. For us, though, we're going to click more formats and apps at the bottom and then click send to Claude Code. We'll send it to a local agent since we already have Claude Code on our computer and we'll just give it a little bit of additional instructions. We'll say, "Turn this design into an actual functioning website." Then copy the prompt and we can minimize this Claude design window. And then on the Claude desktop app, switch from home at the upper left to code. Now here you're going to want to create a folder for your project to be built in. So let's go ahead and click select folder. I'll put it in my documents and create [clears throat] a new folder called Amberlight website. Then open. Then we'll tell Claude Code it can trust this workspace. The workspace just being the folder that we created. And then we'll paste in the prompt to the chat here. Notice in the prompt it points Claude Code where to find the designs that we're created. It gives additional information about the various files that are included and then include our custom instructions at the bottom. Now before we submit this, let's make sure that we're happy with our permission and model settings. On the bottom left there's a slightly different set of permission options. In Claude Code you have manual, which is where it always asks before making changes. Accept edits, where it'll accept file edits but will ask for permissions for other things. Plan, where it'll give you a full detailed plan before implementing anything and then it'll act on that. Or auto, where it'll decide if something's safe to do on its own or if it needs to ask you first. When I'm using Claude Code, I tend to spend most of my time on auto. So I'll go ahead and click that and then enable auto mode. However, for your first time using Claude Code, I do recommend setting it to one of the more restrictive options so you can build trust with how the system works. This is especially true if you're having it modify anything on your system. But for a simple website, I have confidence that it's not going to break anything so we'll just let it run. Next, again, I want to use a really intelligent model to put this website together. So I'll go ahead and change from Sonnet to the best model available to me, Opus 5. Effort level set to high is just fine for this particular project. If you wanted to include anything else, you could click the plus button here and add files, photos, or even entire folders. But again, this is just fine. So, we'll go ahead and submit this prompt and let Claude Code build. Your computer may ask for some additional permissions. We'll go ahead and allow it to access the documents folder, and then it gets to work. Like Claude Design and most of the other chats we've had, with bigger projects like this where it's putting together an entire website, these prompts can take a while to get a result back. So, I'll go ahead and fast forward to when it's done. Okay, so this took about 20 minutes, which is not unreasonable considering how big of a build this was. And it looks like the site was built pretty well, but the images didn't come through. That's an easy problem to solve since I already have all the images. So, what we'll do here is simply click plus, add files or photos, and then grab all the photos. Now, one other thing that the message from Claude Code here is saying, aside from the photography not coming through, is that the email service isn't wired up. That's an easy problem to fix cuz we already connected Omnisend earlier. So, we can simply type a message here saying, "Use these photos and wire up our email service using the connected Omnisend MCP." All right, let's go ahead and submit that. All right, and after a few minutes, Claude Code went in and updated the photos and wired up the site so that if someone adds their email on the form on the site, it'll automatically add them to my email list and start sending them emails with Omnisend. It even made some judgment calls along the way. There was one clarifying message I had to send off camera because it couldn't work with the photos. And it determined that the photos were too big of a file size to be good for a website. So, it took the liberty of converting them to a smaller file size with a JPEG format. It also gave me instructions for how to finalize the Omnisend connection with an API key. I'll need to grab that from my Omnisend account. Now, the only thing actually missing from this website is any personalization I want to add and to wire in an actual e-commerce service like Shopify. But even though it's not totally complete right now, what we've got is a real working website designed and built from plain language working locally on this computer. And if you want to put a website like this live on the internet with a real domain, I made a full video on exactly how to do that. It's called how to deploy a Claude AI website the right way and it's linked in the description. And if you're building a site like this and you want to connect it to your own Shopify account, I've also left a link in the description on the ultimate beginner's guide to Shopify. Now, websites are only one side of Claude code. Here's the side that changes how you think about your computer. Claude code doesn't just do work for you. It can build you a tool that keeps doing the work forever. Earlier in this video, Claude organized my receipts once. Now, watch it build a machine. Let's start a new chat. And we'll select a folder we want it to work in. Here, I'll select the inventory folder because I'm going to have it create labels from items in my inventory. Now, let's give it the prompt. Build me a small tool that reads inventory.xlsx and creates a print-ready PDF sheet of product labels. One label per candle with the name, the scent, and hand-poured soy wax in our warm amber brand style like the label on the candle in the attached example image. Make it something I can run again with one click whenever I add new products. Put the icon to start the app on my desktop. All right, and we'll set the permissions to auto mode. Enable auto mode. And then I'll attach the relevant files. First, I'll grab a relevant photo and also let's attach the inventory spreadsheet. All right, and we'll run the prompt. Just like these other big tasks, this will take a while, so I'll fast forward and meet you when it's done. And here, Claude finished the project. It says double click make candle labels on your desktop. So, let's go check out the desktop. There it is, make candle labels and we even have a little candle icon there for our little mini app. Let's go ahead and run it. Now we have labels for all the candles in our inventory. But here's the part I want you to see. Claude isn't doing this job anymore. It's built a tool and the tool is mine now. Watch this. If I open up the spreadsheet and let's say I change something like let's change the name of this second product to dusk sea salt. Just rearrange the name there a little bit. And then [snorts] add another product at the end here called cozy kitchen and the scent is chocolate and cinnamon. Let's say it costs five to make, 30, we have 10 of them and we can calculate the profit margin here if we drag this formula down. There we go. I'm in numbers here so if I want to save it as an Excel sheet I have to do an export. So we'll do export to Excel. There it is. We'll save and we'll override the original inventory file. We'll close that out. We don't need the Pages file. Now if I just do a quick preview of the inventory you can see that the new changes are there, dusk sea salt and cozy kitchen. Let's run the app again. Go to the desktop, make candle labels. Voila, we have dusk sea salt and we have our new product at the bottom, cozy kitchen. I added a product and ran it myself. I didn't need a conversation with Claude. There was no waiting, no usage limits, just code running on my computer. That's the top of the ladder. Claude stops being the worker and starts building the machines. You can build a tool like this for anything in your life. And you can also point Claude code at the computer itself like finding out why your laptop runs slow or backing up your photos every night. And when you're ready to go even deeper, Claude code can run several sessions at the same time working on different parts of a project in parallel. Now I won't pretend you can master this in an afternoon. This is the most advanced level and it takes some practice. But it runs on the exact same skill you've been building this entire video. You give context, you give a task, and you refine the result. If you can do level one, you can grow into level six. The only difference is how big the results get.