The Southland Institute
(for critical, durational, and
typographic post-studio practices)

Southland Institute Basic Web Coding Workshop: October 13, 2019

Becoming Water
A Few Simple Cuts Will Let You Build A Container

HTML

CSS

Exercise 1:
Get to know the basics of HTML and CSS !

• Codepen.io
• Basic Layout Example

Exercise 2:

Choose 2 from the flexible pens and combine functions to make a web poster.

or

You may pick a pen from the stubborn list and combine with a flexible pen to make a web poster.

Your web poster should carry out a simple message with a control in structure and type hierarchy. What happens when you stretch/shrink/scroll your browser? How does your container carry your message?

Flexible Pens (easy):

• Draggable Type
• Fixed Type
• Blend Mode
• Hover Tips
• Color Change Animation
• Moving Type
• Perspective
• Responsive Switch

Stubborn Pens (hard)

• Type Marquee on 4 Sides
• 2 Separate columns
• BG Falling Objects

Helpful Links:

• W3 CSS
• CSS Units
• Paragraph Column
• google fonts
• Color Picker
• Text Customizer
• Dropshadow Generator
• Perspective / Rotation Generator
• Emoji Typography
• Glyph HTML
• Various Blend Modes