CLAUDE CODE FULL COURSE 4 HOURS: Build & Sell (2026)

0:00 Hey, this is the definitive course on Claude Code for beginners. I use Claude Code every day to manage a business that does over $4 million a year in profit. I also teach over 2,000 people how to use Claude Code, both for personal and then corporate or professional tasks. So this is more or less what I do all day. Once you understand what I'm about to show you in this course, it's no small stretch to say that Claude Code will augment your productivity. You'll gain leverage in areas that you probably didn't even realize that you had, and that's both for software engineering and also other parts of your life. The focus here is not software per se, so you don't need to have a technical background to understand what I'm going to tell you. I'll make sure to start slow and build concepts on each other naturally and gradually so that everybody here is on the same page. So no fluff, here's what you guys are going to learn in this course. We're going to start with the basics by downloading and then setting up Claude Code ourselves.

0:46 I'll then teach you all about integrated development environments or IDEs. There's several on the market, and I'm going to walk you guys through the three most commonly used ones so that we're all on the same page. Afterwards, I'll show you how to set up your project brain, which is also known as the cloud.md file. Once we're done with that, we'll use Claude Code to actually build something because the focus of this whole course is on practical building. We'll build a simple web app hosted live on the internet, which I hope you guys learn by doing, not just sitting around and listening to me. After that, we'll cover the cloud directory, the subagents folder, and a bunch of functionality that not a lot of people know about. We'll then cover Claude Codes, various modes, including their plan mode, which you guys might have heard about, dangerously skip permissions mode, which gained a fair amount of notoriety recently, and how to use them, as well as use them safely.

1:32 We'll then cover complex project builds using plan mode and what I just showed you guys. After that, we'll cover context management, which is quite the term right now. I'll teach you guys all about how to manage your context efficiently, avoid context rot, and ensure that your prompts are built and structured in a high ROI way. I'll run you through every slash command and Claude Code and how to use all of them. We'll then cover hooks, which are custom scripts that you guys can fire automatically before or after every Claude Code tool call. Very useful to know. I'll then talk about Claude Code skills, which is basically how to create these skill files that turn Claude Code into a bunch of different specialized agents. We'll then cover model context protocol and how to set it up effectively. I'll talk about a handful of automated systems that you guys can quickly build with model context protocol, including email managers. You can build your own bookkeeper and more. I'll cover Claude Code plugins and marketplaces, the Chrome DevTools integration, which is

2:19 on a connection between Claude Code and Chrome that enables you to collect data from sources that don't have APIs. It's very, very valuable to learn. We'll then cover Claude Code subagents with scoped tool access. I'll talk about their new agent team feature and how to use them productively and then get work trees and session mobility, which essentially will allow you to spin up parallel cloud sessions without a lot of the downsides and issues that things like a cloud bot or open cloud have unfortunately resulted in. Finally, we'll cover scaling and deployment. Basically, how to take your automations and run them in production using modal webhooks, GitHub actions and Claude Code on the web. So we've got quite a lot to cover. Let's just dive right into it with the first, which is how to set up Claude Code as a total beginner. So the first thing we have to do is we actually have to purchase Claude Code. And the reason why is because they don't offer it for their free plan at zero dollars.

3:07 In order to have access to Claude Code, you need at least their pro plan for everyday productivity. I'd recommend this if you guys are starting out. The money that you spend on a subscription like this is. So small compared to the massive productivity benefits that despite the fact that at 17 dollars, I personally would not even raise an eyebrow. It's no small stretch to say that Claude Code probably delivers me productivity benefits on the order of 10 to 15 thousand dollars a month, because it's not only just skilled as a developer might be, which allows me to build systems that alleviate stresses and strain in my life, but it's much more than a developer as well. It's basically my second brain at this point. After you click, try Claude, it'll take you to a page where you have to log in. And once you're done, you can then create your account for the very first time. So I'd select both of these.

3:53 I'm not going to subscribe to occasional product updates because my email inbox is busy enough. And then you have an onboarding screen with some personal information. So I'm just going to fill that out. And then once I'm done, circle back. OK, so I'm Canadian. And unfortunately, our dollars convert quite poorly to freedom dollars. So the 17 dollars that we saw earlier is 28 dollars in my own currency. I'm going to click Get Pro Plan and then walk through the payment details below. Cool. And now I have a Claude subscription. This is all that you need in order to get set up. Everything else is totally free. From here on out, the simplest way to get up and running with Claude code is just opening up a terminal instance. That'll seem pretty intimidating to a lot of you. So I'm not just going to show you how to do it in the terminal. I'm also going to show you how to do it using what's called their graphical user interface, which they put together four or five months ago. Any resource that I show you throughout this course is probably going to look a

4:39 little different by the time that you look at it versus when I'm looking at it. And that's because Claude code, Anthropic and just AI tools in general change really quickly, especially since most of the developers are also using Claude code. So it kind of multiplies the productivity here. What's important is not the specific layout, the colors, the words on the screen. What's more important is that you just know how to find it. And so the number one resource that I personally use to look up advanced Claude code features is in the Claude code documentation. It's at code dot Claude dot com slash docs, whatever language you speak, just pump in there and then it'll automatically translate that over to. So the Claude code docs specify that in order to install Claude code in your system for the first time, you can run what's called a curl command here. If you're running a Windows PowerShell, you know, you can run this Windows CMD.

