&

💅

Week 4

September 20

Session recording

Week 4, September 20

A note on Project 1

We’ve rethought our timeline some, so let’s briefly talk about your first projects:

Project 1, Manuscript

Okay, on to CSS!

We’ll start to make things look good:

An intro to CSS

Let’s try this together

We’re going to try to go through two main things today—picking up again with GitHub, then writing some CSS. It’ll be okay:


  1. Open up GitHub Desktop, which we’ll use to manage our code. Sign in there 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. You can work with Git via the command line (and even right from VS Code), but we’ll use their GUI/Desktop app for now.

  2. On GitHub, navigate to the manuscript repo you created, last week. (Likely https://github.com/yourname/manuscript/). We’ve made one in our course GitHub for today—which you can reference—but you will use your own:

    Manuscript

  3. We’ll clone this repo down to our machines, by clicking the green < > Code button and selecting Open with GitHub 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.)

  4. Open your manuscript folder in VS Code—either 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, or ⌘ ⇧ A.

  5. Let’s glance through our HTML structure, to start:

  6. And briefly, let’s talk some ergonomics:

  7. Okay, for real, let’s switch gears to 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>

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

    body { color: tomato; }

    Refresh your page in the browser (⌘ R). You should see the color change! If not, your HTML isn’t seeing your CSS. Retrace your steps.

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

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

    Try commenting (⌘ /) this line in and out! Note the differences.

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

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

    In a few minutes, we should see our page update with our changes.

  13. Let’s change our 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=IBM+Plex+Sans:wght@100&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: 'IBM Plex Sans', serif;
}

  14. Commit that, push it up to GitHub, and check out your live site. You’re officially a web designer!

  15. If we have time:

    • Adjust some font sizes, with element selectors
    • Differentiate color on some paragraphs, with a class

Phew.

For next week