7 AI Tools To Build an Entire Website

In my opinion, pretty much everybody needs a website. Whether it's a blog where you just want to share your thoughts and ideas and opinions, a digital storefront where you sell your products, or a place to sell digital courses, I really think a website is a useful thing for everyone to have. I want to break down a handful of AI enabled tools that'll help you get a website online quick and easy without any sort of technical knowledge necessary. Let's get into it, starting with a tool called Reloom. You can find this one over@Reloomio and this is a great tool that uses AI to sort of map out your entire website. They have a free plan that's free forever to develop a very simple website, as well as more premium plans for people that are using tools like webflow and figma. But let's go ahead and start for free and take a quick peek at what this tool is capable of. Once we're inside of Reloom, we can click on New Project up here. And over on the right it asks us to enter a prompt of what our website is all about. Let's say we're creating a website all about drones and drone reviews and what drones are good for what purposes. So I'll go ahead and enter a quick prompt a website that reviews and compares camera drones to help people decide what the best drone for them is. And then we'll click Generate Sitemap and it's starting to build out a site map for us. And just like that, we have our homepage. A little bit of a layout for our homepage, hero section, feature section, feature list, call to action, reviews, pricing, comparison, testimonials, FAQs, and then our footer. And then, and then we've got some other little pages branching off here, like an About Us page, reviews, comparison guide, Contact Us and Review article. And any one of these I can click Generate content and it will build out the design for this page as well. And now we've got a nice little flow for the copy of our About Us page. I can go through and have it generate content for each of the rest of these pages here, just like this. And there we go. Using AI, I created a entire site map with individual sections of each page of the sitemap. Now I can scroll up to the top and click on this button that says wireframe and actually get a rough idea of what each of these pages could look like if I hit control and then use my little scroll wheel on my mouse, press down on the center button on my mouse and I can look around and we can see we've got a designed page here using Reloom with all of the sections that our sitemap just told us to build. So now we're not starting from a blank slate. Next, we need hosting. And for hosting I recommend Hostinger, who has happens to be the sponsor of today's video. And because they sponsored this video, they've hooked you up with a little bit of a deal. So if you head over to hostinger.com Matt Wolf, you can get your website for as little as 2.99amonth and two months free. But what's really cool about Hostinger is it will actually build your website for you with AI on WordPress as well. So let's go ahead and click Claim Deal. We're going to select the business website builder because if we take a peek here, but most of the AI tools are under this plan, you could grab the premium, but you're not going to get the AI features that I'm about to show you. So let's go ahead and add this to our cart. They have different plans based on how long you subscribe for. So if you know you're going to have your website for at least four years, might as well select the 48 months plan and just prepay the full four years. But select whichever option works best for you. Fill out all of your details, but then down here where it says have a coupon code, go ahead and click on that. And if you enter the coupon code Matt Wolf, no spaces in the middle and click Apply, you see you get an even bigger discount. Once we're inside the hostinger backend, we can go ahead and click Add Website. We'll do the Hostinger website builder and now we have the option to let AI create our website in minutes. So let's go ahead and start creating brand name. I'm going to go ahead and call it Drone World website type. I'm going to create do a blog for description. It lets me just speak out the description. So I'm gonna go ahead and do that. A website that compares and reviews camera drones to help consumers make the best decision on which drones to purchase. Now I'll go ahead and click Create website. And now AI is doing the work of setting everything up for us. And check this out, we have a website live already. It says Drone World. Drone World compare and reviewed camera drones. It's got pictures that automatically pulled in of a drone. It's a photography pictures. So it understood the context of what I was looking for and built a really simple website to start out, but now let's go ahead and edit the site and we can change anything we want on the site. But I want to mess with the color scheme a little bit first, which is where our third tool comes into the mix, which is called ColorMind. And ColorMind is a tool that uses machine learning to find color palettes that work together. So the first thing you're going to do when you come to colormind IO, which is totally free by the way, is have it generate just a random color palette and let's say you really like one of the colors it generated. Let's say I really like this blue. I can click this lock button, lock this blue in, and now it's going to keep that blue there and find other colors that match well with this design here. Let's say I really like this blue, this yellow and this red. But I'm not quite sure about these two colors. I'll lock these in, generate some more variations, and I think that's a pretty cool looking color palette now. And I've got all of the codes to be able to use these colors on my website. But we can jump back to our editor, click on website styles, and here's where all of our colors are selected. I'll go ahead and grab our color code from ColorMind, change this color here to our new color that we just copied. We'll grab our secondary color and we'll go through one at a time and change all of these colors to the new colors that we just found. And just like that, we've got the color palette that we just picked out using AI and it looks pretty good. Now if I was building, building this site to actually go live, I would spend a little extra time on the color selection. But I just want to make you aware of these tools. I don't want to make a huge long tutorial about building a website that may be a future video. But now that we've got our color scheme dialed in that we really like, let's find some good fonts for our website. That's where font joy comes in. This is another AI site that uses machine learning to figure out what fonts pair well together. And similar to the colors, we, we can sit here and generate a few different font styles until we find a font that we really like here. And let's just say I like this Roboto condensed font. I want that to be the main font on the site. I'll go ahead and lock that in now. It's going to make sure this font stays the same I can generate again until it finds a couple fonts that look good. With this font. It took me a couple clicks, but I think I found it. I like this Work Sans and this hind Vedadara. I don't know how to pronounce that. Now that we've got our fonts, we can go back to our website. Go to our website styles and select the fonts that we want to use. For the headers, I'm going to go ahead and use Roboto Condensed, which was this first one that we found here. For our sub headers, we want to use Work Sans. I can go ahead and select that one. And we've got a font pairing that looks decent together again, I would probably play around with it. I don't know if I would just go this quickly and pick the first few fonts that I find, but it's a great way to take some of the thinking out of does this font look good when I use this font with it? So now we've got our site map, we've got our the bones of our website built here over on Hostinger. We've got our color scheme that AI helped us figure out with ColorMind. We've got our font pairings which we got through fontjoy. Com. Now it's time to start filling in some of the content here. For that, I'm going to use the, well, kind of cliche tools that everybody tells you to use to create the content portion. In my case, I'm either going to use ChatGPT to do it or I'm going to use Claude to do it. For the most part, the output is going to be fairly similar. The models that Claude is using and ChatGPT are using are so dang close now that for copy sort of things, they're both gonna work just as well as each other. The trick here is writing a prompt that gets you kind of the style of writing that you want. So let's go ahead and give it some details. I'll go ahead and use Claude for this example. So I started off my prompt by giving some details about the site. I'm creating a website that reviews drones. The idea is that I review and compare drones to help consumers make good decisions. And then I'm gonna tell it what I need. I need some website copies so that when people land on my site, they actually want to use it and then give it some additional inst to start. You can see we've got a header and a subheader. So let's go ahead and have it write A header and a subheader. Please write a heading and a subheading in the style of Alex Hormozi. Sometimes if you give it like a marketer's name, it might work a little bit better. I don't know how big of a deal it makes, but some people claim they get better results if they put like Alex Hermosi or David Ogilvie or someone like that. So I'll put both those names in there. Please write a heading and a subheading in the style of Alex Hormozi and David Ogilvie and let's see what it generates. So it gave us a heading. The Ultimate Drone Buyer's Guide. Soar to new heights with the perfect UAV subheading. Discover the best drones for your needs and budget. Expert review side by side comparisons and insider tips to help you make an informed decision. And then it gave a whole explanation here of why it gave us this heading and subheading. So let's go ahead and copy our heading here and pull it in and replace this and we'll grab our subheading, which is right here, and we'll paste that into the subheading here. And now we've got our copy written for the heading. Of course, you would then repeat this step for each section of your website as well. Then of course we're going to want some other images than what are here. I do like that they used a DJI Mavic 2 for this image, but I want some other images for throughout the website. And there are a ton of other tools to generate images. You've got Midjourney, which comes with a small fee to use. You've got Dall E3, which you can actually use for free over@bing.com Images Create. You've got Leonardo AI, which uses stable diffusion and makes some really good images. You have Ideogram, which is actually pretty good at getting text inside of the images. Use whichever image generator you like the best. For this one, I'm going to go ahead and use Mid Journey and I'm going to use the Mid Journey website because they just recently opened up the Mid Journey website for people to generate images without needing to go to discord. Let's go ahead and try a popular camera drone flying above a city skyline. We've got some extra settings here. I actually want to put it on Model Raw instead of standard to kind of get a more realistic image. And you can tweak some of these settings if you want, but I'm going to leave them on the default for the Most part. And we'll just go ahead and submit that. Now if I come over here to create, we could just wait for our images to generate and look at that. We got some pretty solid images here. Let's go ahead and click on this one. I mean that looks like a real image of a drone flying over a city. I could go ahead and click the little download button here, jump back to our website and let's replace this image here. I'll click on this change image button and drag and drop the image in that we just created. Select that. And now it's got a little bit more relevant of an image here. I also don't like that it was off centered. So I'll just drag it over and you can see a little grid pops up. And now I can center it below this image here again, pick your favorite image generator. There are so many out there these days, they're all pretty dang good. And then finally, let's talk about making these featured images for blog posts. My favorite tool for that is Canva because it's really easy to use Canva to take an image and add some text over it and remove the background of certain elements of images and things like that. In Canva, what I would do is come up to the top, click, create a design. Let's go ahead and create a YouTube thumbnail. I know this isn't specifically a YouTube thumbnail, but YouTube thumbnails tend to be a good sort of aspect ratio for blog featured images as well. And they have a ton of templates here that you can pick from. But I don't want to use any of the templates that it started with. Instead let's click on Magic Media down here and we can just use their built in image generator if we want have the option to create images or graphics. You can see there's a slight difference in style. I'm going to go ahead and use images and what's cool is you can get a very consistent style. So every single featured image for every blog post that you create has the same style every time. Let's try Filmic and let's try a camera drone flying above a city skyline. And let's generate again. Now we got some images that are pretty decent. Let's go ahead and click on a couple of them, see what they look like. That one's not too bad. I'm going to go ahead and right click on it and set this image as the background you can see. Now we've got a drone flying with a sort of blurred out city in the background, I want it to look like a featured image or like a YouTube thumbnail thing that sort of attracts the click. So I'm gonna look through my own uploads here and I have some images of myself saved into Canva already. So I've got this image here of me, like pointing. So let's go ahead and select this image. But it's got a background on it. So let's go ahead and use AI to get rid of the background. I'll click on Edit Photo. Click on Background Remover. Now, I believe this is only in the paid version of Canva, but it works really, really well. So I'll go ahead and pull this in and make it look like, hey, I'm pointing at this drone right here. Isn't this exciting? Then to make myself stand out a little bit in this image, I like to put a little outline on it. So I'm going to click on Edit photo again. I'll select Shadows down here and then under shadows I'll select Outline. And you can see it put a black outline around me. That doesn't look great. So I'm going to change this to a white outline which looks a little bit better. And now I've got a drone flying me, looking excited, pointing at the drone. We can add some text that says the best drones for city flights. Select our text here and then we have a ton of fonts to choose from. And if we want, we can go right back to the exact same font style that we've been using for our website already, which is Roboto Condensed. So let's go ahead and grab Roboto Condensed, set that as our text here. Maybe stretch it out a bit so it covers the entire image, add some effects so it pops off the screen. Maybe a drop shadow, but like a light drop shadow like that. And now we've got a pretty quickly made featured image using Canva and various AI features Canva has. And go ahead and save this as featured image. Click Share. We'll download this image as a JPEG here, jump back over to our website, change out our featured image to the one we just created. I'll go ahead and resize it a little bit so it uses the full image. And there's our featured image with the text from the blog post right here. Even slide this down a little bit so it has a little bit of an extra space and just continue to tweak and iterate on this page. But I mean, we've got the site map for our entire page figured out using Reloom. So we know exactly what pages we should build to get the thing started. We built the entire website using AI with a couple clicks using Hostinger use coupon code Matt Wolf to get an extra discount. We used ColorMind to use AI to figure out a color scheme that would work well for our website. We used fontjoy to figure out some font pairings that will work really well on the website. Then we used either ChatGPT or Claude to write the copy for the website. We used whatever our favorite image generator is to generate the images on the website. In my case I used Midjourney, but you can use midjourney Leonardo Dall E3 through Bing Copilot. And then with our last step we used Canva to create the featured images for the blog posts on our website. So pretty much everything we need to do to build a page Pretty decent website you can do with AI now, now again, this is for a pretty decent website. So I think AI is at a point where I can plug in a prompt and it makes a beautiful polished website that looks like a multi million dollar company would have. Not quite there yet, but you can get pretty dang close with a lot of the AI tools that are available and with a little bit extra tweaking and you know, twisted knobs and things like that inside of some of these tools and you can get it really, really dialed in over time. These were all super quick examples to show you what's possible, but with a little bit of extra effort you can really, really dial in a beautiful website. So those are the tools that I wanted to show off. If you like this video and you want to see more about building websites and things like that using AI tools, let me know. I'm happy to make more videos like this. Thank you so much to Hostinger for sponsoring this video. And if you want to find a whole bunch of cool AI tools and and stay in the loop with the latest AI news, check out FutureTools IO. This is where I curate all of the coolest tools that I come across. It's updated almost every day. I keep the news up to date on a daily basis and there's a free newsletter that if you sign up, I'll send you just the coolest tools and the most important news that I come across. I'm also going to be giving away an Insta360X4. If you want to win this Insta360X4, the newest camera from Insta360, all you have to do is be subscribed to the YouTube channel and make sure you join the free newsletter over at FutureTools IE and you'll be entered to win this camera this month. But every single month from here on out, I'm going to be giving away cool free gadgets that I come across or that some of these companies send me to review. I'm going to turn around and pass it along and share some of the cool gadgets with people that subscribe to the channel and the newsletter. Head on over to Future Tools IO. Make sure you join the free newsletter if you're not already subscribe to this channel and I'll be hooking up subscribers that are subscribed in both places every single month from here on out with cool goodies. Thank you so much for tuning in. I hope you learned something. I hope you found out about a new tool that's helpful to you. If you know anybody else that's trying to build a website and they need a little nudge or they're making excuses for why they haven't started yet, send them over to this video. Hopefully some of these tools can get them going and get their website up and running quickly. So thanks again. Really, really appreciate you. I'm done rambling. Thanks for nerding out with me. See you in the next video. Bye bye.