5:25 You can run that just so we're all on the same page here. When you have little snippets of text like this, what they're telling you to do is basically to open up a terminal or a command prompt. So on Mac OS, Linux or WSL, which are all different operating systems, in order to open up a terminal, you just type terminal. When you do so, you then get a terminal. Now, this terminal might look a little intimidating to you if it's your first time ever using something like that, but don't worry about it too much. I just wanted to show you guys how easy it is to get set up with Claude code in this. And then afterwards, as mentioned, we'll do the graphical user interface stuff. OK, so this is what it looks like on Mac. If you guys are on a Windows, then you'll have to use the Windows key search bar. Then to look up something like CMD or command prompt. At the end of it, you'll get something that looks pretty similar to this. From here on out, all we have to do is we have to copy over the command that it gives us.

6:11 So because we want a native install and I'm in Mac OS, I'm just going to copy over this command. You can also click this little button over here and then alt tap back. I'm going to paste it in and press enter from here on out. A bunch of complicated things are going to occur. If you don't already have it installed, may take you a little bit longer. But now we're good to go. Claude code is installed on our computer. Once you're done with all that, all you have to do in order to use Claude is just type the word Claude directly into your terminal. It's really that easy. Now, if it's the very first time that you're logging in, you'll also have to authenticate. And it'll ask you to do so automatically when you open this stuff up. If not, you can also type backslash L-O-G-I-N. Once you click this, it'll tell you Claude code can be used with your Claude subscription or build based on API usage through your console account. How would you like to set up?

6:57 Now, in our case, we're using the cheapest, most effective method, which is the Pro, Max, Team or Enterprise subscription. It's also the most straightforward, which is why it's the one that I used in this course. I'm just going to click Enter. And then it'll then log you into your Claude account, the one that you just set up a moment ago. Once we're done, you're all set up for Claude code. You can close this window, then Alt Tab back. And you'll see that it's going to say just press Enter to continue. Now, just so we're all on the same page here, all we've really done so far is we've just opened up a chat interface with an AI model. It's just instead of it being in like a nice desktop application or on the web, it's in our terminal. And the value here is instead of running an AI model on the web or in some distant cloud server, what we're doing now is we're running it locally on our computer. So we actually have the ability to take this model

7:42 and then locally modify files on our computer, write scripts, write stories, write poems, restructure our file organizer, clean up our PC or our Mac. Like this thing is currently connected to my computer. And I'll run you guys through our permissions and all that stuff work later on in the course, as talked about in the outline. But even this alone makes it extraordinarily powerful. So this screen can look pretty intimidating for beginners. Most people end up using the terminal flow, not the GUI flow. But I'm going to explain to you what you guys see here just for simplicity. In the top left hand corner, you have that cute little Claude code widget. I think it's I don't know if it's supposed to be a crab or like a jellyfish, but it's adorable. Then you have Claude code and the actual version up above. Underneath, you have the model that you're currently using. In my case, I'm using Opus 4.6.

8:29 Then you have the plan that you're on, in my case, Claude Mac. So this is a couple levels up from the pro plan. And then perhaps most importantly, you have the current working directory. As I mentioned to you a moment ago, this is working inside of your computer in a specific folder. And so Claude code currently lives inside slash users slash Nick Sariah, which is basically like the home folder, at least on my Mac OS. Here is your previous command. And so I just wrote clear because I wanted to clear it all the way up and give you guys a fresh canvas. Here is where you actually insert the text. So when you type stuff, it pops up underneath here, it tells you the model again. Then it gives you various modes. So in my mode right now, I'm in bypass permissions. This is sort of like a dangerous mode. It's a mode that not a lot of people feel super comfortable with. But it's the mode that I prefer for knowledge, work and intellectually

9:15 valuable tasks. And I'll run you guys through more of that later on. But you can cycle through modes simply by clicking shift and tab, which I'll show you guys how to do. And then there's some additional information here. There's some version, the latest and then over here is, at least in my case, the token readout. And you know, it's really cool. You can actually adjust this. This sort of thing is your Claude code status line, which I'm also going to run you through. You can make it all colorful and all wonky and really fun. You can have it display whatever the heck you want. So the very first thing I'm going to do is I'm just going to say, hey, how's it going? And immediately after, I'm going to take a screenshot so I can show you guys some more information. So opening this up in my drawing tool, what ended up happening is immediately after we said, hey, how's it going? You see that another prompt showed up called finagling. This is one of like a thousand different words that Claude code uses.

10:00 Basically, any time it's thinking, it's going to use some funny term like finagling or processing or, I don't know, rumpeting or considering or whatever the heck. They're pretty funny. And the cool thing is you can customize that. Next, you have the number of seconds that your query has lasted. So I just said, hey, how's it going? And then two seconds in, it's now produced five tokens for me. And then finally, you also have the token count. So just so we're all on the same page, a token is not the same as a word, but at least for the purposes of most of what you do, you can consider a token to be similar to a word. For instance, I said, hey, how's it going? This is not one, two, three, four. This isn't four tokens. It might be four words. It's probably closer to six or seven tokens. But just think about tokens as being analogous to words. Just a few more, if that makes sense. You'll also see that an additional piece of information popped up down here

10:47 called context. And this is really important. Context goes from zero to 100 percent. And that's how much basically conversation history you have in the current chat window with your current instance of Claude Code. This becomes really important later when you're designing better context management techniques, which is a big portion of what this course is going to be all about, because at least as of the time of this recording, context management is sort of like the big bottleneck in getting these systems to do more and better for you. You'll also notice that on the right hand side, my token counter, my status line here, it went up significantly. And so basically what this means is at about 20,000 tokens or so, or about 10 percent of the way through our entire conversation thread that's allotted to us. What's really cool is Claude Code will take all of that history and at regular intervals, it'll actually compress that for you

