Learn RevealJS

Project maintained by northDacoder Hosted on GitHub Pages — Theme by @northdacoder

Let's get started building amazing presentation with RevealJS

RevealJS lets you build interactive presentations using HTML + CSS + JavaScript

Step 1

Download the .zip file from my RevealJS Github repo & unzip the folder to your desktop

Download Reveal.js

Step 2

Navigate to your desktop & double-click on the index.html file located inside the unzipped reveal folder

You should see a sample presentation already created that looks something like this:

Step 3

In your favorite text editor (Atom, Sublime Text, etc), open the reveal/ folder located on your desktop

Step 4

Inside your text editor you should see all the file names of the reveal/ folder on the left hand side of your screen

Step 5

Now that we have the files we need, create a new file & save it with the .html extension. Go to File > New File > & save it as presentation.html

Step 6

Now that we have a blank presenation.html file saved we can add some basic html elements. Add the following elements & save the file.

presentation.html


<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
<html>

Step 6

Next, we need to include our RevealJS files in our presentation.html file in order to use the built-in features of the Reveal framework

Add the following links to the head of your index.html file so we can start creating slides


<!DOCTYPE html>
<html>
<head>
  <!-- Reveal CSS main file & "black" theme -->
  <link rel="stylesheet" href="css/reveal.css">
  <link rel="stylesheet" href="css/theme/black.css" id="theme">

  <!-- CSS File for the code syntax highlighting -->
  <link rel="stylesheet" href="lib/css/zenburn.css">

  <!-- Printing and PDF exports -->
  <script>
    var link = document.createElement( 'link' );
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
    document.getElementsByTagName( 'head' )[0].appendChild( link );
  </script>

  <!--[if lt IE 9]>
  <script src="lib/js/html5shiv.js"></script>
  <![endif]-->
</head>
<body>

</body>
<html>

Step 7

We also need to add the following code to our presentation.html right before the closing </body> tag.


<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>

<script>

  // Full list of configuration options available at:
  // https://github.com/hakimel/reveal.js#configuration
  Reveal.initialize({
    controls: true,
    progress: true,
    history: true,
    center: true,

    transition: 'slide', // none/fade/slide/convex/concave/zoom

    // Optional reveal.js plugins
    dependencies: [
      { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
      { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
      { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
      { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
      { src: 'plugin/zoom-js/zoom.js', async: true },
      { src: 'plugin/notes/notes.js', async: true }
    ]
  });

</script>

Step 8

Now that we have all of our RevealJS files loaded we can start creating beautiful presentations

As the first child element inside the <body></body> tags, create a <div class="reveal"></div>

This is what tells our html document that this is where we are going to create our slides.


<body>
  <div class="reveal">
  </div>
</body>

Step 9

Now that we have our <div class="reveal"></div>, we need to create <div class="slides"></div> inside.

This is where our individual slides will be created


<body>
  <div class="reveal">
    <div class="slides">
    </div>
  </div>
</body>

Step 10

Congratulations! It gets much, much easier from here on out!

Now that we have the basic html structure for our slides to live, we can create slides using the <section></section> tags.


<!-- To create a slide that will take up the entire screen -->
<section>
</section>

Step 11

To create 5 slides that will automatically have navigation from left to right, create multiple sections


<body>
  <div class="reveal">
    <div class="slides">
      <section>
        <h1>Slide 1</h1>
      </section>
      <section>
        <h1>Slide 2</h1>
      </section>
      <section>
        <h1>Slide 3</h1>
      </section>
      <section>
        <h1>Slide 4</h1>
      </section>
      <section>
        <h1>Slide 5</h1>
      </section>
    </div>
  </div>
</body>

Step 12

To create a section of slides that will have vertical navigation, nest all of your sections inside of another section


<body>
  <div class="reveal">
    <div class="slides">
      <section>
        <section>
          <h1>Slide 1</h1>
        </section>
        <section>
          <h1>Slide 2</h1>
        </section>
        <section>
          <h1>Slide 3</h1>
        </section>
        <section>
          <h1>Slide 4</h1>
        </section>
        <section>
          <h1>Slide 5</h1>
        </section>
      </section>
    </div>
  </div>
</body>