Mastering reveal.js
This video course that will teach you how to everything you need to know to create great looking presentations with reveal.js.
We'll start from the basics of installing reveal.js, creating slides and configuring your presentation. Then we'll work our way up to more interesting topics like presenting syntax highlighted code, animating slide content with Auto-Animate and using the speaker view. In the advanced videos we'll explore the reveal.js JavaScript API, plugin creation and how to customize keyboard bindings. (See full list of videos.)
Who is this for?
The course is aimed at people who are new to reveal.js as well as those of you who already understand the fundamentals but are ready to explore the full feature set.
You'll need to have a basic understanding of HTML, CSS and JavaScript. HTML is the backbone of reveal.js and used extensively throughout the course. CSS and JavaScript are mostly used for advanced videos on topics such as creating custom themes, working with the reveal.js API and editing the source code.
Who is presenting?
👋 I'm Hakim—a Swedish front-end developer and the creator of reveal.js. I co-founded and am currently working on Slides.com—a presentation platform and graphical editor built on top of reveal.js. Beyond that I love to work on visual demos and experiments at hakim.se.
I released the first version of reveal.js 10 years ago (!) and couldn't have imagined that it would eventually grow to be used by hundreds of thousands of people. I hope you'll join in and experience first hand why so many choose to create their presentations with reveal.js!
The course is sold via Gumroad. VAT is added at the time of purchase, if applicable. 100% money back if the course isn't a good fit for you—no questions asked.
Table of Contents
The course is divided into relatively short videos so that you can easily skip topics that aren't relevant to you or that you are already familiar with. The total runtime is 5.5 hours.
| Getting Started | |
|---|---|
| Getting Started | Duration |
| Installing reveal.js and setting up the development server. | 5:40 |
| Creating slides, linking between them and saving drafts. | 10:04 |
| Configuring your presentation. | 8:23 |
| Working with vertical slides. | 9:05 |
| Creating slides using Markdown. | 16:34 |
| Content Creation | |
| Adding text, images, videos and iframes to your slides. | 10:47 |
| Layout slide content using stacks and auto-sized text. | 13:58 |
| Fullscreen background images, videos, colors and iframes. | 16:26 |
| Presenting syntax highlighted code. | 21:51 |
| Using Fragments to build up slides in steps. | 13:14 |
| Animating slide content with Auto-Animate. | 17:01 |
| Configuration & Features | |
| Presentation size and scale. | 14:34 |
| Slide transitions. | 12:36 |
| Theming your content and creating your own theme. | 16:12 |
| Speaker notes & using the speaker view. | 11:27 |
| Slide numbers & URLs. | 19:55 |
| Converting your presentation to PDF. | 10:23 |
| Advanced (JS) | |
| Initialization & running multiple presentations. | 19:06 |
| Plugins; where to find and how to create them. | 14:52 |
| Using the reveal.js API to control your presentation. | 40:32 |
| Customizing keyboard shortcuts. | 15:04 |
| Working with the source code. | 21:09 |
