Fantastic Four Project Chat Log & Training Guide

Introduction

This document is a training resource based on the actual dialog between a teacher and GitHub Copilot, as they built a Fantastic Four-themed web app for a high school Game Design class. It demonstrates how to use HTML, CSS, Bootstrap, JavaScript, and p5.js, and how to collaborate with AI for creative coding and teaching.

Key Characters & Technologies

• The Thing: HTML
• Invisible Woman: CSS
• Human Torch: JavaScript
• Mr. Fantastic: Bootstrap 5
• H.E.R.B.I.E.: p5.js & Copilot

How the Project Evolved

Below is a summary of the conversation, with code snippets and explanations. Use this as a model for your own projects and as a teaching tool for students new to web development!

Sample Dialog & Key Lessons

Teacher: I want to create an intro lesson based on the Fantastic Four, mapping each member to a web technology. Can you build a responsive row of figure elements with their images, a favicon, and two Google fonts?

Copilot:
Created index.html with Bootstrap, Bangers & Orbitron fonts, favicon support, and a responsive row of figures.

<figure>
  <img src="images/thing.jpg" alt="The Thing (HTML)">
  <figcaption>The Thing<br><small>HTML</small></figcaption>
</figure>

Teacher: Please add H.E.R.B.I.E. and update the heading. Also, change the technology associations.

Copilot:
Added H.E.R.B.I.E. as a fifth figure, updated the heading, and reassigned technologies.

<h1>The Fantastic Four (and H.E.R.B.I.E.) of Game Design</h1>

Teacher: Use semantic HTML tags and add an <abbr> for H.E.R.B.I.E.'s full name.

Copilot:
Refactored to use <header>, <main>, <section>, and <footer>. Added <abbr title="Humanoid Experimental Robot B-Type Integrated Electronics">H.E.R.B.I.E.</abbr> in the heading.

Teacher: The heads are cut off in some images. Can you fix this?

Copilot:
Added a CSS class to add top margin. Later, you improved this by using object-fit: contain for the images, which is a more robust solution for image cropping issues.

Teacher: Let's add modals for each character with a lesson about their technology.

Copilot:
Added Bootstrap modals for each character, with themed headers and lesson content. Used data-bs-toggle and data-bs-target for modal wiring—no extra JS needed!

Teacher: The modal for Invisible Woman was invisible! Why?

Copilot:
Using invisible as a class name conflicted with Bootstrap's .invisible utility, which sets visibility: hidden. Renamed the class to invisWoman and set .modal-body { color: black; } for readability.

Key Takeaways

• Use semantic HTML for structure and accessibility.
• Be careful with class names—avoid reserved words and Bootstrap utility names.
• Use object-fit: contain for better image cropping in circles.
• Bootstrap modals can be triggered with data attributes—no extra JS required.
• Always check color contrast for readability, especially in modals.
• AI can help you build, debug, and teach—collaborate and experiment!