How To Build the PERFECT Website Using AI (Step-by-Step for Beginners)
By Wes McDowell
Summary
## Key takeaways - **AI Builds Converting Homepage in 20 Minutes**: I just created one of the best converting homepages I've ever seen in under 20 minutes, without writing a single word, designing a graphic, or touching code, letting AI handle it all to skip the $5,000 web designer and months of revisions. [00:00], [00:06] - **Avoid Single-Prompt AI Websites**: Tools that make an AI website from a single prompt deliver something technically a website but not a good one that drives business results, so spend 20 minutes using AI strategically instead of 30 seconds for junk. [00:38], [00:56] - **ChatGPT Prompt Researches and Writes Copy**: Use ChatGPT's latest version with a detailed prompt to research industry best practices, ideal client problems and outcomes, then generate a full homepage copy including two headline options, voice of customer phrases, and structured sections. [01:18], [01:35] - **Hostinger AI Builder for Easy Customization**: Hostinger's AI website builder provides an amazing starting point you can customize with zero coding knowledge, including color palettes, fonts, sections, and images, making it accessible and affordable even for beginners. [02:02], [06:47] - **Generate Logos and Images with AI Tools**: ChatGPT can create a clean professional logo in seconds with a simple prompt for a transparent horizontal PNG, while Midjourney generates custom premium images like sad dogs or happy walks to match your brand perfectly. [07:11], [14:37] - **Structure for High-Converting Sections**: Build the homepage with hero headline and subhead, problem agitation, solution introduction with team photo, three benefits, testimonials, CTA with urgency, and FAQ to remove doubts, ensuring every section speaks to client results. [13:14], [20:25]
Topics Covered
- Why single-prompt AI sites fail businesses?
- How one prompt researches and writes copy?
- How AI builder enables no-code customization?
- Can AI generate logos better than expected?
- Why real team photos beat AI images?
Full Transcript
I just created one of the best converting homepages I've ever seen in under 20 minutes. And here's the crazy part.
I didn't write a single word of text, design a single graphic, or touch one line of code. I let AI do it all for me because what used to take me weeks as a professional web designer now takes well under an hour. So, in this video I'm giving you my exact process that lets you skip the $5,000 web designer and the months of back and forth revisions.
You'll see which AI tools I use to make it happen. And I'll even give you my foolproof prompt that I use to get AI to write me an insanely effective homepage in just one click.
Now, this video isn't about just one magic tool that you tell it a couple lines about your business and bam you've got this amazingly high-converting website.
There are tools that'll make you an AI website from a single prompt, but this is what you're going to get from that.
It's technically a website, sure, but not a good one.
So rather than spending 30 seconds to get a website that won't actually do anything for your business, let's be smarter here and spend about 20 minutes using AI every step of the way to help get you the kind of site that's actually going to make you money. Sound good?
So for this process, we're going to use three key AI tools that work together to create that complete professional homepage quickly.
First, we're going to use the latest version of Chat GPT to do something really powerful.
It's actually going to research the best homepage conversion practices for your specific industry.
Identify your ideal client's biggest problems and dream outcomes.
And it's going to take all that and write your entire homepage using one single prompt that I've developed that works flawlessly every time.
Second, we're going to tackle the visuals. So, if you don't already have a logo, Chad GBT can actually create a clean, professional one for you. And for those eye-catching website images that just make your website look premium, we're going to use my favorite image generation tool to create really custom visuals that perfectly match your brand.
Finally, it will bring it all together using what I consider to be the single best AI website builder on the market right now.
This tool is going to give you a pretty amazing starting point that you can then customize with zero coding knowledge to bring all your content to life.
The best part is all of these tools are really accessible and affordable even if you're just starting out. So, let's get started right here on Chat GPT. So, I'm just going to go ahead and paste in this whole prompt.
It's a really long one, so you're just going to want to grab that from the description below. Pop it in here.
And then you're going to just take everything that's in in these brackets and you're just going to replace it with your own business information.
So in this case, let's say we're making this for a dog walking business. So I'm just going to put in the name of the business here, the goodest boy dog walking offering dog walking services.
And then I'm not going to read all this.
You can look over it if you want to.
I'm just going to make sure we have everything accounted for here. And then we need to put in some information about your client.
So, whatever you know about your client already, in this case, it might be something like, I have 30ome single professionals who own a dog but might work crazy hours and live in the city of Chicago.
So, you just put in whatever you know about them to begin with. Then, this is the important part.
You're going to want to click on deep research. So, with the free plan, you do get a certain number of these deep researches, and then you get more with the paid plans, but I'm just going to go ahead and click on the get started button. And then what it always does is it's going to come back and it's going to ask you a series of questions just so that it gets everything exactly right. So, I'll just go ahead and quickly answer these.
So, I just answer their questions.
You don't have to put too much into it.
You don't have to like think of how you're answering them.
Just put the answers in and you're good to go. Then, I'm going to click on the arrow. Okay.
Okay, so now it's going to do its thing and it can take anywhere from 15 to 20 minutes to kind of do all that research.
So rather than waiting, let's get started with our next step here. And that next step is actually to get set up with our AI web builder. So the one I happen to love, it's called Hostinger.
It's my favorite web hosting platform of any kind.
So even if you're not going to do it with AI, I still recommend going with Hostinger.
And if you use my unique link, you're going to get some money off.
In fact, 78% off. So just go to wesmcdowel.
com/hosting and you're going to get a really good deal here.
So just going to click on claim deal and then we have to pick the plan. Now you are going to need the business plan to do the AI part and I recommend going that route anyway simply because of the the speed because let me find it here.
It gives you the the free CDN really makes it a lot faster.
So when we're really talking about a difference of like less than a dollar a month, I think the business plan is the way to go. So but up to you.
I'm just going to click on choose plan.
Then you choose the period, right?
So anywhere from 1 month to 48 months.
I'm just going to do 48 months because that gives us the best deal. And then you can see here um it's only $172 for four years of hosting. And the other thing I forgot to mention, you do get a free domain when you do this, too.
So that's your address if you don't already have one.
So normally you have to pay for that, but in this case it's free.
So I'm going to click on continue. And then you just register with your email address and make up a password. Then you're just going to fill in all your billing address and your payment information.
And then I've chosen the option for the AI website builder. Not WordPress, but the AI website builder. And then we get to the screen. So this is where you're actually just going to put in the name of your business and a brief description here.
Now, you've got 700 characters here.
I recommend just maxing it out because the more you put in here, the better starting point you're going to get from your AI website. But this is good enough for now. And I'm just going to click on create a website.
and it's just going to take a couple minutes to get all the pieces together.
Okay, so here is our starting point.
So, this isn't done by any means, but it's a great place to start. So, we've got this nice hero section with a headline and a cool video background. And then we've got all these sections underneath it.
And it's really easy to add new sections and delete any that you don't need.
So the first thing I'm going to do is we can choose a color palette right over here.
So, this is really cool.
It's just a really clever way to keep your colors in check so that you're never um going too far out of bounds because if you're not a designer, it's very easy to get caught up in what colors work well together and adding too many colors and then it becomes kind of a circus.
I think the color schemes they've got here are great.
Maybe I like this one the most.
It's kind of got a nice red in there.
So then once we've chosen that if we scroll down, we'll see kind of this color scheme in action.
And you've got the red down here. And it just keeps track of all the colors so we can use them wherever we need to. So once you've picked out your color scheme you want to go with, just click on continue. Okay.
So now we're inside of the website editor.
The first thing we want to do while we're still waiting for all of our website copy is to probably change our logo up here. So um you could just go ahead and keep a simple textbased logo if you want. Nothing wrong with that.
If you did want to do that, you would just click on text and then you can change the font of that. you know, all these Google fonts you have at your disposal so you could just choose something that looks good.
But I think we can do a little bit better and actually use ChatGBT's new image generation capabilities to make a really cool logo in just a few seconds. So, let's go ahead in ChatGpt. Making sure that we have ChatGpt 40 selected.
That's the good image generation model.
I'm just going to type in this general prompt.
Make a logo for my dog walking business called The Goodest Boy. Make it a transparent PNG file. That's going to make sure that the there's no background color.
So, you can just lay it on top of any color and you're good to go.
And then I'm saying make it horizontal for website use cuz what you don't want is a logo that's tall because that doesn't look good in a space like this, right?
You want it to be longer than it is tall.
So, that's why we said that.
So let's go ahead and let that run. Okay.
So, it took 13 seconds and this is what we've got.
I think it looks pretty good.
But if for whatever reason you didn't like it, all you have to do is tell it what you want it to change and just go back and forth with it and you'll get it.
So I would just click on the download button to download it.
And then going back to our page, I'm just going to click on the logo. We're going to click on image because we want to upload an image.
So I'll click on replace and then upload files. Just going to choose that here and then select.
Looks pretty good. And you can change the the size of it too just with this little slider.
It's really nice. What we don't want is something like this. It's just too much space on top. So, we want it to be more like in this range here.
All right looking good. I think we can move on.
So, let's check on our website copy now.
Okay, so here's what we've got.
It's got all this research first.
It's leading with just telling us like what it found in terms of what's going to work best for your industry on your homepage.
You know, it tells us all the the sites that it analyzed.
Then, we've got all these voice of customer phrases, right?
real things that real people have said that you can use on your website to kind of make it more powerful. So, that's great.
And then we're just going to keep going down until we get to the actual website copy here.
So, we have two headline options, which is what we asked it for.
So, here everything under here is our actual copy.
So, sorry, when I say copy that just means the text of of your website.
So, not everybody knows that term.
So, learning something new.
So this is meant to be our our headline for our website.
So, I'm just going to copy that.
And then I'm going to highlight this text right here and then edit text.
And then I am just going to paste it in.
But one thing I do want to show you too is what if you don't really like the fonts here?
What if you want to try something different?
Well, all we need to do is go over here on the side panel to where it says website styles.
Now, if we go over to fonts, we can see all of these combinations.
What we're looking at here is a headline and then this is what the paragraph text looks like.
So all you got to do is really just find a style that you like. I think I like this DM serif display. I think that looks pretty good.
I'm just going to click on reset.
Cool. And then if you scroll down, you can see it's I'm just going to close out of here. If you scroll down you can see it made that change all the way across the board. All the fonts are different.
So, I think this looks nice.
Okay, so we've replaced the headline.
Now, we need to replace the sub headline.
So, we'll go back to our document.
So, this is our sub headline right here.
And we'll just click on the text, edit text, and then we're just going to paste it in. And if it goes in as black, then all you need to do is just change the color here to white.
So it looks it looks right.
So, sometimes when you copy and paste stuff over from chatbt, that'll happen, but it's easy to change the color back.
Now, underneath that, we have two buttons. Now, I don't recommend if you want a really highly converting homepage to have two buttons here.
I think having the one is best.
So, I'm going to rightclick on learn and I'm going to click on delete just to get rid of it. And I also don't like the text here of just book.
That's really vague. So, what we what we've got here is something better. It says book your free trial walk. Much more descriptive.
So, we're just going to click on the button edit button and we're going to paste in our new text. And then you can see there's some issues happening here.
It's not big enough. So all we got to do is just kind of drag it to where it looks good.
Then see how it's not centered.
Really easy. We just drag it until we get that little line in the middle.
Now it is centered.
So everything is super customizable here.
I love it. But what if we don't want that button to look quite so transparent?
What if we want it to be a little more colorful, which I highly recommend for your call to action button. I'm going to click on edit again. And then we're going to go to style. And then for fill color, I'm going to choose our red.
So remember what I said about how choosing that color scheme keeps everything nice and consistent for you. This is what I'm talking about.
It keeps all your colors here.
So you don't have to like think too hard about choosing something new.
So I'm going to choose our red.
And I think this is shaping up pretty well.
So now we got to talk about the background here.
So this is a video and I think it's a nice looking video.
My only concern is it doesn't really feel like a professional dog walker and I don't know that it really goes along with this headline very well. It says come home to a calm, happy dog every workday.
So it's not necessarily about the dog walk.
It's about that feeling of coming home and now you get to enjoy your dog who's not stressed out and all that kind of stuff.
So, I think we can do better than this.
I will click on edit section.
And then, you know, you could choose an image if you want, but I'm going to stick with video. And I'm just going to click on replace video. And then you're just going to type in what you're looking for.
So, I'm I would type in something like, you know, happy dog in person.
Okay. So, we've got all these videos to choose from. So, then it's just a matter of like choosing which one do you like the most? This one seems kind of fun.
I like that one. So, I'll click on select.
Yeah, I think that works really nice.
All right, so now let's move on to our next section underneath this.
So the first thing we need to do is check our copywriting document and just make sure that what we have here is going to serve that content or not. And if it doesn't we have to come up with a new section block.
So we have here it looks like it's like a problem section of when you're at the office, worry still tags along.
It's basically painting the picture of the problem that your clients are going through. So let's see.
I feel like this could work. It could be the headline, then the paragraph, and it could be an image over here of maybe like a sad dog or something waiting for its owner at home. So, yeah, let's go ahead and get this going. So, I'm just going to copy our text and then paste it in here.
And I'll do the same for the paragraph underneath it. And I don't think these things really fit here.
So I'm just going to rightclick and delete them.
So, I mean, as you can see how customizable all this is, right?
like ever anything that you don't need you can delete.
So now we have the space for this image.
So where do you go to get really great images for your website.
So you've got a few options. So I'm just going to click on this. You could click on generate image. This is using AI.
You know, a dog sits by the front door waiting for his owner to come back home.
Nice modern apartment setting. So you do get um a certain number of credits basically to create these images from.
So let's just see what it comes back with and see if it's usable. Yeah.
So these dogs are like outside. So, I don't think it quite understood, but anyway you can keep going and see if you want to do that or you can click on edit image.
You can click on replace.
You can upload your own. But if you don't have any, I'm going to show you my favorite tool for getting really amazing AI images.
So, here we are on MidJourney.
Now, it's not completely free, but it's pretty cheap and you can always just pay for one month. I think it's 20 bucks.
And then get all your images for your website and then cancel if you don't need it again. But I'm just going to type in that same prompt. And then a little trick here. Here, I'm going to do dash dash R4.
So, the R means repeat.
So, it's going to create like a bunch of them all at once.
It's just a nice little time saver.
Go and create and let's see what we get.
All right. Look at all these choices.
Look at all these sad dogs.
It's worse than an ASPCA commercial.
All right. So, I think almost any of these could work.
I'm going to go ahead and choose this one. I like this one.
Just click on the little download button.
And now we're going to go back here.
And we're just going to click on replace image and then upload files.
And I'll click that one right here.
And then click on select. Look how nice that looks.
Like it's such a nice crisp image.
So now let's move on to the next section.
So this is like dog walking services.
Let's see what we have in our document here.
We keep your dog moving in your mind at peace. So this is kind of that like solution section.
The last one was painting the problem.
This one is saying don't worry, we're here.
We got you. So, what I like to have here is a nice image of you or your team so people can really see that there's real people behind the business.
So, let's take a look here. This is really more about like showing kind of like different services.
That's not really the section we have here. So, what we might need to do is add a new section.
Super easy to do. Just click on add section.
And you've got all these sections here in different categories.
I think about is probably going to be what we need the most. So, just look at all these different layouts.
I'm gonna choose this one just because it feels a little different from the others.
So, it breaks the content up so it's not all just, you know, an image on on the right side.
This is a little different.
I like it. You know what to do from here.
We're just going to go to our document.
We're going to copy uh what we've got and we're going to paste it over in here.
And then once again with the body copy.
Cool. And maybe you have some statistics right here that you want to use.
So, I would say something like 150 happy clients.
like maybe that's over 400 happy clients. So that it's easy to change it just like any other text and 15 years experience. Great.
This could be anything like you know awards won.
You can change whatever it says.
So uh the only thing I would say is this color does not go with our color scheme.
So it's going to click it and I'll go back to edit text. And then right here remember it keeps track of all of our colors.
Unfortunately now it's added this blue one to the mix. So, we just got to keep track of that and know that it's not part of our original color scheme unless you like it and it works.
But just going to click on the red and it will do the same for this one right here.
And for this image, remember how I said this is the section where you probably want to introduce yourself and your team.
So, let's get a really good image here of the dog walking team.
So I'm going to click on edit image replace, upload.
Now, this is an instance where you probably would not want to AI generate that image.
It should be a real one of you and or your team.
So, I've got a good one here.
Click on upload and then select. Okay.
So, you can see it's a weird dimension though.
It's kind of cutting people off but it's really easy to fix.
You just grab this little white thing here and just kind of slide it till it doesn't cut people's heads off anymore.
Maybe slide a little on the bottom and just keep going till it looks good.
Then you can just drag the whole thing down to where it looks good to you.
just make sure you're not uh getting too close to other elements.
Okay, so what comes next after this?
We have basically this looks like these are our benefits to working with this.
So we've got three different benefits each with a title and a description.
And I feel like this kind of works for that. I know it says services, but if we just change this to say, you know, benefits, like why trust us?
And then we probably don't need this little uh text block underneath it.
So I'm going to rightclick on delete.
And then we would just go one by one and add our benefits in here. So I'm just going to copy our first one and I'll paste it right in here.
And then our description.
And then I'll just take care of the other two as well.
And then we've got this image here.
So if we don't really like that one, I don't feel like it fits the style that's black and white. So, I'm just going to go back to midjourney and I'm going to type in something here like closeup of a happy dog on a leash on a Chicago neighborhood sidewalk.
And I'm going to do the dash dash R three.
Again, that'll make 12 of them for us because it does four by default.
The more you ask for, the more you get.
So these are all pretty amazing.
You know this one's got three leashes.
You will find some problems sometimes with the AI generated images.
I think this guy looks pretty happy.
I'm going to I'm going to click on him and then just download and we'll click on the image, edit image replace image, and then upload files.
And there it is. Click on upload and then select.
Looking pretty good.
So, we haven't really talked much about backgrounds yet, though. So, what if we wanted to make switch it up because right now it's kind of a lot of white background images.
What if we wanted to make this a little more colorful and a little more impactful? Well, just choose the whole section. Edit section.
background. We'll stick with color.
And let's let's see what our red looks like.
I think that works pretty well.
And then it gives a little bit more visual impact for a really important section like this, too.
And if you ever want to move things around, like I feel like this might be a little too far away from that text, we can kind of move this here.
We can find this little thing here that says section height, and we can just move this around as well. So, there's a lot of things you can do here.
And let's check out what our next section is supposed to be. It's a testimonial section.
So, let's see what we can find here.
We have a testimonial here.
I think we can do better since we have like if we have multiple especially.
Let's go ahead and swap this out with a different one.
So, I'm going to click on add section and we'll go down and I'll find testimonials.
And I think this one's pretty cool.
It's got four right there.
So, let's say you've got, you know, four great testimonials.
We I'm not going to change these.
You we already know how to do it.
We click on edit. Just change the actual text and the person's name.
And then we would just choose the images by clicking on them. Edit image, replace upload.
I'll choose that one.
And then select. All right. And I'm just going to quickly do that for the rest of these.
All right. And next up, we have this kind of call to action section.
A simple one that just says ready for worry-free walks to fit your schedule.
Then we have a button. So let's see what we can find here. I'm just going to click on add section. They call this main.
I'm not sure what main really means, but this is kind of that type of section.
So, I'm just going to do one without an image. I think just something right here is nice. And then we're just going to pop in the text that we have.
And we don't really need this one.
So, I'm going to rightclick, delete.
Let's move this up a bit. And what if we actually want this text to be on two lines instead of three? So, what I'm going to do, I'm just going to kind of drag this out a bit. And then I'm just going to reenter it. The one thing I'm worried about now is just this whole section is very tall and I don't think it needs to be. So, I'm just going to line this up about here on top.
And I'm going to move this closer.
And then I'm going to go right here where it says section height.
And I'm just going to kind of eyeball it right about there. And maybe just kind of recenter stuff. Looking good.
But let's go ahead and make this background section dark.
So, let's click on edit section background color.
Let's choose one of these dark colors that it came with.
I think this one looks pretty good.
Now, obviously, we've lost our text pretty much. So, we got to click on that, edit text, and then we'll make this white.
And then we want this button to be the exact same as right here.
So I'm just going to click rightclick copy, and I'm going to go all the way down here, and then rightclick, paste.
So, we've got that. Right click.
I'm just going to delete this one.
And then I'm going to move this right about here.
And make sure it's centered. And I think that's great.
Now, I think the only section we have left is an FAQ section.
So, we're going to go back here and we're going to click on add a section.
And then we're going to find FAQ right here. It's a pretty simple section.
So, I think a nice uh two column layout might be the best.
I'm going to choose this one. And I'm not going to bore you by changing all this.
We already know how to do it.
Just click on edit text. And you're just going to pop in your FAQs and your answers along with it.
I'm just going to do that really quick on my own.
You get the idea. So now the only thing left to do is we have all these other sections underneath that we don't need anymore.
So I'm just going to click on this section and then go over to the trash can to delete it. And one more time.
Then just go ahead and put in your business name here. You can put in your phone number.
I don't recommend putting in your email address. It's much better for people just to fill out a form to email you than to publish it.
you're going to get a lot of spam that way.
And just click on each one of your social icons.
And then you just put in your own links.
And you know, if you don't have Tik Tok, for instance, for your business, you just click on the gear delete it, and then the only thing left to do is to preview it just to make sure it looks good. So this is what we've got.
I think it looks pretty nice.
And it definitely has all the right information to convert customers all on its own.
So, one last step is just click on go live to make it actually live so people can see it. So, the first thing you need to do if you haven't already is grab my coupon code for hosting or so.
Click right here to get that and I do get a small commission when you do, but this is the most affordable way of getting your new site up in minutes.
So be sure to click here to grab your discount and grab the chat GBT prompt in the description below. I cannot wait to see what you're going to create.
Loading video analysis...