Week Nº 3

Session Recording

Sketch Reviews

Given 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 (and hopefully in a larger space) 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:

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.)
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.
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.
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.)
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 ⌘ Shift A.
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!
Let’s go through some HTML structure, to start:
- <title>, <h1>, <p> (note <em>)
- Nested hierarchy, multiple <article>, <blockquote>, as block containers
- Add links and inline elements too
And briefly, let’s talk about some ergonomics:
- The Command Palette: ⌘ Shift P
- Word wrap: ⌥ Z
- ~~Syntax highlighting and themes~~
- Tabs vs. spaces and render whitespace
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. (Michael’s a fan of many small commits with verbose/specific descriptions, much to other devs’ chagrin).

These are like code comments⁠—they are mainly there for future you, and later, your colleagues.
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 ⌘ Shift G.
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.
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 your link in Slack!
You have made a web page!
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

Read through the HTML lecture from today again at your own pace, studying the various examples and (many) links. We’re going to have to move pretty quickly through these technical lectures in class, but expect you to use these as a resource in your work. We want to see your engagement here!
You will then finish the exercise we start in class today as your homework. This is the next phase of your first project:

Project Nº 1: Semantic DOM

Modify the web page we created with the content for your projects⁠—pulling in the text from your selection, along with your response. Refer back to the HTML lecture and structure your document⁠—using appropriate semantic elements to organize the content, as if you are outlining the material. You should make full use of a range of elements that your text and response need.
When you are done, submit a link to your repo and live URL file:

Submission Form

If you get stuck: refer to the recording, look through the lecture again, and then consult each other! We’d like to see conversation in Slack.