&

⌨️

Week 3

September 13

Session recording

Week 3, September 13

Sketch reviews

We’ll start off today by looking at your sketches. We’re going to try and do this by breaking up into (random) smaller groups—so please find your names here, and move tables to sit with your group:

  1. Rebecca, Sachi, Sarah, Shaoran

  2. Shaurya, Vera, Zil, Bhroovi

  3. Emily, Kritika, Dhruvil, Kirsten

  4. Cristina, Lucy, Alexis, Angelica

  5. Hannah, Hana, Hao, JC

  6. Vicky, Xinyi, Wenny, Rodrigo, Sabrina

We’ll try to do this in 45 minutes. You’ll have about a half-hour among yourselves, and about 15 minutes with one of us at the table.

When we’re not at your table, you’ve got 6–7 minutes each to go through your work with your classmates. Use a timer and do this in turn; we want everyone to have similar time. Introduce your reading, briefly discuss your response, then take them through your sketches. Find each other’s Figma in the project, and “follow” the presenting student as they discuss their work:

Project 1 sketches

Do this in a few minutes, leaving time for feedback!


We will be moving from group to group, and will have about 3 minutes with each of you. So give us the more-condensed version! For today, we (your instructors) wantto focus on formal, aesthetic considerations around legibility, readability, and hierarchy—with the goal of narrowing your work for the project.

Let’s see if this works!

And now, HTML

We’ll talk briefly talk about text files. Then we’re going to introduce you to our old friend, HTML:

An intro to HTML

Let’s write some code!

  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. 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. Make a folder manuscript, then open this folder in VS Code and make an index.html file inside. Let’s 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>

    You’ll be using this file for your homework, this is just to get us started.

  3. Sign-in to your GitHub, which we’ll use to manage our code. (You should have already made an account.)

    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 website for now. (This is now also owned by Microsoft.)

    Create a repository (“repo”) there, also named manuscript. Make sure it is set to public!

  4. We’re then going to upload our index.html to our repo. (We’ll streamline this next week.) Write a short message that says what you’ve done, then Commit (save) your changes.

  5. Now let’s enable Pages, which is GitHub’s built-in hosting we’ll be using to make our work accessible online. Go to the repo’s Settings > Pages section, and select main as your branch.

  6. Click the About gear and check “Use your GitHub Pages website.” In a minute, your page should be live, on the web at https://yourname.github.io/manuscript/! Take a bow, and share you link in the Slack channel.

For next week