11:34 by increasing the information density, taking a string of text and then making it higher information density and higher information density and higher information density successively. So that even if you wrote something in kind of like a bloated way, a way that you could have used fewer words to say, as your context goes up and longer, cloud will automatically manage that for you to ensure that you're within the window. So that's how to set up Claude Code in the terminal. Hopefully we're all on the same page. Terminals are really similar to graphical user interfaces, which I'm about to show you in a moment. I do recommend that you guys get used to using it in terminal, because when you use it in terminal, you basically unlock even more functionality. You can run a bunch of these side by side. You could run different terminal tools and whatnot that give you guys faster refresh times. And we'll cover that sort of stuff later. But what I want to do now is I want to show you guys how to run it in a graphical user interface.

12:20 And these graphical user interfaces are typically managed by what's called an integrated development environment. Well, that takes us to the next logical question, which is Nick, what is an integrated development environment? An integrated development environment, also termed IDE, is basically three things put together. OK, it's a file folder organizer plus a text editor. Plus an AI chat widget, similar to what you get if you go on chatgpd.com or cloud.ai. So you know how on my Mac, if I go finder, I open up a basically series of folders where I can select different files and open them up and so on and so forth.

13:05 You can do the same thing on Windows. If you just type in folder or I don't know, the C drive or whatnot. Well, an IDE is basically that plus something like notepad or notes plus something like chatgpt all in one. And right now we have two major IDEs that the market is tending towards. The first is called Visual Studio Code, and the second is called Antigravity. Visual Studio Code is sort of like the OG one, because Antigravity is actually built on it. It was developed a lot longer by Microsoft. It's really, really extensible. It has great support and it's very straightforward. So I'm going to show you guys how to set things up on it. But Antigravity, I would consider to basically be Visual Studio 2.0. So not only does it have most of the same features now, although it is some of them are still kind of a little beta ish.

13:53 It's also a lot more modern. And then there's a much bigger focus on AI, which is obviously kind of the whole point of this course. So I'm going to be showing you guys initially how to set things up in Visual Studio Code. Then I'm going to do Antigravity. And then for the rest of the course, we're just going to be doing all of our work inside of Antigravity. And Antigravity is really cool. There's some additional functionality within Antigravity, not even tied to Claude Code. So the first thing we need to do is obviously we need to set up Visual Studio Code. In order to do that, just head over to Visual Studio Code on Google over here and then download for whatever your specific application is. In my case, I'm downloading the Mac OS. I'm then going to have the download appear in the top right hand corner. I'm then going to give that a click and then go download unverified file. And then over here on a Mac, you again have to drag the little window over. So I'm just going to do that. And once you're done, you're going to have a page that looks something like this.

14:40 So remember earlier how I said it was like a file editor? Well, that's what this little left hand side is about. If I click open a folder, I can actually go through and I can open a folder on my computer. So why don't I just go and open, I don't know, left click contact. OK, so now I'm inside of the left click contact folder. And you can see we have some files here, a gitignore, clod.nd, contact, index and a Netlify.toml. I'm going to go through all that sort of stuff in a moment. It's not super important for now. But this is sort of like where the file explorer functionality comes in. If I were to click on one of these, as you can see, we've now opened up a big text editor right in the middle of the screen. And so this is a bunch of CSS. It's a programming language. What's really cool is with clod coding, I actually have to know how to read any of this stuff. It'll just tell you everything. And so that is the text editor functionality. I can make changes.

15:26 Hey, what's up? You know, I could create a new file here if I wanted to called message.md. And I could say, hey, how's it going, YouTube? So just like in that way, we basically have file editing functionality. And then we can also select files to work on and stuff like that. And then on the right hand side, you have an agent tab, which is where you have your chat interface with AI. Now, right out of the gate, the VS code chat interface isn't actually clod code. In order to access clod code, you have to download it as an extension. So I'm going to run you guys through that right now on the left hand side here. Click on these little blocks, then just type clod code. You'll see a variety of these. The one that you're looking for is the one that's developed by Anthropic, the one with that little check mark in it. Be very wary of downloading extensions that are not from official

16:12 developers and vendors like Anthropic, simply because people have been known to insert malware and different things like that in these. So very important that you're that you preferentially use verified sources. In my case, I've already installed this, but all you have to do is go through that little installation wizard here. And then once you're done, you will have access to clod code. The question is, OK, I have access to clod code. How do I actually use it? Well, it's really easy. If you just go to the top right hand corner of the Citadel agent window, you now can just click on clod code. But you'll also see that there's a clod logo up here as well. Well, what the hell does this mean? If you click on this, you'll open up just like another window. And in my case, I open it up with the terminal default. So it's going to open up this in the terminal. This could be pretty intimidating and kind of annoying, to be honest, juggling all these things. I'm just going to zoom in so it's easier for us to see. So my recommendation is at least for beginners, just stick to the one on the right.

17:00 That one's simpler. And as you can see, it's a different user interface than the terminal. OK, so how exactly do you use this and what are all of the different features and buttons and stuff like that? Covering the interface, obviously, up top, you have the past conversations tab. And so as you build up more conversation history, you'll actually be able to jump back to any prior conversation you've had with Claude code over here. You can do that both locally and then on the Web. I don't have access to either of these yet because I just set this up fresh for you guys. Underneath that, you have the Claude code logo. Underneath that, you have that cute little jellyfish or lobster, whatever the heck it is. Underneath, you have your little chat window. So here's where I can actually talk to Claude. Hey, Claude, what's up? Once we open this, you'll see that similarly to how we had before, we have that little

