Big Idea

The argument in one line.

AI website builders that generate a full site from one prompt and then hand off to a visual editor remove the back-and-forth chat tax and the separate hosting, domain, and code-export steps that AI dev tools require.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

Someone choosing between AI chat tools, AI dev tools, and AI website builders who wants a clear decision framework instead of trying all of them.
A beginner who wants a professional, client-ready website built from a single prompt without learning to code or editing raw HTML or CSS.
Someone who wants hosting, a domain, and a drag-and-drop editor bundled in one place instead of juggling separate accounts for each.

SKIP IF…

You already have a developer workflow and are comfortable exporting AI-generated code into your own hosting environment.
You need deep custom functionality, like databases or user logins, that a template-based website builder can't handle.

TL;DR

The full version, fast.

Picking an AI website tool is confusing because chat tools (Claude, ChatGPT), AI dev tools (Lovable, Base44, Bolt), and AI website builders solve different problems. Dev tools require constant back-and-forth chat edits that burn credits and can break working sections, then force you to export code and find separate hosting. Website builders generate a full site from one prompt, then hand control to a visual drag-and-drop editor so further changes don't cost chat credits. The walkthrough covers choosing a hosting plan, writing a detailed prompt drafted first in a chat tool, customizing colors, fonts, copy, buttons, and images, building a contact form, adding a logo and extra pages, checking the mobile layout, and publishing to a live domain.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 01:10

01 · Intro

Opens on the overwhelm of choosing an AI website tool (Lovable, Claude, Base44, ChatGPT, Wix, Squarespace, Framer, Bolt) and promises a single-prompt build with a built-in visual editor and a live custom domain by the end.

01:10 – 03:33

02 · 1. Choose a Tool

Breaks AI website tools into three categories: AI chat tools (Claude, ChatGPT), AI dev tools (Lovable, Base44, Replit, Bolt, Builder.io, durable), and AI website builders (Hostinger, Wix, Squarespace, Framer, duda, GoDaddy, Figma, Webflow). Dev tools require constant AI chat edits and manual code export plus hosting setup; builders generate from a prompt then hand off to a visual editor. Picks Hostinger for price against Wix and Squarespace.

03:33 – 05:48

03 · 2. Get Web Hosting

Walks through checkout: picking the Business plan for more storage, mailboxes, and e-commerce headroom, choosing a 12-month term to still get a free domain, applying a coupon code, registering or logging in, and submitting payment.

05:48 – 06:08

04 · 3. Install Ai Website Builder

Chooses to create a new site, skips personalization, and picks the drag-and-drop builder option over AI vibe-coding and WordPress paths.

06:08 – 06:43

05 · 4. Secure Custom Domain Name

Types a new domain name into the free-domain search, confirms availability, and registers it to the account.

06:43 – 08:40

06 · 5. Start with a Prompt

Drafts the site-generation prompt in a chat tool first for more detail, pastes it into the builder to generate a multi-page template, then edits the prompt to add one page and regenerates a cleaner single-page site from scratch.

08:40 – 17:26

07 · 6. Customize Your Website

The main editing chapter: swaps the background image and zeroes out the overlay, recolors and repositions and aligns hero text, sets a global font pairing so pasted text doesn't revert, rewrites copy with AI help, and fully styles a button, its text, link, fill and hover color, size, and load animation. Then shows group-select dragging, element duplication, dragging in new image elements, layering a photo inside a laptop mockup, and reordering sections.

17:26 – 19:05

08 · 7. Edit Contact Form

Edits the contact form's destination email, adds and removes fields, edits placeholder text, renames the submit button and its post-submission message, and restyles the submit button's colors.

19:05 – 20:31

09 · 8. Edit Header Menu + Logo

Prompts an image AI for a simple black circular logo with a transparent background, uploads it to replace the placeholder logo, and resizes the logo width in the header.

20:31 – 21:23

10 · 9. Add New Pages

Adds a templated About page from the page-template gallery, sets its navigation label and URL slug, and repeats for a couple more pages so they appear in the header menu.

21:23 – 22:35

11 · 10. Edit Website For Mobile

Switches to the mobile preview and fixes spacing and text-size issues independently of the desktop layout, confirming edits made in mobile view don't affect desktop.

