From EduTech Wiki
Jump to: navigation, search

1 Week 1 - Create fancy animated presentations with impress.js


You should be familiar with basic HTML and CSS. Below are some resources that could help you catching up. Alternatively, you also can read chapters 1 (section on "traditional elements") and 2 of the textbook. You also should be able to use a JavaScript library.

  • Javascript_tutorial - basics (in particular, you should know how to use a JavaScript library). In particular, load JS code into a page like this:
<script type="text/javascript" src="external.js"></script>

2 Recommended HTML editors

3 Monday

Impress.js demos

Student activities / impress.js
(find the Download ZIP button to the right)
  • Unpack the zip archive
  • Copy index.html to project1.html
  • Rename index.html to save.html
  • Modify contents of project1.html

Modification of the CSS

You can modify the CSS file (css/impress-demo.css to adapt to your needs).

Simple example. Get the following files ("save link as") and put them into a different directory.

Example of a talk:

4 Homework 1

(1) Create a presentation with

  • You can freely choose a topic and reuse prior work.

(2) Write a small report

  • The report should include your objectives, a discussion of your design and an auto-evaluation. You also can mention how you did it, problems encountered. etc.

Upload as a zip file to the World classroom (Canevas)

  • Uzip the file somewhere in your own computer and test if it works (e.g. some files may be missing)


  • Wed week 2, before class

5 Documentation / Links

CSS tutorial
Documentation for techies