17:47 accomplishing fidgeting, whatever. We have that little like process text come up. After that, you then have the response. The response comes in in this little window, although you'll see it's different when it accesses files and stuff like that. Underneath at the very bottom left hand corner, you have the various permission modes. Remember how earlier, Mindset dangerously skipped permissions? We can do the same thing here. If you just click on this, you can cycle through all of the different possible modes. And you see that little window around the chatbot also changes. So in my case, I'm asking before edits, which means because this is running locally on my computer, before it makes any changes to any local files, I'm going to say, hey, just ask me to make sure. Now, this is pretty safe. And a lot of people, especially coders and developers that are a little more old school, will usually work like this. But personally, given that when Claude's really in the thick of things, it's asking me for

18:33 edits every five fricking seconds. If you really want to unlock that productivity, as I talked about before, you either use edit automatically or use bypass permissions. And I'll cover plan mode and whatnot later as well. To the right of that is, and this is kind of intimidating for some people to understand, but this is the file that is currently being fed in as context. So, for instance, do you see how here it says index.html? And if I click this, I get this little eye icon. Well, if I leave this open, basically Claude is currently looking at this file. So what file are you looking at right now? It'll now tell me that it's looking through the index.html that's open in my editor. It hasn't read through the contents yet because reading through the contents of this massive file would feed a fair amount of tokens into context, which would charge me a fair amount of

19:19 money. So right now it's not doing any of that. But suffice to say, I can actually edit this in real time. Yes, change the title to Nick's YouTube example. And what it's going to do is it's going to go through my file. It's going to find the title, which is listed right over here. And then it's going to change that for me. This is an example of a really simple, easy and straightforward change. But I could do way more. I could refactor this whole thing from light dark mode to light mode. So I'm actually going to ask it to do so. Refactor this index.html from dark mode to light mode. And if you don't know what this means, it's OK. Bear with me. We're actually going to rebuild a whole app using Claude code and various design patterns in a moment. The first thing it'll do is it'll try planning out the changes that it's going to make. And so it's doing a bunch of programmatic adjacent things right now, like it's filtering out

20:09 a bunch of different CSS snippets. It's doing a fair amount of work here. And you don't need to be a programmer to understand what's going on. We basically now given this a task, it's deconstructing the task into a list of high level steps. Then it's going to go through and it's actually going to present this plan to me for me to say yes or no to. Now you'll notice that when I did this, in addition to the interface changing and now the colors being blue, in the bottom right hand corner, we now have sort of a little pause button. This pause button is pretty important because it allows us to actually stop a Claude code execution in process, like while it's working. So I could theoretically change this at any point in time. OK, and I can actually pause it and then maybe I could give it some more instructions or, I don't know, tell it to do something differently. So I'm actually going to click this little button, then I'm going to go to bypass permissions. I'll say no plan, just do it.

20:54 And what I've done is I've interrupted the process and the tool call, and now it's going to go through and instead of going to do this big fat plan, I'm just going to say it's the wild, wild west, buddy. Just get in there and start making some changes. When I did this, you'll notice that there's now a thinking tab that's open. If you click on this, you can actually peer into the internal thoughts of Claude as it goes through and accomplishes your request. So in this case, it said the user wants me to just refactor the dark mode to light mode without planning. Let me read the whole file, understand all the colors and then make the changes. And as you see, we just had some changes made, which is what this little blue thing is here, showing that we've made the changes. So immediately after thinking, it then did some more thinking. Then down at the very bottom, it's now updated a bunch of the sections of my code and it's continuing down some

21:39 little to-do list. So this is how you interact with Claude code through the graphical user interface. And there are a couple of additional things, like you can click on this button to attach files and folders and use the browser. You can also check all of the commands here, which are pretty powerful stuff, and I'll cover them all in due time. So that's Claude code in Visual Studio code, VS code. Let's now cover how it looks in Anti-Gravity, how to set that up. And then immediately after, we're going to build an actual real web app using Claude code. As expected, Anti-Gravity is pretty similar. They have a website here called anti-gravity.google. It's very sexy and clean. Wouldn't be surprised they built this with agents. You just click download for whatever your specific operating system is, in my case, Mac OS with Apple Silicon. I'm going to give that a click. Then it'll go through that same process that we just did for VS code. Once you open up Anti-Gravity, it looks very similar to what we just saw a moment ago with VS code.

22:27 And that's because the two are sort of built on each other. So just like VS code was both a file explorer, a file editor, a notepad and an agent manager. You can see here we have those three same ideas. On the left hand side, we're going to have the folders. On the middle, we're going to be able to edit the text of the files that we work with. And then on the right hand side, we can actually talk to agents. First thing I'm going to do is I'll click open folder and we'll go back to, I don't know, left click contact, just so you guys could see what we're dealing with. And you'll understand here that the UX is just slightly different than what we had earlier. You know, some things are indented. We have like some little cool symbols in the left hand side of the file. This isn't super important, but I just think Anti-Gravity looks cleaner, which is why I like using it. In the middle here, if I click this index.html, you'll see that we also have the text pop up just like we did earlier. And the only real difference between Anti-Gravity and VS code is just what we have in this right hand side.

23:16 Earlier, we could have used Claude code really easily because there was an actual dedicated Claude code button. Right now there isn't. In order to access Claude code, assuming that you've installed it. So I had over here Claude code for VS code. Give that installation button a click. Assuming that we've installed it, we have to do instead is we have to double click somewhere here and then click on this little Claude icon. Okay. And then just delete the agent icon. And now you have the same layout that we had earlier in VS code. Just now you have it with Claude code. The reason why is just because Anti-Gravity is a Google product. So they try and push the Google Gemini series of models. That's what we had on the right hand side earlier. And to be clear, this is a Claude code specific course, but you can also use whatever model you want to do, whatever purpose. Like the model type is less important than just the fact that you're really good at using it and the fact that it's smart. So exact same layout here. Not going to cover it anymore.

