ever been overwhelmed with coding mumbo jumbo hey me too but what if I told you you can create a website by just chatting crazy enough it's entirely possible with ch GPT if you've been following my journey with ch GPT you know that I've used it for some pretty cool stuff from generating engaging content and even creating games but now Char bd4 has come up with a new feature that's simply mind-blowing converting any website image into a fully functional website so in this video we're going to put this new feature to the the test and we'll see if it is as incredible as it sounds and how accurate can it be I'm brand froms Learners and let's get started so here's the plan I found this website online and I pretty much like the design so I want to recreate this using chipd first off I'm going to take a full screenshot of the website and to do this I'm going to use a Chrome extension called Go full page the link is in the description so you can check it out so we need to First click on the extension and our screenshot will be ready so let's quickly download it and go to ch gbd I'm switching to gbd4 which has this new feature of accepting images as an input but as you can see CH gbd 3. 5 does not offer that feature so let's upload the screenshot that we took now I'm going to type a prompt asking it to generate the code for this website so my prom goes like this you are an expert web designer and a web developer I would like you to recreate the website design in the attached image using HTML and CSS I'm also looking for the site to be respond responsive however I want different content from what's in the image so I have described my company here I've also attach the full prompt in the description so just copy paste the prompt and enter your business or website details here so let's send this and there we have it CH jpt has generated our code so let's test this code and see what output we get to do that we'll use code pen it's an online platform which can run our code so that we can see the output simultaneously so let's go to code pen click on pen to open a new page so let's get the HTML code from chat GPT and paste it into code pen and do the same for the CSS code we'll give this file a name and click save to view our webside let's click here and there it is not bad right the content it has generated is new and it fits well with my brand but if you look closely this is the design layout that I provided and this is the out from the code that CH jpd generated it seemed like it has understood the website content and it has detected the text properly but as for recreating the website it has failed this might be because the image had a lot of content for it to understand everything at once I think we can try a different approach let's give it images section by section and ask it to recreate each part okay let's start with the first two sections I'm going to take a screenshot of these go back to chat GPT and upload it to chat GPT now this time let's be a little more specific to make sure that we get exactly what we want I written a promp that you can find in the description below so all you would need to do is just replace the highlighted text with your own details so let's go ahead and fill it first I'll enter the company name a brief description of the brand the total number of sections on my website and the number of sections in the image we uploaded including a brief explanation about these sections and the alignments now if you have a specific image that you want to add to your website you can add the link of the image as well so in my case I have an image to upload so to get this link I will use an online tool called imgbb domcom so here click on start uploading choose the image from your computer and click upload and there we have our link now we only need to copy a specific part of the link so let's copy it then go back to chat jpt and paste it here now let's click send and we've got the new code for our site so let's copy these codes and paste them into Cod once that's done let's click save then go back to our site and click refresh and there it is we've got the site which is almost the exact duplicate of the image I provided as you can see the key is the promt that we provide the more descriptive we are the better the outcome is all right we've now got the layout alignment and the content for our website but there's one more thing that I want to improve that is the color scheme I'm going to use a specific prompt to enhance the color scheme of the entire website which you can again find in the description below now how do we find the perfect color palette for our brand well there's this cool website called K. C so just go there and you'll find a wide range of color palettes to choose from you can explore and pick the one that fits your brand the best I've picked a color palette that really caught my eye so let's quickly open it up and right here in the URL you see the color codes so what we need to do is simply copy these color codes from here then go back to chat GPT and paste them into the pallet field also in the prompt I've mentioned employ the same pallet for consistency when I provide images for the remaining sections this way we won't have to specify the color palette for each section now let's hit henter and there's updated CSS code as for the instructions we need to swap out the old CSS with the new one so let's copy it go to code pen remove the old CSS code paste the new one and click save go back to our site click refresh and there it is I must say this is really impressive and the colors look great on our site and it gave a nice look to it all right let's add the next section to our website so this time I'm going to recreate this layout and it has some video and some brand images right below it I've already taken screenshot of this section so let's upload it to chat GPT and use the same prom that we used earlier next I'll enter these details now for the video link I'm going to add a video from YouTube so let's go there copy it URL then go back to CH GPT and paste it here now along with this I'll also add the URLs for the images that I want in this section now once we have filled everything let's click Send and there we have it our codes are ready so let's copy them now let's go to codepen I'll paste these codes right after the previous section and we also need to update our CSS file so let's copy the new CSS code and paste it at the end of the previous CSS code now let's save it then go back to our website and click refresh and there it is our video the brand logo section both of them are looking perfect so let's recreate two more sections the server section and the testimonial section the server section has some icons and I'm curious to see if chat GPD can add them automatically I've already taken a screenshot of it so let's upload it to chat GPD I'll use the same prop that I've been using and fill in all these details I also need to add an image link for this part so let me just copy that paste it here and click Send and it has generated the code so let me just copy that go to code pen paste them here now let's save the file go back to our site and refresh it and there we have it our new sections have been added and these look pretty good especially the way the text is placed and the details chat GPD is included is perfect this this proves that the more descriptive you are on the prompt side the better the results but I have noticed that our icons are missing in the server section so let's fix that now going to chat GPT I'm going to say the icons are not appearing so please guide me on what to do step by step and send it okay it turns out we need to check a few things in our code the first one is to add the font awesome CDN which I think we missed for those who don't know font awesome is a place where we can get font icons like these as instructed we need to add the snippet to our HTML file so to do that let's copy it and paste it here now let's save it and see if it works let's go back to our site click refresh and now the icons fit perfectly so far this is working out really well Char GPD is able to recreate the site exactly how I want it to be and we are getting closer to the final section now for the final section of our website we have a contact form and a simple footer my idea is not just to have the layout of a form but to embed an actually working form on the website this way when someone fills out and clicks submit we'll receive their details so to create the form I'm going to use a website called forspark so let's go to forms spark.
click try for free and sign up with your Google account now we can start creating a form so let's click here fill in these details like the name of the form and the description and here under technology make sure to select HTML as your website uses HTML and click create now first let's set up the prompt for the final section I'll upload the image for the final section and use our standard prompt filling in the necessary details now for integrating the form let's go back to form spark now go to how to section click on documentation website and on the left side under HTML form you will find form styling just click on it and here you'll get the code you need for the contact form so let's copy this go back to CH GPT and paste it here along with filling in all the other details once you're done hit enter and now it will gener the code for our contact Section so let's add it to our code pen file save it and then visit our website to see the changes as you can see the contact Section and the footage section are added and they are looking really great so let's test the form oh it looks like we've got an error but no worries it says that we have forgot to add the form ID to the code so let's fix that if we go back to form Spar we can find find the form ID here so let's copy it and then find the text your form ID in your code and replace it with this form ID now let's save it open our website refresh it and try submitting the form again okay this time the form was submitted successfully and you can view the submitted forms and the messages directly from the form spark dashboard by going to the submission section and done so this is how you can integrate a realtime form into your website this is the final look of our website and this is how you can go from a simple image to a fully coded website using chat GPT and this is another page that I created using chat GPT for you can go ahead and create a website using chat GPT with the promps that I gave even if you don't know how to code you can even go from a hand sketch design like this one to a fully fledged website as you want and as an extra tip I'll show you how you can host your website for free we can do this in just two simple steps the first step is to export our code from codepen to do this just click on the export. zip button and this will download the zip file to our computer so the Second Step will be to host your website on Tiny host now tiny host is the place where you can host your websites for free simply by uploading your websites files so to do that just go to tiny. host and click on upload button choose zip then drag and drop your zip file here give a name for your website and click publish and in just few seconds your site will be published and we will be live on the internet however the URL might be a bit complex as it comes with the subdomain and it can only be used for testing purposes if you want a simpler and a more professional domain like wf.
com you can get your own domain to host your site with a custom domain you need two things a hosting and a domain hosting is where your website's files are stored and that is why your website is live on the internet and domain is just the name of your website to get your hosting and domain just go to webspace kit. com it's one of the top six hosting providers in India with good speed security and customer support to get your hosting and domain just click the link in the description and it will take you to webspace Kit you can choose a hosting plan here that suits your needs I'm going to go with the stup plan so let's click add to cut now here you need to select how long you want the hosting pop the longer the duration the cheaper it is for now I'm selecting 1 month next you need to choose your domain name so just enter the name you want for your website like bit.
