S.P.A.R.K. with AI — Development Dialog

Building the PPE Movie & CSS Exercise

From movie clip page to full CSS styling exercise —
the conversation, the teacher’s exercise, and the grand finale.

For Students — How to Read This Page

This log documents how the Purple People Eater movie clip page was built and how the accompanying CSS styling exercise was designed. You will see the real prompts, the AI’s reasoning, and — most importantly — a complete step-by-step exercise you can do yourself to produce a page like the grand finale demo.

Watch for Exercise boxes (green) that contain the teacher’s step-by-step instructions, and Design Decision boxes (teal) that explain why specific choices were made.

klp

Can you build a movie page featuring ‘The Purple People Eater’ video? I use it to teach about rudimentary CSS styling. Here is the source code: [YouTube iframe embed]. Let’s make the movie page: purplePeopleEater.html

Prompt Critique — Clear Goal, Implicit Context

Good concise prompt. It includes the essential three elements: what to build (movie page), the asset (iframe embed code), and the filename. Including the iframe directly is much better than describing it — the AI has the exact embed parameters and doesn’t have to guess.

What could be stronger: “I use it to teach about rudimentary CSS styling” is helpful context, but the prompt doesn’t specify whether that teaching context should appear on the page or just informed the choice of clip. That ambiguity led to the first version having an explicit CSS lesson baked in — which turned out not to be what was wanted.

Refinement Rounds

klp

I don’t want the movie page to be the topic of CSS styling, just an inspirational movie, with some history about the song and its performer. It would be nice to include a block of code with the lyrics to the song, which could be copied, which could THEN be used in a project about styling. Those are my thoughts.

Prompt Critique — Course Correction Done Well

This is a well-handled correction. The user clearly states what the page should not be (a CSS lesson) and what it should be (inspiration + history). The deferred use principle is excellent design thinking: put the lyrics on the movie page, but make them copyable for a separate project. This keeps the movie page clean and gives the CSS exercise its own space.

The phrase “Those are my thoughts” is a good closing signal — it invites the AI to complete the picture rather than waiting for an exhaustive specification.

klp

Previous pages, like ‘loudPictures.html’ were formatted with the content above the movie with a drop down. Shouldn’t we use the same format for the purple people eater? Please advise.

Prompt Critique — Consistency Prompt

Pointing to a specific existing page as the pattern reference is one of the most efficient prompting techniques. “Match loudPictures.html” is unambiguous. The question “Shouldn’t we use the same format? Please advise” appropriately asks for design reasoning rather than just executing — the AI confirmed yes and explained why consistency matters before making the change.

Design Decision — Standard Movie Clip Page Structure

All TNT movie clip pages follow the same three-zone structure: (1) collapsible <details> context above the video, (2) mobile warning + video embed, (3) any supplementary content below. This ordering is deliberate: students who already know the context can skip the dropdown and go straight to the video. Keeping supplementary content (the lyrics here) below the video means the primary content (watching the clip) is never buried. Consistency across pages also means students know exactly where to look on any clip page they visit for the first time.

The Exercise Design

klp

Ok, I want to create a SPARK entry surrounding our discussion about the movie clip development. However, I want you to act as a high school web development teacher teaching HTML and CSS. As such, please develop a step by step exercise where a student will create a beautifully styled HTML/CSS page from scratch that validates. To show the ‘grand finale’ please create sparkPurplePeopleEater.html and link to it in our styles area as well. I will supply any artwork you need to make the design ‘pop’. Obviously, this prompt should be in our chatlog too.

Prompt Critique — Multi-Role, Multi-Deliverable Prompt

This is a rich, layered prompt with several strong moves:

Role assignment — “act as a high school web development teacher” shifts the AI’s voice, vocabulary level, and pedagogical approach. Role prompts are highly effective when the domain of expertise matters.
Clear deliverables — step-by-step exercise, grand finale HTML file, link from Styl’n, inclusion in the chatlog. Four things, all named.
Validation requirement — “validates” sets a professional standard that students should build toward from the start.
Asset offer — “I will supply any artwork” is good collaborative framing: the user knows their own asset library.
Meta-awareness — “this prompt should be in our chatlog too” continues the excellent habit of keeping documentation current.

What could be stronger: The prompt doesn’t specify the student’s prior knowledge level. “From scratch” is clear, but “high school, first HTML/CSS unit” vs. “high school, semester two” would allow the exercise to be calibrated more precisely.

The Step-by-Step Exercise

Teacher’s Exercise — Purple People Eater CSS Styling Project

Objective: Starting from the plain lyrics you copied from the movie clip page, build a styled, validated HTML/CSS page that makes those lyrics look great. When you are done, compare your result with the grand finale demo.

