ChatGPT Isn’t Good At Coding Websites
Introduction
I have recently tested the popular AI chatbot called ChatGPT, specifically, ChatGPT 4.0. ChatGPT is a free online chat bot used to perform many tasks and replicate human thinking. For example, ChatGPT can write a recipe, plan out your next vacation, or in this case, write code, but ChatGPT isn’t the best at making it look pretty.
ChatGPT’s Designing Skills
If you go out and tell ChatGPT 4.0 to generate a website for you, it will give you an AI generated image. Now, the images don’t look that bad from a web design point of view. But it will give you messed up text as the image below shows.
The prompt for the image above is:
“A sleek and modern professional website designed for a front-end developer’s portfolio. The website should feature a clean layout with a minimalist aesthetic. It includes a top navigation bar with links to different sections like ‘Home’, ‘About’, ‘Portfolio’, ‘Blog’, and ‘Contact’. The main section showcases a large banner with a welcoming message and a button inviting visitors to explore the portfolio. Below, there are thumbnails of various web design projects, each with a brief description. The color scheme is a mix of cool blues and whites, giving it a tech-savvy and approachable feel. The overall design should reflect creativity and expertise in front-end development.”
Don’t get me wrong, this isn’t created by ChatGPT. ChatGPT is for text and text only. DALL.E 2 has created this image and ChatGPT is showing it to you. If you want more information on DALL.E 2, check out Hossein Chegini’s article on it here.
ChatGPT 4.0’s Coding Skills
The inspiration for this article is from around 2 days ago. I wanted to know if I could beat ChatGPT in a coding/designing challenge. I asked ChatGPT to code a website for me. The link to CHATGPT’s website is here: https://codepen.io/AlexThyCoolest/full/poxMrLR.
This website obviously looks bad for many reasons.
- The font
ChatGPT’s go-to font is Arial, which isn’t a good sans-serif font. There are many free fonts on the internet and default CSS has a ton of better fonts. Arial is what you use for you 5th grade ELA essay (if not Times New Roman).
2. The Layout
ChatGPT’s layout is…questionable. The hierarchy is barely existing, and I find myself feeling overwhelmed by the cluttered content. ChatGPT’s use of padding/margin lacks between sections as shown.
3. Responsiveness
I hit inspect and checked out the pen to see what would happen if it was on a phone, and it looked like the website was suffocating. The first 2 sections were fine (the hero and about), but the rest went up in flames. Since the website is fixed (meaning it doesn’t change), Even on an iPad Pro, it broke. Most websites are viewed on smaller devices, like phones. This is one of the things web developers should think about the most, that’s a big sign that ChatGPT isn’t good at coding good websites.
4. The Colors
#333 on a white background isn’t ChatGPT’s greatest choice, but other than that, ChatGPT gave me the colors I wanted, so that’s why it’s last on the list.
Conclusion
In conclusion, ChatGPT is a tool not a replacement. It can give you helpful snippets, and code amazing and useful things. So ChatGPT can’t (and shouldn’t) do all of your work for you, or for now. With AI’s continuing growth, it is hard to say when AI will take over for developers. But I can tell you, it won’t be now!