24:02 Let's get into actually building some stuff. So let's now build our very first app slash web page with Claude code. For simplicity sake, I'm starting with probably the most straightforward build, which is just going to be a web page. And we're not just going to do the hero header, which is the top or above the fold section. We're going to do the whole website. And the reason why I'm starting with this is because I just want everybody to understand how good Claude code and similar tools have gotten at being able to design high quality websites. This is a site up here called godly.website. And what it does is it basically just showcases really high quality design. And every single one of these, with maybe just a couple of exceptions, is now doable in probably, I want to say less than 10 minutes or so, front to back using Claude code.

24:51 And this isn't me just pretending. This is something that I have done myself dozens of times. I've built really high quality websites. The other day I built like 15 or so for a project. They all look just like this. So award winning design, award winning app functionality and stuff like that. These are just a few of the things that you guys are going to learn today. In addition, you're also going to learn how Claude.md, which is the system brain file, affects your prompts. I'm going to run you guys through the three major ways that people currently design sites and the various ways that you guys could use these approaches to both design websites, apps, and more or less anything else you want. And then I'm also going to talk a little bit about deploying. So let's start with Claude.md. I have open in antigravity here, the same workspace that we were looking at before, with just a couple of changes.

25:40 Namely, there's this node underscore modules folder here, which you guys don't have to pay attention to. This is automatically generated by Claude code every time we use a library or use some sort of NPM package. And then underneath we have Claude.md. Now Claude.md, as mentioned, is the brain of your workspace. To make it really, really simple and straightforward for you, because I think a lot of people misunderstand how Claude.mds work, let's just look at a hypothetical conversation. Over here, let's say you are on the right hand side. And so what you do is you say, hey, research X for me. Research, I don't know, the best trending posts on Twitter in my niche, whatever the heck.

26:25 Right. And then what ends up happening is the model afterwards, Claude, whatever you're using, whether it's Opus 4.6 or 4.5 or Sonnet or Haiku, it'll respond to you in purple saying, share one moment. After it returns whatever you want, then you continue in this vein. And so what I'm trying to get at is there is a pattern here, right? There's user and then there's model and then there's user and then there's model. The way that the Claude.md prompt works is basically at the very first message, before you even get to that point, what's hidden from you is the fact that there's actually another prompt. Okay. This prompt is injected at the very top of your conversation string before you even send the first message.

27:11 And so this Claude.md being sort of the very first thing that the model reads and sort of internalizes is really, really important to help steer the output of the ship. Now, what is steering the output of the ship? Well, I often use an analogy here. Let's say you're somewhere on the East coast of, you know, North America and you're trying to go to, I don't know, let's say the Westmost coast of Africa or something like that. As you guys know, these intervening distances are really huge. These are, I don't actually know how long it is, but probably at least 10,000 kilometers or so. Now, if you're a ship positioned right over here, okay, and this is your port and your goal port is over here. Let's hypothetically say you have limited ability to steer the ship for whatever reason, the steering wheel or whatever the ship equivalent is, it just doesn't really turn that much.

28:01 What that means is if you wanted to make it as close as humanly possible to that X, what you would have to do logically is you'd have to make sure you're very, very accurate, at least when you leave the port. And the reason why is because if you're not, okay, if you give even a very slight range of possible, I want to say angles that you could go. Okay, it may not seem like that big of a difference if you go, you know, from this line to this line, at least initially, right? But over an intervening distance of tens of thousands of kilometers, obviously this goes a very, very long way away from what your goal is. And so steerability in AI is basically when you try and minimize the number of potential or the width of all of the potential options.

28:49 And so what Claude.MD does is it allows you to take the space of like, you know, a really wide angle of ways that the AI could go. Okay. And it's like, I don't even know where that we're going to go if we take that topmost path and then compress it down into a much more likely subset of possible options that the AI could go such that, you know, if you were to be even slightly off here, the impact on your final destination, while, you know, you wouldn't make it to your goal. You'd still make it pretty close. So I want you to treat your Claude.MD as basically that initial trajectory that you launch all of your Claude sessions, whether in terminal or whether in the GUI tool, like I'm showing up here. So with that understood, now that we're on the same page about how Claude.MD is injected at the very front of any conversation, you start to realize that there's a tremendous amount of value in making that Claude.MD as high quality as possible.

29:43 Okay. So including a file, capital C-L-A-U-D-E dot M-D in any workspace project directory means that this is now injected at the front of our conversation. And so you don't talk to this any differently than you would Claude itself. This is just a file that standardizes it and makes it really easy to build in like conventions for different workspaces. In such a file, you're going to want to be very concise, and you're also going to want to give it sort of the bounds of what this workspace is for. I could just as well actually copy this whole thing over, okay, and then paste this directly into my Claude code and then just get rid of my Claude.MD entirely. But the value in having a Claude.MD is I just don't have to do that every time. It's initialized very top of that conversation history like we just saw.

30:30 And so what's in here, to be honest, is not super important. I actually had another version of Claude just develop this based off some Twitter posts that I saw that talked all about how to build websites with best practices. And you guys have access to all this stuff down below. I obviously have that template folder that you guys could use to get this and anything else. But suffice to say, this is how, or one of the ways rather, that you can currently design websites using Claude code. So the three major ways that people are currently using Claude code and other agents to do designs are as follows. The first is that you give it a pre-existing design and then you give it the ability to screenshot itself over and over and over and over again. And basically what happens is the first variant that they create that Claude code creates will be like an 80% match.

