add first experiment

uclab-potsdam · Oct 21, 2024 · 3e49747 · 3e49747
1 parent 8cbac47
commit 3e49747
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -4,9 +4,6 @@
 <meta charset="UTF-8">
 <title>Interactive Information</title>
 <link rel="icon" href="favicon.ico" type="image/x-icon">
-<style>
-
-</style>
 </head>
 <body>
 
@@ -15,6 +12,13 @@ <h1>Interactive Information</h1>
     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.
 </p>
 
+<h2>🖥️ Examples</h2>
+
+<ul>
+    <li><a href="examples/dictionary/">Dictionary with cat entry</a>
+</ul>
+
+
 <h2>🧪 Experiments</h2>
 
 <p><strong>Adapt the weekly example to cause 😊 delight and 😲 surprise.</strong></p>
@@ -27,12 +31,20 @@ <h2>🧪 Experiments</h2>
 
 <p>Your weekly challenge: <em>Add delightful and surprising interactivity until Friday!</em></p>
     <p>Make sure to include explanatory comments in your source to help us understand what you did:</p>
-    <pre>
-<code>    &lt;!-- HTML --&gt; 
+    <pre><code>    &lt;!-- HTML --&gt; 
     /*   CSS  */ 
     //   JS 
 </code></pre>
 
+<h3>1. Basics</h3>
+
+<p><strong><a href="experiments/1_basics.html">The box model</a></strong> is an <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model">article from MDN</a>. <br>
+<em>Take a look at its source and add style to make the sections pop and let the viewer's presence shine!</em><br>
+Consider using pseudo classes and transitions to shift colors and shades based on the viewer's movements.
+
+
+   </p>
+
 
 </body>
 </html>