Start Here: Use Gemini Canvas
We will use Gemini for this workshop. Open Gemini and make sure you select Canvas in the Gemini tools before running prompts.
Workshop Goal
Build one simple page with AI, then improve it in small steps. Learn how CSS frameworks change the look without changing your core content.
Workshop Flow
- Create a basic starter page with AI
- Try the same page in Pico
- Try the same page in Bootstrap
- Try the same page in Bulma
- Collect colors/icons/UI ideas in Customize
- Mix ideas and customize in Example
Tools
Starter Prompt (copy/paste)
Keep your first page quick and simple. You will improve it in later workshop steps.
Copy the prompt below exactly, then run it in your AI tool.
Create a very simple one-page website for a school-friendly topic (such as a class pet fan page, reading challenge tracker, hobby club, or lunch menu highlights). Include a page title/header, a short intro paragraph, three content sections, one list of links/resources, and one button or call-to-action. Keep accessibility simple: use headings in order, include a skip link, and make sure tabbing clearly shows which link or button is selected. Keep the design basic and clean with no advanced animations or complex layout. Do not output any files; provide the HTML directly in your canvas.
Choose your own page idea (optional)
You can use your own idea instead of the sample topic.
- Keep it to one page
- Use only a few sections
- Avoid advanced features for now
- Focus on clear content and structure first
What happens next
- Pico: minimal, clean defaults with very little class setup.
- Bootstrap: strong components and utility classes for polished layouts.
- Bulma: readable class names and a content-first structure.
- Customize: gather palette, icon, and UI pattern ideas for your final remix.
- Example: combine your framework favorite plus resource picks into your final version.
You are not trying to perfect this page yet. Keep the starter version basic so the framework differences are easy to notice.