1 Week 1 - Create fancy animated presentations with impress.js
- Getting started with HTML (Recommended reading for students without any prior HTML4 or XHTML 1 knowledge). Ignore the Advanced guide. It's outdated.
- HTML and XHTML elements and attributes or any other good HTML tutorial on the Web...
- CSS tutorial or any other good CSS tutorial on the Web...
2 Recommended HTML editors
- Brackets HTML5 programming editor (recommended for this class)
- BlueGriffon HTML 5 editor
- BlueFish HTML 5 programming editor
Student activities / impress.js
- Download impress.js from
- (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:
- Digital design and fabrication in education (could be much improved...)
4 Homework 1
(1) Create a presentation with impress.ch
- 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
- impress.js (documentation in this wiki)
- Official impress.js website (including downloads, examples and links to other resources)
- Building Impressive Presentations with impress.js - Ebook (E-book, $14.99, not needed)
- CSS tutorial
- Documentation for techies
- CSS transforms tutorial (Follow up the links)