Course Overview
This course is designed for teachers with zero technical knowledge to show you how to create a complete pack of printable Top Trumps cards using AI-generated code.
You will learn how to prompt ChatGPT to generate all the code needed for your Top Trumps game—complete with images, and print-ready layouts. Images will be generated in two different ways - a basic way and a pro way for those that want to push further.
Along the way, we'll look at the code that is produced and see how to make changes in the code even if we don't understand everything. We'll also explore other ideas for creating games without the need to understand coding.
Course Modules
Module 1: Introduction to Your Project
What You'll Build
You will create a complete pack of Top Trumps cards arranged on A4 landscape sheets with 36 cards (plus spare cards for cover, rules, and facts). Each card will feature a title, an image area, and four score categories.
How It Works
We use ChatGPT prompts to generate all the code. You don't need to know any code. AI will produce it so it is ready to use!
Module 2: Generating Base Code with ChatGPT
Crafting Your Prompts
Learn to write clear prompts that tell ChatGPT to generate a complete HTML file with the required layout. For example:
"Generate HTML and CSS for a Top Trumps game with 36 cards arranged on A4 landscape sheets (8 cards per sheet) with portrait cards. Each card should have a header, an image area, and four score categories."
Review the generated code and see how it matches our sample layout.
Module 3: Adding Images with Wikimedia Commons
Using Public Domain Images
Wikimedia Commons offers free, public domain images. You can prompt ChatGPT to incorporate fixed image URLs into your code. For example:
"Generate a Top Trumps card for an apple using the image URL 'https://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg' and style it so the image fits the card perfectly."
This method is simple and reliable for beginners.
Module 4: Advanced Image Generation with an API (For Pro Users)
Dynamic Image Creation
For users who want extra customisation, you can use an image API (such as DALL·E) to generate images on demand. For example:
"Write HTML and JavaScript code that calls the DALL·E API to generate an image for an apple Top Trumps card (prompt: 'A realistic painting of an apple fruit') and integrate it into the card layout."
Beginners can stick with the Wikimedia method and explore this option later.
Module 5: Assembling and Testing Your Project
Bringing It All Together
Once you have all the generated code, you'll learn how to combine it into a single, printable HTML file. This includes arranging cards on print-friendly A4 sheets and ensuring images display correctly.
Module 6: Next Steps and Enhancements
Customize and Expand
Learn how to further customise your Top Trumps pack by modifying prompts, changing styles, or adding interactive features—all without writing code manually.
We'll also look at other ideas for simple games you can make using ChatGPT to code