Interactive Information

This course embraces the web as a versatile and expressive medium for creating information-rich and dynamic interfaces. From buttons and boxes to events and animation, students will learn the basic building blocks for prototyping interactive web pages for diverse audiences and platforms. Covering the interlocking layers of markup, style, and code, course topics include semantic tags, accessibility features, multimedia elements, media queries, transitions, event handling, and dynamic graphics. Each week, students adapt small examples that demonstrate key features of interactive web pages. The course is structured to foster a supportive learning atmosphere where students exchange feedback and inspiration, making happy little accidents along the way. We focus on single-page web projects that do not rely on any third-party frameworks or libraries. Following a vanilla approach to web design, students progress from simple exercises to sophisticated experiments.

🖥️ Examples

• Dictionary with cat entry

🧪 Experiments

Adapt the weekly example to cause 😊 delight and 😲 surprise.

• Start with the web page that is not yet interactive, e.g., 1_basics.html
• Copy the file from experiments/ to your own directory student/ (your first name or nickname)
• Learn how to incorporate interactive features during live coding and co-working
• Make your additions directly in <script> and <style> blocks at end of file

Your weekly challenge: Add delightful and surprising interactivity until Friday!

Make sure to include explanatory comments in your source to help us understand what you did:

    <!-- HTML --> 
    /*   CSS  */ 
    //   JS 

1. Basics

The box model is an article from MDN.
Take a look at its source and add style to make the sections pop and let the viewer's presence shine!
Consider using pseudo classes and transitions to shift colors and shades based on the viewer's movements.