Html slideshow

HTML Slideshow

Create a finished browser presentation that tells one coherent story and works without a slide platform.

Job contract

• Owns: horizontal, browser-based slide decks.
• Does not own: 1080x1350 social carousels (instagram-carousel-maker) or reusable visual identity (brand-system-builder).
• Finished deliverable: working HTML deck, source attribution, and viewing instructions.

Workflow

1. Establish audience, purpose, viewing context, duration, source material, and brand constraints.
2. Create the story spine before styling: opening tension, development, proof, resolution, action.
3. Choose a visual direction from the source, audience, and brand constraints. Use a small set of recurring motifs rather than a generic card-deck treatment.
4. Use one idea per slide and vary composition to match the job of the slide. Cut content instead of shrinking type.
5. Build semantic HTML, scoped CSS, keyboard and click navigation, slide counter, and responsive scaling.
6. Avoid dependencies unless the user needs them. Keep external assets credited and legally usable.
7. Test first, middle, last, overflow, keyboard controls, and common viewport sizes.
8. Return the actual file, not only a storyboard.

Minimum quality bar

• Clear visual hierarchy at presentation distance.
• A visual direction that reflects the source or brand rather than an interchangeable template.
• Real examples, screenshots, diagrams, or source-specific proof when the supplied material supports them.
• Keyboard navigation with left/right arrows and space.
• No clipped text or accidental scrollbars.
• Respect prefers-reduced-motion when animation is used.
• Source or credit factual claims and third-party media.

Delivery note

Report the deck path, slide count, how to open it, what was tested, and any external asset dependency.

Guardrails

• Never invent statistics, customer quotes, logos, or endorsements.
• Do not use copyrighted imagery without permission or a usable licence.
• Do not publish or deploy the deck unless the user explicitly approves that external action.