Session 1

Intro & Syllabus

Welcome to the class!

Figma

Figma is the standard tool used for designing anything web- or app-based. It has both an in-browser and app version, and both are fine. We will briefly touch on how to use it, but if you want to learn more they have great tutorials on their YouTube account.

Useful shortcuts: Shift + R for ruler, Cmd + A for select all, Shift + 2 to zoom to selection, Shift + A makes an auto layout

Exercise: Recreate MoMA homepage in Figma

A website is a stack of blocks. To start to get familiar with this mindset, we are going to recreate the homepage of MoMA’s website in Figma.

Break

~ 10 minutes ~

GitHub

GitHub is a platform that allows us to create, store, manage, and share code. We will host our projects on it. GitHub Pages is a service offered by GitHub that enables the hosting of a website, from the code that you have in your repository.

This part of the class is often frustrating for those new to code. I will try to make it as easy as possible, by using a template.

Here’s what we’re going to do, in order to be set up for the semester:

• Sign up for an account here: https://github.com/
• Make a copy of the template repository: https://github.com/jackrieger/harmonic-collection
  • Look for “Use this template” in upper right corner
  • Create a new repository
  • For the repository name (exactly the same, with no change in capitalization, spaces, or other): harmonic-collection
  • Public setting
  • Create Repository
• Create a Codespace on your copy of the repository
• Enable settings for live site hosting
  • Settings > Pages > Branch: main > Save
  • Go back to repository > About > Website > Check “Use your GitHub Pages website”
• Come up to me and show me that the site is live and working

Homework

Come to class with 3 ideas for your Harmonic Collection. Make a short presentation about your ideas (1 or 2 slides per idea is fine) and be ready to share with the class about it for feedback.

Starters

Once a week, one student will bring in something to talk about, relating to the subject material of the class. This is an easy part of your participation grade, but more than that it’s a great chance to talk about ideas.

Some examples of things to bring in:

• a website you love
• an app you feel frustrated using
• a news article about something digital

We will all then talk about this for the first 5-10 minutes or so of class.

Next class will start with: Jun