{"id":229,"date":"2023-04-16T17:25:55","date_gmt":"2023-04-16T17:25:55","guid":{"rendered":"https:\/\/gilect.com\/blog\/?p=229"},"modified":"2023-04-16T17:29:35","modified_gmt":"2023-04-16T17:29:35","slug":"trying-to-make-a-website-with-chatgpt","status":"publish","type":"post","link":"https:\/\/gilect.com\/blog\/2023\/04\/16\/trying-to-make-a-website-with-chatgpt\/","title":{"rendered":"Trying to make a website with ChatGPT"},"content":{"rendered":"\n

ChatGPT<\/a> 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.<\/p>\n\n\n\n

The scope<\/h2>\n\n\n\n

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\u2019s the prompt given to ChatGPT:<\/p>\n\n\n\n

\n

\u201cCreate 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.\u201d<\/p>\n<\/blockquote>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Making the website<\/h2>\n\n\n\n

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\u2019s website looks like this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

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 \u201cYellow Banana,\u201d \u201cGreen Banana,\u201d and \u201cOrganic Banana.\u201d<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Generating the CSS<\/h2>\n\n\n\n

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<\/em> generate the CSS for the HTML code that it already provided. Here was the prompt that we used:<\/p>\n\n\n\n

\n

\u201cGenerate just the complete CSS for the HTML code you provided.\u201d<\/p>\n<\/blockquote>\n\n\n\n

This time, ChatGPT was able to successfully generate the entire code without getting cut off again.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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 \u201chero\u201d class, only an element with an ID as \u201chero.\u201d The AI failed to notice this. After manually tweaking the HTML code to include the \u201chero\u201d class, it was able to display properly.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Another example of a mistake is with the \u201cShop Now\u201d button, which has a class of \u201cbutton.\u201d However, ChatGPT generated the CSS code for the \u201cbtn\u201d class, which is not present in the HTML code. Once again, with some manual tweaks, this was able to be fixed.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Smaller Tweaks<\/h2>\n\n\n\n

For this test, we decided to see if ChatGPT could tweak its code based on what we told it to do. The yellow \u201cShop Now\u201d button looks bad on a yellow background, so we gave ChatGPT the following prompt:<\/p>\n\n\n\n

\u201cChange the button in the hero to dark blue. Only generate the CSS for that specific element.\u201d<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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\u2019s just a link:<\/p>\n\n\n\n

<a href=\"#products\" class=\"button\">Shop Now<\/a><\/code><\/pre>\n\n\n\n
Video<\/h2>\n\n\n\n
\nhttps:\/\/youtube.com\/watch?v=ta98StiOUBY\n<\/div><\/figure>\n\n\n\n
Can ChatGPT Build a Website?<\/h2>\n\n\n\n
While ChatGPT can<\/em> 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<\/a> available that already have pre-built templates.<\/p>\n\n\n\n
At least for the near future, ChatGPT cannot properly program a website. However, AI technology advances each day, and it isn\u2019t long before ChatGPT learns this capability.<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":1,"featured_media":238,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[32],"tags":[48,35,33],"class_list":["post-229","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-websites","tag-chatgpt","tag-website","tag-websites"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/gilect.com\/blog\/wp-content\/uploads\/2023\/04\/chatgptcantmakeawebsitecompressed-scaled.jpg","_links":{"self":[{"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/posts\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":3,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/posts\/229\/revisions"}],"predecessor-version":[{"id":241,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/posts\/229\/revisions\/241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/media\/238"}],"wp:attachment":[{"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/media?parent=229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/categories?post=229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/tags?post=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}