How to make presentations with Reveal.js (HTML, JS and CSS)

In one of the past videos you asked me which tools I use to prepare the slideshows I use in the background of my YouTube (@pirobits) videos. In this post I'm going to show you which tool I use, which ones I've tried and how you can set it up yourself.

I've always enjoyed giving talks and creating presentations on the different topics in the industry I work in. In general I like to share what I learn and that has always been the reason why I created both this blog and the YouTube channel.

When I started with the first YouTube videos I really had almost no idea of the processes involved in creating content: writing a script, recording and editing, among others. Each of these parts in turn have quite a lot of complexity, as much as you want to add, so I started in the simplest way.

In my case, I have little knowledge about video editing and although I would love to learn, realistically I don't have enough time to create other types of videos today. So I asked myself the question of how I could make the videos in the best possible way, given my restrictions, so I thought about the same thing I tell at the beginning of the post: I always liked to give talks and make presentations so right now it is possibly the ideal for me.

Along the way I have tried many tools like PowerPoint / Google Slides / Prezi / Apple Keynote... and the truth is that they are very useful tools, that many people use, and that are practical.

When I have used them I find it tedious to create the slides for two reasons: first because you depend on knowing a particular tool, and second, because the customization layer, creating the theme, reusing images ... I find it tedious.

So I started researching and found the possibility of creating presentations using HTML, Javascript and CSS. Basically using web technologies, which I know very well being a software engineer, are very versatile and comfortable for me so why not try?

Reading I discovered several alternatives and the one I found that caught my attention was Reveal.js, which allows you to create presentations using HTML. It also has some points that I love:

• The default configuration is good. It comes with animations and different themes configured.
• You can create a new theme or do an override of the current one, and all your presentations or slides are updated.
• It's open source (github/reveal.js), and also they offer a paid tool if you want to improve your presentations without using code.
• It allows me to add images and GIFs.
• Managing animations and styles with CSS, loading your fonts, SVGs... it's very easy.

In short, I love this tool. In the end reveal.js is like a framework that brings everything you need to create presentations without worrying about anything (as long as you know web technologies). And if you want to customize them, it allows you to do almost anything you want through web programming, which nowadays everyone is sure to be able to write a few lines with a little knowledge and some ChatGPT.

To create a presentation all you have to do is create and develop an index.html file. The good thing about this is that being an HTML file you can open it directly in your browser and make the presentation, using the keyboard arrows to navigate, or even a remote control.

I will try to summarize the things I like and dislike about this tool:

• ✅ I love the ease of using it out-of-the-box.
• ✅ Customizing the templates is super easy.
• ✅ Writing HTML is very convenient, you can even use a plugin for markdown.
• ✅ In the end simple is always the fastest and most comfortable.
• ✅ Animations, images, GIFs...
• ❌ I find the navigation on the y-axis a little bit complicated and I don't like it. The solution is not to use it in my case so it's not a downside.
• ❌ It requires some time to learn how to use and configure it. In my case there is quite a bit of documentation that I haven't delved into yet.
• ❌ Managing multiple presentations is a bit tedious, I haven't found the best way yet, so I follow a somewhat rudimentary method: I manage the files by hand.