Syllabus

• WKSHP: WEB PROGRAMMING; RISD GRAPH-3188 (20880)
• Spring 2016, 8:00–1:00pm, Fridays. Room 404
• 1 credit
• Instructor: Marie Otsuka ([email protected])

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.

Course objectives

• Be introduced to HTML and CSS syntax to help conceptualize future projects
• Encourage use of the browser as a place for experimentation
• Introduce both analytical and playful working methods
• Be introduced to instructions-based making — HTML being one of many coding methods
• Be comfortable editing existing themes or websites
• To learn how to find answers online to coding problems
• Learn to work collaboratively in an open-source model

Schedule

Week One: Content

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: Form

Week two encourages a different mindset, using code and the browser to discover designs as you make.

• Assignment 3: Draw objects or abstract compositions and create a series of web posters
• Assignment 4: Incorporate the work of peers to develop patterns

Week Three: Behavior

Week three delves into designing with time: interactivity and motion.

• Assignment 5: Movement and interaction
• Assignment 6: Responsive animations

Week Four

Putting it all together

• Lecture: From sketch to code
• In-class activity
• Possible future assignments

Software needed

• Sublime Text or other HTML editor, such as Atom or Text Wrangler
• Join GitHub and let's add you to the team!
• Download GitHub Mac client and clone class repo
• Google Chrome browser or Safari

Resources

• Lectures are available on Google Drive
• Be sure to refer to the Wiki on the Github page for useful resources
• Check out & add to Examples for inspiration
• Clone the Github Repo from last year's class

Grading

• 40% attendance, 40% completion of all assignments
• 20% risk-taking/quality of end forms: you are expected to experiment, iterate and form innovate designs with the coding that you’ve been shown. Because work from previous sessions is available, you are able to appropriate code, but in service of your own ideas and forms.
• Missing one class without permission fails the course
• Although we are “wired” throughout the workshop, avoid being plugged into Facebook, email, etc.