Using Large Language Models To Build A Web Site

Using Large Language Models to Build a Web Site

Workshop Outline for Resounding Poetries, a conference at UBC Okanagan, May 14 - 17, 2025

Facilitator: Geoffrey Rockwell

Getting Set Up

To follow this workshop you will need to get the following:

• A (free) account for OpenAI's ChatGPT. Go to ChatGPT OpenAI.
  • If you have a Gemini account that should work too.
• If you want to make the web site visible you will need a server. You can use GitHub Pages.

Creating a Web Page from your CV

Now we are going to ask ChatGPT to create an HTML page and CSS stylesheet for you.

• Upload a short CV that you want turned into a web page.
• Prompt ChatGPT with something like:

• You don't need to ask for a CSS page, but it will allow you to add pages to your site that are consistently formatted.
• Copy the HTML and CSS that ChatGPT proposes, paste them into a text editor, and save them as two files (index.html and styles.css).
• Open the HTML page in a browser and see if it looks right. There will almost always be issues.
• Prompt ChatGPT to fix the issues or change a section. For example you could prompt:

• You will then need to copy the relevant changed HTML to the text file, save and refresh to see if it is right.

Discussion

What sorts of things go wrong?

• ChatGPT doesn't markup your entire CV, leaving sections unencoded.
• ChatGPT formats your CV strangely.
• ChatGPT doesn't convert reserved characters like an ampersand into entities.

Issues

Lets take a moment to discuss some of the data privacy issues around using LLMs this way.

• What do you think OpenAI does with your data? How can you avoid sharing your information?
• What should you not use LLMs like ChatGPT for?
• Does it actually save time?

What would we want to do next?

• You might want to break the web site into sections on different web pages with a common header. How could you ask ChatGPT to do that?
• You might want to use ChatGPT to mark up a different sort of text. For example, you might want to put a paper up online as an HTML document.
• You might want to change the design of the document or site.

Demonstrate ChatGPT+ Canvas

With more advanced chatbots you can have more control and work on longer documents. With ChatGPT+ we can use the Canvas feature that lets us interact with the chatbot in one panel and see the results in another. It will also preview the results. This lets us iteratively edit the CV from the prompt line asking ChatGPT to do things like:

• Shorten the grants to include just the dates, the title, the PI, and the value.
• Create a separate page for the conference presentations and link it to the main CV page.

I can also show the same Canvas feature in Google's Gemini Advanced for those who have access to that.

What else can we do?

Using ChatGPT to create a Research Project web site

Now, lets try to create a simple research project web site.

We will probably be running out of time by now, but you should be on your way to being able to use LLMs for coding work.