reveal.js: Online Presentations

2h 2mIntermediate2013-09-05

Authors

Ray Villalobos

Senior Staff Instructor at LinkedIn Learning

Course details

For web designers and developers, tools like PowerPoint and Keynote lack the power that's available to web browsers. Reveal.js allows you to create presentations that use the full power of the web, providing syntax highlighting for code, mobile pinch and swipe support, CSS theming, and the ability to integrate with other libraries and frameworks like jQuery and EaselJS. Explore reveal.js with Ray Villalobos, as he shows how to build slideshows with a text editor and a browser, and incorporate audio and video, animation, and CSS styling.

Learning objectives
Downloading and installing reveal.js
Adding audio and video to your presentation
Creating horizontal and vertical slides
Using and customizing CSS themes
Exporting your presentation to PDF
Controlling a presentation with API events
Placing Adobe Edge animations inside reveal.js

Skills covered

reveal.jsHTMLCSSJavaScriptOracleFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)

Concepts

0. Introduction

01 - Welcome
02 - Using the exercise files

1. Quick Start

03 - Introducing reveal.js
04 - Downloading and installing the framework
05 - Modifying the original presentation template
06 - Giving a reveal.js presentation

2. Exploring reveal.js

07 - Working with basic HTML
08 - Using audio and video in your slides
09 - Creating vertical slides
10 - Using background colors and images
11 - Changing transition styles
12 - Building up content using fragments
13 - Understanding slide links

3. Theming reveal.js

14 - Touring the default CSS themes
15 - Using syntax highlight themes
16 - Modifying existing CSS themes
17 - Customizing themes with the data state

4. Extending reveal.js

18 - Exporting your presentations to PDF
19 - Creating an auto-play presentation
20 - Adding functionality with external JavaScript libraries
21 - Working with API functions
22 - Controlling your presentation with API events
23 - Placing Adobe Edge animations inside reveal.js
24 - Controlling an Adobe Edge animation with reveal.js

Conclusion

25 - Next steps