Traditionally, creating presentations requires using an app like Powerpoint and can cause various compatibility issues, but with the free, open source tool deck.js, you can create an elegant set of slides that can run in any browser either online or off. All it takes is minimal knowledge of basic HTML, and we’ve created a starter kit to help you put your first deck together in just a few minutes.
As always, showing trumps telling, so if you want an idea of how a deck.js presentation looks, take a peak at this quick demo I put together in a few minutes. Not bad, right?
Creating a presentation with deck.js is very simple. Although it may seem daunting at first if you don’t know a ton of HTML or CSS, there’s still plenty you can do. Here are the basic steps:
- Write a simple HTML document to hold the content and format of your slides.
- Choose a theme to adjust the way your slides look.
- Add extensions to your deck to enhance its functionality.
What You’ll Need
Before you can get started with this guide, you’re going to need a couple of things:
- 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 favorites 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:<section class="slide"> <h2>A List of Things I Like</h2> <ol> <li> <h3>Cupcakes</h3> <p>They're tasty, but don't eat too many or you'll get fat!</p> </li> <li> <h3>Technology</h3> <p>It's tasty, but don't eat too much technology...or any technology...because it's not food.</p> </li> <li> <h3>Slankets</h3> <p>They catch all your cupcake and technology crumbs.</p> </li> </ol> </section>
A slide that just contains an image can look as simple as this:<section class="slide"> <h2>I Like Din Tai Fung</h2> <img src="http://toasterdog.com/files/DTF-Shirt.jpg" width="400" height="414" /> </section>
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:<img src="http://toasterdog.com/files/FacePunch.jpg" width="292" height="334" style="float: left; padding: 0 16px 8px 0;" />
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:<!— Theme CSS files —> <link rel="stylesheet" href="themes/style/swiss.css"> <link rel="stylesheet" href="themes/transition/fade.css">
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
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 customizing your presentations so you can make and impressive, unique deck of slides that can be viewed in just about any web browser.