DEV Community

Cover image for HTML presentation framework reveal.js and why I am a big fan?
Ranvir Singh
Ranvir Singh

Posted on • Originally published at ranvir.xyz

HTML presentation framework reveal.js and why I am a big fan?

This post was first posted on my blog.

Reveal.js is an HTML presentation framework that can help you to create awesome presentations for your talk or simple knowledge transfer session in your class.

I have created a number of presentations using reveal.js.

Here are the links:

Prologue (How I came to know about reveal.js)

So, during my time at college, I had to deliver a presentation to a group of students and teachers from a special student cell regarding one of the emerging technologies of those times.

My mentor at that time suggested me to use reveal for creating the presentation. I was skeptical in the beginning but as soon as I got the grip of it, I loved it.

I went home and thought that it would be a difficult task but in the end, I ended up doing it just in two hours.

Setting up reveal.js

All you need to run reveal powered presentation in your local system is to have javascript up and running and if you reading this post, you definitely have it running.

All you have to do is to go to reveal.js GitHub page and download the latest version of the code on the website.

Here is the link for reveal.js GitHub repository.

The downloaded file would be a zip file. If in windows, open the file simply by double-clicking it.

If in Linux use these commands in the terminal to open the file. First of all download the unzipper by using this command.

sudo apt-get install unzip

Then use this code to unzip the file by giving the name of the destination folder.

unzip file.zip -d destination_folder

Otherwise, if you prefer, you can fork the code from the https://revealjs.com/

After unzip open the folder and you will find an index.html file inside.

Creating presentations using reveal.js

Open this file in your text editor. Inside the body, tags delete every section.

Now create each section using the beginning and ending section tag. Each section is equivalent to one slide.

Here is the reference of one equivalent slide.

You can do a whole lot of things using reveal.js presentation creator. You can create a style of your own if you want to.

Epilogue (Delivering the reveal.js presentation)

So, there were somewhere around 100-200 students and teachers in the room where I was delivering the presentation. The stage was at a good height and I was going to show a good number of charts in my presentation.

Before jumping on to the stage, I hosted the presentation on to GitHub pages website and created a short link using one of the services out there. Finally, I shared the link with everyone in the room.

Everyone opened the link on their phones and were able to look at the chart more clearly.

Top comments (0)