31:16 Then it'll screenshot that, compare it directly to the source image and then list all the differences and then get 90% of the way there. And then it'll get 95% of the way there. And it usually can't get 100% of the way there, but it can get like 99% of the way. The value in this sort of approach is what we're doing is we're basically taking an inspiration website. And so in our case, we're going to be using it on this site here. And then we're using that to template out a bunch of like design fundamentals. So like the size of the text, the colors, the way the buttons look and stuff. And then what you do is you just change the content of the site with Claude so that it's like whatever site you want it to make. So in my case, you know, I run this business called LeftClick. This is my automation agency. You know, we help people install growth systems into their businesses, typically B2B agencies. So what I would do is I would basically try and rebuild this site using this design.

32:05 And, you know, I could make some minor changes afterwards. But so long as I start with this nugget, Claude tends to do a really good job afterwards. The second way to build is you basically just give it a massive voice transcript dump. For those of you that didn't know, there are now ways for us to basically dump like a larger amount of text using a voice transcript tool. I'll show you guys what that looks like now. But if I just hold this FN key, this little widget appears in the bottom of my screen. Now, this is listening to everything that I say. And because I can speak a lot faster than I can type, I can actually say a fair amount of pretty short period of time. Most people type between 50 to maybe 70 words a minute, but we talk closer to 200 words a minute. That's a two and a half to maybe three X improvement. And because these models are so intelligent and smart and capable of extracting the meaning from the text, you know, text is all they look at all day long. What you could do is you could just use a massive voice transcript dump to basically spell out everything that you want on the website.

32:56 This isn't going to one shot your website because we don't have a pre-existing design. But then you can just go back and forth with it. And then in a fraction of the time of developing a real website, using a voice transcript tool, you can get pretty close. The third major way people are currently designing is they use components. Now, for anyone here unsure of what components are, basically there are now services and tools out there like 21st.dev where designers have created specific components on websites. And there are features on these where you can actually click on it and then click on this button up here, copy prompt. Okay. And then it will take this entire web page, entire design, you know, this little animation flickering thing, this jump on a call button, the sign up here about whatever. And then it'll copy all the text needed to have Claude code reproduce that for you.

33:43 And so it's really straightforward and simple. You just make an account of one of these services. And then let's say you're building a website, you scroll through and you're like, wow, I really like this background paths component, right? With these cool sweeping things. I want that on my website. You just copy the prompt, paste it into Claude code and say, hey, install this thing somewhere up at the top. Because AI is great at language, you know, you can get pretty close. So you can do all sorts of things with this. You could do like cool button borders. As we see here, you could have like a sign in component over here. You get a multiple cards. You know, this stuff is okay. To be honest, I find it much easier just to go straight to number one, which is just giving it a design and a screenshot loop and just having it work off of something pre-existing. I don't want you guys to think of this as like you copying a design. As you'll see, the end result will be quite different from this, but it's just a good way for you to like, get a rough idea of the end design and also not have to worry about things like the sizes of fonts, you know, the, the colors and so on and so forth.

34:38 Okay. So we're basically going to use this as like our inspiration. And then once we have our inspiration in place, Claude's going to be able to design whatever we want, whether it's an app or a dashboard or whatnot, very, very quickly. The final thing that I have to talk about before we actually do the designing is the difference between building something and then deploying. So when you build something, you're typically building it locally. When you do a tool, an automation, like we're going to do later on in the course or an app or a website, you know, we're running this thing on our local computer. But if we want other people to be able to access it, then obviously we need to deploy it. We need to push it onto the internet and the variety of different tools that allow you to do so. So today I'm just going to show you how to build the stuff. And then over the course, the next few modules, as we get deeper and deeper into your course, I'll also talk a little bit about tools like Netlify, Roussel, Modal and whatnot. That allow you to pull to push both your software, the tools that you make, and then even things like websites and full fledged apps to the cloud so that other people can access it on a domain like, you know, Nick's awesome tool.com.

35:35 Okay, so without further ado, how would I actually go about this design process? Well, as mentioned, I had this Claude.MD file set up here, and this is just something that I had Claude basically scrape through Twitter to find me the best practices of all of the different types of website designs out there that people are currently using Claude and other tools to create. And then I just had to like, write me a little script, basically a little summary. And this is very squarely this give it a design screenshot loop. It's just written in like a very particular way. You do not need to know how the tools work. You don't need to know how anything works. You basically just need to know how to like, find a resource out there or use AI to find a resource and then use it to make your own Claude.MD. With that in mind, what I'm going to do now is I'm actually just going to go on the website that I want. I'm going to screenshot it. However, if you guys aren't familiar, you know, if I just screenshot like one section of the site, like this, for instance, on Mac, then I feed it in.

36:20 You know, I don't actually have most of the site, right? I only have that hero header. OK, in terms of how to actually build this puppy, use command shift I or right click on the page and then type inspect. This will open up a window that looks something like this. Once you're done, change the dimensions to full page width on desktop. That's usually 1920 by 1080. This is termed the widescreen aspect ratio. Then just hold command shift P. I think it's control shift P on Windows. You'll open up this little command bar. With this command bar in place, you can then just type in screenshot and then go capture full size screenshot. It'll actually scroll through the whole site and take an entire screenshot for you. If I click on this button now, as you guys could see, we now have a screenshot of the entire website, top to bottom. It's kind of a hack.

37:05 Not a lot of people realize that you can do this, but you can. It's pretty neat. And once we have this, we just have to do one more thing. It's pretty big right now. If you were to send Claude Code, you know, like 20 megabytes or something like that, a file, number one, it would like really massively eat up your token limits. And then two, I think the API might have like a limit on this. We just have to make this file significantly smaller. So I'm just going to open up this resize PNG file here, a page called resize PNG from I love image.com. You can use whatever the heck you want. And I'm just going to drag and drop this in. I don't know. 50% smaller, even like 75% smaller and then click resize images. This is now going to basically re-map this for us. You can click download. What we're looking for is we're looking to get a file that's less than about. I want to say, I think like four or five megabytes or so.

