🤣 Found the WORST Site & Rebuilt It in 15 Minutes with AI

0:00 oh my God the before 6 minutes later 0:03 three prompts unlovable this is madness 0:06 love coding part three we are back we're 0:08 going to find the ugliest website on 0:10 Google Maps a local business in San 0:12 Diego area and I'm going to use lovable 0:14 Ai No code tool and I'm going to 0:16 completely remake it in under 10 minutes 0:18 so this is part three you guys could 0:20 check out the other videos let's just 0:21 jump right into it I'm not going to 0:22 waste any time pretty straightforward 0:23 I'm going to find the ugliest site and 0:25 we're going to hook them up or as I like 0:27 to say love code them to death and give 0:30 it to him for free so let's just scroll 0:31 through a few of these I picked roofers 0:33 I figur that would be a good industry to 0:34 go into so let's take a look let's keep 0:37 going this is the hardest part is 0:38 actually finding a bad site so let's try 0:40 this one RC this looks pretty nice let's 0:43 try this one costal when you see it oh 0:46 jackpot all right guys Coastal Crest 0:49 Roofing is uh gosh this is pretty bad as 0:52 you can see so we're going to use 0:54 lovable today if you guys haven't seen 0:55 it before you guys could check all the 0:56 stuff below and of course buy me a cup 0:58 of coffee which I appreciate and uh 0:59 we're just going to hook them up all 1:01 right first things first copy all this 1:03 text from the site and then we're going 1:05 to go to lovable and we're going to say 1:07 this I want to redesign this website 1:10 using the nicest most modern Sleek 1:13 design with animations rollovers Shadows 1:16 round edges make you look super sick 1:18 like a $10,000 website I also want to 1:21 use all the text I'm going to give you 1:22 below I want you to add buttons icons 1:26 any type of stock images related to this 1:28 business which is Roofing 1:30 period I want it to be a single page 1:32 landing page with navigation that goes 1:34 through the different sections I want to 1:36 use all the information from the text 1:38 below their phone number contact 1:40 information and anything in between and 1:42 that is a child and then we're just 1:44 going to paste all the information and 1:45 we're off and running so this is one 1:47 prompt to build the site from start to 1:49 finish it's absolutely amazing what this 1:51 thing can do if you guys have never seen 1:52 no code in development lovable is insane 1:55 for landing pages websites and it can do 1:57 a lot of other stuff too but for this 1:59 series I've been using lovable because 2:00 it's all about the love code baby so you 2:03 just having fun on the channel this is 2:04 definitely a series about giving back to 2:06 local businesses in the San Diego area 2:08 and and I just love doing it because it 2:10 is fun and it shows you the power of 2:11 these tools so the idea is not to have a 2:13 completed site you one promp the idea is 2:16 to build it out and then add the little 2:18 pieces that we need to change and 2:19 customize it and then send it over to 2:21 them and everybody asks what about 2:23 hosting what about domains what about 2:25 all this other crap guys this is a seven 2:27 minute tutorial just imagine what this 2:30 can be in 20 minutes or an hour even so 2:32 I'm going to contact him I'm going to 2:33 give him the source code if he knows how 2:35 to put it on he'll put it on and so on 2:36 but the idea of this is to really show 2:38 you the power of it and um and what you 2:40 can actually do in such a short amount 2:41 of time so this is a one prompter which 2:43 is fun and uh in the meantime you guys 2:45 could should definitely check out our 2:46 community it's called the no code AI 2:48 Army where we have now 2:50 2777 members actually seven triple 2:53 sevens a little luck I'm going to need 2:55 that next time for Vegas we have a bunch 2:57 of people in here people collaborating 2:58 creating developing we got no code 3:00 people we have designers we have 3:03 creators we have sess being built and so 3:06 on I don't want to bore you with all 3:07 this stuff we're going to get back to 3:07 the series B is available and all the 3:09 links are below and it is absolutely 3:11 free for you guys to join so definitely 3:13 have a look and we're about to get our 3:14 first version here and then we're going 3:16 to contact what's this gentleman's name 3:19 gosh does he even have his name on here 3:21 yeah he doesn't even have his name on 3:22 here we are going to hook this dude up 3:25 hold on roof repair contact Coastal 3:27 Crest Roofing you're on our radar we're 3:30 going to contact you and call you 3:31 actually you know what I might call you 3:32 in this video so I didn't do this last 3:34 time but I'm actually going to contact 3:36 you in this video to let you know that 3:38 we have a full sight build for you and 3:39 we'll see how it goes so totally after 3:41 the cuff this is not scripted none of my 3:43 content is scripted actually I love this 3:45 all right my favorite part the reveal V1 3:48 let's go all right we got a site Coastal 3:50 Crest Roofing lame Mesa neighborhood 3:51 Roofing professional we got the phone 3:53 number we got navigation we got few 3:56 icons here re Roofing finish repair all 3:58 the services wow quite a bit of Services 4:00 schedule a service we got Coastal 4:02 Roofing license insured bonded you can 4:04 see all the icons then we got some 4:06 Roofing images ready to transform your 4:08 roof and then contact us very basic but 4:11 a great starting point so that's one 4:13 prompt right so now we're going to go to 4:15 the second prompt so let's do this I 4:17 want you to completely overhaul the 4:19 design of this this website looks like 4:21 trash all the components are there but I 4:24 need you to give it the most amazing 4:26 modern looking Sleek website make all 4:29 all the contrast with the fonts and 4:31 colors add some more Design Elements and 4:35 just make it look like a $10,000 site 4:37 whole idea is you want to use common 4:39 language these llms large language 4:41 models which this is all built built off 4:43 of they use common regular language 4:46 right I'm not trying to sound like an 4:47 engineer developer because I want to 4:49 show you guys sure I could say all the 4:51 different names of the components and 4:52 all the architecture and the 4:54 environments and all the the jargon but 4:56 you guys aren't going to get it you're 4:57 just starting out if you're a full stack 4:59 Dev watching this you probably are 5:00 looking at and going what the hell is 5:02 this guy doing I'm trying to teach 5:03 people to get into Ai and build building 5:05 creating that's why I created this 5:07 that's why I'm doing this series and 5:08 that's why my Channel's around I'm not 5:10 talking to the full stack guys right 5:12 that are always in the comment section 5:14 but what about privacy and you get it 5:17 right so we're having fun we're creating 5:19 quickly and obviously all those things 5:21 are going to have to get done after this 5:22 like to hand this website off too but I 5:24 want you to start thinking oh wait I 5:27 could speak like that I could say those 5:28 things to the llm to make me schol stuff 5:31 and you can if you check out the other 5:32 videos on the channel we have a bunch of 5:34 stuff where we've built to give you an 5:36 idea of the other craziness we've done 5:38 on the channel so I built a Reddit clone 5:40 in 13 minutes I built a POV AI business 5:44 we built a Gaming website we built a SAS 5:46 YouTube business couple bunch of 5:48 different games we did a bunch of 5:50 Integrations we rebuilt clone of IG and 5:52 so on so it's definitely fun to start 5:55 doing this and we've done a bunch of 5:57 different softwares and I like lovable 5:58 for this kind of of work because it's 6:00 landing pages related so let's see what 6:02 we get so this is our second prompt and 6:04 we're a few minutes into the video so 6:06 hopefully we get something good and then 6:08 I'm going to call them and I'm going to 6:09 try to do a live call I actually haven't 6:11 done that in the video so live call 6:13 coming up for Coastal Crest Roofing we 6:15 just are rebuilding their website they 6:17 definitely have one of the worst looking 6:18 sites I've seen might even be worse than 6:20 the first one because they don't even 6:21 have a picture they don't even have a 6:23 picture of the person which is 6:24 absolutely insane they have some guy 6:26 hiding back here I don't think that's 6:27 him though so we'll see here we go 6:29 lovable version two it's almost done and 6:32 if you guys have a trashy website or 6:34 maybe it's your uncle's barber shop or 6:35 maybe the mechanic next door put it in 6:37 the comment section we're going to 6:38 freaking rebuild it we're going to love 6:40 code it and have fun with it so 6:41 definitely do that below and of course 6:43 give a follow and if you guys do end up 6:44 checking lovable I appreciate it o I had 6:47 an idea actually you know what let's go 6:48 to dribble if you guys don't know 6:49 dribble it's a Marketplace and like I 6:51 guess portfolio place for amazing 6:52 designs it's dribble with 3bs the triple 6:55 bees and I typed in roofer let's take a 6:57 look at one of these designs and let's 6:59 actually see if we can a design this 7:02 might actually not be a bad idea because 7:04 maybe you have like or something 7:06 actually this looks pretty nice let me 7:08 go back let's see this is kind of sleek 7:10 I'm not really a fan of that looks a 7:12 little boring let me find a really nice 7:14 looking site and then o you know what 7:17 this actually looks pretty nice nice 7:18 coloring the Orange is pretty cool let's 7:21 see here's another one oh I like this 7:23 okay here's what we're going to do so 7:25 we're going to take the screenshot I 7:26 actually haven't tried this yet so we're 7:27 trying this for the first time but I 7:29 figured we use dribble as inspiration 7:33 and then we're going to go back to our 7:34 site so here's our site right so you can 7:37 see so it has all the elements but the 7:39 design is not great so here's the thing 7:41 we're going to say this let's attach 7:43 this file and let's evolve this series 7:45 and then I'm going to say I want you to 7:47 use this image as inspiration for the 7:50 design only none of the text but the 7:53 design and Aesthetics colors fonts and 7:57 redo our site only the design do not 8:00 touch any of the 8:02 information so what you see there is 8:04 very important is you don't want the 8:06 lovable to start hallucinating because 8:07 if I upload this image it's all of a 8:09 sudden going to start pulling all the 8:10 information from this image we don't 8:11 want that we just want the aesthetic and 8:13 the design let's see how that goes but 8:15 yeah it's fantastic it's it's a great 8:17 place if you guys want some amazing 8:18 design it's the love Cod and a little 8:21 bit the love cing I'm not even sure how 8:24 the damn song goes but somebody create 8:26 an AI song For Love coding please yeah 8:28 an AI love coding 8:29 song that would be funny and I'll put it 8:31 in the next video all right here we go 8:33 third prompt oh my God no way look at 8:38 this website the before 6 minutes later 8:41 three prompts unlovable this is madness 8:44 wow absolutely stunning look at this 8:47 everything roll over Services about us 8:49 and 8:50 contact it's got the phone number all 8:52 the information from the website this is 8:55 absolutely crazy guys you just watched 8:57 me build this website 9:00 with three prompts using lovable love 9:02 coding Vibe coding and we have a site 9:05 obviously I'm going to tweak it oh wait 9:07 there's tabs oh look at this look how 9:09 good that is so let's do one more thing 9:11 I want to show you a great little trick 9:13 is we're going to go back to the site 9:15 and then we're going to go back to 9:17 Google and I bet you there is reviews so 9:21 let's go to the reviews let's scroll 9:23 down and then we're going to copy this 9:25 uh let's see if there's a better way to 9:27 see this full screen actually here we go 9:28 reviews then we're going to copy this 9:30 let's go to all wow they have actually 9:32 really good reviews so let's go this 9:33 Aiden Ford What's Happening Here There 9:36 we go and we're just going to scroll to 9:38 all the reviews hit copy go back to and 9:41 say can you add a review Carousel with 9:44 these reviews also you have doubled up 9:48 on contact sections and Maps period 9:51 remove one of them fourth prompt love 9:54 coding Coastal Crest Roofing we are 9:57 coming for you we're going to reach out 9:59 and we're going to hook you up with your 10:00 new site absolutely for free because we 10:02 can why not 30 45 minutes out of my day 10:05 to freaking do this for them absolutely 10:07 amazing and we'll figure out the 10:08 logistics whatever they're hosting you 10:10 be able to either give them the source 10:12 code they can upload it to their website 10:13 if they like it or we can host it for 10:15 them and then connect it to their domain 10:17 again I'm happy to do that so hope you 10:18 guys are enjoying the series it's been 10:19 really fun making these I'm going to 10:21 continue making these and of course 10:22 below add any sites that you think need 10:25 a makeover and we will love code the 10:28 crap out of it but I think for now we're 10:29 getting close to being done here so I 10:31 need to actually get it so I can 10:32 actually call them so we need to get it 10:34 to a state where it actually looks like 10:37 a new site that they would be proud of 10:40 and we could actually send to them so 10:43 they would want yes so see there's a 10:44 couple little things I think it might 10:46 actually just be the size maybe I'm too 10:47 zoomed in oh my God I'm such a dummy I'm 10:50 too zoomed in look how much nicer this 10:52 looks oh my God okay so yeah was too 10:55 zoomed in for you guys on YouTube and 10:58 here we are oh looks so much better so 11:00 there isn't two sections look we got the 11:02 socials we got all the services down 11:04 here wow this looks amazing ready to 11:06 transform your roof perfect I just need 11:08 a hero image so we're going to be our 11:10 last prompt and I think we're going to 11:12 have a final website so let me see it's 11:14 going to here's the preview so this is 11:16 updating in real time guys I'm literally 11:18 not stopping just showing you so let's 11:20 see where's our reviews there it is look 11:22 at that the review Carousel this is so 11:25 sick every time I see this even though 11:26 I've done projects with no code it still 11:28 just blows my mind because it's insane 11:30 like there freaking modern day 11:31 superheroes to do this so we're just 11:33 missing one hero 11:34 section can you just add a hero section 11:37 image of a roof with a worker that's 11:40 going to be our last prompt so five 11:42 prompts full sight under 10 minutes 11:44 lovable Coastal Prest Roofing and the 11:47 last thing we're going to do is we're 11:48 going to call this guy actually I want 11:50 to show you one more thing so instead of 11:52 just having lovable do it I want to show 11:53 you I pulled an image just a random 11:55 image from Google right here and I want 11:57 to show you how to actually add images 11:59 because you might have your own images 12:00 right like this can have his own images 12:02 so you just drag it in and you just say 12:04 make this the hero image and that's it 12:06 it's that simple so just to show you 12:08 what the power is and what you can 12:09 actually do now it's going to update 12:12 that put that into the code base and 12:13 you're going to be able to do it and 12:14 then one of the biggest questions I get 12:16 from this series in the comment section 12:18 is publishing where how do I publish 12:20 this so very easy you come up to publish 12:22 down here and you hit publish and then 12:24 it's going to publish it I'm going to 12:25 wait till this last update there it is 12:27 okay now I'm going to hit publish and 12:29 it's going to make a custom URL on 12:32 lovable but if you want to create your 12:34 own then you just go to connect custom 12:36 domain and then you just connect it to 12:38 your domain using DNS so if you hit 12:40 custom domain and right here add a 12:42 domain you own it's going to ask you for 12:44 the steps and then you're going to be 12:46 done it's super easy right here so now 12:49 we have the whole site you guys could 12:50 see Cod still Crest and the last thing 12:52 to do is we're going to call this guy oh 12:54 actually I want to do one more thing I 12:56 want to rename this project so if you go 12:58 to Project settings 12:59 and I want to give it the actual name of 13:01 the business so let's do that last thing 13:02 so we got coost Roofing you go down here 13:05 rename this project paste the name 13:07 rename project so now the URL as you'll 13:10 see because this is a big question I'm 13:12 trying to check off all the boxes and 13:14 now if you go to The Domain it's Coastal 13:17 roofing. lovable. apppp you know what I 13:19 want to make one more change I'm just 13:20 not a fan of this blue background with 13:22 this fonts especially when you go to 13:24 mobile look at this it just kind of gets 13:25 lost so we're going to say this can you 13:27 change the background hero image so it's 13:31 lighter it's not so distracting maybe 13:33 nice gradient with some shapes let's try 13:36 that because it's super distracting as 13:38 you can see right here it's kind of hard 13:39 to read and I don't want to start 13:40 messing around with all the font colors 13:41 and everything because all the rest of 13:42 it is perfect right we have all the 13:44 services everything down here so the 13:45 color scheme is right it's just that 13:46 damn image back here was bothering me we 13:48 got to make it perfect nice look at that 13:50 much more cleaner I love this let's go 13:52 to mobile yeah that's what we're talking 13:53 about perfect okay now we got it so now 13:56 let's get this dude on the phone all 13:58 right so I'm not even sure what I'm 14:00 going to say to him but let's just try 14:01 it so we're about to call Coastal Crest 14:04 Roofing it's Friday 1 o'clock so we 14:06 should be good to go all right let's 14:08 give this guy a call here 760 and if you 14:10 guys are in the San Diego area and 14:12 you're watching this give them a call if 14:14 you need some work done all right so 14:16 here's the site then you got all their 14:18 info let me throw on speaker phone they 14:20 better pick up hey Ryan um is this 14:22 costal Crest Roofing oh awesome are you 14:25 by any chance the owner oh amazing okay 14:27 so this might actually sound a bit 14:29 random but um I'm actually a YouTuber he 14:32 hung up on me so we just got hung up on 14:35 but this is this is okay guys I'm not 14:36 surprised actually just a random dude 14:38 calling you so I'm going to send him an 14:40 email I'm going to send him a text 14:41 message right now and hopefully we get 14:42 him on the phone this is absolutely for 14:44 free there's no strings attached here I 14:45 just hope they enjoy their s and if they 14:47 don't want it that's totally fine 14:48 because the purpose of this is to 14:49 educate you guys on what you can do and 14:51 also hook them up if they want it so the 14:53 love coding continues and hopefully 14:56 these guys all right guys we are done we 14:58 have a full completed site so let's take 15:00 a final look at this I think it's 15:02 absolutely amazing is 10 minutes of work 15:03 look at this look at the navigation on 15:05 top all the detail we got the hero image 15:07 which I showed you how to upload highest 15:08 quality material this is all created 15:10 with AI within 10 minutes all the links 15:13 so next thing what what what happens is 15:15 we contact the business we hand it off 15:17 to them I can either give them the 15:18 source code I can host it for them put 15:20 it on their domain whatever the steps 15:21 are right this is the next phase of this 15:22 but the point is we did it all with 15:24 lovable five prompts we can host it on 15:26 lovable if we want but that does it for 15:29 the video guys hope you enjoyed that my 15:31 name is Mars and Ai and I will see you 15:32 in the next one and definitely give a 15:34 follow and check out the links below and 15:35 of course like I always say appreciate 15:37 the copy if you hit any of the links and 15:39 check out lovable yourself