Week 3: February 11: CSS Animations

2/11 Itinerary

• Flexbox
• Navigation
• Faux Portfolio Styling
• Work on Portfolios/Studio
• CSS Animations
  • Transitions
  • Keyframes
  • Maxims
• Discuss Lev Manovich Reading
• Look at rest of Portfolio Examples
  • Color Swatches?

Flexbox

Understanding how flexbox works will be incredibly helpful to designing your sites, in this project and beyond.  Download the link below.

Flexbox Example Link

Resources for Flexbox

• CDN Flexbox
• Flexbox W3 Schools
• Complete Guide to Flexbox
• Flexbox + Grids
• Flexbox CSS Reference

Navigation + Portfolio

Let’s look at an example navigation bar and sample portfolio. You can download it below.

Navigation Example Link

Portfolio Example Link

Sidebar Example Link

CSS Animations – Transitions & Keyframes

This file contains a link to 5 separate animation examples. Download this to your personal folder.

Animation Example Files

Resources for Animation

Animatable Properties

1. Transitions
   1. CSS Tricks Transitions
   2. w3 School Transitions
   3. Shay Howe CSS Transitions
2. Transform Property
   1. w3Schools Transform
   2. CSS Tricks Transform
3. Keyframes
   1. Keyframe Animation Syntax – CSS Tricks
   2. w3Schools Keyframe
   3. CSS Keyframe for Beginners

Homework

• Jill Lepore, Can the Internet be Archived, The New Yorker, come to class with one question about the reading.
• Read Charles Broskoski on self-discovery that happens upon revisiting things you’ve accumulated over time, The Creative Independent, come to class with one question about the reading.
• Come in next week with full styles on your Portfolio Sites. These should be around 80% complete. We will do an in-progress critique at the beginning of next class.
• Create pages for at least 5 of your 10 Maxims. Consider the examples we looked at today.
  • Include consistent navigation leading us from one page to the next one, and back.
• Watch p5.js Introduction (updated 2/14)
• 6 Images posted to Are.na