Build slide decks and more with HTML

The example is a six-slide launch recommendation for a fictional product called Northstar. It moves from the opening argument to an artifact menu, an illustrative signal, the launch problem, a three-step plan, and the final decision. The browser renders every slide from index.html. The overview below comes from the working deck's storyboard mode.

Write the decision before you touch the design. For Northstar, the team needs to approve a four-week launch pilot. Each slide earns its place by helping the audience make that call. Colors, transitions, and charts come later.

Choose the format around the audience's job. A deck gives a presenter control over sequence. A live report lets readers inspect current evidence at their own pace. A product demo exposes working states. A proposal puts scope, price, and the next step together. A calculator accepts inputs and shows an outcome. A portfolio connects finished work to the process behind it.

Use slides for a paced story, a long page for independent reading, controls for exploration, and a one-pager for a quick decision. The same source material can take a different shape when the audience's job changes. The Northstar deck includes this menu as a working slide.

Use the first prompt when you already know the material belongs in a presentation. Use the second when the final format is still open. Use the third to revise a working deck. Fill every bracket, paste the source material at the end, and delete any requirement that does not help your audience.

Each prompt asks for working files. It also sets the decision, narrative, responsive behavior, evidence rules, and delivery format. Keep source material below the instructions so the model can separate supplied facts from illustrative content.

A small deck can use one scrolling container with a section element for each slide. CSS scroll snap aligns each section to the viewport as the reader moves. Headings, lists, charts, and links keep their browser semantics instead of becoming pixels in a screenshot.

The container owns vertical scrolling and scroll-snap-type. Each slide fills the viewport and declares scroll-snap-align. Give every section a stable id so you can link to a specific slide. If you later need speaker notes, fragments, nested slides, or a dedicated PDF workflow, reveal.js adds those features while keeping HTML as the authoring format.

The Northstar cover uses selectable type, responsive spacing, a stable folio, and a narrow navigation rail. The layout scales with the viewport instead of assuming one projector size. Arrow keys, Page Up, Page Down, and Space move through the slides. Trackpad and touch scrolling still work.

Add a print media query before you export the deck as a PDF. It can remove navigation, put each slide on its own printed page, and adjust screen-only treatments. A present button can call the Fullscreen API, but the browser requires a user action first. The page should remain usable when fullscreen is unavailable.

The Northstar signal slide draws an illustrative five-week chart from five HTML elements and their CSS heights. A real report could read a local data file, filter a table, reveal an annotation, play a product recording, or compare scenarios. Add interaction when it helps someone inspect a claim.

Mark illustrative information clearly and attach sources to real claims. The deck should still make sense when scripts fail or motion is reduced. Give each chart a heading, a short interpretation, an accessible label, and visible values before you animate it. That baseline also prints cleanly.

The Northstar deck below is the working example from this guide. Open it in a new tab and move through the slides with the arrow keys, Space, scrolling, or touch. The source pack contains the HTML, CSS, JavaScript, and local SVG artwork used by the live version.

Download the zip, open index.html locally, and replace the sample story with your own brief. The prompt is written for this exact folder structure, so you can copy it first and keep the requirements that matter to your project.

A production deck may include images, fonts, videos, JavaScript modules, or data files. Keep those assets beside the entry file, preserve their relative paths, and open index.html locally before publishing. A host cannot repair a missing local image or font.

Upload the finished folder or zip to Pagebox when the deck is ready to share. The audience gets one browser link instead of an archive and instructions for finding the entry file. Choose the audience, then test the link outside the owner's session. When the story changes, replace the files behind the existing page so messages and meeting notes still point to the current deck.

Review the deck as a presenter and as a recipient. Move through every slide with a keyboard, a trackpad, and a narrow viewport. Follow each link, inspect each chart label, and open print preview. Ask someone who did not build it to state the final decision in one sentence. If they cannot, fix the sequence before polishing the visuals again.

Northstar needs six slides, one recommendation, and one final decision. Other HTML artifacts need a different test. A calculator should make its inputs and result obvious. A report should make evidence traceable. A demo should expose the states the audience needs to understand. Build the smallest complete page that lets the audience act.