Build your slides in HTML5 and CSS3 with DZSlides.

HTML5 and CSS3?

What are slides made of?

HTML5 can do that.

How slides behave?

CSS3 can do that.

What is DZSlides?

One single HTML file.

A HTML template.

That brings all the needed features to transform a simple HTML5 page into a presentation.

    <!DOCTYPE html>

    <meta charset="utf-8">
    <title>The Title Of Your Presentation</title>

    <!-- Your Slides (one slide == one section) -->

        <h1>My presentation</h1>

        <h2>Will blow your mind.</h2>
        <p>And this is why:</p>

    <!-- Your Style -->

    section {
        background: black;
        color: white;
    h1 {
        color: yellow;

    <!-- CORE v2.0b:  -->
    <!-- Some Code You Don't Have To Look At -->

Pros and Cons



The shells

Because I want to keep the whole mechanism in one single web page, the features are quite limited.

A Shell is an extension for DZSlides.

A Shell is a web page that embeds a presentation and adds a feature to it.

The Shell and the Presentation communicate with postMessage.



adds controls (back, forward), and a slide count. Useful if you want to embed the slides in a blog post.


Show the current slide, the next slide, a clock and controls another opened presentation (fullscreen). Also displays the hidden notes from the slides (in the <details> tag). Perfect for a live presentation.

How to start

Read the source

Download the template, read it. Look at the examples. There's no "rules".

It's as unlimited as the web is.