HTML slide prompt

Teaching & explainers prompt

Teach one concept through an explanation, a worked example, and a short exercise.

By SlideBeaverAI chat or coding agentUpdated October 6, 2026

Build your brief

A lesson needs more than a shortened article. Specify what the learner should be able to do, explain the idea, and provide a practice task that tests that objective. This prompt includes a worked example and separates the exercise from its answer, so you can choose when to reveal it while presenting.

Short lessonsWorkshopsConcept explainers

What to provide

[CONCEPT]: The single idea to teachExample: Feedback loops
[LEARNERS]: Prior knowledge and audienceExample: Beginners who know what a thermostat does
[OBJECTIVE]: What learners should be able to doExample: Identify a sensor, a target, and a corrective action
[SOURCE]: Your teaching material and examplesExample: A thermostat comparing room temperature with a target
[LANGUAGE]: Language for slide textExample: English

Output: A five-slide HTML lesson with a worked example, an exercise, and a separate answer slide.

Ready-to-copy prompt

Create a five-slide HTML lesson about [CONCEPT] for [LEARNERS].
Learning objective: [OBJECTIVE].
Use this source material:
[SOURCE]

Use this sequence: learning objective and relevance; plain-language explanation; one fully worked example; one short practice question; answer and recap. Include the answer only on the final slide. Make diagrams with visible labels and simple CSS boxes and arrows. Avoid unexplained jargon. Match the exercise to the objective and check that its answer follows from the lesson. Use a pale blue background, navy text, and a cobalt accent. Prioritize readable explanations over decorative effects.

Deliver one complete HTML file with inline CSS and no external fonts, stylesheets, scripts, or required network requests. Use semantic text and CSS shapes; do not rasterize ordinary text. Use system fonts.
Each slide must be a top-level <section class="slide" data-slide="true"> with a fixed 1920px by 1080px canvas, border-box sizing, and readable content. Keep every slide visible in the document. Do not depend on JavaScript, a custom element, an animation, or an active class to reveal content.
Use a consistent type scale, generous margins, and strong contrast. Keep one main idea per slide. If text does not fit, shorten it or split the slide rather than hiding it. Check all slide boundaries and spelling.
Use only the facts supplied in my brief. Label missing figures [NEEDS DATA]; do not invent customer quotes, results, sources, or product capabilities. Write in [LANGUAGE]. Return the complete HTML, ready to save as presentation.html.

Replace the bracketed fields with your own brief and source material.

From prompt to presentation

01Prepare the brief
Replace every bracketed field. Paste your actual notes, facts, and desired slide count; include sources for any numbers you want to show.
02Generate outside SlideBeaver
Paste the prompt into an AI chat or a coding agent. Ask for the complete HTML file, then open it locally and check every slide.
03Save and polish
Save the returned code as an .html file. On a desktop, open SlideBeaver, upload it, and adjust text, images, or slide order.
04Check the deliverable
Export HTML or a static PPTX. Reopen the file and inspect line breaks, fonts, and any visual that must remain editable.

Example: Understand feedback loops

A beginner lesson using a thermostat as the worked example, followed by a practice question and answer. Use it to inspect the structure; your AI output may differ.

Download example HTML

Example preview

Feedback loops lesson title slide with a target, measurement, comparison, and action diagram

See the example brief

Concept: feedback loops. Learners: beginners. Objective: identify a target, a measurement, and a corrective action. Example: a thermostat compares room temperature to the target and turns heating on below it. Practice: identify the components in a greenhouse controller. English; pale blue and navy.

Before you import into SlideBeaver

The supplied example uses visible slide sections, inline CSS, and system fonts. AI-generated variations still need their own import check.
SlideBeaver exports a static PPTX. Supported text and shapes can stay editable; complex visuals may become images, and animations are not carried over.
For missing or clipped content, ask the AI to remove runtime-dependent visibility and split dense slides before uploading again.