37:51 So it's not perfect. Okay. It's a little bit blurry, but it's all right. I'm just going to go back and resize this one more time so that it's, I don't know, maybe a little bit bigger. Let's do 50% smaller instead of 75%. Okay. Once we're done, we can click download resized images. This one is about four megabytes or so. If we open it up, you could see that it's still high quality, but it's much, much smaller than the other file, which is like three or four times. And now that we're done, we just add this into Claude Code. So back to our Claude Code instance. I'm going to go down here to bypass permissions. Then I just need to go find the file. So I'm going to click this top right hand corner and I'm just going to see if I can drag this in directly. So it's going to open this up. That's okay. Just zoom in, copy, and then you can actually paste this in directly. Okay. So just click that copy button, paste it, and then you actually have the whole file as context.

38:38 Okay. And then we just have to do one more thing. We're just going to head back to the website. I'm going to find actual and then scroll down to this little body tag and then right click and press copy styles. This is going to copy the styles of the site, including the button colors and sort of like the little gradients in the background and so on and so forth. You can paste that in. Okay. And then I'm just going to press enter. Now that we've uploaded these, keep in mind that despite the fact that this might mean nothing to you or I, keep in mind that there's that extra prompt that's been injected up at the top. That literally says when the user provides a reference image screenshot and optionally some CSS classes or style notes, you should generate a website. So that's what it's doing immediately. It's analyzing the reference image and building this website recreation. Let me start by creating the actual HTML file.

39:24 So this will now walk through its own little to-do list, take screenshots of its created website, compare it with round one, basically do the same thing over and over and over and over again, until it gets to where we want it to go. And this is really what I'd consider to be the core building philosophy for Claude code. What you do is you basically give it a high level task, which in our case we did with the Claude.MD. Then we allow it to do the task and then we allow it to verify or basically judge its results. I think the reason why a lot of people end up sucking at Claude code or maybe they end up giving it instructions and then not being satisfied with those results is they'll just give it the task and then it'll do the task. And then their loop is kind of like this, right?

40:09 Task, do the task, give it another task, do the task, so on and so on and so forth. If you don't give Claude code the ability to verify its own results, either visually through a screenshot tool, or if you're building some sort of software through like automated testing mechanisms and so on and so forth, test driven development, then you lose like the vast majority of the value of AI. The reality is AI is not going to be perfect the very first time, but the value of AI is not in its ability to one shot everything 100%. The value of AI is its speed because you can have it get to 80%. Let's say this is like a, I don't know, a little quality bar or something. You know, what you can do is you can immediately, you know, it's not just going to be like, this is time step one, two, three. It's not just immediately going to be at 100%, right? That's just, that's not what it does. It's not going to go from here to here in like two seconds, then be done.

40:58 What it is going to do though, is it's very quickly going to start here. Then it'll go here. It'll go here. And then eventually after two or three or four time steps, it'll, it'll hit that 100%. And you know, we think that this is a really long period of time. Okay. But in reality, this is like five minutes. And if you contrast this with how long it would take a human to do that same, you know, approach, you know, humans will probably yet closer to 100% quality on their very first go. But it's not going to be like a minute or two. What this is going to be is it's going to be like, I don't know, five hours. You know, we actually believe it or not, tend to be a lot more precise than these machines that we've built. We can one shot things to a much greater degree than they can, but their ability to test and then retest and work really, really quickly orders of magnitude times faster than we do is the real value.

41:46 And that's something that I don't think enough people talk about. So just make sure there's always a task, do the task and then verify the results loop somewhere in here and you'll be fine. Now heading back to our, um, plot code instance, you could see it's now actually completed the first round of its HTML. Now it's, um, screenshotted it as well. And then it's basically comparing the screenshot to the work that it's generated. And with this, it's going to make minor changes. So as you see, the very first thing it's done is it's replicated to get paid the same day by setting a payment link or the most flexible invoice in the planet with the buttons and so on and so forth. Okay. It's also replicated that top section and it's used little placeholders here with these 160 times a hundred little buttons, even with like the right tilt and whatnot, because it doesn't have access to the images. It then is, uh, you know, entering these little divs, right?

42:33 It's even got this cool little post-it note, which is really cool. And then it even has the reviews. And so as sort of like rebuilding the design of this website, it's doing a really good job. And we're only a couple of minutes in what's cool too, is if you check out the thinking tab, you can see that it's gone through. Iteratively every section of the site. Okay. And it's, um, you know, listing what it needs to do next. So better decorative elements and hero, better floating band, fixing the blue dot positioning, improving the invoice cards with map thumbnails. I don't know what half of this stuff means, but to be honest for me, it's not super important. Just because I want it to be a little bit special and then show you the parallel capacity of Claude Code. What I've done here is I've actually opened up another anti-gravity instance. And what I'm going to show you guys how to do is actually design multiple of these simultaneously. Once we built this test, this do test, and then verify loop over and over and over again, which we already have in our cloud.

43:19 M D it's actually really easy to spin up multiple prompts and just have like 10 versions of cloud working on things simultaneously. So just for shits and giggles, why don't we head back over to our little website designer? It's that giving me a file here called twin gate. Okay. And then I'm pasting it all in and then my computer's really humming. Like, uh, you guys probably can't hear this cause I like to noise cancel most things, but it's making some noise. And the reason why is because I now have two of these instances running simultaneously, both developing me a website on the left hand side of things. Just expand this. Um, we see that it's taken multiple screenshots, the screenshot one screenshot, two screenshot, three, you guys see how it's getting closer and closer and closer to the end result. Well, now it's doing some final editing. It's making some features thumbnails better on the right hand side. It's now going through the initial development of that new index.html.

