< 1 >

Creative Explorations in Screen-Based and Physical Computing

DGMD S-15, Summer 2016

Why do we
run this course?

How do we
run this course?

What we look at

  1. …projects in the world
  2. …projects by us
  3. …projects by you

During our sessions, this means time for...

  1. Discussion
  2. Design
  3. Studio

What we do

  1. …build new stuff every week (and store it on GitHub)
  2. …read materials related to building stuff every week (from a mixture of suggested resources and independent investigations)
  3. …reflect on and refine work every week (and document that process in your journal)

We're available!

  1. …anytime on the course's Slack Channel
  2. …anytime at dgmds15@gmail.com
  3. …after each session on Mondays and Wednesdays from 3-5PM
  4. …projects nights on Thursdays from 6:30-9:30PM at sprout's studios at 339R Summer St. in Davis Square

Why do we code?

add some things like a bar, etc.

add Crossfit, Lose It, Pole dancing classes

What we'll
build next week

What we'll
build today

Designing /people cards

  1. Pair up with someone in the room.
  2. Get to know each other a little bit. (Really take some time to chat; you'll be seeing a lot of each other over the next 7 weeks! Go get a coffee across the street if you'd like.)
  3. Based on what you learn about them, come up with at least three ideas for effects you might apply to their /people card. (Don't let your skill with HTML/CSS/JS influence your design too much!)
  4. Have your partner choose which one they like the most. (This might happen after class today, so be sure to exchange email addresses with your partner.)
  5. Make sure you're back here by 2:30PM. Set a timer if you need to!

dgmd.github.io/people


To get our feet wet, let's take a stab at using HTML, CSS, and Javascript by populating the people page of the course site with our own information…


  1. Create an account at Codepen.io.
  2. Fork this Codepen and modify it to reflect what you've learned about your partner.
  3. Now, add some CSS or JavaScript effects to your card. Check out our current people page or this list of effects for inspiration on how to adapt your card. Please read the comments in the Codepen, as they provide instructions on how to make a card that will be easily incorporated into the course website.
  4. When you're done with your card, post a link to it on your GitHub Pages journal and send us a link to your journal at dgmde15@gmail.com. If you'd like, you can take a look at Shaunalynn and Alec's journals to see how they're set up, too.

For next week

  1. Make at least three sketches representing effects you'd like to add to your partner's card and have them choose one to represent them on the course website. We'll be posting them to a personal journal hosted on GitHub, which we'll ask you to use as your central place for keeping materials. If you'd like to get a headstart, check out these directions.
  2. We'll be using Slack (tour here) as our course chat room, which you can join here.
  3. Take a go at setting up up your local development environment by following these steps. If you run into trouble, don't stress (or stay up all night). We'll be available to make sure you're set up.
  4. If you just want some more stuff to explore...

  5. Check out our /people card template and start transforming it to represent your partner. Make your own account, fork our sketch, and replace Kanye with your partner, adding a CSS or Javascript effect of your own. You can look at the people page on last semester's class site for some ideas or use this library of basic effects for inspiration.
  6. If you want to get started with HTML, CSS, and JavaScript, you might check out the Tools & Materials page and Shay Howe's Learn to Code HTML & CSS. We'll also be digging into our own intro to and demo of the basics of HTML/CSS/JS, which might be of particular use.

< /1 >