You can create a website by just chatting crazy enough. It’s entirely possible with ChatGPT. If you’ve been following my journey with ChatGPT. You know that I’ve used it for some pretty cool stuff from generating engaging content and even creating games. But now ChatGPT-4 has come up with a new feature that’s simply mind-blowing converting any website image into a fully functional website.
So in this article we’re going to put this new feature test and we’ll see if it is as incredible as it sounds and how accurate can it be. 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 ChatGPT first of all 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 here
https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl
So you can check it out so we need to First click on the extension and our screenshot will be ready
Let’s quickly download it and go to ChatGPT. I’m switching to ChatGPT-4 which has this new feature of accepting images as an input but as you can see ChatGPT3.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 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.
“You are an expert web designer and developer, I would like to recreate the website design that I have provided in the attached image using HTML and CSS and needs to be responsive as well. The website belongs to my company, [Your Company Name], and it serves as a [Brief Description of Your Brand] and this is my logo for the website [Provide the link]. The webpage is divided into a total of [Number of Sections] sections, and I’ll provide you with each section, you should not use the same content. Change the content that aligns to my brand. Provide me the code and guide on where to integrate it.”
Just copy and paste the prompt and enter your business or website details here. Let’s send this and there. ChatGPT has generated our code, so let’s test this code and see what output we get to do that
We’ll use CodePen it’s an online platform which can run our code so that we can see the output simultaneously.
CodePen
Let’s go to code pen click on pen to open a new page. 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 website. 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 ChatGPT generated it seemed like it has understood the website content.
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 and go 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 prompt that you can find in above article.
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. 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”
imgbb
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 ChatGPT 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 CodePen. That’s done, let’s click save then go back to our site and click refresh.
We’ve got the site which is almost the exact duplicate of the image I provided as you can see the key is the prompt 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.
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 ChatGPT and use the same prompt, we used earlier. Then go back to ChatGPT 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 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. 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 website 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 ChatGPT can add them automatically I’ve already taken a screenshot of it. Let’s upload it to ChatGPT. I’ll use the same prompt I’ve been using and fill in all these details. I also need to add an image link for this part. Just copy that paste it here and click Send and it has generated the code so let me just copy that go to CodePen 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 text is placed and the details ChatGPT included is perfect. This proves that the more descriptive you are on the prompt side the better the results.
We need final section now. When someone fills out and clicks submit we’ll receive their details to create the form. We are going to use a website called FormSpark. So let’s go to FormSpark.
FormSpark
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 to FormSpark, 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 ChatGPT and paste it here along with filling in all the other details once you’re done hit enter and now it will generate the code for our contact Section.
So let’s add it to our CodePen 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.
Let’s test the form how is submitted successfully and you can view the submitted forms and the messages directly from the FormSpark dashboard by going to the submission section and done.
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. The Second Step will be to host your website on tiiny.host
tiiny.host
Now tiiny.hostis the place where you can host your websites for free simply by uploading your websites files.
Just go to tiiny.host and click on “Upload Button” choose zip then upload your zip file here give a name for your website and click publish. 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 purpose.