In recent years, every web developer has probably been asked the following question:
"Are you afraid for your job?In a few years, AI will be doing the websites, right?"
Our answer to this is basically:
“It takes more to make a website than just one person writing code!”
Nevertheless, we dared to try to create a website with ChatGPT just to check whether the job of web developer might soon no longer be needed.
However, we asked ourselves the question
"How good is ChatGPT as a web developer?"
1. The Challenge
It's no longer a secret that websites can be created automatically using various tools and AI. But how good are these websites? And how easy is it to create a website with AI? Where could this be used? What is a realistic scenario?
As a web developer, you usually have specifications in the form of a finished layout. This gave rise to the idea of having ChatGPT build a website that meets certain design specifications.
The requirements:
- We are trying to recreate an existing website that is already online (layout by graphic designer, implementation with TYPO3) with ChatGPT - but only the homepage as a one-pager.
- The website whose layout we want to recreate already exists at syssy.consulting.
- The website created by ChatGPT should look largely similar and have navigation with anchor links that link to the individual areas.
- Mobile optimization is a must - at least to the extent that the website can be used on mobile devices. Burger navigation is not used.
- The website should be largely search engine optimized.
- We feed the logo and images into ChatGPT and store them in our website folder.
The top rules:
- No code may be written!
- The website is only created by prompting.
- We always copy the entire index.html and style.css that ChatGPT generates,sometimes we also insert code if ChatGPT only ejects code parts.
2. First attempts
We already have the logo and images, which we provide to ChatGPT and store locally in our website folder, as ChatGPT instructs. Wild prompting begins, and the first attempts don't look too bad.
The original goal
The original plan was to create a single prompt that contains all the information ChatGPT needs to create the perfect website. This prompt should be reusable for future websites. So create the perfect prompt once, agree to a template, and the perfect website will be generated again and again.
But we quickly failed with this method. The problem was that with each new prompt, all the information was reinterpreted, and a completely different result was generated (of course!). However, the result was completely different every time - sometimes better, sometimes worse, sometimes really bad and also incorrect. It was almost impossible to rewrite the prompt in such a way that individual things such as the colour of the links were improved, but the other things that had already worked remained the same.
We have therefore decided to start with an initial prompt, which contains the essential framework information such as design, layout and content information. The result is reviewed and then instructions for improving individual parts are given via additional prompts. In the end, this worked relatively well and is, in our opinion, a laborious but feasible approach.
The start
After the first attempts and prompts, the idea quickly arose to approach the “AI website” project in a more structured way and to define different styles that can be reused, e.g. for individual blocks that are all in two columns or have a background colour. This change radically worsened the result at the beginning and cost a lot of time. :( However, if you have several elements that you reuse, perhaps on different pages, it makes perfect sense.
At the beginning there are instructions for defining the font, font size, font style of body text and headings.
Different block styles are then defined, which can be specified for each block. In this case, there are only two different blocks. The blocks each have two columns and one block has a gray background up to the edge. The images can be on the left or right, as can the text.
The specifications for navigation, header, intro and footer are defined directly in the blocks.
An attempt was made to avoid direct specifications for CSS in the instructions, which was successful with one exception - the bullet points of the lists should be a graphic. ChatGPT did not come up with the idea of using the graphic for the bullet point as a pseudo-element :before. But since everything else didn't look good, we have given a single concrete CSS instruction here.
The first initial prompt (after several attempts)
Create an HTML website called index.html with an external stylesheet called style.css
Use the images I uploaded.
Design instructions for the entire website:
- Use the Google Font “Public Sans” for the font on the entire page
- The body text is 16px, the line height is 1.5 times the text size
- Use the image list_check.svg as a bullet for all bulleted lists (not in the navigation), the bullets should be 21px in size - use :before for this, the text should be black and have normal standard text size
- Make the buttons orange with the color code #ff6f1b and rounded corners, the font white and not underlined
- Use the graphic logo.svg for the logo, 100px wide
- Headlines are black, not in capital letters and not bold, spacing downwards of 0.5 times the line height; the size is graduated, max. 2.5 times the text size
- Sublines are orange (#ff6f1b) and in capital letters, not bold and 1.5 times the text size
- The headline in the blocks is 1.5 times the size of the body text and not bold, space downwards 0.5 times the text size
- Paragraphs have a space at the bottom of 1 times the line height
- Headings have a space at the bottom of 1.5 times the line height
- The multi-column content has a space of 50px between the columns
- The multi-column contents of the blocks are not next to each other on mobile devices (resolution smaller than 750px)
- The content in the columns is centered vertically
- Headings are not bold, but only larger
There are different styles for the individual blocks:
“Two-column block without background”
Make a content with 2 columns with 50% each - make sure that it runs out in one line
Maximum width of the content is 900px, if there is enough space, it should be exhausted.
Between the columns is a distance of 2 times the text size
The headline is 1.5 times the size of the body text and not bold, space to the bottom 0.5 times the text size.
“Two-column block with gray background”
The entire block has a gray background (color code #f1f1f1) and extends across the entire width to the outer edge.
In the gray area, make a 2-column content with 50% - 50%, maximum 900px wide, but the width should be used if there is more space.
Page layout:
Logo (max. 100px) and navigation - are not in the header, but above it
Header (with background image and text)
Block 1, Block 2, Block 3
Footer
#### Logo and navigation ####
Max. 900px wide, equal distance left and right to the edge, content centered vertically
The logo is on the left and the navigation with the navigation points is on the right
The logo is max. 100 pixels wide
The navigation contains the following pages: Workshops (link to block 2 “Workshops”), Website analysis (link to block 3 “Website analysis”), Contact (Mailto:office@syssy.net)
The navigation is right-aligned, do not use bullets, delete the :before style
The text should be 1.25 times the size of the body text and normal, not bold
The links are not underlined and black
The logo should have a space of 20px at the top and bottom
#### Header ####
Instruction:
The header with background image extends across the entire width to the edge
Use the background image header_bg.png for the header
The font is white
The header is 2 times the size of the body text, white, not bold and centered
The minimum height of the header is 400 pixels
The content is max. 700px wide and 1.25 times the size of the body text and centered
No spacing in the header, but center the text vertically
Header content:
Headline (Heading 1): Web Consulting
Text underneath:
Support for your website!
Together we boost your website by analyzing it, revealing problems and solving them together.
### Introduction ####
Headline: Need help with your website?
Text:
We support you in optimizing your website by carrying out extensive analyses to detect possible errors. Your website will be analyzed in the areas of on-page SEO, performance, usability, accessibility and GDPR.
We use various analysis tools to gain an overview of your website and create a comprehensive report for you. On request, we can also create a catalog of measures with suggestions for improvement.
We have many years of experience with TYPO3 and WordPress and can provide valuable tips for implementing optimization measures.
#### Block 1 ####
Style: Two-column block without background
Instruction:
In the left column the image, in the right column the headline, text, button
the button below the text
The headline in orange, not bold and the same size as the body text
Image: being-productive.svg
Headline: WE GIVE YOU THE OVERVIEW
Text:
- Search engine optimization (SEO)
- performance
- usability
- Accessibility
- DSGVO
Button: Request now (link to office@syssy.net)
#### Block 2 ####
Style: Two-column block with background
Instruction:
The text in the left column, the image in the right column
The subline is above the headline
The button should be below the text
Image: workshop.svg
Headline: Workshops
Subline: Optimize website together
Text (each line a separate paragraph):
We work together to improve your website's search engine results so that you can reach more people.
For WordPress and TYPO3 websites, we can work directly on improving your website.
Click the button: Learn more (link to office@syssy.net)
#### Block 3 ####
Style: Two-column block without background
Instruction:
Image in the left column, text in the right column
the button below the text
The subline is above the headline
Image: deep-dive.svg
Headline: Website analysis
Subline: DEEP DIVE INTO YOUR WEBSITE
Text:
We shed light on many different aspects of your website and carry out extensive analyses:
- Technical audit & performance analysis
- GDPR analysis & check for accessibility
- Content & keyword analysis
- Access analysis
Button: Learn more (link to office@syssy.net)
#### Footer ####
Instructions:
The footer has the background #181715 and extends across the entire width to the outer edge.
The text and the links are white, the links are not underlined.
Make a 3-column content in the dark area with 33% - 33% - 33%, maximum 900px wide, but the width should be used if there is more space.
Content column 1:
Logo (use logo_white.svg, max. 80px wide)
SYSSY Online GmbH
office@syssy.net
© 2024
Content column 2:
Heading: Offer (in color #009881)
Content:
Create a navigation with the following points:
- SYSSY Software (link to www.syssy.net)
- Workshops (link to workshops.html)
- Website analysis (link to website-analyse.html)
Content column 3:
Heading: Legal (in the color #a8365a)
Content:
Imprint (Link to www.syssy.net/impressum)
There were several attempts before this “final version”. The version above is about the 10th attempt. After this version, we decided to make the adjustments in individual steps and not to adjust the entire prompt each time.
Information: There are spelling mistakes and sometimes different specifications (e.g. line height, text size ...) in the prompt, but these were not corrected afterwards, as we created the website from this prompt.When creating your own prompt, you can pay more attention to the wording.
The first result of the initial prompt (referred to as version 1) does not deliver such a bad result, but a few things still need to be adjusted.
Click here to view version 1 in German
Click here to view version 1 in English (We did all first in German and then again in English. The English version differs from the German)
3. Adaptations
If you look at version 1, only a few adjustments actually had to be made. Nevertheless, a lot of steps were necessary to achieve the final result, as the layout was changed again during the individual steps.
Here are some screenshots of the chat process that ultimately led to the final version. You can see how laborious it was at times to implement certain things.
4. Challenges
Although ChatGPT delivered good results right from the start, certain parts were difficult to implement.
The “little things” that had to be fixed:
- A navigation that is a list, but without bullets
- The bullets in the lists should be a graphic with a certain size - you had to give the hint :before for it to work at all. ChatGPT try it with :marker and it is not possible to set the image size here.
- A block with a gray background that stretches across the entire width, whereas the 2-column content should be max. 900 pixels wide
- The same problem in the footer, where the background extends across the entire width and the three columns are the same width
- The 2-column layout that breaks in mobile view and displays the columns one below the other
- In the English version is, it was not possible to get the grey area 100% wide. You can view the difference between German and English version below.
Non-constant code
One major problem was that the result was not always the same. If instructions changed only minimally, e.g. because the font size was adjusted, suddenly a completely different HTML or CSS was generated, and the page was “destroyed” again, although it was almost perfect before.
There were several times when the page was almost perfect, but a small change in the prompt caused the page to look completely different again, and you had the feeling that you had to start all over again.
Things like search engine optimization were also not always implemented well. Sometimes things were forgotten when generating new pages.
Incorrect code
In some cases, incorrect code was also generated, e.g. the dots in front of the classes were missing in the CSS, which is why the style was not applied and the navigation did not look as desired. The links in the navigation were not black and not underlined as desired, but blue and underlined - so they had the standard styling of the browser.
Search engine optimization
Of course, a website must also be optimized for the search engine. That's why ChatGPT received the following instruction:
"Keep everything as it is, but do some search engine optimization"
The reason why “Keep everything as it is” is in front of it is that otherwise everything is completely regenerated, sometimes even the entire HTML structure, which means that previous adjustments have been discarded. With the command “Keep everything as it is, but ...” only certain parts were rewritten and optimized.
The following things happened during the search engine optimization instruction:
- Meta tags for description, keywords, robots were inserted in the header
- the HTML was rewritten again so that it is semantically structured - “section” and “article” were used instead of “div”
- The images were given an alt text
- The title tag was changed from “SYSSY Web Consulting” to “SYSSY Web Consulting - Expert analysis and optimization for your website”.
- Since it had to be regenerated later, the title was changed again to “Web Consulting - Professional optimization of your website” and keywords and robots tag were removed again.
- Added schema.org data
I noticed the following things during the first run
- Open Graph tags were missing
- The Google Font was removed from the header again, which destroyed the appearance of the page
A new instruction was issued:
"The HTML is basically good, but you forgot to include the font in the header.Can you regenerate the HTML again?"
After the instructions to add the Google Fonts, other things were forgotten and the search engine optimization was “destroyed” again.
With the third adjustment concerning text, colors, font size, the entire search engine optimization was suddenly gone again, despite the instruction “Keep everything as it is now, but change the font size of the heading ‘xxx’ to 1.5 times text size”.
The schema.org data was forgotten during the renewed search engine optimization. It had to be asked again with “Can you please add the search engine optimization again?”. However, some things were forgotten, such as the schema.org data. Only the request “Was that all for search engine optimization?” added Open Graph tags, Twitter tags and schema.org data. However, the quality of the content is questionable, e.g. the og:image is “URL_to_image” and the schema.org data “name”: “Web Consulting”, where I would have expected the company name or at least “SYSSY” to appear. Here I would like ChatGPT to ask what content it should use if it is not clear.


5. The final result
The result is not perfect and we would still make the following adjustments for a website that goes online:
- the mobile navigation
- some spacing
- the mobile footer
- the favicon
- ...
However, we stopped at this point due to the excessive effort involved.
The English version differs from the German version, as everything has been redone for English. Some things didn't work so well here or were aborted after a certain time.
You can see the final result under the following link:
to the final result in German to the final result in English
In comparison, version 1 after the “Initial Promp” is available under this link:
to version 1 in German to version 1 in English
6. Summary
Different models were used and the initial prompt was tested with different models. There is little difference in the generated code - whether you use ChatGPT 4o, ChatGPT 4o-mini or ChatGPT 4o with canvas, the result does not vary much.
ChatGPT 4o with canvas is well suited as a learning environment, i.e. if you want to learn to write HTML and CSS or another programming language, as adjustments are made live in the code after instructions and you can follow along.
What took the most effort?
- The multi-column content with background colour that spans the entire width
- The bullets in the lists - without the :before hint it didn't work
- Having no bullet points in the navigation - no :before either
- If you change just one little thing in the instructions, it can lead to a completely different result. For example, the website used to be perfect, but the adjustment of minor details destroyed everything again.
- The fine-tuning - because it often adjusted a heading, but other things were discarded. e.g. the font size of a heading was adjusted, but the mobile optimizations were missing when the stylesheet was recreated.
You constantly receive new and different versions of one and the same prompt. This can be inspiring when generating texts, but if you want to create a website, it can be very annoying and slow you down.
If you want to fix one problem, things that have already been solved are destroyed again, as if it doesn't remember what it did before. Despite the instructions that it should keep the previous version, this didn't always happen. So it doesn't always obey ;)
- A font had to be rewritten x times in the font size
- The Google Fonts were suddenly discarded in one version
- The colours for the headlines in the footer were sometimes all orange, then again in the colour they should be - depending on the mood of GPT
- Some of the images were given the wrong names and not the ones I had specified, which meant that some of them were not displayed
- It was very difficult to implement things like the 2-column content element with a gray background, as the gray background rarely went all the way to the edge
- It was very difficult to get the images for the bullet points and then remove them in the navigation and footer
Positive aspects
- In search engine optimization, all things were partially fulfilled
- Despite spelling mistakes, the right things were done, e.g. “search engine optimization” was mistakenly typed instead of “search engine optimization”
- The website that was finally created looks quite good
- The HTML code that was generated is OK
- The CSS that was generated is also OK, apart from small errors in between
7. Conclusion
It is quite conceivable that AI will increasingly be used to help solve smaller, isolated problems. However, the problem with creating websites does not usually start with implementation. For the most part, customers who are just starting out need to be taken by the hand and taken along on the journey. This starts with the logo, CI, web design, concept, texts, technical implementation, search engine optimization and ends with the ongoing maintenance of the website.
ChatGPT will probably not be the shift from “The web developer makes the website” to “Do it yourself with AI”. There will perhaps be more positions in between. People who create concepts, have an eye for aesthetics and have so much technical understanding that they can give orders to the AI. But these are only certain use cases. For large, complex websites, we probably won't be able to manage without developers in the future either. You may need fewer web developers, which is entirely possible. Even if you use systems that make it possible to create websites without developers, which are now available if you take a look at WordPress templates, Wix, Squarespace or the numerous website builders from hosters, there is still a need for technical support at a certain point. For example, if something doesn't work as it should, where things like GDPR and SEO become relevant or where you need individual solutions that are not available off the shelf, you still need professional expertise. The job of web consultant may therefore play a greater role in the future.
The biggest problem with web development using language models such as ChatGPT is that the same input does not always lead to the same output, as it is a language model that is reinterpreted each time.As a developer, this is particularly difficult, as program code usually always leads to the same output.
Perhaps web development is also a difficult task for AI, as the visual aspect plays an important role and the AI has no eyes or no way of visually evaluating the output.Generating pure code in Java or PHP, for example, is much easier, as it is purely about logic and no layout has to be taken into account.
The only thing that was changed manually is the robots tag. This was set to “noindex” because we don't want the website on Google ;)
Time required: 6 hours (as an experienced web developer, the manual implementation would have taken less than half the time)
ChatGPT models used: ChatGTP 4o, ChatGPT 4o-mini, ChatGPT 4o with canvas
Let us help you with TYPO3 monitoring
You want help with website management?
SYSSY works for you in the background!