Transcription
In this video, I'm going to show you the fast and easy way to build a beautiful looking website using cloud code.
Now, if you're online at all recently, you've probably seen the hype around cloud code. People are building these crazy, elaborate websites in a few minutes. They're launching businesses, creating portfolios, building web apps, and it all just looks so ridiculously easy. That is until you try it yourself. Suddenly now you're dealing with prompts and skills and UI frameworks and deployment and all these technical terms that are really confusing, especially as a beginner.
So in this video, I'm going to clear all of that up. I'm going to walk you through my exact process that I use to build this professional-looking website here, and I'm going to give you all the tools and resources that I used personally to make it stand out and not just look like any of these generic AI-built websites. And by the end, we're going to have built this entire website together with just a few prompts. Then I'm going to show you how to launch it online with your own custom domain name so that you can share it with anybody in the world.
Now, everything that you'll need to follow along with this video is down in the description of the video. So, if you're ready to get started, let's go.
So, what exactly are you going to need to actually get started building a website using Cloud Code? Well, we're going to need two things.
One, you're going to need a Cloud account. So, if you head on over to cloud.com and you check out their pricing plans, you can see that the free plan doesn't include Cloud Code, and you'll have to step up to the pro plan, which is about $17 a month, in order to access Cloud Code directly on the desktop app. You also get access to Claude Design and Claude Co-Work, which are some really powerful tools that are also built into the Pro plan of Claude. So, in my opinion, this is a great price for the power that it provides. So, if you haven't already, make sure you're signed up for the pro plan of Claude in order to actually follow along with the rest of this tutorial.
Now, the second thing that you're going to need is media and images and graphics and things for your actual website. So, if you're building this website for your business, you just want to make sure you have all of your business information, any logos or branding colors that you use, and maybe any pictures, professional videos, or anything else that you want included on your actual website.
Now, if you don't have professional images or graphics, don't worry. There are a lot of cool ways that we can go about generating these using AI as well. I personally generated all of this media here for the website I'm going to be building today using Higsfield, which is a powerful AI platform that combines both AI image and video generation, allowing me to generate all of these different images and this cool video that I'm going to use for the hero section of our website. So, you'll want to make sure to have all of this stuff gathered up before we get started so that you don't have to go and try to find all of it later. Or if you want, you can generate it with AI down the road. I just want to make sure to gather all of these assets beforehand. This way, when I'm in the designing process, I can just go and find everything I need really quickly without having to go and search for all this stuff later.
So, make sure you've signed up for Claude's Pro plan and you've downloaded and installed the desktop application on your computer. And then once you have all your media assets, logos, and things like that that you need to actually build this website, let's move on to actually setting up the project.
All right. All right. Now, once you've downloaded and installed the Claude desktop application, you open it up, and this is what you'll be looking at. Now, you can see up here in the top left corner, we have the chat tab, we have the co-work tab, and we have the Claude code tab. So, if we click on code, this is where we can actually get started building out our project.
Now, before we actually get started putting in any prompts or doing anything like that, we actually need to get a few things set up. So, before you start any project with Cloud Code, the very first thing we need to do is build a folder to store all of our files in. So, I'm just going to open up my Finder here. And I'm going to create a new folder here on my desktop. I'm going to call this landscaping website. And this is where we're going to store all of the files for the code that we're building within our website.
Now, in this folder below here, this media folder, this is where I have all of the images that I've generated, as well as my logo and a few other assets that I want to include on the website itself. So, if you have a folder like this that you've got everything combined together, you can go ahead and add this folder inside of this landscaping website folder.
Now, we just need to tell Cloud Code this is the folder that we're using for this new project. So, let's go back over to Cloud Code and up in the top, you can just click new session to start a brand new project. And you'll be looking at this window here, which looks very similar to the chat window where we can just start typing in prompts. But right above that, you'll see this little tab here where we can select a folder. So, if you go here and click open folder, I'll just navigate here to my desktop and I'm going to select this landscaping website folder and click open.
Now, you can just go ahead and right here and click trust workspace. This is just saying that we're going to have Claude trust that they can access all the files within this folder. And just like that, we've got the project set up with a folder set up for all of the files for the project.
Now that the project is set up, we want to go ahead and add a couple more things to make Claude even more powerful and even better at designing stuff. So, if you skip this step, this is how you're going to get a lot of those generic and boring looking websites that may come out of most AI-generated website builders. The way we get around this is by installing skills into Claude. And skills are basically just pre-written instructions that we want Claude to follow whenever it's designing or building things for us.
So, there are two skills that we're going to install and it's really simple. The first skill is called front-end design and this is actually built by Enthropic, the same people who built Claude app itself. And basically what this does is just gives it more ability to access more fonts and more of a creative design skill set than just the generic built-in palette that it would normally reach from. So instead of using overused fonts that are used on all of the generic AI sites you see, it'll start to reach for more creative font choices and different layouts that aren't necessarily used in all of the generic uh vibe-coded websites that you see.
So to install the skill, it's really easy. All we need to do is just grab the link right here. Copy that. And again, I'll have all these links down in the description of this video. And we head back over here to Claude. And inside of our project, let's just say install this skill globally. And I'm just going to paste that link here and hit enter. Then just accept all of these edits that Claude's asking for. And just like that, we've installed this first skill.
Now, the second skill here is called UI UX Promax Skill. And what this skill does is basically give Claude a bunch of more UI and UX design inspiration. So, a bunch of color palettes, tons of different font pairings, UI styles, text stacks, everything that it needs to pull from when it comes to getting creative design elements. This skill right here is going to give it much more of a palette to be able to pull from than its generic built-in abilities.
So, again, to install this, we're just going to copy the link. And this time you want to type this in very specifically. Let's say install this plugin globally again using npm and then paste in the link. And that npm is just going to ensure that it installs this plugin cleanly across all of Claude. Now again, we're just going to allow access and allow it to install globally across all of our projects. Just be sure to go through all of these different allowances and make sure that you click allow every time and it'll get through the installation process here. Okay. And it's saying it's all done, but it says restart is needed. So just go ahead and restart Claude so that when it boots back up, this skill will be fully installed and ready to use.
All right. Now that we have our skills set up and our project fully ready to go, we can actually start building out our website. Now, before you build anything, it's always great to start with a little inspiration and have some sort of direction that we want to go. So instead of just blindly asking this thing to build a website from scratch, it's usually smart to give it some sort of reference image or a link to another website that you think looks really great so that it at least has a good starting place to go from and then we can tweak and kind of customize from there.
So a few websites that I like to use for inspiration are awards.com, that's awards with three W's. And this is a huge library of award-winning websites that you can get inspiration from. You can click through and check out these websites and you can actually even open up the live link to visit the website. So this is really cool. We can get a live preview of some of these really cool websites and see what people are up to and how they are building these things. Like this website here is insane. And this is something we can absolutely ask Claude to help us design. So Awards is a really cool place to get some inspiration or dribble.com. Dribble with three B's. This is another great site that has just a ton of different websites here that you can click through and get inspiration from. And they have this search bar here where you can actually even search for some things. So, I'm going to type in landscape to see if I can find any inspiration for this landscaping company that we're building. And just like that, from searching landscaping, you can see all these different sites start populating. And this is great because this is giving me a really good inspiration or a good starting place to kind of pick from and say, hm, I really like what they did here. I really like some of the design elements here. Uh, and this way I can take screenshots from different parts and I can kind of build a Frankenstein of my favorite website. Or I can just take one of these that I like the best, like let's say this one here. And I'm just going to take a screenshot here of this actual site, this whole thing right here, just so I can kind of show Claude the general direction that I'm going for as far as like the layout and the type of sections that I want included on the site.
Now, I'm going to head back over here to Claude and I'm going to paste this image right here. And I'm going to type a backslash and start typing UI. And you can see this UI UX Pro Max. This is that new skill we just installed. I want to actually have Claude access this skill for this first prompt here.
Now, for the actual prompt to build the website, this is the easy part, right? You can actually just describe exactly what you want to Claude and we'll go through and ask you some questions to help you refine it. So, the exact prompt that I'm going to use here is this: "Please build me a website for Summit Ridge Landscaping Company here in Austin, Texas. I'd like this website to use this reference image as inspiration, but using my own branding, colors, and logos. I'd also like to include a few specific sections on my website. Please ask me any questions that you need to complete this job."
Now, that last sentence is really important because I want Claude to actually come back and ask me what it needs to build this website properly so that I know that it has all the information it needs without me having to guess what exactly it wants. So, you can see this little microphone down here. I can actually talk directly into the prompt box. So, I don't have to type all this out. I can just talk in my normal language and give my ideas directly to Claude like that. So, I've got my reference image in here. I've got the skill being called the UIUX Pro Max skill. And I've got this prompt just explaining what the company is, what my goal is for building this website, and asking it to ask me any questions that it needs.
Now, down here, you also have the option where it says auto. I've gone ahead and set mine to auto mode. By default, it'll be set to accept edits. And basically, what this is doing is just asking if you want Claude to ask you permission before it does every single step. A lot of times, I'll switch to auto mode just so that it automatically will start going through and just completing the task that it needs. But if you really want to be diligent about making sure that you're controlling exactly what Claude is doing before it does stuff, uh, you can just leave that on accept edits mode. I'm going to go ahead and leave mine on auto mode for now. And I'm going to click enter here.
So now Claude's going to analyze that image. It's going to take in my skill that I asked it to reference. And it's going to come back and ask me a series of questions that I can fill out and give it all the information I need so that it knows what to do to build my site. So you can see here it's starting to ask me a couple questions, right? So, it's saying, "Do you already have brand colors and a logo for this company, or should I design them for you?" So, you can have it actually build things out for you, or in this case, I'm going to say, "I have a logo and colors."
Question two is asking which sections do you want on the site? The reference has a hero, trustbar, about, services, blog, contact. On my other section here, I want to include a before and after section to kind of show what these people have done before with their landscaping company. Right? So here's like a before one of our jobs is done and then here's like an after. So I want to have a section for that. So under this other tab here, I said I'd like to add a before and after section as well as an R process section to show the four different steps involved with getting started with the job. Uh, and then just along with the rest of the sections that it recommended here uh from the reference. So let's click next.
Now it's asking how it wants us to build this. Do I want to do a single HTML file, a multifile static site, or a React/next.js project? And if you don't know, you can just always skip this. Uh, but it does recommend here to just do a single HTML file for this type of site. This is probably going to be all that we need. So, we don't need to get that complicated. Let's just stick with what it's recommending here.
And last but not least, it's asking me what kind of services that I want to offer here. So, do I have full service landscaping, lawn care, and maintenance, or maybe I have some very specific services that I offer. So, just be sure to go and fill this all out according to what kind of site you're building and the details that it needs to know specifically for your website. In this instance, I'm going to say that we're a full service landscaping company.
Cool. So, now you can see that it's actually searching our folder here for the logo that we mentioned. So, it's going to go through those media files and see if it can find that logo. And you can see here there's a media folder with assets. Let me look to see if we can find a logo and extract your brand colors. Cool. And you can see that it's pulled up the logo here right out of that folder. It's already determined the colors and everything from that. Uh, and it's even found the before and after pictures that I have in the folder so that it's already building out that section as well. So, you can see because I provided a lot of this information up front, it knows exactly what to go search for and how to go about building this. So, I'm going to let this do its thing. And once it's done generating our first draft of the website, I'll come back and we'll do a reveal of what it's come up with.
All right. And just like that, it looks like it's all done. It's come back and let me know all of the stuff that it's done. It's went and built all the different sections. It's checked all of its work. Here's all the different sections that it's actually went and added.
Now, how do you actually view the website? Well, if you just go right up here to the top right corner, you can click on preview. And in preview mode, you should be able to see your website. Wow, this is actually pretty impressive. So, you can see this top hero section here. Uh, all of our branding colors. We got our logo up in the corner. We got a whole little navigation section here. Uh, call to action with a phone number. We've got a get a free quote button. And if you actually click that, it looks like it actually works and brings you to the section. So, that's great. Um, let's see the actual sections. So, uh, down here, it looks like this section kind of got cut off a little bit here at the bottom of our hero. So, we need to make sure we adjust that. Really cool. It's basically mimicking the reference image pretty well. We got our services here and a pretty cool little zooming effect when you hover over these cards. I'm surprised it actually knew exactly which images to use too for each of these sections. It's pretty much matched them up uh the way I would imagine to do that. Uh, you can see rooted here in Austin built on craftsmanship. So it's went ahead and drafted all of the copy and everything for us. This meet our team photo is maybe not in the right section. I may want to switch that around too. Um, but this is really cool. Looks like we got different blogs. So maybe it's actually went and created individual blog posts for us. We'll have to see. Um, we've got a review section. Some of our recent projects. That's great. Oh, and then cool. Our before after section. Let's see if this uh Oh, nice. It's like a slider bar. Very cool. So, you can see like the before picture here. Again, all these are generated with Higsfield, but I just generated a before what a yard might look like and after nice and cleaned up with landscaping. So, this is really cool way to show that completed in 11 days. I like that it's went ahead and generated some information about this story. So yeah, overall I'm really impressed. I really like the way that it looks. There are a few things obviously I want to go through and tweak and change and that's what we can go through and do. But for one pass from one prompt, this is pretty dang impressive. And honestly would have taken me far longer to build from scratch uh than this went and did in about maybe 10 15 minutes total.
Each of these sections here at the top just go right to the sections on the website, which is really awesome. I want to see if this blog actually loads into a blog page. Uh, it doesn't look like it. So, this is just kind of like placeholder. Obviously, if we wanted to add content, we can go through and do that. Or we could actually tell it to remove the blog section entirely if that's something we didn't want. Um, but for now, I want to go ahead and adjust this hero section and get this looking right. So, I'm going to go ahead and just say the hero section is getting cut off at here at the bottom. Let's make sure all the elements fit above the fold. Also, let's swap out the image of this hero to this video file to play as you scroll down the page. The playing of the video will be triggered by the scroll. So, I'm gonna actually go ahead and add from our media file here. We have this hero video that I generated. So, this video here would be a lot cooler to have playing in the background instead of just that still image. And I really want it so that it plays as you scroll down the website. It plays through the video smoothly as you scroll, right? It would scrub through. You can scroll back and forth, up and down the website, and it would kind of move through the video. So, let's see if it can do this for us by adding in this video here, which it already had access to, but just making sure that it knows the exact video file and then giving it this prompt. And let's see what it does.
And just like that, it says that it's already made the changes. And let me verify in the browser now. So, it's just making sure that it actually made them over here in our actual preview. We can click refresh up here in the top right corner at any time to refresh the preview and see our hero section is a little different. And these cards are actually now in the fold, which is nice. And if I scroll, oh, nice. You can see it's playing the video back. Now, that may not be exactly what you want. This is just something I was experimenting with to see if it looks cool. If we want, we can just have this looping video play over and over, or we can get rid of that scrolling effect altogether. But for now, I actually think that looks cool.
Now, also within cloud code up at the top here, you'll see this localhost link. This is actually a link that we can go to to actually test out our website live on a web browser. So, if I paste in this link here and push enter, you can see here on our local device, we'll actually have access to the website. And as I scroll, there's that video scrolling, which is pretty sweet. And we have our sections just like we did here in our actual web browser now. So, this is really awesome. I'm actually really liking the way that this is coming out. Um, there's obviously a bunch of tweaks we can continue to do to get nitpicky. If we want to swap out some of these images or swap out the text, we can do a lot of that here right within the editor in Cloud Code.
So, you can see over here in the top right, we also have this little pencil. We have this little select elements. And if we click the pencil, we can actually draw. So, if we want to say maybe um like this section right here, I'm not liking, we can click and draw. And we can actually leave a little note. We can say add this drawing to the chat. And we can go in and make an adjustment. I'm going to cancel this real quick. We can also have this little select button where we can select different sections and say, "Hey, this section here I'm not liking." So, I'm actually going to scroll down and do that right here. So, uh, for this whole section, I'm going to click on this and I'm just going to tell Claude, let's simplify these images here. Instead of having three images in this section, let's just have the one image of the crew displayed horizontally so we can see the full image without it being cropped out. and we'll push enter. And you can see that was pretty quick. It actually came back already. I think this fits a little better than those three images did. So that now the picture isn't cropped and we see our full crew.
Now, obviously you want to make sure to give it any other information that it's going to need. So this phone number up here, uh, the actual quote information or the contact information that it needs. Just make sure that you switched out everything that you want to switch out before you actually publish your website live.
But I want to show you actually how you would go about making this live because currently this is only on a local host. Meaning you can only access this currently locally right here within cloud code or on your local browser. But if someone else tried to type in this URL, it's not going to load this website for them. So if we want this to be live and online and with a custom URL, something like summitatx.com or summitridgelandscaping.com, we're going to need to go through and actually purchase our own custom web hosting and custom URL. And my favorite platform for doing that is called Hostinger. So if you head on over to createite.com/hosting150, it'll bring you to a site that looks like this. And this is our special co-branded landing page here with Hostinger, which will give you the best discounted price for web hosting and a free custom domain name along with every hosting plan that you purchase.
So just go ahead and click start now. And you'll be brought down here to this page where we can select the plan that fits your needs best. Now you can see the premium plan here starts at $2.69 a month and the business plan starts at 359 a month. Both are pretty great prices. The difference is is that with the premium plan, these are going to be more for basic websites. So websites with basic functionality, you know, just a few pages here and there and really no backend. Just a simple web page with a contact form or something like that like the one we just built would work great for this premium plan. But if you built something that you're going to want to accept payments or have a backend where you actually store users information or more complex things like that, you're going to want to select the business plan. And with either of these plans, you can see that you can create a couple of different websites. With the business plan, you can actually create up to 50 websites with this one plan. You also get one free domain name for an entire year. So that means you can get your own custom www.com without having to purchase it separately. So I'm going to go ahead and choose this premium plan.
Now, on this next page is where we can actually check out and choose how long we want to have this plan for. So, you can see by default it starts with 48 months, but we can go down to as low as 1 month or we can have 12 months. Now, you can see by the longer that you actually sign up, you get a bigger savings. So, we're getting the best value if we're going to go ahead and buy all 48 months at once. Uh, but in this instance, let's just start with 12 months, right? You also get one free year of your domain name. So, you might as well have hosting for the entire year as well. And you can see for 12 months of having this whole entire website up, we're going to get a free domain name along with two free mailboxes. So, that means you can have your own email directly tied to this website as well. And this is all going to be just for 43 bucks. Now, this is also adding our Create a Pro website coupon here, which gives you an even bigger savings. You can see it's taking off about five extra dollars off of the total price here. But instead of being 160 bucks for this entire package, it's only 43 bucks. And we can also claim our free domain name right now, too. So, you can go ahead and search for a domain name right here if you want or you can do that here in the next step. I'm going to go ahead and just click continue for now.
Here, it's just going to ask you to register for Hostinger. So, if you have an account already, you can go ahead and just log in. Otherwise, just create an account right here with your email address or Google.
All right. All right. Now, once you have an account and you're logged in, you can go ahead and actually check out. So, we can select your payment information here. Enter your credit card or whatever payment option that you want down here and click submit payment.
All right. And just like that, you now own your own hosting plan. So, on this next page here, it's going to ask you if you want to create a new website or we migrating an existing site. Now, in this case, since we've built our website already using cloud code, we're going to hit migrate an existing site. And here we're going to choose the upload backup files option and click next.
Now here is where we get to choose our domain name. So if you didn't choose it already, here's where we get to do that. And you can see we have one free domain name available. So we can start typing right here in this bar to see if it's available to claim. So since this example business that I'm building here is called Summit Ridge Landscaping, I'm going to type summitatx.com. Cool. It looks like that's available. So I'm going to go ahead and choose that. And it's just going to ask us to go ahead and verify our information here and hit register. It's building out our domain now. And you can see our domain name has been added to our site. Let's go ahead and click continue.
All right, sweet. Now it's asking for us to actually upload the website. So in order to do that, all we have to do is go back over to our folder here that we set up at the beginning of the video. And these are all the files that we need to actually include on this website. Now, this is really important, and you want to make sure that you do this correctly. You want to make a compressed zipped folder of all of this content here. But we don't want to compress this folder here because that would actually be compressing this folder, but we only need to compress all of the contents within that folder. So, I'm going to go ahead and just select all of these files here. And if you have more files, just select all of them that are inside of this folder. I'm going to right-click and hit compress. On a Windows computer, you would just hit send to compressor. And just like that, you can see it's created this archive.zip zip file. And this is a compressed file of all of these files right here. Now, we can actually move this back over here just right onto our desktop. And this archive.zip is what we want to upload here onto our Hostinger. So, I'm going to drag this over here.
All right. You can see it's uploaded the file right here. Let's go ahead and click next.
All right. And now, it's going to go ahead and migrate our site or build our actual site from the files here and put it onto our domain name. So, we'll just click submit request. It's saying migration complete. So, we can continue to our dashboard or we can actually click this link here and view our website.
And just like that, Summit Ridge is officially online. And just the exact same website that we designed in Cloud Code now is officially live and on the internet. And that's all it takes to build your own website using Cloud Code. As you can see, this is a huge timesaver, giving you access to tons of power with just a few clicks and a few simple prompts. If you want me to cover more in-depth content around Cloud Code and building even cooler websites, drop a comment down below and let us know. Remember to use that discount code down in the description and download any of the other resources that I mentioned in this video down below. And I'll see you in the next.