Week 3, September 13

Type and the Web

Session Recording #

↗

Sketch Reviews #

Given the number of you and how much we need to cover for our first projects, we will be reviewing your typographic sketches asynchronously to start. Expect some Figma comments/feedback from us by next class!

In the future, we will review in small groups in class.

HTML Time #

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

An Intro to HTML

Let’s Make a Web Page #

Our whole second half today will be a demo, setting us up for next week’s assignment and our first projects:

  1. You should have downloaded Visual Studio Code, which we’ll demonstrate with as our text editor for the course.

    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. You also should have downloaded GitHub Desktop, which we’ll use to talk to GitHub (the site) and manage our code. Let’s sign into the app with your GitHub 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. (This is now also owned by Microsoft.)

    You can work with Git via the command line (and even right from VS Code), but we’ll use their website and GUI Desktop app for now.

  3. Head over to GitHub (the site) in your browser. Create a repository (“repo”) there, named manuscript. Make sure it is set to Public! We’ll talk about the other options here, but you can ignore them for now.

  4. We’ll clone this repo down to our machines by clicking Set up in Desktop. This will link a local folder on our computer to the remote copy of our code, up on GitHub. (More on this in a bit.)

  5. Open the local manuscript folder this created in VS Code—either by dragging the folder to app’s icon, or via File → Open Folder…. You can also open it from GitHub Desktop with Repository → Open in Visual Studio Code.

    You can also do this with or ⌘ ~ Ctrl Shift A.

  6. Make an index.html file inside this folder. Let’s start with a basic setup:

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

    You’ll be using this file for your homework; this is just to get us started. Then let‘s open this in the browser!

  7. Let’s go through some HTML structure, to start:

  8. And briefly, let’s talk about some ergonomics:

  9. If you hop back over to GitHub Desktop, you’ll notice that our work is now shown there. Use this to review your changes—and if everything is good, write a message, commit them, and push your changes up to GitHub. Think of Git’s commits as tracked, commented, and reversible saves.

    Keep in mind that Git only knows about files that you have committed to your local (on your computer) repo. And GitHub only knows about files you have pushed to the remote (on their computer/server) repo. You have to tell these to sync, with the push.

    There are whole methodologies (and many an argument) around Git rules and strategies—but to start, just do what works for you. I’m a fan of many small commits with verbose/specific descriptions (much to other dev’s chagrin). These are like code comments—they are mainly there for future you, and later, your colleagues.

  10. Check that our index.html is now on GitHub by going to the repo there. You can navigate from your profile or jump right from GitHub Desktop with ⌘ ~ Ctrl Shift G.

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

  12. Back out on the repo page, click the About ⚙ and check Use your GitHub Pages website. In a minute or two, your page should be live, on the web at https://yourname.github.io/manuscript/!

    Take a bow, and share you link in Slack  !

  13. And if we have time—let’s make an update to our file.

    You’ll now notice that our changes are now shown in GitHub Desktop as a diff (for difference). Red is a subtraction; green is an addition! I find this easiest to understand in the split view.

For Next Week #