So you have probably heard LLMs (Large Language Model), like ChatGPT, and you have probably experimented with it. When ChatGPT first was released I saw many code snippets produced by it that just would not work, so I was skeptical how useful it would be for coding. But I figured I should try it out myself, and see what it could do. In this post I'll walk through building a basic webpage, prompting ChatGPT to write the code for it.
I started with an initial prompt asking for code, and general information on the styling.
Can you give me the code for a website advertising a birthday party, styled to look like it was made in the 1990s.
ChatGPT responded with an index.html and style.css file. Initially the colour scheme was black and yellow, I asked it to change the CSS to be blue and lavender and resulting in the website below.
And in true 1990s style I prompted ChatGPT for some ideas for ✨ animations ✨
Do you have any ideas for animations?
It responded with some classic ideas
Blinking text: You can use the CSS animation property to make text blink on and off, just like many websites did in the 90s.
Scrolling text: Another classic 90s website animation is scrolling text. You can use the marquee tag to create scrolling text in HTML
Animated backgrounds: In the 90s, many websites used animated GIFs as backgrounds. You can recreate this effect using CSS animations. Here's an example CSS code for a repeating pattern background that moves
Hover effects: You can also use CSS animations to add fun hover effects to elements on your website. For example, you could make an image spin when someone hovers over it
It also provided code snippets for implementing each of these. I added blinking text to the site title and a marquee along the bottom.
Next I prompted it to make a modification to the navigation menu.
Can you give the the CSS for on hover of the navigation items a blue pill shaped background appears
It responded with CSS to apply, and a explanation on how it worked.
Sure! Here's an example CSS code to create a blue pill-shaped background for the navigation items on hover:
.nav-item:hover {
background-color: blue;
color: white;
border-radius: 50px;
padding: 10px 20px;
}
This code will apply the blue background, white text color, and rounded border radius to the navigation items when the mouse hovers over them. You can adjust the padding values to make the background bigger or smaller as needed.
Now the menu items on the nav bar did not have the class .nav-item applied. Nor did it prompt you to apply them. If you did not know HTML and CSS very well, something like this could get you stuck.
After applying the provided CSS, it wasn't perfect. We were seeing the menu shift when hovering over a menu item.
I asked ChatGPT how to fix this!
that causes the nav bar to shift when I hover, how do I stop that?
It explained why it was occurring, and provided CSS to resolve the issue.
If the navigation bar is shifting when you hover over the items, it may be because the size of the items is changing when the background is added. You can try adding the following CSS code to prevent this from happening:
.nav-item {
border: 2px solid transparent;
border-radius: 50px;
padding: 10px 20px;
}
.nav-item:hover {
background-color: blue;
color: white;
border-color: blue;
}
The final feature I asked ChatGPT to add was a form to RSVP that would submit to a Google Form.
I want to provide a form on the page, that will send a response to a google sheet. Can I do that?
It provided instructions to create a Google Form, code to create the form on the website, and an explanation of the code.
Yes, you can create a form on your website that will send responses to a Google Sheet using Google Forms and Google Sheets integration. Here's a step-by-step guide on how to set it up:
Create a new Google Form: Go to your Google Drive account and click on "New" > "Google Forms". Give your form a name and add the necessary fields (e.g., name, email, message).
Enable responses to be sent to a Google Sheet: Click on the "Responses" tab, then click on the three dots icon and select "Select response destination". Choose "New sheet" and click on "Create". This will create a new Google Sheet linked to your form where responses will be stored.
Get the form action URL: Click on the "Send" button at the top of the form editor, then click on the link icon. This will reveal the form action URL.
Add the form to your website: Use HTML and CSS to create a form on your website with the necessary fields. In the form tag, add the form action URL as the "action" attribute.
Here's an example HTML code for a simple contact form:
<form action="https://docs.google.com/forms/d/e/{FORM_ID}/formResponse" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="entry.123456789" required>
<label for="email">Email:</label>
<input type="email" id="email" name="entry.987654321" required>
<label for="message">Message:</label>
<textarea id="message" name="entry.456789123" required></textarea>
<button type="submit">Submit</button>
</form>
Replace {FORM_ID} in the action URL with the ID of your Google Form (you can find it in the form action URL).
Note: If you want to make the form look more visually appealing, you can use CSS to style the form elements.
That's it! Now, when someone submits the form on your website, their responses will be added to the Google Sheet you set up earlier.
I added the form code to the index.html and made modifications to the fields. That is when I realized it did not provide instructions on where to find the entry id listed in the code.
I asked it where to find it. I would say one of the largest drawbacks of ChatGPT (and the free beta version of it), it can be very slow. As it was slowly typing the response on where to find the entry id I did a Google search, and found the answer before ChatGPT was even done typing.
Finally I asked it for some styling for the new form.
could you recommend CSS to style the form to match the rest of the website
form {
max-width: 600px;
margin: 0 auto;
background-color: #FFFFFF;
padding: 30px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
label {
display: block;
font-size: 1.2rem;
margin-bottom: 5px;
}
input[type="text"],
select {
width: 100%;
border: none;
background-color: #E0E0E0;
padding: 10px;
margin-bottom: 20px;
font-size: 1rem;
color: #000000;
border-radius: 5px;
box-sizing: border-box;
}
input[type="radio"] {
margin-right: 10px;
}
button[type="submit"] {
background-color: #FFD700;
color: #000000;
border: none;
padding: 10px 20px;
font-size: 1.2rem;
border-radius: 5px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #F4C430;
}
And I had my final product.
What was ChatGPT good at?
ChatGPT was really helpful at scaffolding the new project, but something like Github Copilot probably could have provided me with the basic HTML structure as well.
The explanation on why the navigation menu was shifting and providing the code to fix it was extremely helpful. And even though I described the problem in fairly general terms, it knew what was wrong.
Where did ChatGPT fall short?
As I mentioned before it an be very slow to show you the response. And would often re output the entire file of code, even if I just wanted it to modify a small portion. So if you know exactly what you are looking for a Google search may end up being faster.
It using CSS selectors that weren't in use of the code it originally generated was a slight nuisance if you noticed it, and a larger nuisance if you didn't. When I shared this on Twitter, other developer informed me the new version, ChatGPT-4 has less of these problems.
You can see the Github repository for the code, and website deployed to Vercel.
Top comments (1)
You have to remember that ChatGPT is only about creating websites.