Create A Compelling Browser-Based Presentation

Traditionally, creating presentations require using an app like PowerPoint and can cause various compatibility issues, but with Deck.js you can create and elegant set of slides that can run in any browser either online or off. All it takes is knowledge of basic HTML, and we’ve created a starter kit to help you put your first deck together in just a few minutes.

Putting together a presentation with deck.js is very simple. Although it may seem daunting at first if you don’t know much HTML or CSS, there’s still plenty you can do. Here are the basic steps:

1. Write a simple HTML document to hold the content and format of your slides.
2. Choose a theme to adjust the way your slides look.
3. Add extensions to your deck to enhance its functionality.

If you want to do more, you can write a theme yourself using HTML and CSS (learn the basics here) and/or write your own extensions using JavaScript (learn the basics here). In this post we’re going to show you how to make a a basic presentation using the steps outlined above. You should be able to follow along if you only know basic HTML and have no knowledge of CSS. When you’re done, you’ll have a presentation that you can post online for others to view. Alternatively, you can keep it on a flash drive and run it on any computer with a modern web browser. It makes your presentations very portable so you can give them from anywhere and know you have them in a format that doesn’t require any special software. If you’re interested, read on.

What You’ll Need

Before you can get started with this guide, you’re going to need a couple of things:

• Deck.js
• Our Deck.js Starter Kit, which includes a short sample deck as well as an empty deck that you can use to follow along.
• A programming text editor to write and edit your deck. (Not sure what to use? Try our favourites for Windows and Mac.)
• A modern web browser, like Firefox or Chrome.
• Optional: A web host to host your deck. Alternatively you can just open your deck’s HTML file locally in your browser.

Step One: Create Your HTML Slides

Creating your deck is what will take the majority of your time because you have to come up with the slide content and format it as an HTML document. Before we get started, let’s take a look at what a standard slide looks like:

  
A List of Things I Like
  

    

      
Cupcakes
      
They're tasty, but don't eat too many or you'll get fat!
    
    

      
Technology
      
It's tasty, but don't eat too much technology...or any technology...because it's not food.
    
        

      
Slankets
      
They catch all your cupcake and technology crumbs.
    
  

A slide that just contains an image can look as simple as this:

  
I Like Din Tai Fung
  

Basically, slides are simply HTML sections that are assigned the “slide” class. All you have to do is write standard HTML code (as shown in the above examples) to make them. From there, you can pretty much put in most anything you want. Video embeds and block quotes work, too. You can even wrap text around images by adding the relevant CSS styling, like so:

Those are some basic slides, and and we put together a demo so you can see them all in action (including a video slide). You’ll also find this sample in the starter kit you downloaded at the beginning of this guide. When you create your slides, just follow the HTML examples you see above or in that document. When you’ve created your slides, move on to the next step to learn how to turn them into an interactive presentation.

Step Two: Turn Your Slides Into A Functional Presentation

Once you’re done creating your slides you can turn them into an actual presentation pretty quickly. First, create a new folder to hold everything. Copy both the contents of the deck.js zip file you downloaded (the files, not the folder) and the two starter kit HTML files. Once you have all the files in a folder, it should look like the image to your right.

Now open up empty_deck.html and find the line that reads THE DECK STARTS HERE. Below it is a line that reads THE DECK ENDS HERE. Paste your slide HTML code in between these two lines and save the file. If you open empty_deck.html in a web browser you’ll now have a functional presentation that you can navigate easily with the right and left arrow keys.

Step Three: Select A Theme And Transition Style

Although you now have a fully functional presentation, you may want to change themes and the type of transitions your presentation uses. To do this, you need to look for these lines of code at the top of your document:

The first line embeds the theme file and the second line embeds the file responsible for the transition animations. By default, you’ll be using the Swiss theme and the Fade transition. If you want to change this, just take a look in the folder where you’re keeping all of your files and go into themes -> style. You’ll see the different theme options in there. If you want to change the theme to one of those files, just change swiss.css to the file name you want. If you go into the transition directory, you’ll find a number of CSS files for transitions. Simply replace fade.css with the transition file you want to use instead. That’s all you have to do.

Step Four: Add Extensions To Your Deck

Adding extensions is very easy, but using them will require a little reading. To add them, you just need to embed their JavaScript and CSS files in your document. The starter kit HTML files include extensions already embedded. You’ll find the CSS files at the top of the document. They’ll look like this:

The JavaScript files are embedded at the bottom of the document and look like this:

If you want to embed another extension, you simply need to go into the extensions directory, the directory with the extensions name, and embed the CSS and JavaScript files as shown above. Once you have your extensions embedded, you have to actually use them in your deck in order to get any functionality.

Let’s look at the deck.goto extension as an example. It lets you press the G key and type a number to go to the corresponding slide. This is useful if you want to skip around in the presentation. If you want to use it, you not only have to embed the JavaScript and CSS files (as mentioned above) but also add this code after all the slides in your HTML deck:

Most extensions can be enabled with a little code snippet like this. To learn how to use the other extensions, read about how they all work in the Deck.js extension documentation. If you’re JavaScript-savvy, you can even make your own extension to add even more functionality.

That’s all there is to it. While Deck.js can seem a little intimidating at first, once you get used to the structure you’ll be putting together presentations in no time. All you need are simple HTML skills to build the structure, and if you use the empty_deck.html file in our starter kit you won’t need to learn how to write out the entire HTML file in order to create your first deck.

Once you get the hang of things you can start fiddling around and customising your presentations so you can make and impressive, unique deck of slides that can be viewed in just about any web browser.