I Built a $4589 Website in Minutes with Lovable.dev 2025 - NO CODE🔥

0:00 in this video you're going to learn how 0:01 to create this kind of sales funnel 0:03 learning page so this is not a typical 0:05 learning page this is particularly a 0:07 sales funnel landing page for any 0:09 particular product so let's suppose my 0:11 product right now is a course so I have 0:13 just created let's suppose an AI course 0:15 and I want to create a sales fun a 0:17 landing page that landing page only the 0:20 only purpose of this landing page is to 0:22 convert traffic into pair users so 0:25 that's my only focus so that's why I 0:27 just want you to create a simple sales 0:30 for a landing page with zero technical 0:32 knowledge all I want is a simple 0:35 functional landing page with all of 0:36 these different components and then this 0:38 kind of call to action button so when I 0:40 click on this call to action button it 0:42 opens this kind of check out page there 0:44 is no extra information in here there 0:46 are no complexities in here that is the 0:48 only purpose of a funnel so as soon as 0:50 you click on a call to action button it 0:52 directly loads a check out page and as 0:54 soon as you click on any of these plans 0:56 simply just click on that it asks you 0:58 for your billing information and then 1:00 you simply just click on continue and 1:01 then it process that payment so now you 1:03 have just converted an average visitor 1:05 into a paid user with just few clicks we 1:08 are going to build this sales from a 1:09 landing page in liable dodev as I told 1:11 you earlier this video is only meant for 1:13 non-technical marketeers product 1:15 managers and stter Founders so if you 1:17 have a product that you're selling 1:18 online or maybe a course and you are 1:20 just looking for a quickest and easiest 1:22 possible way to build a very 1:23 professional and high quality learning 1:25 page and you don't want to pay any money 1:28 this video is for you as we know we are 1:29 going to use loable loable is an AI code 1:31 editor and yeah this video is not 1:33 sponsored by loable but the reason why 1:34 I'm using loable first of all it is 1:36 absolutely free to use you can build any 1:38 sort of web application using loable it 1:40 does have a default super base 1:42 integration as well so what is superbase 1:44 superbase is a backend platform that we 1:46 use to build back end for our web 1:48 applications so let's suppose if you 1:50 want to like build an authentication 1:51 system or maybe a user management system 1:54 all of that you can build inside loable 1:56 with simple prompting without any 1:59 backend development knowledge another 2:01 thing that you'll be concerned to do is 2:02 hosting this landing page somewhere so 2:04 L.D offers you free hosting so let's 2:07 suppose this landing page I have just 2:08 hosted on loable and you can see this is 2:11 hosting with a subdomain of loable but 2:13 you can definitely connect your own 2:15 domain name as well so let's suppose if 2:16 you have purchased a new domain name 2:18 from One 123 r or from Gad you can 2:21 easily connect any domain name with your 2:24 this landing page all of that I'm going 2:26 to guide you later in this video but 2:28 first let's just start with creating a 2:29 high quality design by the way if you 2:31 just want to do anything you just want 2:33 to like use this design as a template 2:35 you can easily do that I will provide 2:37 this URL in description of this video 2:39 you can just use this design and then 2:42 just simply click on this edit with 2:43 loable and then you can simply just use 2:46 this design as it is you can make some 2:49 changings ask loable doev to like make 2:51 some changings in it and then you can 2:53 use this design as a template as it is 2:56 without you creating any design from 2:58 scratch but creating this kind of Penal 2:59 design is so easy in loable dodev that I 3:02 will highly highly recommend you to like 3:04 create a new one from scratch all right 3:06 now to start creating a design what you 3:07 need you need a design reference you can 3:10 give your design instruction inside your 3:12 prompt but it is good if you have a 3:15 reference design and a simple image 3:17 maybe from your competitor website or 3:19 maybe just a simple figma design you can 3:22 use any design as a picture as a photo 3:25 as a reference you can provide that in 3:27 lovable. Dev and then you can ask it to 3:29 create a landing page based on that 3:32 simple photo but if you don't have any 3:34 reference design you can simply just use 3:36 a simple prompt as well but in this 3:37 video I'm going to use a reference 3:39 design a reference image this is a figma 3:41 design that I just found on figma 3:43 community so if you're a marketeer this 3:45 might look very familiar to you so this 3:47 is actually a design of clickfunnels so 3:50 if you remember clickfunnels click 3:51 funnels clickfunnels is a simple funnel 3:53 creation tool so this is the design that 3:55 someone actually just copied that design 3:57 into this figma design so I'm just going 3:59 to use this as a reference the reason 4:01 why I'm using this funnel design is 4:03 because this is one of the best funnel 4:05 design it's very simple and 4:07 straightforward it does not confuse your 4:09 users at all it has very basic 4:12 background and then it has like very 4:14 straightforward and to the point called 4:15 to actions there is no extra unnecessary 4:18 BS about anything this design only talks 4:21 about your product only so that's why 4:23 I'm just using this design as a 4:25 reference and this is just a simple 4:27 figma design but I have converted this 4:29 simple figma design into photo I will 4:31 leave link to this figma design in my 4:33 description as well and then I'll leave 4:35 a link to this photo as well in in my 4:38 description so right now you can see 4:40 this is a PNG photo that I just created 4:42 from that figma design you can find this 4:44 as well in description but let's suppose 4:46 if you just want to use any other 4:47 website as a reference we can do that as 4:49 well so imagine this is the website that 4:51 you want to use as a reference so this 4:53 is again the official website of 4:54 clickfunnels they have recently changed 4:56 their design but the surprising thing 4:58 here is the pricing so this cost around 5:00 $81 per month as a basic plan and then 5:03 $248 per month as a Pro Plan but because 5:07 now with the AI we can build any sort of 5:09 funnels using AI so you should not be 5:12 paying this much money to any of these 5:14 kind of tools but again I mean this 5:16 comes with convenience it has a complete 5:18 infrastructure clickfunnels has like a 5:20 complete infrastructure to build funnels 5:22 but still we can like use Simple AI 5:24 tools to like build this kind of high 5:25 quality funnels anyways this is not our 5:27 topic so let's suppose this is the 5:28 design that you want to use all you need 5:30 to do you need to simply just take a 5:32 complete screenshot of this entire 5:34 landing page how you can do that there 5:36 is this chrome plugin this is called Go 5:38 full page you can download this plug-in 5:40 from Chrome web store so you simply just 5:42 go to Chrome web store and then install 5:44 this plugin and once it is here then 5:46 simply just open your website that you 5:47 want to like take screenshot of after 5:50 that simply just click on this camera 5:51 button like this icon of this Go full 5:54 page Chrome plug-in simp just click on 5:56 that and then after that what it'll do 5:57 it will take a screenshot of this entire 5:59 ire landing page and then it will 6:01 preview this landing page like this 6:03 simple screenshot you can simply just 6:05 download this in PNG and you can save 6:07 this on your computer after that you can 6:08 simply just go to loable doev and in 6:11 here you can actually provide that 6:12 screenshot there is another option 6:14 inside loable doev which you can 6:16 actually import a figma design so let's 6:19 suppose on figma community if you found 6:21 any design just like I found this design 6:23 this is like absolutely free to use so I 6:25 just formed this design from figma 6:27 community so let's suppose if you have 6:28 this kind of design you can can just use 6:30 this design as well as a reference so 6:32 inside loable there are two options you 6:33 can either attach the photo the 6:35 screenshot of that website or you can 6:38 simply just import any figma design so 6:40 again whatever seems convenient to you 6:42 just use that option but you can simply 6:44 just like use this as well so this 6:47 importing in from figma actually 6:49 includes three simple steps one is 6:52 downloading this builder. figma plugin 6:54 again this is a free plugin that you can 6:56 use inside figma you can just use this 6:59 plugin you and then once you open this 7:00 plug-in it will show you this open in 7:02 option and then from here it will just 7:04 show you all of your currently opened or 7:07 all of your figma design so once you 7:09 open this figma design inside your figma 7:11 account so it will then show that figma 7:13 design inside here in here you can see 7:15 as as you can see this is the click 7:17 funnel design it is showing here after 7:19 that simply just open that in here and 7:21 then after that it will then show you an 7:22 option to then use that inside loable so 7:25 once you just open your design inside 7:27 that plugin then just go to this this 7:30 then just go to this navigation menu in 7:32 here that is showing on this footer then 7:34 simply just click on this plugin section 7:36 and then here you can simply just choose 7:38 this builder. IO plugin so once you 7:40 choose that builder. IO plugin it will 7:42 then show you an option to export this 7:44 design as a code so you can what you can 7:45 simply do you can simply just choose all 7:47 of these layers once you have chosen all 7:49 of these layers next I will actually 7:50 show you to export this design in form 7:52 of code then you can actually simply 7:54 just use that code inside builder. iio 7:57 but again this is a complex process I 7:59 highly highly recommend you using a 8:01 simple process so there is another 8:02 simple way of using any figma design 8:04 into loable or any other AI code editor 8:06 that is converting this F design into a 8:08 simple PNG to do that you can simply 8:10 just click on this design simply then 8:12 simply just right click and from here 8:13 you can simply just click on this copy 8:15 PNG and from here you can simply then 8:17 just paste that inside lovable. Dev 8:20 simply just click on control V and it 8:22 will just paste that design inside 8:23 loable so as I as soon as I clicked on 8:25 this control V so now you can see it has 8:27 converted that figat design into a 8:30 simple PNG and now I can see my figma 8:32 design is now converted into PNG and it 8:34 is attached inside loable doev and now I 8:37 can give it a prompt I'll just use this 8:39 basic simple prompt that I used to 8:41 create this funnel design so I'll just 8:43 copy this prompt from here you can find 8:45 this prompt again in description or you 8:46 can just copy it from here and then I 8:48 can simply just paste this prompt in 8:49 here so this prompt says I'm creating a 8:52 sales funnel landing page for my product 8:54 my product is a course about AI 8:56 development I have attached the design 8:58 of the landing p page I want you to 9:00 create a very high quality landing page 9:02 similar to the reference design you 9:03 should use the same kind of fonts and 9:05 same kind of text styles and colors and 9:08 after that you can simply just press on 9:09 enter and now liable doev will actually 9:12 start creating this project as it is 9:14 right now you can see it is analyzing 9:16 this entire design and after that it has 9:18 now started writing code for us you 9:20 won't have to do anything liable will do 9:22 everything for you it will create this 9:23 entire project for us it will write all 9:26 of the code files for us it will set up 9:28 all of the project Direct factories for 9:29 us you won't have to do anything in here 9:32 all you have to do is just sit and watch 9:35 and just wait for it to create a preview 9:36 okay so just after a few minutes it has 9:38 created this design this is how it is 9:40 looking like so let's just compare the 9:41 design that I created earlier so this is 9:43 the design that I created earlier we 9:45 gave the same prompt and we provided the 9:47 same design and then it created this for 9:49 us in the first attempt and in this 9:52 second attempt it has created this again 9:54 this is very high quality for me at 9:56 least I can see that this looks very 9:58 professional there is some need of 9:59 improvement in here on the footer 10:01 section and then we need to provide some 10:03 of the missing images we need to provide 10:05 these partner images in here but this is 10:08 high quality for any product to launch 10:10 this meets that criteria of creating a 10:12 funnel design which is simple to the 10:15 point and the only purpose on funnel 10:17 design is to convert user whenever user 10:20 clicks on any of these buttons it just 10:22 like opens a check out page and from 10:24 that check out page user can then buy 10:26 that product so just like this in this 10:28 design that I created earlier as soon as 10:29 you click on this enroll and then it 10:31 opens this checkout design now you can 10:33 actually ask it to create a check out 10:34 page a checkout page which is very 10:36 similar to this kind of funnel design so 10:39 let's suppose in this current version of 10:41 Click funnels as soon as you click on 10:42 this try for free there is this page 10:44 that it shows so first of all it 10:46 collects your name and email once you 10:49 click on next then it actually opens the 10:51 next page so let's just ask it to create 10:53 this kind of similar kind of check out 10:55 page okay so I have just got these two 10:57 screenshots from clickfunnels so first 10:59 page is this lead collection page so 11:02 this page is actually just for the 11:03 purpose of lead collection so before 11:04 showing user the payment page you just 11:06 showing this page so in case if user do 11:08 not make payment so at least we got 11:11 user's name and his email address so we 11:12 can actually just write a followup email 11:14 so that is the only purpose of this page 11:16 and then as soon as user submits their 11:18 details after that they will just be 11:20 loaded to this page so let's just 11:22 provide both of these pages to lovable 11:24 and ask it to create this kind of page 11:25 as soon as user clicks on that enroll no 11:28 page so after that uh let's just like 11:31 user should see this kind of like 11:33 landing pages so in here inside loable 11:35 simply just attach both of those page I 11:37 have just attached both of these 11:38 screenshots I'm just going to provide a 11:40 prompt please see the attached 11:41 screenshot this is the screenshot of our 11:44 checkout page I want to create this kind 11:46 of checkout page so when user clicks on 11:49 get started or start free trial button 11:52 it should load a check out page that 11:56 check out page first should ask user for 11:59 the their name and email address after 12:01 user provides that after that it should 12:03 load that payment page simply just press 12:06 on enter and now it should be able to 12:08 create that check out page all right so 12:10 within just a couple of minutes it has 12:11 created this check out page so let me 12:13 just click on this start free trial 12:14 button or maybe get started button so 12:16 let me just click on that and it shows 12:18 this page first so now I can provide a 12:20 username and an email address click on 12:22 continue and then it shows this page 12:24 there is some design problem in this 12:27 page we can just like enhance the design 12:28 later on 12:29 but yeah so this is how it is working so 12:31 it has like two step checkout and this 12:33 is exactly what you want now next step 12:35 could be to create a back end for this 12:36 project I'm not going to cover that part 12:38 entirely because I have covered that 12:39 several times in my other videos but in 12:41 this video I'm just going to show you so 12:42 let's suppose if you want to create a 12:44 back end where you want to store all of 12:46 this information or maybe the other 12:47 information uh where you are collecting 12:49 users name and email so to do that there 12:52 is this option this very simple option 12:54 you can simply just click on the super 12:55 base button on top right simply just 12:57 click on this button in here and then 12:58 after after that it will load you to 13:00 this super base integration it will ask 13:02 you to create a new project inside 13:04 superbase so to do that you can simply 13:06 just go to superbase official website 13:08 simply just go to superbase just go to 13:10 there and then you can simply just log 13:11 in using your account and then from 13:13 there simply just create a project 13:15 simply just create a project inside 13:16 superas once you do that it will just 13:18 show you that project in here and then 13:20 you can just simply choose that project 13:22 and that's the only thing that you're 13:24 required to do everything else rest will 13:26 be managed by uh loable doev itself 13:29 you're not required to do any extra 13:31 configurations it will manage it will 13:33 add any of the project like let's 13:35 suppose database URLs or anything that 13:37 it needs it will communicate with super 13:39 base automatically you're not required 13:40 to do anything from here so yeah that's 13:42 why actually it is very easy and it is 13:44 very easy for non-technical people to 13:46 build this kind of like basic landing 13:48 pages the next step now is to publish 13:50 this landing page so let's suppose if 13:51 you have made sure that everything is 13:52 ready now I'm good to like publish if 13:54 you have if you want to like add any 13:56 video in here you can just provide link 13:57 to that video in here and then you can 13:59 add a nice image in here a very nice 14:01 looking like image thumbnail so after 14:04 that we can just like provide any 14:05 missing elements in here after that 14:07 simply just click on this publish button 14:09 from here simply just click on this 14:10 publish button from here you can now add 14:13 your own custom domains as well let me 14:15 just show you that in a minute but let 14:16 me just show you how easy it is to 14:18 publish it simply just click on this 14:20 publish button and after that it will 14:21 just take a second literally within just 14:24 a few seconds it will just publish this 14:26 project right in front of you so right 14:28 now you can see this project project has 14:29 been published and this is the URL this 14:31 is the subdomain of L.D so it has just 14:34 created this simple URL for us as soon 14:36 as you open this URL it will just open 14:38 this website for us now this funnel 14:40 landing page is published now we can 14:42 simply just like share it with anyone 14:44 but because it has this do lovable. app 14:47 kind of weird kind of subdomain so you 14:49 do not need that you need to provide 14:51 your own domain name so to do that you 14:52 can simply just go back to loable click 14:54 on this manage domain name button click 14:55 on this add new add your own domain name 14:58 and from here here you can simply just 15:00 click on this continue button add your 15:01 domain name simply just click on 15:03 continue it will ask you to update your 15:05 name servers so to do that you need to 15:07 simply just log to your domain name 15:08 provider let's suppose I have these 15:10 domains on hostinger simply just choose 15:12 any of these domains from here simply 15:14 just then click on this manage button 15:16 and from here you can simply just go to 15:17 your name servers tab from here you can 15:19 simply just click on this change name 15:21 servers and whatever name servers it 15:22 provide you can simply just click on 15:24 this change name servers and then 15:25 provide new name servers in here 15:27 sometimes it can actually ask you to add 15:29 DNS records instead of name servers so 15:31 you can simply just add your DNS records 15:33 in here make sure that the record that 15:35 you're adding if there is any duplicate 15:37 record in here simply just delete any 15:38 existing duplicate records and then just 15:40 provide the records from here there is 15:43 one last thing that I want to mention 15:44 here is let's suppose if you don't want 15:46 to host this project inside loable you 15:49 want to host it on your own server so 15:51 for that what you need you need to 15:52 download this source code from here you 15:54 then need to maybe like host it on 15:56 GitHub you need to like just upload this 15:57 source code inside GitHub and then from 15:59 there you can just like deploy this 16:01 project in your own hosting plan so to 16:03 do that you can simply just click on 16:05 this GitHub account then simply you can 16:08 simply just connect your GitHub account 16:09 from here after that you can see it has 16:11 now added this code inside my GitHub 16:14 repository simply just open this GitHub 16:16 repository URL that it has just created 16:18 then you can see this is the GitHub 16:20 repository that it has just created for 16:22 this particular project and from here 16:24 you can maybe deploy this project on 16:26 versal or maybe on host Ranger or any 16:28 other host hosting providers I have 16:29 created dedicated videos that how you 16:31 can host this project on let's suppose 16:33 something like versal so verel is a 16:36 serverless uh hosting provider so you 16:38 can just use veral absolutely for free 16:40 there's a paid plan as well but you can 16:41 use versal absolutely for free as well 16:43 you can simply just log in into versal I 16:45 will just log in using my GitHub account 16:47 once you're logged in now you need to 16:48 just import that GitHub repository that 16:51 we have just created in here simply just 16:52 click on this add new button add a 16:54 project from here just choose this 16:55 GitHub repository click on import and 16:57 then it will import this project inside 17:00 versal once it will import that project 17:02 after that it will just try to deploy 17:04 that project automatically and this is 17:06 how this deployment will look like it 17:08 might have few errors you can just like 17:10 go back to liable dodev and then ask it 17:12 to like fix those errors but again it's 17:14 a back and forth thing sometimes 17:15 whenever we Face any errors we just like 17:17 try to fix it ourselves sometime there 17:18 is es L error but it will just manage 17:20 all of the deployment itself you're not 17:22 required to like be a devops engineer or 17:25 to deploy this project on server this is 17:27 all versal is simply just like a layer 17:29 on top of AWS hosting let's suppose AWS 17:32 is Amazon hosting so to like host your 17:35 project on AWS you need some sort of 17:37 like technical knowledge and like 17:38 background infrastructure and that kind 17:40 of stuff but on versal you can just like 17:41 easily deploy your projects with one 17:43 simple click and again in here you can 17:45 just provide your own custom domain you 17:46 can simply just go to your settings tab 17:48 from here you can simply just go to your 17:49 domain Tab and then from here you can 17:50 simply just add your own new domain 17:52 simply just provide a name in here and 17:54 then after that you can simply just 17:55 click on this add domain button and then 17:57 it will add that domain in inside your 17:59 project one more thing that you can do 18:00 let's suppose if you want to like not 18:01 carry on this development inside any 18:03 other AI code editor something like 18:05 cursor something like wind surf or 18:07 something like vs code you can simply 18:09 just download this source code locally 18:10 on your computer open this source code 18:12 inside cursor wind surf again there is a 18:14 separate topic but you can simply just 18:16 like download there and open that and 18:18 then you can make further changing 18:20 inside code let's suppose if you're 18:21 using something like cursor you can 18:22 simply just go to cursor. a you can 18:24 download this cursor AI code editor 18:26 absolutely for free on your computer 18:27 then you can open that sour code inside 18:29 cursor so let's suppose I have this 18:30 source code open inside cursor this is a 18:32 source code of a mobile application but 18:34 this is how you can just like access 18:36 your source code inside cursor from here 18:38 you can just like provide a prompt 18:39 change anything in in there and then you 18:41 can simply just make changings then you 18:43 can push commit those changings inside 18:45 this GitHub repository anytime you 18:48 publish new changings inside this GitHub 18:50 repository it will automatically 18:52 synchronize with your versal deployment 18:54 again I have created separate videos on 18:56 that topic you can watch that from my 18:58 channel so this is how simple and easy 19:00 it is now to create sales funnels you're 19:02 not required to pay hundreds of dollars 19:04 every month to click funnels you can 19:05 create any sort of sales funnels and 19:07 unlimited number of sales funnels using 19:09 this kind of AI code editors I try to 19:11 keep this video as simple as possible so 19:13 anyone of you who is non technical 19:15 person or who's from a marketing 19:16 background so it should be easy for you 19:18 to like follow this simple video if you 19:20 have any further question just leave a 19:22 comment in comment section and if you 19:23 have any ideas that you want to share 19:25 with me to create a new video on you can 19:27 simply just send me an email I see you 19:28 next video bye-by