it's STS here again I'm excited to have you join me so there is this fantastic website here called screenshots to cod.com this side promises to help you build user interfaces 10 times faster so what this platform does that it helps you convert any screenshot or design to cing code that you can use on your website so if you scroll down here on this page you see good things that people have said about this platform on X uh fantastic Stu upload the screenshot of any website a progress the HTML interactively improving generated code by comp to screenshot repeatedly so a lot of things here uh that people have said about this so without further Ado I think I should just walk you through let's see what we can do with this platform so if you come here what you want to do is to e get started and you will have to sign up with your GitHub account or maybe your Google or just use email so I have an account here already I will just want to sign in so this is what it looks on the inside of this tool unfortunately I was not able to get anything reasonably done until I upgrade the account to a paid the good thing that the payment is something not too significant so I really didn't bother very clean super easy to use interface I'm sure you're not going to miss anything so if you come down you can see that you can easily just drag snip of your website into this box here or just click this here go to your computer and then import a picture or you can just come down here and import via the URL or import via the code just something like that you can inspect the website copy the code down here but right now let's just use first for experimental purpose let me just copy this URL here of this random website I'm not encouraging you to use anybody's website I'm just doing this for tutorial purpose so I'm pasting the URL here and then I would capture this so as we can see here right now the tool is capturing uh the page here so we're going to give this time for this to finish up right now this tool is done this tool have tried to recreate uh this live website here something here we can see without going very far that we have uh not good images here I not really experimented with lots of website I just came across this tool I've not been able to get very similar images but so F it's not been bad uh so you can see this here so this is this here and also this here as this uh so the blog section here uh trying to replicate this image here but I've not been able to do uh the best uh so we can see so this is it this is what uh this tool is able to replicate the beauty about this is that we can make changes we can instr this tool to make changes to uh redesign this before we do that let's check uh the mobile responsiveness let's come to mobile we can see here the menu here is not aligning properly from that we can see that this is not really doing a very good job in terms of arrangement I think this ones here I'm not also pleased with the way the plug displ and then the frequently asked questions can be improved upon sincerely so let's come back to the desktop view so right now if we come up here we will see a place here where we can tell the AI what to change for example let's say you can see here that this guest started Buton here is not aligning properly with this video we can just instruct the a to make changes that so we can just say align the guest button with the watch video link and we can go on our own and note all the Visible Changes we can tell uh the AI to to regenerate this image uh we can go on and on and on for the frequently Asked question here I might just tell these two to make this more like an accordion can just toggle maybe I should do that so you can see that yeah making an accordion where can be open and close so I can just update this so the AI tool will try to rework all the instructions you can tell the AI tool to change the text change the colors change uh anything you Lally want to do basically all right so uh this is done here so we can see here now that we these have now been aligned and also we can come down here and we can see that our frequently asked questions here have been loated isn't this amazing so we now have more like an accord right now you can see how super simple and easy it is for you to use this tool to make changes this tool has made changes to the last prompt that we give to it I will not have the full website anymore just the two correction that we put the tool to make if you scroll down here you would see that you can switch in between first and the second version so you can see here version one version two so if we go to version one get the initial result that we got and version two is the updated one based on the update we told this two to make so for example let's just come back to version one and let's go up let's come up here again and let's come to select and update we use this tool here we able to make specific changes that we want this to to make so let's say for example we want to change this text here St this tool to change CS to D let's update this you can see this is the result we get not a very good result this is bringing to the conclusion that this tool work at Best when you're working Section by section rather than when you working on an entire page so right now let's just say for example we were with the first version uh so let's come to version one you can download this and then upload this to a live server we have the website live or we can just just come to code here and just easily copy the code you can even import this page into a WordPress website we can go to random here I have and let's come to the back end I have L element installed here an elemental plugin installed so let's say for example I can just create a new P let's change the template to Elemental canvas and let's edit this inside of Elemental now let's search for the HTML wiget and then we can past our code here that's it you can see here that we have that website right now displayed inside WordPress but you can see here that we're not getting good results so let me show you exactly what I feel is the best way for you to use this tool to get the result so right now I will just delete entirely let's come back here what I would do here right now is that I will use a default Snipping Tool uh window Snipping tool to snip this entire page i' already done that so just opening the Snipping Tool here I can just do something new and then I can just easily just snip it's as simple as this I snip this out and then I save this into my computer I can literally just close this up so right now let's come back here and then uh we can just literally just refresh this page so now we have a fresh canvas here so right now like I told you let's now bring our image into this so I'll click this up right here I have my Snips here so I think I have the header as each one so this is it here so I can just open this you can see right now this is trying to generate code for the header image here so let's this to do that so fantastic this is just done like that in some few seconds this is done you can see here now it's very easy for us to customize just the EDI alone uh so right now I think this is good right now ontop let's switch this to mobile this is not good on mobile so let's tell this to to good so this has been able to rework this so right now we have the hamburger here now working which is good we can close this and then we have a signing button here so now let's s back totop I think this is good now for our menu our menu right now is working well on desktop and also on mobile so right now we can just copy this code now for our menu then we can now come back here to Wordpress Elemental we know Elemental work as right now I just want to exit page since I have elemental Pro installed here I will just work with templat here I'll come to team Builder I'll create the header here I can just search for the HTML reget and then I can paste my code here so that's it we have this ready so now we can publish this add the condition show on the entire website and then we can save that's it we have uh either set inside of element so now let's work with our footer let's see what we can so after using reset tool there we can start again and now let's bring another image right now that's for the footer so this is done here so if we scroll down here we can see that we have the chat icon here we don't want to have that also space here we might just start the AI to take that space so let's just tell the what good so I just said keep the space nor at 10 piels and take away the chart icon below here I noticed that the first time here this is what I should have turned on here that says include screenshots of current version so that should solve the problem of not having the wood version in the update so I think I can update now so this is done here I don't know why this is still uh having this space here but I want to believe this should not be a problem so let's just copy this code then let's come back to Elementor so here we're going to exit this and let's come to footer section here so let's add a new footer let's just set for HTML that and then let's past our code here so you can see we have this here as a matter of this spacing is not too bad the 10 pixel is too small for this but right now you can see now we now have our headlight here constant and our footer here constant exactly what we want to have so let's publish this let's add a condition let's display this on the entire website and let's save and close this so that's it uh we've been able to replicate the other and the footer so now we can then go back and then create our pages and I think this is super amazing right so let's exit this let's go to Pages let's come to add a new page let's call this test change it from default template to Elemental full width and then let's Ed Elemental so let's come back here right now and then let's reset this again now let's Now work on the page so what we have here on the page first is this Aro section here so let's come back here and then let's uh that image this is it here B1 here fantastic so we have that generated here and I think this is super beautiful right let's check the mobile view and this is also literally fine so right now we can say we want to change text here let's just edit this up uh let me change uh click to tabs so change the T clicks to tabs so let's just include the screenshot of the current uh version all right now let's update and see that this works well uh so you can see that super amazing so now let's copy the code and then let's come back to Mentor here and let's bring in HTML and let's P the code here good so we have this here right now so let's open this up okay so this is what we have and then this is good we have some alignment issues here we can make changes to that inide of elor so let's come to Advance section here let's align this to the center it's good so you can see how super amazing is this this is beautiful we can still go back and throw this to to open this word video button in the light box to Maybe YouTube video and you can just keep telling that to whatever you want to do and that to will keep replicating it I think this is amazing so let's just do one more I don't want to waste so much time trying to do all of these things but you can see how these work quite very easy when you're working with sections that when you're working with the page so right now let's come back here and then let's reset this let's just bring in one more image good this is what he's been able to do with the frequently Asked question I think this is quite very very very fantastic literally the same thing we have here if I'm not mistaken so you can see the same thing here and you can see that we is the detailing in the result when you are just snipping little by little is far far better than when you are trying to replicate a code for the entire page uh so this is very very good I'm impressed with this we can just copy this code uh come here and then we can that into Elementor now this is good see that's exactly how to use this tool to literally clue your website so you can go ahead and experiment with this I think this is super super super cool so coming back to this tool here I can just uh reset this and then we will have some AI models here that you can around with so anytime you trying to work on a clone like this with any of the model here and is not giving you what you want you can experiment with other versions of the a model might just be able to give you the exact result you're looking so also for the HTML until when you can switch this to htmr CSS you can use react and so that's it right now I believe this should help you so T it with this tool you can go experiment I'm still experimenting is a new tool to me I've not been able to get a hang on everything happening here once I have update on this tool once I find new things you can do with this tool I'm going to be sharing more tutorials around it that's my time for this tutorial if you find it useful give me a thumbs up if you have any issues let me know in the comment section I will look out for them I'll see you another tutorial until then stay safe bye