Philosophy
This website's creation philosophy was to code an article-styled website with as little prior knowledge as possible, solely using generative AI, to educate individuals about AI and test the current limits of generative AI.
Sources
This website was made using Github Pages to host the website; GPT 4.0 to code the website; Sublime Text to test the code; and DALL-E 3.0 and DREAM to generate the website's images.
Explanation
Before this project started, research was done pertaining to the uses of CSS and HTML for creating websites—not on how to write CSS, but on how it works. As GPT 4.0 elaborates, "HTML is used to structure the content of a web page, such as text, images, and links, forming the skeleton of the website. CSS is employed to style this content, allowing for customization of colors, fonts, layouts, and more, essentially defining the website's appearance. Together, HTML provides the structure, while CSS enhances the visual presentation, creating a cohesive and visually appealing website". Perhaps the most important aspect of creating the website was learning how to link all the HTML pages together and the different ways HTML and CSS can be used.
Knowledge from a singular source about writing websites with GPT 4.0 was applied to create this website. This prompt was used to prime GPT 4.0 from that source: "I would like you to act as a frontend web developer. For the project, you'll code a new website using these tools: HTML, Bootstrap framework using the CDN for CSS and JavaScript. The website should be mobile-friendly and responsive. It should also include the most recent version of Twitter Bootstrap CSS classes in the site structure for layout and style. When it's all done, there should be a single HTML file. You should also include a navigation menu with internal links to the headings within the page content. Do not provide explanations for any of the code you write. Do you understand everything? Please reply with a yes or no answer if you understand all the requirements".
After using the above prompt, all it took was prompt engineering, written content, and keeping in mind the capabilities of HTML/CSS to create the files for this website. Also, the ability to copy/paste code into the right areas of an HTML/CSS file. There was significant prompt testing to produce web pages appropriate for this website; each new webpage was better than the last. One can directly tell GPT 4.0 which aspects of the code to edit. GPT 4.0 usually only outputs the headers of the HTML, requiring prompters to fill in the paragraphs. From there, each HTML/CSS file was uploaded to GitHub. Below are some examples of the prompts submitted without the content, as well as the GitHub repository for this website.
Prompt #1
Create a new html and css file for a news article formatted page with a University of Michigan style . Directly above the article will be links to other articles html pages with small images with them the articles are titled AI in Education, AI in the Workplace, When is AI Usage Appropriate?, Benefits of AI Usage, and Concerns about AI Usage. Also include additional unique design aspects to the css and html code to make the page seem more advanced. The article content will be:………
Prompt #2
I like the css you produced can you redo it to add more detail to the html and include the Related Articles section talk about earlier: AI in Education, AI in the Workplace, When is AI Usage Appropriate?, Benefits of AI Usage, and Concerns about AI Usage. Also include additional unique design aspects to the css and html code to make the page seem more advanced. The article content will be:………
Prompt #3
I like the css you produced can you redo it to add more detail to the html and include the Related Articles section talk about earlier: AI in Education, AI in the Workplace, When is AI Usage Appropriate?, Benefits of AI Usage, and Concerns about AI Usage. Also include additional unique design aspects to the css and html code to make the page seem more advanced. The article content will be:………
Conclusion
Although this website's design quality is not up to the standards of platforms like WIX or Canva, it is a testament to the growing capabilities of generative AI and its uncanny ability to write code for individuals that hardly know how. A more knowledgeable website designer could push GPT 4.0 farther than I could. Only time will delay generative AI from reaching the point where it can surpass website design platforms and the creators behind them.