Posted by Mathieu Tancrez on 5/9/2024
I decided to use a custom GPT from the store called “Website Generator” to create this website, as I had heard that LLMs could excel at assisting with website development. It was amongst the top 5 GPTs and was rated 3.9/5, which seemed reasonable. I tried to look at individual reviews to understand its strengths and weaknesses, but unfortunately, one cannot see individual reviews, only the distribution of ratings. Since I didn't know of any other custom GPTs and this one was in the top 5, I decided to give it a try.
The GPT asks you a few questions to gather your requirements and goals. Within a few prompts, it directed me to b12.io, a WYSIWYG (What You See Is What You Get) type of website builder. I decided to continue with it as the website design was quite good. After making some basic amendments, I wanted to publish it and realized that to use my own domain, I needed to pay $49/month, without even the possibility of getting the source code. So, I decided to try to replicate the design with ChatGPT. I inspected the pages on both a monitor and a mobile device, copied the source code, took screenshots of the pages, and asked ChatGPT to replicate the website. I provided a small description of each section along with the source code and screenshots.
It took me six hours to design the structure of the website. Please note that I have some knowledge of HTML, CSS, JS, and PHP as I had created two landing pages a few years ago. The AI generated all the images and the style for the logo, which I tweaked using Canva.
Below some of the prompts I used:
“You are a webdesigner, replicate this personal website (image and source codes attached). It has to be responsive and use the bootstrap framework.
It consists of a header with my logo on the left and a menu with a link to all sections on the right. There are 4 sections: Home, About Me, Blog Feed and Contact. There is a footer with a link to the sections and a link to my LinkedIn profile. Use as much as you can from the source code, replicate the scripts, the content, the classes and the styles.
The section Home has a background image with a dark overlay. The section Contact has a form to send an email (name, email address, phone number, message). The section Blog Feed will consist of different blog posts. Each blog post will have a thumbnail, a title, and a description.”
“Here is my logo and the background for the home section.”
“Replace the path to home with /images/home.png and the path to logo with /images/logo.png”
“Fix the header at the top so it doesn’t move when I scroll.”
“Create a parallax effect for the background of the Home section.”
“Copy this style and police for the Home section, also vertically center the text.”
“Add a hamburger style menu in the header when surfing from a mobile device. Here is the source code when surfing from a mobile device.”
“I made some changes in the source code for the Blog Feed section. Start from this and create a second blog post. Also make the thumbnails for the blog posts 330 pixels on large displays and 200 pixels on smaller displays like mobiles. The image should also be squared.”
“For each post, the summary should be on the right of the thumbnail. Also add a “Read more” button which bring to the full content post page. Clicking on the thumbnail should also bring to the full post content. I attached a picture of how it should look like.”
“The form in the Contact section should be similar to the one in this picture.”
“In the form, the labels name, email and message must not be empty.
For the label email, it must return an error if the content is not a valid email address.
For the label phone, it must return an error if the content is not either null or not a valide phone number (from any country).
For the name and message, make sure it’s safe against injection”.
“When the contact form is submitted, it should send an email to alice@bob.com with all the informations.”
“Create a page with the same style of the overall website for the blog post content.”
“This is my final code source, separate the metadata, header, footer, css and js so I can easily include them in other pages.”
“Change my css to the nav-link class so the items are dark grey and become gold with an underline when hovered.”
“Optimize my metadata for SEO.”