Step 1 — Build your skeleton. Create a new file called myLyrics.html. Type (don’t copy-paste!) the HTML skeleton: <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and a <title>, and an empty <body>. Validate it at validator.w3.org before adding anything else. It should pass clean.
Step 2 — Add the lyrics. Paste your copied lyrics into the <body>. Wrap the title in an <h1>, the artist/year in a <p>, each verse in its own <p>, and each chorus in its own <p>. Add a class="chorus" attribute to every chorus paragraph. Validate again — fix any errors before moving on.
Step 3 — Link a stylesheet. Add <link rel="stylesheet" href="myLyricsStyles.css"> inside the <head>. Create myLyricsStyles.css in the same folder. Start with one rule: give the body a background-color of your choice. Reload the page — does the background change? That proves the link works.
Step 4 — Style the body and headings. In your CSS, set a font-family on the body (try Georgia, serif). Give the h1 a large font size, a color that fits your theme, and center it with text-align: center. Try letter-spacing: 2px on the heading for a polished look.
Step 5 — Distinguish verses from choruses. Use the .chorus class you added in Step 2. Give choruses a different background-color, some padding, a border-left or a full border, and try font-style: italic. Now your choruses stand out visually from the verses.
Step 6 — Contain the content. Wrap all your lyrics in a <div class="container">. In CSS, set max-width: 640px and margin: 0 auto on .container. This centers the content and stops it from stretching across wide screens.
Step 7 — Add a hero header. Above your container, add a <header class="hero"> with the song title and artist inside it. In CSS, give .hero a background-color (or a gradient using linear-gradient()), white text, generous padding, and text-align: center.
Step 8 — Add a background image to the hero (if you have one). Set background-image: url('yourImage.jpg') on .hero, then add background-size: cover and background-position: center. The image will fill the hero. Overlay a semi-transparent gradient so the text stays readable: use two values in background, comma-separated.
Step 9 — Add CSS custom properties. At the top of your CSS, inside :root { }, define two variables: --primary: #7C3AED; and --accent: #F59E0B; (or your own colors). Replace your color values with var(--primary) and var(--accent). Now changing one line updates the whole page.
Step 10 — Final validation and polish. Run the W3C HTML validator and the CSS validator (jigsaw.w3.org). Fix every error. Then compare your page with the grand finale demo — not to copy it, but to see how the same techniques can be combined for a different result. Your choices, your design.

Design Decision — Why This Exercise Is Structured This Way

The exercise is ordered for a reason:

Validate first, style second. Step 1 validates before any content is added. Step 2 validates again before any CSS is written. Students who validate late discover a pile of errors; students who validate early discover one error at a time.
Type the skeleton, don’t paste it. Typing forces reading. Students who paste an HTML skeleton often have no idea what the tags mean.
Prove the link works in Step 3 before writing real styles. A broken stylesheet link is the most common first-day confusion. One background-color change proves the file is connected.
Custom properties come last (Step 9), not first. Students should understand what a concrete color value does before abstracting it into a variable.
The grand finale is a comparison, not a template. The exercise explicitly says “not to copy it.” Good assignments have an example answer that demonstrates the concept while leaving room for student creativity.

The grand finale (sparkPurplePeopleEater.html) uses only techniques covered in the ten steps. Nothing in it requires knowledge the student hasn’t been given.

Post-Session Feature — Style Toggle

klp

Let’s add a link to our Purple People Eater finale on the Styling card. Also, how about including a button on the sparkPurplePeopleEater page that toggles the styles on and off? That way a user can see the power of CSS in action! If we do that, we need to update our Spark entry about the purple people eater.

Prompt Critique — Feature + Context + Update, All in One

Three deliverables in one sentence, cleanly bundled:

Styling card link — specific location, specific target
Toggle button on the demo page — clear feature, clear teaching purpose stated (“see the power of CSS in action”)
Update the SPARK entry — documentation kept current, again

The phrase “see the power of CSS in action” is the most important part. It explains why the feature matters, not just what it does. A toggle that strips all styling instantly is a more powerful teaching tool than any before/after screenshot — because students see the transformation happen live and can reverse it on demand. Stating the rationale in the prompt means the AI knows to make the button prominent and in the hero, not tucked in a footer.

GitHub Copilot

Implementation: give the <style> block an id="pageStyles" attribute, then one line of JavaScript does the work:

document.getElementById('pageStyles').disabled =
    !document.getElementById('pageStyles').disabled;

The disabled property on a StyleSheet object is part of the CSSOM (CSS Object Model). Setting it to true tells the browser to ignore the entire stylesheet instantly — no class toggling, no removing rules one by one. The button label flips between “Toggle Styles Off” and “Toggle Styles On” to always reflect what the next click will do.

Placed in the hero so it’s the first thing users reach for. When styles are off, the hero background and typography vanish too, making the contrast dramatic.

Design Decision — Inline StyleSheet Toggle vs. Class Toggle

Two common techniques for toggling page styles:

stylesheet.disabled = true — kills the entire stylesheet at once. Used here because the demo has one stylesheet and the goal is maximum visual contrast. Students see everything go away at once: layout, color, typography, spacing.
document.body.classList.toggle('some-mode') — toggles a class, and scoped CSS rules activate or deactivate. Used in the TNT Styl’n page for the vintage mode, where some styles should change while others stay.

The right tool depends on the goal. For a “what does CSS do?” demo, disable-the-whole-stylesheet is more dramatic and more instructive. For a theme switch, class toggling is more controlled. Students should know both techniques and understand when each is appropriate.

Session Takeaways

A movie page and a CSS exercise are two different things. The movie page inspires. The exercise teaches. Separating them makes each one better: the page isn’t cluttered with instructions, and the exercise isn’t tied to whether the video loads.
Consistency is a design decision. All TNT clip pages use the same three-zone structure. That isn’t habit — it’s intentional UX. Consistent structure means users know where to look. When you have a pattern that works, apply it deliberately, not just occasionally.
Good exercises work backwards from the demo. Build the grand finale first. Then list the CSS techniques it uses. Then sequence those techniques from simplest to most powerful. That sequence becomes your lesson plan.

See the Grand Finale Watch the Clip