ChatGPT is a large language model developed by OpenAI. When given a prompt, ChatGPT will attempt to answer in the most natural way possible. ChatGPT also can write code. In this post, we will determine if ChatGPT will be able to build a complete website with HTML and CSS.
The scope
ChatGPT will have to build a landing page for a banana store that sells different types of bananas. It should be able to have a proper website, with a navigation bar, pictures, text, and a good design. Here’s the prompt given to ChatGPT:
“Create a website landing page for a banana store that sells bananas. Make sure that it is complete with HTML and CSS. Include lots of images, make it look good.”
Making the website
ChatGPT was successfully able to write proper HTML code. It has all the proper tags, syntax, etc. However, the problem arises with the CSS code. The CSS code keeps on getting cut off, and ChatGPT is never able to properly style the site. As such, ChatGPT’s website looks like this:
The site has clean HTML code and checks all the requirements, but there is barely any styling. When asked to at least add some margins, ChatGPT regenerated the CSS code but still set the margins to 0px.
The images do not link to anything. We gave ChatGPT some links to photo URLs and told it which URL should be used for what image. It was able to understand what we meant by “Yellow Banana,” “Green Banana,” and “Organic Banana.”
Next up, we also asked it to make a large hero image with a specific image. It did generate the HTML code needed, but the CSS kept getting cut off, and the website still looked terrible.
Generating the CSS
Since ChatGPT has a character limit, it was never able to fully generate the CSS. We decided to give it another chance by asking it to only generate the CSS for the HTML code that it already provided. Here was the prompt that we used:
“Generate just the complete CSS for the HTML code you provided.”
This time, ChatGPT was able to successfully generate the entire code without getting cut off again.
Unfortunately, this CSS code is riddled with errors that just made the website look worse off than it already was. For instance, there is no “hero” class, only an element with an ID as “hero.” The AI failed to notice this. After manually tweaking the HTML code to include the “hero” class, it was able to display properly.
Another example of a mistake is with the “Shop Now” button, which has a class of “button.” However, ChatGPT generated the CSS code for the “btn” class, which is not present in the HTML code. Once again, with some manual tweaks, this was able to be fixed.
Smaller Tweaks
For this test, we decided to see if ChatGPT could tweak its code based on what we told it to do. The yellow “Shop Now” button looks bad on a yellow background, so we gave ChatGPT the following prompt:
“Change the button in the hero to dark blue. Only generate the CSS for that specific element.”
ChatGPT did generate the code required to make the button blue. But, there is still an error present. The code generated changes the style for each button element, not the class. While this code is correct, there technically is no button element in the HTML code. It’s just a link:
<a href="#products" class="button">Shop Now</a>Video
Can ChatGPT Build a Website?
While ChatGPT can build a website, it is often riddled with incorrect code. If you want to build a website with minimum hassle, there are plenty of website builders available that already have pre-built templates.
At least for the near future, ChatGPT cannot properly program a website. However, AI technology advances each day, and it isn’t long before ChatGPT learns this capability.