slides
FeaturedHow to build presentation slide decks as HTML pages. Covers the slide format, canvas dimensions, and recommended libraries.
Code & Development 332 stars
52 forks Updated 3 days ago MIT
Install
Quality Score: 89/100
Stars 20%
Recency 20%
Frontmatter 20%
Documentation 15%
Issue Health 10%
License 10%
Description 5%
Skill Content
# Building slide decks
A slide deck is a single HTML page with `html_layout: "fixed-aspect"` whose
`<body>` contains one `<section class="slide">` per slide.
## The canvas — 1920 × 1080 (16:9)
Every slide is a fixed **1920 × 1080 px** canvas with `overflow:hidden`.
Stay inside a **64 px safe-area margin** (working area 1792 × 952 px).
Nothing should scroll inside a slide; the viewer scales the canvas to fit
the viewport, and the exporter renders at native 1920×1080.
## Required structure
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Deck title</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css" rel="stylesheet">
<style>
/* Belt-and-suspenders — the viewer enforces these too. */
section.slide {
width: 1920px; height: 1080px;
overflow: hidden; position: relative;
box-sizing: border-box;
padding: 64px;
}
</style>
</head>
<body>
<section class="slide" data-type="cover">…</section>
<section class="slide" data-type="content">…</section>
<section class="slide" data-type="content">…</section>
<section class="slide" data-type="final">…</section>
</body>
</html>
```
## Page types (`data-type`, optional but recommended)
- `cover` — title slide.
- `toc` — table of contents.
- `chapter` — section divider.
- `content` — regular content slide.
- `final` — thanks / Q&A / contact slide.
These let prese...
Details
- Author
- Fergana-Labs
- Repository
- Fergana-Labs/stash
- Created
- 7 months ago
- Last Updated
- 3 days ago
- Language
- Python
- License
- MIT
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
AI & Automation Featured
make-a-deck
Slide presentation in HTML
64,796 Updated yesterday
asgeirtj Web & Frontend Listed
frontend-slides
Use when building standalone HTML/CSS/JS presentation slide decks — self-contained single-file decks with viewport-fit layout, keyboard navigation, and browser Print-to-PDF export.
7 Updated 1 weeks ago
pekral Web & Frontend Listed
html-slides
Use when building a self-contained HTML presentation deck. Covers a viewport-safe CSS base with clamp() scaling and short-height breakpoints, slide density limits, a catalog of 12 visual presets (font pairings, palettes, signatures), and the negated-CSS-function gotcha.
1 Updated 1 weeks ago
Mixard