Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Creating presentations with Reveal.js

Friday, May 6th, 2016 by Servage

reveal-jsFor a long time, PowerPoint has been the de facto standard for creating presentations. A notable alternative to PowerPoint is a JavaScript library called Reveal.js. With Reveal.js you can create beautiful fully-responsive slideshows using tools you are already familiar with: HTML, CSS and JavaScript. The finished slideshows can be viewed directly with any modern web browser or even on a mobile device.

Getting started

Getting started with Reveal.js is very simple and takes only a minute or two. Go to the official GitHub repository at and download the latest .zip archive. Extract the archive and run the included index.html with your favorite web browser. You should now have a working Reveal.js demo slideshow running in your browser!

Installation for experienced users

This step is optional if you have already completed the simple installation using the .zip file. If you are familiar with Git, Node.js and Grunt and want to use them instead, you can clone the Git repository, install the required Node.js packages using NPM and use Grunt to locally serve the files. This allows you to automatically reload the local web server when changes are made.

Creating your own presentation

If you are using Reveal.js for the first time, it is recommended to use the demo slideshow you already have and start building your presentation on top of it. The sample presentation contains the most common elements you need in your presentation.
The demo presentation also acts as a simple documentation for using Reveal.js. It shows you how to customize animations, background images, transitions and much more. Before editing the presentation, you should read through all the original slides.
Once you have finished reading, it is time to start customizing. The code is quite self-explanatory. The slideshow goes inside a div with a class called “reveal” and it is a wrapper for the slides. The slides go inside a div with a class of “slides”. Each slide is a div inside the slides div. Section is an HTML5 container element for various types of content.

What makes Reveal.js a powerful presentation tool is that it allows you to use almost any HTML inside the slides. You can use paragraphs, lists, images, tables, videos and style everything with CSS. You can even link from a slide to another using the link tag.
To create your own presentation, simply edit the HTML code and refresh your browser.

Customizing the presentation

When you have finished  editing the content, it is time to customize the presentation. This is also a simple task with the built-in themes and transitions. You can preview the available themes in the sample slideshow. To set up a theme for your slideshow, include the CSS stylesheet of your choice in the section. All available styles are in the “css” folder. You can of course create your own custom themes too! To change the transition effect, append the “transition” keyword to the URL of the page. Click any of the default transition effects in the demo slideshow and check the URL to see how to do this. To get a better idea of how these work, have a look at the source code to see how they are implemented in the sample presentation.

Bottom line: Reveal.js is a good tool for making custom slideshows for people with HTML knowledge. It is super easy to get started, and renders great results, free of the proprietary software providers.

Creating presentations with Reveal.js, 4.3 out of 5 based on 4 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.