Benefits of HTML slides
for programming classes

Tips for navigating the slides:

Press O or Escape for overview mode.
Visit this link for a nice printable version
Press the copy icon on the upper right of code blocks to copy the code

Traditional slide formats

Format	Benefits
Powerpoint	Easy diagrams, animations
Google Slides	Ditto, plus accessible online
PDF (from LaTeX)	Good if you love LaTeX!

The problem with using those for coding classes:

For instructors: Hard to write syntax-highlighted code
For students: Hard to copy code

Alternative: HTML slides!

Write your slides in HTML and use JavaScript to turn them into an interactive slides experience.

Start with semantic HTML...


          <section>
            <h3>Alternative: HTML slides!</h3>
            <p>Write your slides in HTML...
            </p>
          </section>

...Then add a bit of JS ➡

RevealJS

The most fully featured JavaScript library is RevealJS and it includes support for:

Mouse and keyboard navigation
Speaker notes
Easy animation/transitions
...much more, especially with plugins!

Code highlighting

The HighlightJS plugin takes care of highlighting code for you, with customizable themes.


          def sum_nums(nums):
            sum = 0
            for num in nums:
              sum += num
            return sum

Easy code copying

Since these slides are a website, copying anything is already easy.

But the HighlightJS badge plugin makes it even easier by adding a copy button.


          nums = [1, 2, 4]
          for i in range(0, len(nums)):
              nums[i] = nums[i] ** 2

Runnable code

You can even run code directly in the slides, depending on the language you're teaching.


          # Sum up the numbers from 1 to 10
          sum = 0
          x = 1
          while x < 10:
              sum += x
              x += 1
          print(sum)

Other features

Printability

Students still want printed/PDF versions of slides, for note-taking.

If you ask a browser to print these slides, it will print one per page, like a PPT/PDF would be printed.

Or you can automate the creation of PDFs with the decktape slides exporter package.

Accessibility

HTML webpages are accessible for students with a range of needs, such as vision impairment. Just follow best practices for HTML accessibility, like adding alt attributes to all img tags for screen readers.


          <img src="FibonacciSpiral.svg"
               alt="Golden spiral overlaid on grid" height="470">

Animations

Slide fragments

Parts of a slide can be revealed using "fragments".

Add a class attribute of "fragment" to the HTML tag, and the fragment will be revealed in order.


          <p class="fragment">
             Add a class attribute of "fragment"...
          </p>

You can use fragments for anything, even parts of code blocks. Just wrap the code in a <span class="fragment">.


          sum_nums([1, 2, 3])  # Result: 6

Animated diagrams

You can embed SVGs and animate through them by adding a class of "fragment" to parts of the SVG.

JS-powered animations

For fancier animations, you can use JS/CSS to write them from scratch.

List insertion demo:

Getting started

Write the HTML yourself

Start from this slide deck (copy the HTML)
And/or follow the RevealJS tutorial
Host the slides on your course website or Github pages

If you prefer Markdown, that's also an option.

Use the online editor

Slides.com is a WYSIWIG editor for creating and hosting slides using RevealJS.

Get inspiration

Feel free to adapt my slides from:

GDI Intro to Python class
Berkeley CS61A (click "html" next to lecture titles)

If you use HTML slides for your programming class and are willing to share them for others to use, open an issue on github.com/pamelafox/html-slides-for-programming.