Website Design Prompts

This page records the prompts and responses from the website design work carried out in this chat on 1 April 2026.

Back to the course landing page

Chat Log

Prompt 1

I want to create a basic index.html landing page for the clinical education and digital cultures course. I want the video at https://media.ed.ac.uk/media/1_xvwt9kbq embedded and to add some basic text as follows:

These web pages are to share outputs from the Clinical Education and Digital Cultures course. These are materials generated within and by course participants. The primary purpose of this page is as a repository for experimetnal use of vibe coding using codex connected with an API key via ELM. To enable building web applicatiosn via a chat interface.

Clinical Education and Digital Culture

This course helps participants to gain critical awareness of technology's contribution to the learning, teaching, training and practice environment, and invites reflection and evaluation of what it means to be a clinical educator and practitioner within a highly digitalised culture. On completion of this course you will be able to:

• Critically evaluate the potential implications of digital technology on workplace culture and education in clinical settings.
• Propose ideas for effective solutions to complex technological challenges in healthcare education.
• Use digital media to enhance their professional profile as a clinical educator.

Response: A simple landing page was created with the course title, descriptive text, learning outcomes, and an embedded media section based on the supplied video link.

Prompt 2

Change to a black background. Change font to sans-serif. Add skulls.png image to background top right fading to black background.

Response: The design was updated to use a black background, a sans-serif font stack, and a faded top-right background image treatment using skulls.png.

Prompt 3

Have added skulls.png to root folder.

Response: The project was checked and the image file was confirmed to be present and correctly referenced by the stylesheet.

Prompt 4

Remove video embed and replace with text saying "More information about the course" with the link.

Response: The embedded video was removed and replaced with a simpler text link section pointing to the course video page.

Prompt 5

Add following text to opening paragraph. Inspired by this blog post The Box and the Module as well as work by students on the course as it ran in 2025-26 this web hosting was set up and page created to host and share outputs from Live Conversation with vibe coding exercises as well as student work.

Response: The new sentence and blog link were added into the opening paragraph on the landing page.

Prompt 6

Add space above Video Introduction to this course.

Response: Additional spacing was added above that section.

Prompt 7

Reduce size of page title.

Response: The hero title size was reduced by changing the heading font scale in the stylesheet.

Prompt 8

Change video introduction text to h3.

Response: The "Video Introduction to the Course" heading was changed from an h2 to an h3 and matching styles were added.

Prompt 9

Add section within about this page. Heading 3 - example vibe coded projects. Bulleted list. List item 1 is "PacMan Game". Add link to subfolder entitled pacman.

Response: A new subsection listing example vibe coded projects was added, along with a working pacman subpage.

Prompt 10

Add a sub-bullet below PacMan Game saying "This was a very first one-shot prompt based on a recommendation within codex to "Build a classic pacman game" that was it.

Response: The requested explanatory sub-bullet was added beneath the PacMan Game link.

Prompt 11

Add a bullt above the PacMan Came saying "This website". Add a sub-bullet below "This website" that says "This website was created in about 15 minutes using codex app,. chat GPT5.4 via ELM API. See the prompts here". Link text of "see the prompts here" to a new page called website-design in a sub-folder called project prompt examples. Add the prompts and responses from today in this chat as the text of that page.

Response: The website project bullet and link were added to the main page, and this page was created to capture the prompts and responses from today's chat.