< 1 >

Creative Explorations in Screen-Based and Physical Computing

DGMD E-15, Spring 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

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 dgmde15@gmail.com
  3. …every Saturday from 9AM-1PM at Clover in Harvard Square
  4. …for a bit after each class Thursday evening at Felipe's in Harvard Square

Why do we code?

< break >

What we'll
build next week

What we'll
build today

GitHub Journal

  1. Head over to GitHub and sign up for an account
  2. Set up a GitHub Pages repository for your journal by following the directions here.
  3. It's fine for it to be empty right now, but if you'd like, you can take a look at Shaunalynn and Alec's journals to see how they're set up, too.

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.
  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 >