44:06 And so because you can run as many clod instances as you have tokens, basically, um, I can run as many of these website designers simultaneously in however many tabs I want. And this isn't even the most efficient way to do this. I'm going to show you guys a much more effective terminal management structure that'll allow you to do like five or 10 or 20 of these simultaneously. Okay. And the left hand side, it's now saying it's done. So I'm going to say open index.html. That's always just going to be the actual website file. And if you just tell it to open it, it's going to go through and do so in a tab for you. Okay. And here is the demo of the website that we put together. So, I mean, it's not perfect. It's not everything that I want, but it's good enough for us to start. So what I'll do now is I'll go back and I'll have it recreate left click. Hey, this is looking pretty solid so far. I'd like you to check out left click dot AI. That's my personal website. And what I want you to do is to design, uh, or take the information from left click dot AI and then insert it into this website.

44:58 I don't want this to be a clone of left click dot AI, but I want it to be pretty close. Use the formatting and everything that you've developed so far to help place elements and stuff like that as necessary. Um, insert images as well and make sure that any elements that, um, are there look good. Continue doing a screenshot loop if necessary until you have something that looks very high end, very professional and minimalistic, just like you've already developed. Okay. So I just fed in a bunch of information. Now it's going to go through, fetch the content from left click, and then help me design the site. On the right hand side, we're creating that initial index.html. Now in this case, I obviously did the two website design simultaneously manually. Uh, but what you can do is you could actually work this into your website or app design process. You'd actually have it take in, let's say three different examples of, uh, templates or of design inspirations, whether from godly.website or from, I don't know, dribble or one of these big design aggregators.

45:51 And then in the cloud.md, you could say, Hey, actually, we need to develop three versions of this. Then you can give it some source and then you could actually just like, let it do its little test verification retry loop before giving it, you know, a source website, like in my case left, quick.ai to have it like do some modifications or maybe just doing a big voice dump of what your website is, what it's for the various audiences you serve and stuff. And then at the end, you could actually have three websites simultaneously that cloud presents to you after five or 10 minutes and says, which one do you like the best? The options here are virtually unlimited. The other, uh, website developer so far has made this, which actually looks pretty reasonable. You could see that there's still some things that it needs to change. Some of the text looks like it's placed weirdly. Some of the blog posts and stuff like that. Obviously the development is mostly hands off at this point. I'm just monitoring it. And on the left-hand side, we've now taken four screenshots of this and gotten really, really close to that.

46:39 And result, um, it's now building like the left click site itself. Most of the time, I don't actually care too much about what's in the file explorer. Um, so that is the third panel on the left-hand side of both of these windows. So for simplicity, what I do is actually just close it out. And then I usually have on the right-hand side, some sort of output that AI has generated me. And then on the left-hand side, I just have my actual little chat window. I'm just going to zoom out just a tiny bit here. So we're still all on the same page. We could see everything. Uh, and then that way I can now just orchestrate and kind of take a step back and see how things go. The left click design is also starting to come together. As you could see, we've taken that initial website from actual as inspiration. So we have like the same sort of buttons and the nice rounding, nice hover effects on things. And then obviously we have the font. Uh, but then now we've actually replaced it with left click content.

47:25 So the definitive AI growth partner for fast moving B2B companies, tens of millions of dollars generated and more saved, proprietary systems, real revenue, no fluff. So we scroll through here. You can see it's even inserted like a little a button and click video element. We all have our case studies down below. We have some pictures of me and my business partner, although we're kind of cut off at the middle of the head, so we could probably fix that. And, uh, yeah, we've even got some testimonials, which is really, really clean. Let's see what happens if I click this button. Oh nice. It's even gone to our discovery page. We were actually like having button click functionality and stuff like that in here as well. Kind of curious what happens if I click on this. Okay. Nothing so far, but maybe I can tell it to do stuff. We also have an about, and then we have a case studies. That's really nice. So yeah, I mean, things are progressing more or less exactly like we wanted them to. We even have our little logo from here on out. I'm just making minor changes and, um, you know, going to go back and forth with it until I get what I want.

48:11 So on the left hand side, I'm just going to voice dump in my voice transcription tool. I can do this like this. I really like the output. I think the logo in the top left hand corner is a little too big. Make that smaller. The bolding of the hero header font is also quite strong. See if we could try a Sarah font instead of a sans Sarah font underneath the introducing left click section. We have a button player over the picture of myself and Alex Ramose and Sam Evans. But when I click on this, nothing happens. Either turn this into a light box or eliminate that little button in the middle. The rest of these look great. My and Noah's profile pictures are currently cut off at around the middle of our foreheads. So move us down and zoom out of the photo slightly so that we're perfectly centered in

49:01 frame and everything else here looks great. Meanwhile, on the right hand side, we see this index.html is now done so we can open this up. I'll say open in Chrome. That's not going to open up the other version of that website for me. And it's looking like it's pretty clean. It's pretty matched with what we have. So because I want to do the same thing that I did with the other source, I'm just going to scroll back up to where I gave it the instructions to basically copy over left click. And then I'm just going to paste this in. And now I have this also customizing the site to my specs. You don't have to develop in multiple tabs. This is something that I think you learn how to do the more of these Claude code agents, frankly, that you're orchestrating. The benefit to this is obviously you can develop basically however many times faster as

49:46 tabs that you have open. But the downside is you also tend to context switch a fair bit. The number one thing that you don't want Claude code to do is basically just sit around waiting for your instructions. So if you are going to do it this way, just be honest with yourself and ask yourself whether or not there's always like Claude code operating in the background.

…