Transcription
Those two websites that you see on the screen, they have completely different styles for completely different brands, but I built both of them using Claude Code. Now, I don't know how to code and I don't have design experience, but it took me about 30 minutes each.
Today, I'm going to walk you through exactly how I build that yoga studio website step by step. And by the end of this video, you're going to know exactly how to build your own website just like that and have it live on the internet at a real URL, even if you've never used Claude Code before. So, let's get into it. Right.
So, before we do anything, let me quickly run through what you need. There's only three things. First, you're going to need a Claude account. I just want to mention that you will need at least a Claude Pro account, which is around $20 per month. And just for context, we have multiple Max accounts for our business.
The second thing you're going to need is VS Code. If you're not familiar with it, it's a free code editor developed and owned by Microsoft. You don't need to know how to code to use it. We're just using it as a place where Claude Code lives. You can download it from code.visualstudio.com. Then, install it and you're good to go.
The third thing you're going to need is a way to deploy your website once it's ready to go live. Later on in the video, I'm going to show you how to do this with Hostinger, today's partner. So stay tuned for that. That's it. Three things.
So let's set up Claude Code. All right, so this is VS Code. Once you've installed it, it'll look something like this. Don't be intimidated by it. We're going to keep this really simple.
Now the first thing we need to do is install the Claude Code extension within VS Code. So we're going to go over to this icon here on the left. It looks something like a little puzzle piece right here. That's the extensions panel. So, you're going to click on the search bar at the top and we're going to type in Claude Code. Now, you'll see a few results, but make sure you install the one published by Anthropic right here. That's the official one. Now, it takes a few seconds and we're done.
Now, you'll see a Claude Code icon in VS Code, and in my setup, it's this little sparkle icon right here on the right. So, now we're going to click that to open the Claude Code panel. Now, I've already linked my own Claude account to this, so it's not asking you to sign in. But if this is your first time setting it up, it will ask you to sign in. Just sign in with the same Claude account that you normally use on the website. It'll open your browser. You authorize it and you're all connected. And that's it. Claude Code is ready to go inside of VS Code.
Now, before we start building, I need to create a folder for our project. So, I'm going to create a new folder on my computer, and I'm going to call it Yoga website demo for YT for YouTube. And now I'm going to open that folder inside of VS Code. So in the side panel on the left hand side you're going to see these pages that icon at the top. Click on that. That's the explorer panel. And we're going to click on open folder. Then I'm going to select yoga website demo for YouTube. Perfect. And now VS Code is pointed at that empty folder. This is where our entire website is going to live.
All right. Now let's build it. Okay. So here's where most people go wrong. And I really want you to hear this before I type anything. When most people first try Claude Code, they type something like "build me a yoga website," and they get something back that's fine. It works. It looks like a website, but it looks like every other AI generated website you've ever seen. Generic and forgettable. The difference between that and what I showed you at the start of this video is the prompt. And I'm going to break down exactly how I write mine because once you understand this, you can build anything.
There are three things that take a prompt from average to genuinely impressive. First, a reference site. So, I always give Claude a real website to look at, not because I want to copy it, but because it gives Claude a quality bar, a design language, a vibe to aim for. Think of it like showing an architect a house you love, before they actually design yours. You're not saying, "Build me that exact house." You're saying, "This is the standard."
The second thing is your own visual direction. This is key. So, you tell Claude, "I like the feel of this reference site, but here's what I actually want mine to look like." Different colors, different mood, different energy. This is what stops your site from looking like a clone and makes it feel original.
And the third thing is the real content direction. So, what's the brand called? What sections do you want on the website? What should the pricing tiers be? The more specific you are with the structure and content, the less Claude has to fill in with generic placeholder text. And placeholder text is the number one thing that makes a website look unprofessional and unfinished.
Okay, so here's my prompt, and I want you to notice how specific this is. "Build a high-end, fully responsive website for Prism Yoga Studios using Next.js, JavaScript, Tailwind CSS, and Shad CN/UI." Now, if you're looking at those technical terms and thinking, "I have no idea what those are." Don't worry, that's just us giving the AI directions on how we want the website to be built under the hood. Then I say, "Use radiantlyalive.com, which is the website I'm using as the reference, as design inspiration, emulating its modern aesthetic, elegant serif headings, etc." Then I give it the color palette. "I'm looking for a deep forest green as the primary brand color for the navbars, buttons, headings, etc." So, I'm telling it the vibe I'm going for. And then I'm telling it the exact sections that I'm actually looking for to be on this website, like the hero section, a class schedule, a new to yoga guide, pricing section, etc.
Now, before I hit enter, I'm going to do something that I'd highly recommend, especially if you're new to this. I'm going to switch Claude Code into plan mode. In my setup, I do this by hitting Shift and then Tab. But you can also do this by clicking this button right here where it says "edit automatically" and then selecting "plan mode" within the drop-down menu. What plan mode does is it tells Claude before you start building anything, show me your plan first. Instead of just diving straight into creating files, Claude is going to think through the entire project and lay out exactly what it's going to do step by step.
All right, so let's hit enter and see what it comes up with. All right. So, we see on the right hand side now that it's opened up a new window, and it's giving me the full breakdown. It's planning the exact file structure, the components it's going to create, the order it's going to build them in. It's listing out what fonts it's going to use, how it's going to set up the color palette, what each section is going to contain, etc. This is really helpful because you can actually read through this and catch anything that you don't like before a single file gets created. If something looks off or maybe it's planning a section that you don't want or it's using a font you're not keen on, you can tell it to adjust the plan before it starts building. It saves you time and tokens because you're not waiting for it to build something and then asking it to redo it again.
All right, this looks good to me. Everything I asked for is in here, so I'm going to approve this plan and let it start building. Now, this usually takes a few minutes depending on how complex your prompt is that you give it.
Now, when you see a little bash prompt pop up like this, that just means that Claude wants to run a command on your computer's terminal. It always asks first so you stay in control. Now, if you're not sure what Claude is asking you for permission to do, you can just tell Claude, "Explain this in plain English before we run it."
Now, as Claude builds this website, you're going to see some files appearing in the file explorer section on the left hand side. And that's the project taking shape in real time.
Now, after clicking through those commands and letting Claude do its work, we've got a first initial design. So, I'm going to open this up in a browser and see what we've got. Okay, so this is a solid first pass. All six sections are here. The color palette came through. The forest greens, the sage accents, the warm off-white background. I'm just going to scroll down the page a bit here. The class schedule looks pretty clean. Nice table here. And then you have the new to yoga section. We've got the steps laid out in cards with numbered circles. Nice. Then we have the pricing cards. We've got the drop in at $20, a monthly, and an unlimited. And each one has real features listed underneath. And look, it even added a "most popular" badge to the middle card. I didn't ask Claude for that. It just knew that that's a standard design pattern for pricing sections. Then we have the teacher section here with the placeholder circles and the bios and the contact form at the bottom. And the content is actually believable. It doesn't read like placeholder text. These feel like real class descriptions, real instructor bios. That's because we were specific in the prompt about what we wanted.
Now, is it perfect? No. The hero section is just a green gradient right now and there's no image. And of course, the teacher section has these small circle placeholders instead of real photos. But that's exactly how this works. The first build usually gives you the foundation and now we shape it.
So this is the part I really want you to pay attention to because this is actually how you work with Claude Code. It's not just one big prompt and you're done. It's a conversation. You look at what it built. You tell it what you wanted to change and it updates it. Small specific instructions, just a few things at a time.
Now, the first thing that's bothering me is the navigation bar at the top. It's white. It just looks generic, and I want it to feel like part of the brand. So, I'm going to type, "Can we make the header of the website green as well? And change the font color of the text to white or a light color that would be easier to read." Also, I'm not a big fan of the font that it's using in the hero section. So, I'm going to just also say here, "Also, can we change the font of the text for the main headings and titles to this other font?"
All right. So, here's what it's done. See that? Now you can see the green navigation bar instantly ties the whole color palette together a lot better. It was a small change, but it made a big difference. Now, I'm not totally sure about the font yet in the hero section and some of the headings, but I might come back to that later. But for now, let's keep moving.
Now, the next thing is the teacher section. Right now, the image placeholders are these small circles sitting inside square boxes with text crammed inside the boxes, too. And that's not how I want this to look. So, I want the images to take up the entire box and have the instructor's name and description sitting below it. It's a much cleaner layout that way. So, I'm going to type here for the image placeholders in the teacher instructor section, "Can you move the name of the teachers and the description below the boxes? I want the images to take up the entire box, not just the small circles within the box, and remove the small circles." I'm also asking it to make the font in the hero section a little bit bigger. I typically make, you know, maybe two to three changes at one time. and no more than that because otherwise it gets a little bit too overwhelming.
And there we go. See the difference? The placeholder boxes are now full-sized and the names and bios sit underneath. That's a much better layout. And when we add real photos later, those are going to look great.
Okay, now the big one, the hero section. Right now, it's a green gradient, which is fine, but I've got this beautiful image of a yoga studio with natural light streaming through the floor to ceiling windows and a silhouette of someone in a tree pose. I want that as the hero background. And that's going to completely change the feel of the site. Now, I've already saved the image in my project folder under "website images." So, I'm just going to type this here. "Let's add the hero image. It's in the folder under website images, and it's called hero."
All right. So, Claude works for a minute or so. And here's what it did. Wow, that completely changed the look and feel of the website. Having a real image in the hero section instead of a gradient, that's what makes it go from AI generated to "this feels like a real brand." But it's still not perfect. The text is sitting right over the woman in the yoga pose. It's blocking her hands and it just doesn't look intentional. So, I'm going to fix that now. I'm going to just type "move the 'a welcoming space to deepen your practice' text that was over the woman and the class schedule box down a bit so that it's not blocking the woman in the yoga pose."
Okay, so that's looking a bit better. Now the heading sits near the top of the image and the tagline and the button sit near the bottom. And the center of the image, the actual yoga pose is clear and visible. This is a really iterative process. So I'm going to continue to play around a bit with the font color and style of the hero text to make sure it's really readable and looks polished against the image.
All right, now let's work on the teacher section. Right now it's got those big placeholder boxes with initials, but I've generated some instructor portraits using Nano Banana just so we can visualize how this would look with real images. Obviously, a real yoga studio would use their own photos here. Now, I've put these images right in our project folder under "website images." So, I'm going to say here, "Add the images of the instructors to the website. They're in the website images folder." And look at that. Real faces, the photos filled in the entire card. The names and the specialties sit right underneath. This feels a lot better now. That's the power of having real images ready to go. Now, I'm going to remove the last names. These are just placeholders. The yoga studio would obviously put their own instructor's information here.
All right. Next, we have the pricing cards. They're functional, but they feel a bit flat. When I hover over them, nothing happens, and I want it to feel more interactive, like they respond to you. Also, I'm noticing that the "most popular" badge on the monthly card is getting cut off at the top. So, I'm going to fix both of these now.
All right. So, for this, I'm just going to say here, I'm going to type "For the membership plan section, the monthly box in the middle has the 'most popular' text cut off. Can you fix this? Can we also make sure the box is more dynamic when you hover over it with the mouse?"
All right. So, we'll see what it does. And there you go. See how each card lifts when you hover over it. The shadow deepens and it scales up a bit. And when you move to a different card, the previous one settles back down. And the "most popular" badge is fixed. So now it sits cleanly in the card instead of being clipped off. Little details like that make the site feel more premium.
Now, I think it would be nice to have a "new to yoga" button in the hero section alongside the "class schedule" button because if someone lands on this site and they've never done yoga before, that's probably the first thing that they want to find. It's a natural entry point. So, I'm just going to type "Add a 'new to yoga' button beside the class schedule button."
And there we go. Two buttons sitting side by side, both styled the same way, and it gives the visitor a clear choice when they land on that page.
Now, there's one last finishing touch I wanted to add. I want to add the Prism Yoga logo in the header. Right now, it just says "Prism Yoga" in text, which is fine, but a logo next to it gives it that extra level of polish. Makes it feel like a real business. So, I've got a logo on a transparent background saved in my "website images" folder. So, I'm just going to type here, "Can you add a logo for Prism Yoga just to the left of the Prism Yoga text at the top of the page? Use the Prism Yoga logo in the website images folder."
And there it is, the logo sitting right next to the brand name in the navigation bar. It's those little details that makes people trust a website the moment they land on it.
All right, now here's a quick shot of how the whole website is looking now that we've finished all those different edits. I think that looks really good and really clean.
Okay, so before we can put this live on the internet, we need to get it into GitHub. If you don't have a GitHub account, pause the video, go to github.com, and make a free account. It takes 2 minutes.
Okay, so I'm going to log into my GitHub account, and I'm going to create a new repository for this project. I'm going to call it "final Prism Yoga Studio site." Then I'm going to go back to VS Code. Now I need to commit my changes that I've made to this project before I can push to GitHub. So I'm going to click on the third icon down within VS Code right here, which is called "source control." And in the box at the top under "changes," I'm going to type in "final Prism Yoga Studio" to commit my changes. I'm saving this to a name that I'm going to recognize in GitHub.
Now, within Claude Code, I've said, you know, "I want to send this over to GitHub." Then Claude asks if I already have a repository, and I do. So, I'm just going to tell it the name here, "Final Prism Yoga Studio site." And because I've already authenticated VS Code with GitHub once because I've done projects before, it's going to just handle the rest. So, it connects to GitHub, finds the repository, and pushes everything. So, now it says "done," and it's pushed successfully. So, now here's the code link right here in blue. So, I'm just going to click on that. And now I can see all of my code right in GitHub. Our entire project right there, the files, everything organized, ready to deploy.
Now, the fact that Claude Code can actually help me through this entire process is honestly phenomenal. If you've ever been unsure about how to do something while building with Claude Code, you can just ask Claude directly how to troubleshoot and problem solve.
Okay, the final step. This is where it actually goes live on the internet. And this is where today's partner, Hostinger, comes in. Their managed hosting makes it really easy to take what you built and put it live. And you don't have to worry about servers, security, or keeping it running. Hostinger handles all of that for you.
Now, for this type of project, they've got two plans, the Business plan and the Cloud plan. The Cloud plan gives you more storage, more apps, and more priority support, but for most people just getting started, the Business plan is plenty. Both come with a free domain name, free email, and generous bandwidth. And unlike usage-based cloud hosting, the pricing is predictable, so you pay a flat rate and there's no surprise bills if your site gets a bunch of traffic.
Now, let's say we were going to select the Business plan. I would just click on "choose plan" and then they have a bunch of options on the time frame. Now, the longer the time frame that you choose, the less expensive the monthly rate is. You can enter my coupon code for an extra 10% off. Link is in the description.
Okay, so let me show you how to deploy this. So I'm in my Hostinger dashboard and first I'm going to select the option to "import a git repository." So now I just connect my GitHub account and so I'm just going to click on the refresh button at the top and select there we go the "final Prism Yoga Studio site" repository that Claude Code pushed for us. And here's the really nice part. Hostinger automatically detects that we're using Next.js and prefills all the correct build settings and root directories for me. So I don't have to configure anything and all I have to do is just hit "deploy" and Hostinger takes it from here. It's pulling the code from GitHub and setting everything up. This usually takes maybe a minute or two.
All right, looks like it's done. And there it is. That's live on the internet. Anyone in the world can go to that URL right now and see this. And just like that, we've got a live yoga studio website built by Claude Code, hosted by Hostinger in under an hour end to end.
So let's quickly recap what we did. We installed the Claude Code extension in VS Code, which took about 30 seconds. We pointed it to an empty folder. We gave it one really well-crafted prompt with a reference site for quality, our own color palette for originality, and specific content for every section. And the first build was pretty solid, but then we refined it. We pushed the whole thing to GitHub, then deployed it live on Hostinger, connected our repository, and it auto-detected everything. And we hit deploy.
If you build your own version of this, seriously, drop it in the comments. I would love to see what people make. And if you found this video helpful, please give it a thumbs up. It really helps the channel. And if you want to learn more about how to use AI to level up your work and your life, then click this next video.