This three-session workshop combines the tactical skills needed to structure web pages with a looser more playful compositional mindset. Students are introduced to the structural elements and properties of HTML and CSS through hands-on demos, in-class exercises and take-home assignments. Typographic markup and hierarchy establishes the basis for more abstract form making in week two. Week three incorporates interaction, introducing CSS3 transform, animation, and other user-controlled properties. The final assignment for week four will allow you to combine what you learned in the first three weeks.
Week one emphasizes the strategic and deliberate construction of space on a web page, working with content.
- Assignment 1: Semantically markup and style some text
- Assignment 2: Create a multi-page website
Week two encourages a different mindset, using code and the browser to discover designs as you make.
- Assignment 3: Draw concrete objects using CSS shapes
- Assignment 4: Web Poster — use abstract shapes / grids (Muller-Brockman)
- Assignment 5: Pattern — incorporate the work of peers / repeat shapes to develop patterns
Week three delves into designing with time, adding interactivity and motion.
- Assignment 6: Create a responsive animation using media queries
- Assignment 7: Animate your web poster and set triggers with jQuery
- Final: Combine your skills to make a responsive website
Putting it all together
- From sketch to code
- Review examples
- Possible explorations