How To Build A $10,000 Website With No-Code + AI

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
this website this website and this website were all built with no code and there are these three incredible tools that when combined allow you to build $110,000 websites in minutes with no code and AI so let me show you how to do it okay so up until now building a website would require lots of different people a programmer who would build it out a designer who would create the designs a project manager who would oversee and communicate with the client and usually the process could take weeks months or even sometimes s years but right now with Incredible no code tools and AI we can do that in a matter of hours now the first tool I'm going to talk about is the reason why this entire thing is currently possible and it's called reloom now reloom actually started as a components library for a building tool called Web flow but the AI website builder that reloom has just released is completely groundbreaking so let's dig in and I'm going to show you how you can use it so if you go to reloom doio you're going to be able to go down to the right hand side here and you're going to find the the AI site Builder and the first thing it's going to really ask you to do is to describe the company or describe what you're trying to build as a website so we are no code is an online school for entrepreneurs to launch their startup with no code tools and if I just input this I'm basically going to be able to click on this generate button over here and then in less than 1 second as you can see here it's basically going to just create a sitemap so what's a sitemap well a sitemap is basically an outline of what the website it's going to look like what are the different pages that we're going to have what are the different sections on that page and how do each one connect to each other so in a matter of just a couple seconds this generated a first one I can also ask it to generate the additional Pages underneath it and come here and just put generate it's going to go ahead and build those out so you see this is actually live so you can see how quickly this AI actually works and what you'll notice below actually is that it even determines which sections you might want as additional pages so here it's given me an about section A courses section A Blog a contact form and of course all of these are adaptable so now what I would do is I'd go to these individual sections down here and I would actually generate them so about us boom I can just do that you could also do them all at the same time but I'm basically just going to do them all separately here and as that's generating let's just go up here and check out these sections and I'm going to show you how to adapt each one of these sections so for example here it's the navigation bar perfect here there's going to be a hero section feature section right so maybe I'm going to take out the this one over here you can right click and just delete it maybe I going to want to take the benefit section and put it above hero then I want the benefits and a feature list then there's a how it works section um here I actually don't need this section cuz we're just going to be featuring the courses so I'll delete this and then I can do this for all the other sections as well if I want by just going below and adapting these so this is already absolutely amazing that's just done this automatically without asking me too too much I can adapt every single prompt that I want here the next thing that I would do is if I was building this $10,000 website for a client I'd actually just copy the link share it to that individual and then we could have a conversation around oh you know what we actually don't need this page we actually need an additional page now once we've agreed on the basics of the sit map what we want to do is build out a wireframe for those of you who don't know what a wireframe is it's basically a full structure of what the website will look like without having all of the elements in it and this is where this tool gets incredibly powerful by just clicking wireframe up here it's going to translate everything that we've just created as a Sit map in an actual wireframe with different sections but not only that it's writing out the copy for us so launch your startup with no code at we are no code right and here it's already going to be creating the different sections discover the benefits of enrolling in our no code startup school right each one one of these sections we can basically ask to rewrite it we can change the tone of it and this is basically the entire structure of your website already built out now just to be clear this would usually take weeks to do and it actually looks pretty darn good so if I kind of go into this and look at the different sections now what's so cool is that I can grab a section even and I have the choice to change which kind of section it is so here I could just come in here and I could check out the different layouts you could visualize as you can see here by changing a couple different things with a header without a header four columns instead of three uh we could replace the component as well if we wanted to you're basically building out this entire wireframe and you can really just determine what you're looking for here so there's so many different sections to choose from and let's say that I like this one okay I'm going to click on that it's going to autogenerate this rewrite all of the copy create all of the things it's really doing a great job at all this and again you can go through each one of the different sections and just adapt it as you wish so let's say oh this section it's cool I like this but actually I want this testimonial to look a little different right I want to Fe feature three different individuals I also want to have their pictures here boom I'm going to select this one and I want to put their star system review as well and as you can see it's basically building this whole thing out in a matter of seconds with AI and by the way if you are watching this video and you're interested in launching a business or a tech startup but you don't know how to program and you don't want to spend $50,000 on programmers then I highly recommend that you check out our program called the no code startup where we essentially allow you to build your next tech startup from scratch with powerful no code and AI tools so instead of trying to piece together the internet and figuring it out on your own work within a community with coaching and a proven step-by-step curriculum which is going to allow you to launch your startup in no time all you have to do is Click below and apply for the program we'll get back to you in 24 to 48 hours and now let's get back to the video and once you're done tweaking all of this again you can come here and you can share this grab your link send it to the person that you're building this $110,000 website for and you might think that we're done here but the next thing I'm going to do is going to blow you away as well so with reloom not only can we create the site maps and then convert those site Maps into wireframes but then we can either push it to a designer and keep designing inside of that wireframe or we can actually push it to a website builder like web flow and we're going to be able to actually build the whole thing out as a website so I'm quickly going to show you how you might do it if you want to continue to design but then I'm going to show you how to push this inside the website builder if you go to the top right here and once you finished this all up we can export here you're going to have the choice between pushing it to figma which is a very famous design tool or you can export to webflow which is probably the most beautiful and Powerful website builder today but there are a couple steps that you have to do to make this a reality so if I click on export to figma for example it's going to ask me to install the figma plugin I'm going to come here going to install the figma plugin once I install it it's automatically going to open figma and it's going to ask me to open reloom library now the other thing that I'm going to need is going to be the figma kit so if you come to rom. again I can grab the figma kit and it's actually going to open up in figma as you can see right here then here I'm going to click open in and I'm going to select the Free reloom Library that you see here then I'll come here I'll click run I'm going to go and create this new tab that I'm going to call new website and then what I'm going to do is go back into my project over here I'm going to copy and I'm essentially going to bring it now inside here and I'm going to paste it and right now what's happening is that it is building this entire thing out within the figma project that I've created and boom just in about 30 seconds it's built this entire website out for me in figma as you see it's been using the elements from reloom here they've all been recreated and now we can start designing within this and as you can see it's also built out a mobile version and then once you generated this you can actually change all of the styles that you'd like you could start designing on of this if this is the next step that you're going to want to do with your customer right and one thing I would recommend here is that if you're trying to change something I would actually come to the style guide here and adapt things inside the style guide because this is going to actually change them throughout the entire project so for example if I wanted to change this button I wanted to make it a different color and maybe wanted to have some rounded edges you just go inside the style guide so all I would have to do here would be to come to the UI elements to find the specific button that I want to change up here boom click on this and then I can basically come down here and change the color of that if I wanted to so let's say that I wanted this instead of being black I wanted it to be a different custom color let's say I want to be this blue excellent so let's say I wanted to have roughly rounded edges I could just do this input it and now this button looks like this I could also choose to change other buttons and so I can do the same thing here and then what happens is that when I go to my website it's automatically going to go into all the sections which have this specific button and it's going to change the color of them throughout the entire process project so basically this is the best way to be able to adapt elements inside of your figma file uh for them to reflect throughout the entire project and so this part is really to design everything within figma however you could also choose to skip this and go back to the project and actually export it straight to web flow which is going to allow you to build it I'm back here inside my project I'm going to go export webflow it's going to ask for a similar thing and so here what I'm going to do is copy to web flow now the next thing it's going to prompt me to do is to clone the style guide again so we can have these elements inside of webflow automatically excellent clone in webflow create site and then here what I'm going to do is I'm going to create a new page add a page I can delete everything that's inside this project and I can go ahead and come back to my project and then paste it here and as you can see here it has imported the entire project over here and what's amazing about this is that it actually already is created for responsive design which means that it's also going to look really nice in mobile this is a fully built website I could come here to the right and basically publish it uh I could choose to connect it to a domain publish it and as you can see everything that we've actually built out is here and we can just start replacing things out so for example here I want to change this image I can simply go and change this to Let's upload an image from our folder over here and boom just like that we've replaced it and what I love about this is that we can then very quickly preview it as well so like if I were to come here and press on this we're going to be able to preview what it actually looks like and um yeah it's absolutely amazing what's possible so let's just switch this out for example we can choose an image replace the image come here replace the logo and just like that you can build a $10,000 website with no code tools now all the tools I've used today you can find Below in the description so if you're trying to build a 10 $1,000 website for yourself or to sell to a customer then you can use reloom and then you can push it either into figma and design or straight to web flow and to build and if you're trying to make your website incredibly impressive you can easily do that by incorporating 3D design or even animations inside your website so the best tool for that would be spline where you can either use an existing template or you could create one completely from scratch and that often times can make a huge difference so you could have a 3D iPhone mockup up you could have a 3D character you could have a entire interactive 3D experience and yeah when you see these things on a website they just look very impressive and it can often times be the difference between A5 and $10,000 website and if you're going for an animation for example you could have that animation interact when you scroll down the website you could have it interact when you move the mouse around it so if you're looking for the 3D look definitely check out spline and as you can see no code in AI does all the heavy lifting for you but if you're looking to build something it's a little bit more complex then check out this video cuz I've tried more than 200 no code tools and I'm going to tell you which one is going to be the best for your project subscribe to the channel and I'll see you guys in the next video Let's Go
Info
Channel: WeAreNoCode - Learn No-Code!
Views: 373,551
Rating: undefined out of 5
Keywords:
Id: ROjFr9yz0tI
Channel Id: undefined
Length: 12min 41sec (761 seconds)
Published: Thu Jan 11 2024
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.