▌ ai-beginner-course-may2026.md

# AI Beginner Course — Session Summary **Date:** 2026-05-22 **Duration:** One session **Topic:** Built a 29-slide HTML presentation deck for an AI Beginner Course --- ## What Was Built **File:** `/tmp/ai-beginner-course/index.html` **Live:** https://surface-purchase-submit-easier.trycloudflare.com (cloudflare tunnel, ~24h) **Permanent:** Deploy to Railway for permanent URL ### Deck Structure — 29 Slides | Slides | Section | |--------|---------| | 00 | Cover — "AI for Beginners" | | 01 | What is AI? | | 02 | **PART 1: Chat AI** — How LLMs work | | 03 | Chat AI — Cloud Models (GPT-4o, Claude 3.7, Gemini 2, Grok 3) | | 04 | Chat AI — Local Models (Ollama, LM Studio, llama.cpp, Jan) | | 05 | **PART 2: Image AI** — How diffusion works | | 06 | Image AI — Cloud Models (Midjourney, DALL-E 3, Ideogram 2, Flux Schnell) | | 07 | Image AI — Local Models (SDXL, ComfyUI, Forge, Flux Dev) | | 08 | **PART 3: Video AI** — How video generation works | | 09 | Video AI — Cloud Models (Sora, Runway Gen-3, Kling, HeyGen) | | 10 | Video AI — Local Models (SVD, LTX Video, Open-Sora, Modelscope) | | 11 | **PART 4: Coding AI** — How code models work | | 12 | Coding AI — Cloud Models (Cursor, Copilot, Claude Code, JetBrains AI) | | 13 | Coding AI — Local Models (Code Llama 70B, DeepSeek Coder, Qwen Coder, Starcoder 2) | | 14 | **PART 5: Why Prompts Matter** | | 15 | Rule 1 — Be specific | | 16 | Rule 2 — Give context | | 17 | Rule 3 — Ask for format | | 18 | Rule 4 — Chain of thought | | 19 | Rule 5 — Iterate and refine | | 20 | Local or Cloud — comparison | | 21 | Decision grid (privacy, quality, cost, convenience, offline, workplace) | | 22 | Key Takeaways | | 23 | Next Steps | | 24 | Questions / End | --- ## Key Design Decisions - **Design system:** Tech Utility dark theme - **CSS tokens:** --bg:#0B0E14 --surface:#151920 --fg:#E8EAED --muted:#8B9199 --accent:#3B82F6 - **Slide classes:** `hero dark` = section headers / cover, `light` = content on dark bg, `dark` = medium bg with light text - **Navigation:** Horizontal swipe + ← → arrow keys + Space/click - **Tool:** Open Design simple-deck skill --- ## Bugs Fixed During Build 1. **CSS class confusion** — "light" slides were rendering white-on-white (text same color as background) - Fix: `.slide.light { background: var(--bg); color: var(--fg); }` gives dark bg + light text - `.slide.dark { background: var(--surface); color: var(--fg); }` gives medium bg + light text - The class names are counterintuitive — light = dark bg, dark = medium bg 2. **Color contrast on muted text** — hardcoded `rgba(250,250,247)` on dark slides assumed white background - Fixed to use `rgba(232,234,237,0.6)` to match actual fg color --- ## Output Files ``` /tmp/ai-beginner-course/ ├── index.html # Live deck ├── ai-beginner-course.pdf # PDF export ├── preview.png # First slide preview └── slide_00.png … slide_28.png # All 29 slides as PNG ``` --- ## Lessons Learned - Open Design simple-deck: always test color contrast with Playwright before showing user - Cloudflare tunnels are temporary (~24h) — use Railway for permanent deployments - The Tech Utility dark theme works well for tech/AI presentations - 29 slides is appropriate for a 1-hour course (1-2 min per slide)