Building Lecture Slides in HTML with AI

What This Is

This guide covers the practical how-to for building presentation slides as HTML, using reveal.js and an AI assistant, instead of PowerPoint or Keynote.

For the why (version control, portability, content-first editing, and why coding slides ends up faster), read the companion blog post: The Death of PowerPoint: Why I Code My Lecture Slides.

What You Need

Three things, all free:

1. A text editor. I use VS Code, but any editor works.
2. A browser. Chrome, Firefox, Safari, or Edge.
3. An AI assistant. ChatGPT, Claude, GitHub Copilot, or Gemini. Pick one.

No software to install beyond the editor, and no template to buy.

Start From the Starter Kit

The fastest way in is the HTML Slides Starter Kit, a reveal.js template with a clean CSS theme, example slides, and a short guide for people who’ve never touched VS Code or HTML. Fork it, replace the content with yours, and you’re presenting from a browser within the hour.

If you’d rather start from scratch, the rest of this guide builds up the same pieces.

Build Your First Slide

Open your AI assistant and describe the slide you want. Be specific about layout, structure, and styling:

Create a single reveal.js HTML slide for a lecture presentation. Use the reveal.js CDN (version 5.1.0). Dark gradient background. Title at the top, then a 2×2 grid of content areas with coloured left borders. Clean, professional design. Include all CSS inline so the entire slide is one HTML file.

Paste the result into a .html file and double-click it to open in your browser. The first output is usually 80–90% right. Refine in plain English:

• “Make the font bigger.”
• “Add a blue border on the left column.”
• “Change this to a 3-column grid.”

To auto-refresh while you edit, install the Live Server extension in VS Code, then right-click your HTML file and choose “Open with Live Server.”

Reusable Layouts

A few layouts cover most teaching slides. Ask the AI for whichever one fits the content:

• Title slide. Centred title, author, and institution on a dark gradient.
• Two-column. Side-by-side comparison, good for lecture vs. lab or pros vs. cons.
• Grid. A 2×2 grid with coloured borders for summarising key points.
• Results presentation. Tabbed figures with annotations for presenting data.

You can see all of these in the example deck.

Updating an Existing Deck

This is where coding slides pays off. Paste the current HTML into your AI assistant and describe the change:

• “Update the reading list for 2026.”
• “Replace the old dataset reference with the new one.”

The change takes seconds. For a full 13-week course with 200+ slides, you can update an entire deck for a new semester in an afternoon.

Verify Before You Present

AI assistants get most things right, but always check the things that embarrass you in a lecture:

• References. Are the authors and years correct, and do the papers actually exist? LLMs hallucinate citations.
• Links. Click every one. Broken links in a lecture are avoidable.
• Content against your plan. Did it miss a key point, or add one you didn’t ask for?
• Reading list. Are the DOIs correct and the URLs live?

Export to PDF

When you need a static file for a conference submission or to share, reveal.js has PDF export built in:

1. Open your slides in Chrome.
2. Add ?print-pdf to the URL.
3. Print → Save as PDF.

The output is clean and high-quality.

Common Questions

• “What about animations and transitions?” reveal.js has fragments, fade-ins, and slide transitions, and because it’s CSS-based you get more control than a presentation app gives you.
• “I need to embed video.” HTML supports it natively: <video src="demo.mp4">.
• “I don’t have time to learn a new tool.” Budget about an hour for the basics. After that it’s a 5–10× speed-up every semester, and the AI assistant handles the syntax for you.

Quick Start Checklist

1. Fork the HTML Slides Starter Kit (or open a blank .html file).
2. Ask your AI assistant for a single reveal.js slide using the prompt above.
3. Open it in your browser; refine the layout in plain English.
4. Add Live Server in VS Code for live preview while editing.
5. Verify references and links before you present.
6. Export to PDF with ?print-pdf when you need a static copy.

You can have a working slide in a few minutes. Build one talk this way, and you’ll see why it’s hard to go back.