Transcription
So, you're looking to make a website using AI because you want to build a professional website without spending weeks building it yourself. So, you open up your laptop and start researching how to make a website with AI. And one person tells you to use Lovable, another says to use Claude, the next says Base 44, ChatGPT, Wix, Squarespace, Framer, Bolt, and suddenly you're just feeling so burnt out from all the research and you just want to know which is the easiest and best AI builder for my project and ideally the most affordable.
Because here's the truth. Choosing the wrong tool for your project can cost you lots of time, money, and headache in switching to a better tool later. And if this happens, then I'm not doing my job as your guide. This should be simple, fun, and straightforward.
So, in this video, I'm going to show you step-by-step [music] how to build a beautiful, professional website using a single prompt. And it even has a built-in editor for you to make simple changes without chatting back and forth with the AI. And by the end, you'll have a fully functioning professional website launched with your own custom domain name.
Okay, so let's talk about which AI is the best tool for you. First, you've got AI tools. These are capable of building websites, but it's not their primary function. These are tools like Claude or ChatGPT, which are obviously chat-focused first. And then you have dev tools like Lovable and Base 44, which are more focused on app building. [music]
Now, don't get me wrong. These are all amazing tools, but here's the issue with them. First, every time that you want to make a change to something, you have to chat back and forth with it, which costs a lot of credits. And sometimes the AI fixes one thing, but then accidentally breaks three other things that you were already happy with. And then before you know it, you're fighting with the AI rather than actually building your website. And the second issue is is if you manage to get a full website that you're happy with, then you then have to export the HTML code and then go somewhere else to get your domain and your hosting plan. And then finally, you would upload the website's code into some complicated file manager. And this is why I wouldn't recommend this to beginners. It's just a little bit too confusing.
So, then you have website builders which have integrated AI, but they're website builders first. So, you can start with a single prompt and it will generate a custom website for your business. And then you have a visual editor where you can make the changes that you want without having to chat back and forth using credits or in a chat box. With these, the goal isn't to let the AI do everything for you. The goal is to let the AI handle the boring grunt work of creating the site and then you get to focus on the fun part of customizing it.
Now, I have tried all of these, the AI dev tools and the website builders. And there's just one that I keep coming back to time after time. And that's Hostinger's AI website builder. To me, the customization is on par with Wix and Squarespace. And it's super easy to just give it a quick prompt and then make [music] changes visually with their built-in editor. But it's much more affordable than those two. This is where Hostinger just wins out. Wix and Squarespace are around $16 to $17 a month, which in my opinion is just a little bit too high. But Hostinger is around $3 to $4 a month. And you can not only get your domain and hosting, but also build the site in minutes in one simple convenient place. And the only other tool that we're going to be using is ChatGPT, just to help us generate a professional logo and we'll use it to write some text for our [music] website.
Okay, so if you're ready, let's go build your website. So, to get a huge discount on your web hosting, just go ahead and click on the very first link in the description and that will take you here to my landing page with Hostinger. And you'll know that you're in the right place whenever you see the create a pro website coupon code applied up here as well as my face right down here. So, we're just going to go ahead and click on the start now button. And here is where you can choose a plan. So, you can see that we've got a 30-day money-back guarantee, and you can cancel anytime. So, the plan that I recommend going with is the business plan. This is because you get a lot more websites, you get a lot more storage, more mailboxes, and if you're going to be building an e-commerce shop with AI, then you're going to need the business plan anyway. But, if you're not going to do an e-commerce shop, you can do either one of these plans. But, I'm going to go ahead and choose the business plan. And here's where you can choose a billing cycle. So, the longer months that you go with is going to get you the biggest discount. But, keep in mind, you will be paying for this upfront. So, the shortest months that I recommend going with is 12 months. The 12-month plan still gets you your free domain name, and you're getting your domain name for 12 months anyway. So, you might as well have your hosting line up with that. Plus, 1 month just really isn't enough time to get your website off the ground and making money. So, if we come over here, you can see that we've got our 12-month plan. We've got a free daily backup, a free domain name, and free domain privacy protection. And just make sure that you've got this Creative Pro website coupon code here, and that's what's going to get you an even bigger discount. Now, I do not recommend getting your domain name right here, because then you'll end up paying for it. We've already got a free domain name here. So, we're just going to go ahead and click on continue, and we're going to do that in one of the next steps. And then here, you can just register for an account, but I already have one, so I'm just going to click on login. And then from here, you just fill in all of your billing details, and put in your card info, and then you can just click on submit payment.
Awesome. So, now from here, we can just click on get started. And then it's just going to ask us if we want to create a new site or migrate an existing site. We're just going to say create a new site. And then from here, we can just say skip personalization. And from here, we can move on to our next step, which is to install our AI website builder. And we're going to do this in just one single click. So, you can see that we've got three different options here. We're going to choose the middle one, which is the drag-and-drop builder. And then, we're just going to click on next. And it really is just one single click.
So, now we can move on to our next step, which is to secure our custom domain name. So, as you can see here, we've got one free domain name available. So, we can just go ahead and type it in right here. So, I just did youraiwebsite.com, and you can see that it's available here for 1 year. If it's not available, you'll just have to try out a new one. So, we're just going to go ahead and click on that, and then we're just going to click on next. And then, just simply make sure that all of your details look correct, and then just click on register.
Cool. So, now it's registering our new domain name and installing our AI website builder to that domain. Awesome. So, now we can move on to our next step, which is just to start with a prompt. So, you can start out by just typing in whatever you want here for your prompt, but I want a really accurate prompt. So, I just went over to ChatGPT, and just kind of explained a few details about the site that I want, and it wrote out a really nice prompt for me. So, I'm just going to go ahead and copy this. And this is going to be a website for my channel, Create a Pro Website. So, I want it to be a website that shows me as the best place to learn website tutorials. So, I'm just going to copy that, go back over to my AI builder, and just paste it in. And then, we can just go ahead and click on this little arrow. And now, it's building us a website from scratch just like that. And you can even play this little game in the meantime while you wait. Well, if you get better than a 193, let me know in the comments.
Awesome. So, just like that, it created a really great template website that is tailored for our business. And you can also see a mobile version of that if you just click on the little mobile symbol up here, and you can see what that's going to look like on a phone. But, I don't really love having multiple pages. I really like a one-page design, personally. So, if you do want to edit the idea, you can just click on this button right here, and that'll allow you to just edit your prompt. So, I'm just going to add in the words one page right up here. And then, I'm just going to click on the little arrow symbol again. And then, that's just going to make me a brand new website all over again. And you can do this as many times that you want.
Awesome. So, it just created us a whole new site from scratch, and I like this one a lot more. It feels a little bit more modern. I like the animations, and everything is on one page. If you do want to go back to a previous version, you can just click on this button right up here. And again, this is just a starting point. We're going to edit it further from here. So, whenever you're ready, you can just click on continue.
And then now, we can move on to the most fun step, which is to customize your website. So, as you can see, we're here inside of Hostinger's AI website builder. And it's a lot like Wix and Squarespace, and that it's really easy to use. So, first off, over here, you've got your toolbar, and this is where you can find things like elements that you can just drag and drop right into your website, or you've got your pages here, which you can see I've only got the one page because I asked for a one-page website. And then, you've got your styles. This is just where you can make global changes that change the whole website. But, you can also just click on individual items and edit them separately. And then, you've just got some fun AI tools, which these would only come with the business plan, but you've got an AI image generator, an AI writer, blog generator, anything that you can think of in here.
So, making changes is pretty simple. So, let's go ahead and start with the background. So, we're just going to click on the background over here, and then we're just going to say edit section. And then here, you can see we're in the background tab, and we can do a color, which is just going to change it to a solid color, which you can just select right here. And we can just pick one of the pre-selected colors that it gave us with our theme, or we can choose our own. Or we can also do an image, which is what we already have, or we can do a video. And then you could just click on replace video, and then you could just search for any video that you want. But I'm not going to do a video. I'm going to do an image. So I'm just going to click on image, and then I'm just going to say replace image. So as you can see, we're automatically underneath my library, which has all the images that are on our site, but you can also do free images. So if you click on this, you can just type in anything that you want, and these are all going to be royalty-free images that you can use. But I want to upload my own. So I'm going to click on upload files. And then I'm just going to select the image that I want in my background, and then just click on open. And then if we just go back over to the images tab, you should see that new image right here. So we're just going to click on select.
Cool. So now you can see that my image was added into the background, and I want to get rid of this dark overlay. So you can see overlay opacity here. We can just drag that all the way to a zero. And then we've also got fixed background. So if I move, this is going to stay put and scroll with the window. But if I do this, it's now going to be more of a parallax effect, but it will change the size of your image, so I'm going to go ahead and just leave it as is.
So now let's go ahead and edit our text. So to do that, we're just going to click on the text, and then we can just say edit text. Or you can also use the AI writer to rewrite this text. But I'm just going to choose edit text, and then we're just going to change the text color right here. So we're going to change that to more of a black color, so that it stands out. And you can also change the font. So we can just click on this and select a new font. So I'm just going to change this font to say an Open Sans. That's a really nice simple font. I'm going to choose the bold one. And then I just want to move this text over to the side. So, we can just click off and you'll see these two little arms on both sides. We're just going to drag that all the way over and position this on the side. And then we'll also want to left align this text. So, I'm just going to click on edit text again. And then we're just going to choose the alignment right here and say left aligned. And then we'll also do the exact same steps with this text down here.
Cool. So, that's looking a lot better, but I don't really love what this actual text says. So, we can actually just ask ChatGPT to write us some website copy for each of these sections. So, if we just go over here, I just typed in, "Please write me some website copy for each of these sections." And I just listed out all of the sections that it gave me. And just like that, we've got some awesome website copy that we can use. So, I'm just going to click on this and just copy this as my headline. And just go back over here and just paste it in. So, we can just double click right on the screen and just paste it in. And then as you can see, our heading one text changed back to our old font. So, if you want to make sure this doesn't happen in the future, let's just change it globally. So, we're just going to click on styles and then go over to fonts. And inside of here, you'll see a bunch of font pairings, which all work really well together. So, I'm actually just going to pick one of these instead. So, I think Poppins looks pretty good. It looks really close to our OpenSans. And we're just going to say discard changes and just reset. And I also want to bold that text. So, I'm just going to highlight all of it again and then click on bold. And I'll just make it a little bit smaller. And then we also want to replace this text here. So, I'm just going to go back over to ChatGPT and I'm just going to grab this text. And then we can just go paste that in.
Cool. So, now let's work on our button. So, first I'm just going to reposition this text a little bit by just clicking and dragging. And then we need a little bit more room for our button. So, we can just click on this button and just drag this section height down a little bit. And then we can just drag our button right over here. And then we can just say edit button. So, I could change this button text right here. I'm going to say watch my tutorials. And then in the link to section, we're just going to click on section. And you could have this link to a specific page. You could do a URL to a different web address, a section, and so on. So, I'm just going to say web address, and I'm going to put in my YouTube channel. So, I'm just going to paste it in. And we can have that open in a new tab. So, if you want to change the style of the button, like the color and the size, we can just click on style. And then you can see we've got normal and hover. So, for fill color underneath normal, we can click on that, and again we've got a bunch of chosen colors with our theme already, which makes it super easy, or we can just choose our own. So, I'm just going to go with a little bit lighter blue, like that. And then same with the text color, I'm going to change that to maybe a black. And then you can also change the text size here by just dragging up and down, but I like it somewhere around 14. And then we're also going to change the hover color. So, whenever we hover our button over, you can see it kind of turns purple. So, I want to change that. So, I'm going to click on hover and then do fill color. And then I'm just going to choose a new color. Maybe something like that. And then we can also change the animation of that button. And this is going to be the animation whenever the website first loads. So, currently we've got a fade, which you can see the button just kind of fades in. We can do slide, which is pretty cool, or we can scale up. I kind of like slide. And then lastly, we can change the size of the button by just clicking on the X, and then we can just drag this over. And then you can also do up and down as well, but I kind of like a little bit smaller button. And then don't forget to just click on the save button to just save your changes every so often.
Awesome. So now we can just use the same principles to just edit the rest of the website. So I'm going to go ahead and do that really quick. Okay, so I went ahead and redesigned the rest of the website and it is looking a lot better now. And I want to show you a couple of really easy tricks to make this so simple. So the first thing is I wanted to make this section bigger. It's a little bit narrower. So obviously I can just click and drag. But then how do I get each of these elements down? I don't want to just start clicking and dragging each individual element. So instead I can just draw a box around all of them and then just drag them all down at once, which is just so helpful. And you can also duplicate elements. So if I wanted to duplicate some text, I would just click on it and then click on the duplicate button. And then I could just drag that text anywhere that I want. And if we scroll down, like I said before, you can drag in full elements. So I like this image, but we could make it a lot more fun. So I'm just going to drag in an image element just like this. And then I'm just going to say edit image. And then I'm going to replace image. And then I'm going to choose this laptop background that I uploaded earlier. And now we've got a little laptop in here and then I can just drag this over here and make it a little bit bigger. And then what I can do is just click on these little three dots. And then we can just send this to the back. And then that way whenever we click off, it's now in the back and then I can just resize this image of me to fit inside the laptop. And then we can just drag this one little handle over and we can make me fit right inside the laptop. And now this is looking way better. And then I can just drag some of this text over by just highlighting and moving it over. And lastly, you can reorder sections by just simply clicking on these little arrows. So if I wanted to move this entire section down one, I would just click on that. And then if we scroll down, you can see that it was now moved below this other section. But, I liked it the way that it was, so I'm just going to put it back.
Cool. So, now we can move on to editing your contact form. So, having a working contact form is really important if you want to work with clients. So, let's go down and check it out. So, this is already a pretty good start. Let's go ahead and just click on it, and then say edit form. And the first thing that we want to do here is just change where the emails are going. So, this is going to the correct email, so I'm going to go ahead and leave it. But, if it's not for any reason, you can just change that email right here. And then we can go over to fields, and here is where we can edit our form fields. So, first of all, you can just click and drag to reorder them, and that will update automatically. Or you can also add new fields by just clicking on this button here. And then you can just select on anything that you want, and then that will just add it in. But, I want to keep mine simple, so I'm going to go ahead and delete this. So, I'm going to just open this up, and then we are just going to say remove field. And then that will get rid of it. And then you can also change what these little subtitles say as well. So, if we click on this one at the top, you can see that we can edit the placeholder text. And then lastly, we can edit our button. So, we're just going to click on button right here, and then you can edit what the button says. So, I could just change this to submit. And then after they submit, they'll get this little message here, which you can also edit. And then we also want to change our button style. So, we're just going to click on style, and then for customize elements, we're going to change this from the form fields over to the submit button, and then we've got new settings for our submit button, and we can just change that color. Cool. And then once you're happy with that, just go ahead and click save.
Awesome. So, now next we can move on to editing your header menu. So, in editing our header menu, this is going to include things like the logo up here as well as your navigation menu. So, let's just go ahead and click on the header. And then we can just say edit header. And let's go ahead and start with the logo. So, we're going to click on logo. And we're going to replace this logo with a new one. So, let's go ask Chat GPT to build us a new one. So, I'm just going to type in a prompt. Cool. So, I asked it to create a really simple all black modern logo. And I want it to be a circle with a mouse pointer inside of it and then also have Creator Pro website text next to it. And I also told it to be a PNG with a transparent background. And just like that, it went ahead and created me a logo and it is on a transparent background. So, we're just going to open this up and download it. And then we'll just go back over to our website builder. And we're just going to click replace image. And then we can just upload files. And then we're just going to grab that logo and then click open. And then we can just say select.
Cool. And just like that, it added in our new logo. And you can also edit the size of that by just simply dragging up the logo width up or down. And then if you want to edit the navigation menu, then we just have to edit our pages. So, currently we just have a one-page website. So, let's talk about how to add new pages. So, in order to add a new page, we're just going to come over here to pages. And then from here, we can just click on add page. And you've got lots of awesome templates that you can start from and they're all categorized right over here. So, let's say that I wanted to add a separate about page, I would just select it. And then that's just going to create the new page and I'm now editing that new page. And then here's where you can change how it looks in your navigation. So, we could say about me. And then you can also change the URL, which you can see looks like this right here. So, I'm just going to add a couple more pages.
Cool. So, I just added a few more pages here, and you can now see them up here in my header menu. And if you want to change which page you're editing, just go ahead and click on it. This is why I love Hostinger. It is just so simple.
Okay. So, lastly, let's move on to editing your website for mobile devices. So, nowadays, over 60% of website viewing is done on a mobile device rather than a desktop. So, we need to make sure that this looks good on mobile. So, to do that, we're just going to hover over this little mobile symbol and just click on it. And here you can see a preview of what that website is going to look like on mobile. And it's pretty good, but we need to fix some of the spatial issues. And it works the same way as editing the desktop. So, you can just simply click and drag and re-space sections. And you can also just simply click on text and just say edit text. And then you can just change the size on mobile. So, we can just bring this down a little bit. And now you can see I've changed this to a 32, but if I go back to the desktop version, it's still going to be the way that we left it. So, any of the changes that you make on mobile are not going to affect the desktop. So, I'm just going to go ahead and edit the rest of this for mobile.
Okay. So, I went ahead and edited the rest of the mobile layout, and it is looking a lot better now. And of course, if we go over to the desktop version, none of these changes affected our desktop version. And now, our last and final step is to launch your website. So, to launch your website for the world to see, all we have to do is just go up to the top right-hand corner and click go live. And then you'll just get a little window that says that your website was updated, and then we can just click on view your site. And just like that, we have got a beautiful website up and ready to go. And it was so much easier starting with an AI prompt.
Okay. So, that was how to build a professional website using AI. Give yourself a round of applause for making it all the way to the end. And if you haven't gotten started yet, then don't forget to click on the very first link in the description to get a massive [music] discount on your web hosting, your domain name, and your AI builder with Hostinger. Okay, if you enjoyed that video, please consider giving it a like. It really helps my channel grow. And if you want to see more tutorials like this, then please consider subscribing to the channel. And if there's anything that I missed that you would like to see in the next video, then feel free to drop me a comment. I actually get back there daily and respond to comments. All right, my name is Dale from Creator Pro Website, and I will see you on the next video.