How to create stunning presentations using HTML and CSS

In many courses and conferences we attend, we run into a fresh new way of viewing the content or information being presented to us. That way is through the web browser, which offers big advantages over traditional slide creation tools like PowerPoint or Prezi.

Creating this kind of presentation is relatively easy and makes a great impact on our audience. We don't need deep technical knowledge or anything like that, we simply need the decision to do things differently and to learn something new. So let's get to work: in this post we'll learn how to create presentations using HTML and CSS on top of a JavaScript framework that makes our job easier, reveal.js.

In a nutshell, reveal.js lets us build full presentations with HTML and view them in any browser. The reveal.js team itself maintains a demo presentation (in English) that you can see at revealjs.com, and whose code lives in the official repository at github.com/hakimel/reveal.js.

Installing reveal.js

The first thing we need is to bring reveal.js into our project. Back in 2022 the recommendation was to download the zip from GitHub and copy folders by hand, but today it's much simpler. We have two paths.

The recommended way is to install it with npm. Create a folder for your project and inside it run:

npm install reveal.js

If you'd rather not install anything and work from a single HTML file, you can also use the jsDelivr CDN by linking the files directly from cdn.jsdelivr.net/npm/reveal.js. Further down I show you the code for this option, which is the fastest way to get started.

Note: In reveal.js 4.x and 5.x the lib/ folder no longer exists. The styles and the core live under dist/ (dist/reveal.css, dist/reset.css, dist/reveal.js), the themes under dist/theme/, and the plugins under plugin/. If you're coming from version 3.x, this is the most important difference to keep in mind.

I suggest giving your project the following structure, for the sake of maintainability and scalability:

a dist/ folder and a plugin/ folder (these come with reveal.js)
an images folder where we'll keep the images we use in the presentation
an .html file named after your presentation; in my case it'll be called tutorial.html
optionally, a mi-estilo.css file for our custom styles

Creating our first presentation

Alright, now that we have our folder and our file ready, let's create our presentation. We'll open our tutorial.html file (or whatever name you gave it) in a text editor and copy the following lines:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- Here you can put the title of the presentation -->
    <title>The reveal tutorial</title>
    <meta
      name="description"
      content="A description so some search engines index the presentation however you like"
    />
    <meta name="author" content="Sebastián Gómez" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Reset and base styles for reveal.js -->
    <link rel="stylesheet" href="dist/reset.css" />
    <link rel="stylesheet" href="dist/reveal.css" />
    <!-- Presentation theme: change this file to change the theme -->
    <link rel="stylesheet" href="dist/theme/black.css" id="theme" />
    <!-- Theme for code highlighting (provided by the highlight plugin) -->
    <link rel="stylesheet" href="plugin/highlight/monokai.css" />
  </head>
  <body>
    <div class="reveal">
      <!-- Each section tag inside <div class="slides"> represents a slide -->
      <div class="slides">
        <section>
          <h1>Hello</h1>
          <!-- Any HTML code can go inside and it will be shown as a slide -->
        </section>
      </div>
    </div>

    <!-- The code below loads the files reveal.js needs to work correctly and leaves us a set of configuration options we can play with later -->
    <script src="dist/reveal.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <script src="plugin/highlight/highlight.js"></script>
    <script>
      // Full list of configuration options at:
      // https://revealjs.com/config/
      Reveal.initialize({
        controls: true,
        progress: true,
        hash: true,
        center: true,
        transition: 'slide', // none/fade/slide/convex/concave/zoom
        // In reveal.js 4.x and 5.x plugins are registered here,
        // the old "dependencies" array is no longer used.
        plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom],
      });
    </script>
  </body>
</html>

Note on code highlighting: In version 3.x you used to call hljs.initHighlightingOnLoad() manually. That's no longer necessary: the RevealHighlight plugin handles highlighting automatically, and in fact initHighlightingOnLoad is deprecated in modern versions of highlight.js (where it was replaced by hljs.highlightAll()).

If you use the CDN instead of npm: Replace the local paths with the CDN ones, for example https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css for the styles and https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js for the core.

If you open tutorial.html in your browser you should see a simple first slide with the text "Hello".

Adding more slides

As we can see, the header of our file won't change much. Only the title of the presentation, inside the title tags, will change. The block of scripts at the end won't change much either, unless we're already experts and want to make some custom modification. The important part is inside the section tags: each section represents a slide and everything we put inside it will be shown there. So let's create a few more slides using the basic HTML tags.

<div class="reveal">
  <div class="slides">
    <section>
      <h1>Hello, this would be slide 1</h1>
      <!-- Any HTML code can go inside and it will be shown as a slide -->
      <h2>We usually put the topic and the information on this slide</h2>
      <h3>Sebastián Gómez</h3>
    </section>
    <section>
      <h2>We can add images as simply as:</h2>
      <img src="images/mi-imagen.jpg" alt="mi-imagen" />
    </section>
    <section>
      <h2>This would be slide 3</h2>
      <p>This slide would have a paragraph with normal text</p>
      <p class="letra-roja">This is a paragraph with red text</p>
    </section>
  </div>
