DEV Community

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

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

Emma Bostian ✨ on January 11, 2019

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well ...
Collapse
 
lkopacz profile image
Lindsey Kopacz • Edited

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

Collapse
 
emmabostian profile image
Emma Bostian ✨

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

Collapse
 
sandordargo profile image
Sandor Dargo

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.

Collapse
 
myterminal profile image
Mohammed Ismail Ansari • Edited

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.

Collapse
 
davinaleong profile image
Davina Leong • Edited

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!

Collapse
 
wuz profile image
Conlin Durbin

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

Collapse
 
emmabostian profile image
Emma Bostian ✨

Thank you!

Collapse
 
bhupesh profile image
Bhupesh Varshney 👾

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

Collapse
 
jeankaplansky profile image
Jean Kaplansky

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.

Collapse
 
jenc profile image
Jen Chan

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

Collapse
 
httpjunkie profile image
Eric Bishard

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.

Collapse
 
jude_johnbosco profile image
Chinweike Jude Obiejesi

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?

Collapse
 
sethusenthil profile image
Sethu Senthil

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…

Collapse
 
jenc profile image
Jen Chan

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

Collapse
 
julesmanson profile image
jules manson

Fantastic post. I just loved it.

Collapse
 
kylegalbraith profile image
Kyle Galbraith

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

Collapse
 
oluwasegun profile image
oluwa-segun

Beautiful content,

The link to the presentation you said you did using this method is now working..."How To Build Kick-Ass Website: An Introduction To Front-end Development."

Collapse
 
thepassle profile image
Pascal Schilp

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