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

FormatBenefits
PowerpointEasy diagrams, animations
Google SlidesDitto, 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)
          
 

Powered by Pyodide, but many plugins/libraries exist for different languages, like Run-in-terminal

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.

Golden spiral overlaid on grid

          <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.

add(add(6, mul(4, 6)), mul(3, 5)) add add(6, mul(4, 6)) add 6 mul(4, 6) mul 4 6 24 30 mul(3, 5) mul 3 5 15 45

JS-powered animations

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

List insertion demo:

What should we insert?

Getting started

Write the HTML yourself

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:

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.