</div>

To use your own styles, remember to link your mi-estilo.css sheet in the head, right after the theme:

<!-- Here I can have my own CSS styles -->
<link rel="stylesheet" href="mi-estilo.css" />

Backgrounds and transitions

You can also change the background of the whole presentation or of each slide, and play a bit with the effects and transitions, as we can see below. We use the data-background attribute for the background color and data-background-transition for the transition.

<div class="reveal">
  <div class="slides">
    <section data-background="#4d7e65">
      <h1>Hello, this would be slide 1 with another background</h1>
      <h2>We usually put the topic and the information on this slide</h2>
      <h3>Sebastián Gómez</h3>
      <p>Additionally, the next slide will use a zoom transition</p>
    </section>

    <section data-background="#000" data-background-transition="zoom">
      <h2>We can add images as simply as:</h2>
      <img src="images/mi-imagen.jpg" alt="mi-imagen" />
    </section>
    <section>
      <h2>This would be slide 3</h2>
      <p>This slide would have a paragraph with normal text</p>
      <p class="letra-roja">This is a paragraph with red text</p>
    </section>
  </div>
</div>

Nested slides (subsections)

You can also nest section tags or slides, which lets us create subsections of the presentation by moving down or up a level. When a section contains other section tags inside, those inner slides become a vertical stack.

<div class="reveal">
  <div class="slides">
    <section data-background="#4d7e65">
      <h1>Hello, this would be slide 1 with another background</h1>
      <h2>We usually put the topic and the information on this slide</h2>
      <h3>Sebastián Gómez</h3>
      <p>Additionally, the next slide will use a zoom transition</p>
    </section>

    <section data-background="#000" data-background-transition="zoom">
      <h2>We can add images as simply as:</h2>
      <img src="images/mi-imagen.jpg" alt="mi-imagen" />
    </section>

    <section>
      <section>
        <h2>This would be slide 3</h2>
        <p>This slide would have a paragraph with normal text</p>
        <p class="letra-roja">This is a paragraph with red text</p>
      </section>
      <section>
        <h2>
          This would be slide 3.1, since it's a subsection nested inside slide 3
        </h2>
        <p>This slide would have a paragraph with normal text</p>
        <p class="letra-roja">This is a paragraph with red text</p>
      </section>
      <section>
        <h2>This would be slide 3.2</h2>
        <p>This slide would have a paragraph with normal text</p>
        <p class="letra-roja">This is a paragraph with red text</p>
      </section>
    </section>

    <section>
      <h2>Available themes</h2>
      <p>
        And this would finally be slide 4. Here we leave the links to the
        different themes that come by default for our presentations. To switch
        themes, just point the theme link to another file under
        <code>dist/theme/</code>, for example <code>dist/theme/white.css</code>,
        <code>dist/theme/league.css</code>, <code>dist/theme/sky.css</code>,
        <code>dist/theme/beige.css</code>, <code>dist/theme/serif.css</code>,
        <code>dist/theme/blood.css</code>, <code>dist/theme/night.css</code>,
        <code>dist/theme/moon.css</code> or <code>dist/theme/solarized.css</code>.
      </p>
    </section>
  </div>
</div>

Customizing styles

You can also customize the styles of our presentation a bit by creating or modifying the mi-estilo.css file (as I showed with the letra-roja class). The images we use can be kept in our images folder and shown in the presentation without any trouble, we simply link them in the src of the img tag. That way we can build and have full control of our presentations.

Suggested exercises

Install reveal.js with npm install reveal.js and create your tutorial.html file with the initial "Hello" slide. Confirm it renders correctly in the browser.
Build a presentation of at least five slides about a topic you like, using titles, paragraphs and an image of your own saved in the images folder.
Add a nested subsection (vertical slides) and try at least two different backgrounds with data-background and the zoom transition.
Create a mi-estilo.css file, define your own class (for example letra-azul) and apply it to a paragraph. Then try switching the theme by linking another file from dist/theme/.

3-point summary

reveal.js lets us create full presentations with HTML and CSS that run in any browser; install it with npm install reveal.js or use it from the jsDelivr CDN.
In versions 4.x and 5.x the files live under dist/ and plugins are registered with plugins: [...] inside Reveal.initialize, no longer with the old dependencies array.
Each section is a slide; you can nest them to create subsections, change backgrounds with data-background, and customize everything with your own CSS file.

That's all, I hope this post is useful to you and that you can apply it to a project you have in mind. Now I invite you to create stunning presentations with this simple but powerful way of building content.

Leave me a comment if it helped, if you want to add an opinion, or if you have any questions. And remember, if you liked it, you can also share it using the social links below. Good luck!

How to create stunning presentations using HTML and CSS

Installing reveal.js

Creating our first presentation

Adding more slides

Backgrounds and transitions

Nested slides (subsections)

Customizing styles

Suggested exercises

3-point summary

Sebastian Gomez

Leave a Reply

Advertisements

Related Posts

Categorias