22:35 – 23:39

12 · 11. Launch Your Website

Clicks to go live, confirms the update, views the published site, then closes with a like, subscribe, and comment ask and a repeat of the hosting discount link.

Atomic Insights

Lines worth screenshotting.

AI chat tools and AI dev tools both require redoing a back-and-forth chat conversation every time you want to change something on the site, which burns credits and can break parts that already worked.
AI website builders generate a complete site from one prompt, then switch to a visual editor so further changes are made by clicking and dragging, not by chatting.
AI dev tools leave you to export the finished HTML, then separately buy hosting and a domain and upload the code yourself, a process confusing enough that it isn't beginner-friendly.
A 12-month hosting plan is the shortest term that still includes a free domain name for a full year, since shorter plans don't justify the setup time.
Writing the site-generation prompt in a separate chat tool first, then pasting the finished prompt into the website builder, produces a more detailed and accurate result than typing directly into the builder.
Editing a website builder's prompt and regenerating creates an entirely new site from scratch rather than revising the existing one, with a one-click way to return to the previous version.
Changing a site's font pairing through the global styles panel, instead of per text block, prevents newly pasted text from reverting to a different font.
Selecting multiple elements by dragging a box around them lets you reposition a whole group at once instead of moving each one individually.
Sending an image to the back of the layer stack is how a photo gets layered inside a mockup graphic, like a laptop screen, without obscuring it.
Over 60% of website traffic is now mobile, and a page builder's mobile layout edits are stored separately from the desktop version so neither layout affects the other.
A logo generated by an image AI with a transparent-background PNG request can be dropped straight into a website builder's header with no separate editing step.

Takeaway

Pick the Website Tool by Workflow, Not Hype

WHAT TO LEARN

Choosing an AI website tool comes down to matching the tool's actual job, chat, app-building, or site-building, to how much visual editing and hosting setup you're willing to do yourself.

021. Choose a Tool

AI chat tools like Claude and ChatGPT can build a site but weren't designed for it, so every change means another back-and-forth conversation that costs credits.
AI dev tools like Lovable and Base44 build real apps, but still require exporting the code, then separately buying hosting and a domain and uploading it yourself.
AI website builders generate a full site from a prompt, then switch to a visual editor so further edits are drag-and-drop, not another AI chat exchange.

032. Get Web Hosting

A 12-month hosting term is the practical floor, since it still includes a full year of free domain registration that a 1-month plan would make you pay for separately.
A coupon code applied at checkout can meaningfully cut the advertised monthly price, so it's worth checking for one before paying full rate.
Bundling hosting, domain, and the AI builder into a single account removes a step that AI dev tools force you to do manually.

043. Install Ai Website Builder

A site-building platform typically offers more than one build path, drag-and-drop, AI chat-based building, and traditional CMS, at the same install step, so the choice is made once, up front.
Choosing the drag-and-drop path up front is what unlocks the rest of the visual-editor workflow the walkthrough relies on, instead of a code-based or chat-based path.

054. Secure Custom Domain Name

Registering the domain immediately after installing the builder locks in the free-domain benefit from the hosting plan before it can be forgotten.
If a chosen domain name is already taken, the registration screen surfaces alternatives immediately rather than requiring a separate search.

065. Start with a Prompt

Drafting the website-generation prompt in a separate chat tool first, with specific details about the business and goals, produces a more accurate first draft than typing straight into the builder's prompt box.
Editing the prompt and regenerating rebuilds the site from scratch rather than revising it, so testing variations, like switching to a one-page layout, is low-risk since a one-click revert exists.

076. Customize Your Website

Changing fonts through the builder's global style panel, not by editing individual text blocks, prevents newly pasted text from snapping back to a different font.
Selecting multiple elements at once by dragging a box around them, instead of moving each one individually, is what makes group repositioning fast.
Sending an image to the back of the layer stack is the mechanism for compositing a photo inside a graphic frame, like a laptop mockup.

087. Edit Contact Form

A contact form's destination email, field list, and button text are all editable independently, so a generic template form can be trimmed down to only the fields actually needed.
The post-submission confirmation message is a separate editable field from the button itself, easy to overlook but visible to every visitor who submits the form.

