Week 4

September 21

Ettore Sottsass. Study for Tea Pot, project (Perspective). 1973.

you know what can’t be acquired? html

Maxim Leyzerovich

A note on assignments

We just want to reiterate that assignments are due by the start of the next class session. There were many folks who hadn’t submitted their exercise/project sketch links for last class; some still haven’t, even now.

If you submit it after the start of the class, the assignment is late. And we don’t accept late work.

Also, it is your responsibility to submit your work in the manner we specify—whether in a Google Doc or via the submission form. It is also incumbent on you to make sure we can access your work—for example, many of you created your Figma files outside of the class project, so we didn’t have permission to see your links. Check with a classmate, if you aren’t sure.

We’re not going to chase down your work, and showing us on your laptop is not turning an assignment in. There will not be another warning about this.

</sternteachermode>

Okay, on to CSS!

We’ll start to make things look good.

An intro to CSS

We’ll break here, for the standard 10 minutes or so. Please be back on time.

Let’s try this together

We’re going to try and get through two things today—the Git/GitHub basics (from last week) and then some CSS.

  1. 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.

  2. Create a repository for your Manuscript. Think of this as your project folder. For consistency, let’s name all our repos manuscript. (You can use the folder you made last week.)

  3. Then we’re going to commit our index.html file and push it 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.

  4. Go to your repository on GitHub (the site) and then enable Pages.

    Pages is a product/service of GitHub—not Git—that we’re going to use as free, simple hosting. It essentially makes a server out of the files and folders in your repo. (And is free!)

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

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

    Congratulations, you have made a web page! Share your URL in the Slack!

  6. Let’s quickly install the Live Server VS Code plugin, to give us quick/auto reloading as we work on styles. Always mind your ergonomics!

  7. Now for some CSS. Create a style.css in the same folder as your index.html.

    Recall that CSS can live also live in a <style> tag, or even inline on an element itself—but these don’t scale very well. So we’ll be using an external (not in the HTML) stylesheet.

  8. In the <head> of your HTML file, link to style.css.

     <!DOCTYPE html>
 <html>
   <head>
     <title>Your page title</title>
     <link href="style.css" rel="stylesheet">
   </head>
   <body>
     <!-- Your HTML content. -->
   </body>
 </html>

    I always like to add something obvious in, to make sure it is all connected. Add this to your style.css:

     body { background-color: tomato; }

    You should see the background change! If not, your HTML isn’t seeing your CSS.

  9. Let’s start with the type. Go to Google Fonts and find what you need. On the specimen page (the page for a font family), scroll down to Styles and select the specific fonts you want (with the ⊕)—this will add them to a sort of “cart” over on the right.

    You can copy the provided <link> into your <head>, but I prefer to select the @import option. Since we’re using an external CSS file, we don’t even need the <style> tag they provide—you can just copy the line that looks like this:

     @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap');

    …into the top of your style.css file. And then apply it—in this case, to everything, as font-family is inherited:

     body {
   font-family: 'Playfair', serif;
 }

  10. If you hop back over to GitHub desktop, you’ll notice that our changes are now shown there as a diff (for difference). Red is a subtraction; green is an addition! I find this easiest to understand in the split view.

  11. Use this to review your changes—and if everything is good, write a commit message, commit them, and push your changes up to GitHub. In a few minutes, we should see our font update at our same URL.

    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 (Eric’s) chagrin. These are like code comments—they are mainly there for future you.

  12. If we have time, let’s experiment with the color (and looking ahead, margin) properties, which you’ll want for your projects:

    • Space between our elements with margin-top
    • Controlling our line lengths with max-width
    • Centering a content block with margin: 0 auto;
    • Adding background-color with padding

  13. Let’s also try adding in our reset to start with a clean slate:

     <link href="https://typography-interaction.github.io/assets/styles/reset.css" rel="stylesheet">

For next week

That’s a lot. But we are really looking forward to your projects! We want to see the thought and time you put into these—show us that engagement. Aim high (in hope and work)!

Session recording

Session recording