Screenshot checklist (so you can add your own images)
You said you want to add screenshots yourself. Great - your screenshots will match the exact version of the apps you are teaching.
Use this checklist as your 'shot list'. Save images with these filenames so they drop into the website easily.
Privacy tip
Before you take screenshots, remove personal info: names, emails, phone numbers, account numbers, addresses, and chat history.
Shot list
- quick-01-chat-box.png - Quick Guide: empty chat screen with prompt box
- quick-02-copy-text.png - Quick Guide: copy text action
- m1-01-prompt-box.png - Module 1: prompt box
- m1-02-follow-up.png - Module 1: follow-up example
- m1-03-copy.png - Module 1: copying text
- m2-01-temporary-chat.png - Module 2: temporary chat option
- m2-02-settings-privacy.png - Module 2: settings/privacy controls
- m2-03-redaction.png - Module 2: redaction example
- m2-04-scam-analysis.png - Module 2: scam analysis example
- m3-01-home.png - Module 3: ChatGPT home/chat list
- m3-02-new-chat.png - Module 3: new chat button
- m3-03-voice.png - Module 3: voice button
- m3-04-upload.png - Module 3: upload button
- m3-05-memory.png - Module 3: memory settings
- m3-06-conversation.png - Module 3: example conversation
- m4-01-gemini-home.png - Module 4: Gemini home/prompt box
- m4-02-gemini-live.png - Module 4: Gemini Live
- m4-03-upload.png - Module 4: upload
- m4-04-deep-research.png - Module 4: Deep Research
- m4-05-conversation.png - Module 4: example conversation
- m5-01-bad-vs-better.png - Module 5: bad vs better prompt
- m5-02-follow-up-refine.png - Module 5: follow-up refinement
- m5-03-clarifying-questions.png - Module 5: clarifying questions
- m6-01-prompt-library.png - Module 6: prompt library with copy button
- m7-01-chatgpt-plan.png - Module 7: ChatGPT plan/model picker
- m7-02-gemini-plan.png - Module 7: Gemini plan/upgrade
- m7-03-limits.png - Module 7: limit message (optional)
- history-01-timeline.png - History: optional timeline graphic
- access-01-text-size.png - Accessibility: text size setting
- access-02-browser-zoom.png - Accessibility: browser zoom
- worksheets-01-preview.png - Worksheets: optional preview
- trouble-01-limit-message.png - Troubleshooting: error/limit message
Where to put screenshots in the website folder
Place screenshots in: assets/screenshots/
Example: assets/screenshots/m3-01-home.png
Screenshot quality tips
- Use large text settings while capturing (it helps older readers).
- Crop out personal info at the top of the screen.
- Keep screenshots simple: show the one button you are talking about.
- If an app changes and a button moves, update the screenshot and keep the filename the same.