Week 3

September 14

IBM, East Fishkill, NY. Diagram of Dynamic Random-Access Memory Chip (DRAM). 1984.

Sketch review

We’ll start off today by looking at your Project 1: Manuscript sketches from last week. We’re going to try and do this by breaking up into smaller groups—so find your name below, and then find your classmates, and (physically) relocate yourself around the auditorium. Try to spread out, as it will probably be noisy:

Once you are situated, you will present your work to each other. You will have about 40 minutes with just your group, and each group will have about 10 minutes or so with one of us (your instructors) as we roam around the room.

Your 40 minutes gives each of you about 10 minutes to talk through your project. Introduce your classmates to your reading, briefly discuss your response, and then show them your sketches and how they reflect and relate to this content. This should be relatively informal; use Slack to send links to your Figma documents to each other, to follow along. Leave some of your time for your classmates to weigh in. But stick to the clock! Everyone should present.

We will be moving from group to group. When we come to yours, each student will (quickly) show us their work for 2–3 minutes, each. In that time, we’ll focus on formal, aesthetic considerations. Our goal is that one of us should see and comment on every student’s sketches. Let’s see if this works!

We should wrap this up around 10.

We’ll take our break here, slightly earlier than normal. We’ve still got a lot to cover today.

And now, HTML

We’re going to introduce you to our old friend, HTML.

An intro to HTML

Let’s write some code

We’re going to dive right in and make our first web pages, no big deal! We’ll do this all together.

Everyone should follow along on their computers. If you have trouble, we’ll take a look after going all the way through, first. We’ll also have this recording for you to refer back to.

  1. You should have downloaded Visual Studio Code, which we’ll use as our text editor for the course. Get it now, if you have not.

    You’ll hear us refer to this as an IDE, for Integrated Development Environment (if you remember our reading). Think of this as a fancy text editor with coding-specific features, like syntax highlighting and tabs. There are many of them! VS Code is probably the most popular, right now. (It is made by Microsoft.)

  2. We didn’t have time to get… into Git, so for now just focus on creating your index.html file. We’ll talk about Git/GitHub next week.

    Also open up GitHub Desktop, which we’ll use to manage our code. Sign in there with your GitHub account (which you should have already created).

    Git is version control software, which tracks changes and helps developers work together. GitHub is a very, very widely-used, web-based host for Git projects—known as repositories. You can work with Git via the command line (and even right from VS Code), but we’ll use their Desktop app for now. (This is now also owned by Microsoft.)

  3. Create a repository for your Manuscript. Think of this as your project folder. For consistency, let’s name all our repos manuscript.

  4. In VS Code, make an index.html file in the directory of the repository. You can start with this HTML:

     <!DOCTYPE html>
 <html>
     <head>
         <title>Hello, world!</title>
     </head>
     <body>
         <h1>Hello, world!</h1>
         <p>This is my first web page.</p>
     </body>
 </html>

  5. Then commit this file and push your changes up to GitHub. Think of Git’s commits as tracked, commented, and reversible saves.

  6. Go to your repository on GitHub (the site) and then enable Pages, if it isn’t already.

  7. You should be able to see your page (after a couple minutes) live, on the web:

     https://username.github.io/manuscript/

For next week

Session recording

Session recording