098. Edit Header Menu + Logo

Requesting a transparent-background PNG logo from an image-generating AI makes it drop straight into a website header with no separate background-removal step.
The navigation menu is generated automatically from the page list, so adding or renaming pages is what actually controls what shows in the header.

109. Add New Pages

Adding a new page from a pre-built template category, like an About page, is faster than building one section by section from empty.
Each new page's navigation label and its URL slug are edited separately, so the menu text and the web address don't have to match.

1110. Edit Website For Mobile

Over 60% of site traffic is mobile, which is the stated reason mobile layout gets a dedicated editing pass instead of being left to auto-resize.
Mobile layout changes are stored separately from desktop, so resizing text or spacing for phones never alters how the desktop version looks.

1211. Launch Your Website

Publishing is a single button that pushes every unsaved visual-editor change live at once, rather than requiring a separate deploy or export step.
A confirmation screen after publishing offers direct links to view and share the live site, closing the loop from edit to public URL in one click.

Glossary

Terms worth knowing.

AI dev tool: A chat-based AI product built primarily for coding or app generation that can also build websites but requires exporting the code and setting up hosting separately.
AI website builder: A website-building platform with AI built in that generates a full site from a prompt and then lets you edit it visually, with hosting and a domain included in the same product.
Drag-and-drop builder: A visual website editor where sections, text, images, and buttons are repositioned and customized by clicking and dragging, without writing code.
Overlay opacity: A setting that controls how dark a semi-transparent layer sits on top of a background image or video. Dragging it to zero removes the dark tint entirely.
Fixed background: A background image setting that keeps the image stationary while the page content scrolls over it, creating a parallax-style effect.

Resources

Things they pointed at.

01:10toolClaude

01:10toolChatGPT

01:10toolLovable

01:10toolBase44

02:32toolHostinger ↗

02:32toolWix

02:32toolSquarespace

02:32toolFramer

Quotables

Lines you could clip.

00:10

“Choosing the wrong tool for your project can cost you lots of time, money, and headache in switching to a better tool later.”

names the core pain point driving the whole video→ TikTok hook↗ Tweet quote

01:40

“Sometimes the AI fixes one thing, but then accidentally breaks three other things that you were already happy with.”

relatable frustration with AI coding tools→ IG reel cold open↗ Tweet quote

03:50

“One month just really isn't enough time to get your website off the ground and making money.”

practical reasoning behind a specific plan-length recommendation→ newsletter pull-quote↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

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 Base44, 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 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 Base44, which are more focused on app building.

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 that 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 are 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've 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 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 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 Creative 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 lineup with that.

Plus one 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 Creator 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 one 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 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 in 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. And 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.

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 Open Sans. 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're 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 now 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 ChatGPT 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 create a 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 the desktop version, none of these changes affected our desktop version. 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 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.

Alright, my name is Dale from Creator Pro Website, and I will see you on the next video.

The Hook

The bait, then the rug-pull.

Everyone who searches for how to build a website with AI gets a different answer: Lovable, Claude, Base44, ChatGPT, Wix, Squarespace, Framer, Bolt. This walkthrough sorts that list into three real categories, then builds a full site start to finish with the one that needs no code export and no separate hosting account.

Frameworks

Named ideas worth stealing.

01:10list

Three Categories of AI Website Tools

AI chat tools (Claude, ChatGPT)
AI dev tools (Lovable, Base44, Bolt, Replit)
AI website builders (Hostinger, Wix, Squarespace, Framer)

A framework for sorting the crowded AI website-building landscape by what each category is actually built to do, used to justify picking a website builder over a dev tool for a beginner.

Steal forany comparison explainer for a crowded tool category

CTA Breakdown

How they asked for the click.

VERBAL ASK

03:33link

“go ahead and click on the very first link in the description, and that will take you here to my landing page... that's what's going to get you an even bigger discount”

repeated twice, once during the hosting-plan pitch and again at the very end, framed as a coupon-code discount rather than a hard sell, with an on-screen coupon callout used as the trust cue

MENTIONED ON CAMERA

02:32toolHostinger ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.