loading...
Cover image for How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

emmabostian profile image Emma Bostian ✨ ・4 min read

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we're going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you're a beginner to web development, don't fret! This tutorial will be easy enough to keep up with. So let's slide right into it!

Getting started

We're going to be using an awesome framework called Reveal.js. It provides robust functionality for creating interesting and customizable presentations.

  1. Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

GitHub

  1. Change directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run the project.

Localhost

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Themes

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Themes

Changing The Theme

  1. Open index.html
  2. Change the CSS import to reflect the theme you want to use

VS Code

The theme files are:

  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css

Custom Themes

It's quite easy to create a custom theme. Today, I'll be using my custom theme from a presentation I gave called "How To Build Kick-Ass Website: An Introduction To Front-end Development."

Here is what my custom slides look like:

Slides

Creating A Custom Theme

  1. Open css/theme/src inside your IDE. This holds all of the Sass files (.scss) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme.
  2. Create a new .scss file. I will call mine custom.scss. You may have to stop your localhost and run npm run build to transpile your Sass code to CSS.
  3. Inside the index.html file, change the CSS theme import in the <head> tag to use the name of the newly created stylesheet. The extension will be .css, not .scss.
  4. Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL's into the index.html file.

Here are the variables I chose to use:

  1. Add a .reveal class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling!

Unfortunately, due to time constraints, I'll admit that I used quite a bit of !important overrides in my CSS. This is horrible practice and I don't recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the !importants.

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

@import "../template/mixins";
@import "../template/settings";

Mixins
You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you've got a gradient!

Settings
In the settings file, you'll find useful variables like heading sizes, default fonts and colors, and more!

Content

Elements

The structure for adding new content is:

.reveal > .slides > section

The <section> element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

  • None
  • Fade
  • Slide
  • Convex
  • Concave
  • Zoom

To use them, add a data-transition="{name}" to the <section> which contains your slide data.

Fragments

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class="fragment {type-of-fragment}" to your element.

The types of fragments can be:

  • grow
  • shrink
  • fade-out
  • fade-up
  • fade-in-then-out
  • fade-in-then-semi-out
  • highlight-current-blue
  • highlight-red
  • highlight-green
  • highlight-blue

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial.
All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

Posted on by:

emmabostian profile

Emma Bostian ✨

@emmabostian

Software Engineer, bibliophile, & cat mom

Discussion

pic
Editor guide
 

Great post!

I personally don't have to make presentations very often, and have never thought of building it with html/css and javascript.

But it sounds like its a lot more effort then to just use PowerPoint. The templates in PowerPoint are also pretty editable, no?

 

Yeah it is time consuming, but the result is much better

 

Well I guess you get to look ultra pro by skipping the moment where you have to adjust for display detection and make sure your notes don’t show because you plugged your display connector in 😩
But If the conference has no wifi then we’re screwed I guess

 

I really love reveal.js. I haven't spoken in a while so I haven't used it. I've always used their themes and never thought about making my own. This is probably super useful for company presentations, too. I'm SO over google slides. Trying to format code in those is a nightmare LOL

 

The best thing in this - and now I'm not being ironic - is that while you work on a not so much technical task - creating a presentation - you still have to code. And the result is nice.

On the other hand, I know what my presentation skills teachers would say. Well, because they said it... :) If you really want to deliver a captivating presentation, don't use slides at all. Use the time to prepare what you want to say.

I'm not that good - yet, but taking their advice, if must I use few slides, with little information on them and with minimal graphical distractions. My goal is to impress them by what I say, not is what behind my head.

I'm going to a new training soon, where the first day we have to deliver a presentation supported by slides at a big auditorium and the next day we have to go back and forget about the slides and just get on stage and speak. I can't wait for it.

 

How about github.com/team-fluxion/slide-gazer?

It's my fourth attempt at creating a simple presentation tool to help one present ideas quickly without having to spend time within a presentation editor like Microsoft PowerPoint. It directly converts markdown documents into elegant presentations with a few features and is still under development.

 

Yup, RevealJS is awesome!

Previously I either used PPT or Google Slides. One is a paid license and the other requires an internet connection.

The cool thing about it is that since it's just HTML files behind the scenes, the only software you need to view it with is a web browser. Has amazing syntax-highlighting support via PrismJS.
And as a web developer, it makes it simple to integrate other npm packages if need be...

I actually just used it to present a talk this week!

 

I think its a coincidence 😅
I was just starting to think to use reveal.js and suddenly you see this post 🤩

 

Great article, Emma! I love Reveal and this is a great write up for using it!

 
 

Check out slides.com If you want to skip the heavy lifting and/or use a presentation platform based on reveal.js.

Everything is still easy to customize. The platform provides a UI to work from and an easy way to share your stuff.

BTW - I have no affiliation with slides.com, or even a current account. I used the service a few years back when I regularly presented and wanted to get over PowerPoint, Google Slides, Prezi, etc.

 

Using Node and Soket.io remote control (meant to be used on phones) for my school's computer science club, it also features some more goodies which are helpful when having multiple presentations. It can be modded to use these styling techniques effortlessly. Feel free to fork!

SBCompSciClub / prez-software

A synchronized role based presentation software using node

prez-software

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js
Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

  1. Copy an existing presentation folder
  2. Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section> <!--slide content--> </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the…

 

I like Reveal, but I still have not moved past using Google docs slides because every presentation I do has to be done yesterday. Hoping that I can use Reveal more often this year as I get more time to work on each presentation.

 

Well this is nice and I haven't tried it maybe because I haven't spoken much in meet ups but I think PowerPoint is still much better than going all these steps and what if I have network connection issues that day then I'm scrolled right?

 

Fantastic post. I just loved it.

 

Awesome post! I’m glad I’m not the only one who likes libraries. 😎

 

Awesome introduction! I feel like I need to give this a try the next time I create a presentation.

 

Theres also this Web Component based presentation library: github.com/ruphin/slidem