(This is my third experiment this week with Artificial Intelligence tools for ETMOOC2 – the first experiment was about bouncing poems off different AI platforms and the second was using ChatGPT to build out an Interactive Fiction game of choices).
In my further deeper dives with ChatGPT, I wondered about its ability to spit out code for a simple website. I know other folks are doing it, and using it to check code, but I was curious about what it would create for me, in terms of coding out a simple website.
I asked it: Can you give me the basic code for a website that is dedicated to the art of designing and making saxophones?
In seconds, my screen was filling with HTML code, with parting advice to me:
“This code includes a header with a navigation menu, a main section with information about the website and its features, and a footer with copyright information. You can customize this code to fit your specific needs and design preferences.”
Got it!
But what did the website look like beyond the raw code?
I asked ChatGPT how I could test its code and see what the site would actually look like to a viewer. The AI quickly provided me with some helpful advice on using a Text Edit application on my computer, saving the file as HTML and then opening the file up with a web browser.
You can take the HTML code provided and use it to create a website by following these steps:
- Choose a Text Editor: You’ll need a text editor to write and edit HTML code. You can use a simple text editor like Notepad (on Windows) or TextEdit (on Mac), or you can use a more advanced code editor such as Sublime Text, Visual Studio Code, or Atom.
- Create a New HTML File: Open your text editor and create a new file. Copy and paste the HTML code into the new file.
- Save the HTML File: Save the file with a “.html” extension, for example, “poetry_celebration.html”. Choose a location on your computer where you want to save the file.
- Open the HTML File in a Web Browser: Open your web browser (such as Google Chrome, Mozilla Firefox, or Safari) and go to “File” > “Open File” (or “Open” in some browsers) and select the HTML file you just saved. This will open the HTML file in your web browser, allowing you to see how it looks and test its functionality.
- Customize the Website: You can customize the website by modifying the HTML code to suit your preferences. For example, you can change the text, add images, adjust the layout, and customize the styles using CSS.
- Publish Your Website: Once you are satisfied with your customization, you can publish your website to make it live on the internet. You can do this by purchasing a domain name and web hosting service, and then uploading your HTML file and any other associated files (such as images or CSS files) to the web server provided by your web hosting service. This will make your website accessible to others via its domain name.
Note: If you are new to web development, you may find it helpful to learn more about HTML, CSS, and web hosting to better understand how to create and publish a website. There are numerous online resources, tutorials, and documentation available to help you learn these skills.
For some reason, Chrome and my other browsers didn’t want to play along (maybe I saved the file wrong?) and all I got when I opened the file was the code itself. So I found an online site called Liveweave to check it out.
Pretty basic, as expected, but certainly it could be a starting place for someone working on a functional, if unexceptional, website. I also wonder about whether asking it do something in Python would allow for more complexity and interactivity, which is really what I am after. That’s for another day …
Peace (and the Web),
Kevin
I tested the website building feature a couple of weeks ago. I did it a bit differently. I pointed to a page on my conference website and asked ChatGPT to design a new page. It immediately gave me code.
Then I went to the admin page of my http://www.tutormentorexchange.net site which is built using Joomla. I’m able to look at the html code for each page. So I created a new page, opened the html page, and pasted my code. Then saved it.
I was able to immediately see what the page looked like. It really wasn’t what I hoped for, so I tried again, by asking ChatGPT to re-configure the code. Again, I pasted this into my page. Still not what I wanted. The photos from my conference site were not showing up and the links were not right.
By playing around with this I was inspired to look at the html code for the conference page. I copied this and pasted it into my website page. Then edited what that provided. The result is this page. https://tutormentorexchange.net/conferences-and-online-forums/conf-maps
So as a learning experience, I think the AI was useful. As a web building tool, I think I need to do a lot more work.
Your work shows the need for human intervention and design choices, for sure. And I agree that it is interesting what it can do but far from being something particularly useful for now.
Kevin