Skip to main content

Web Unit Post-Workshop Studio

Work to have done: asynchronous peer-review; optional forum post about possible consolidation-unit projects

Plan for the day:

  • Planting seeds
  • Gathering questions
  • Studio time!
    • Check for new feedback
    • Set an intention
    • Work time
    • Exit note

Planting seeds

As a reminder of past advice, please:

  • Call your homepage index.html, probably in the docs folder. (Other html files can be called whatever you want… but will probably work best in lowercase and without spaces.)
  • Be sure to include some basic spacing to limit the length of lines and let your content breathe.

In addition, after reading through the drafts and comments, I hope you can…

Reuse your stylesheet on multiple pages if the rules haven't changed.

As I noted in response to questions about the baseline call for a "sitewide" stylesheet, it's an important threshold concept of CSS that you can have a single set of rules that are invoked in multiple places. In other words: instead of copying out your rules into a new file for each HTML page, just copy the <link rel="stylesheet" href="styles.css" /> from your first page into the <head> of your second page (and third, and fourth, etc).

If you do have a style that you want to change – say, a heading size that's bigger on the homepage than on other pages – you can "scope" those rules with descendent selectors. For example: 


    body {
      font-size: 18px;    /* sets the baseline font size */
    }

    /* heading styles for most pages */

    h1 {
      font-size: 2em;     
    }

    h2 {
      font-size: 1.75em;
    }

    /* bigger heading sizes for home page */

    body.home h1 {
      font-size: 4em;
    }

That last rule selects h1 elements only if they're inside a <body class="home">. You add the class at the top of the file, and voila! A per-page style within the same sitewide stylesheet.

Have alt text for all your images.

Text-alternatives, which you add to images using <img alt="text description here" src="path/to/source.jpg">, are a required element in validated html. They're also really helpful, and not only to blind users: they make the html file more readable on its own, and thus more semantic, and they help you troubleshoot layout when image paths are broken by showing you where each image is trying to appear.

For more guidance on how to write useful alt text, see https://webaim.org/techniques/alttext/.

Level up your HTML.

I see this in three ways: div soup, hard-coded spacing, and skipped header levels.

"Div soup" is when you have divs inside divs inside divs, and they all start to flow and meld and it's hard to see what role each thing is actually playing. To help with that, see whether you can replace some with a more semantic tag: Is that div with one line of text acting like an <h2>? Are those divs wrapping up each of several articles of clothing with its photo, name, and price acting like <article>s? Is the whole display of items really a <section>?

When I say "hard-coded spacing," I mean spacing that uses <br/>. That tag is not really for spacing, but rather for creating manual but meaningful line breaks. Think poetry, or maybe a two-part heading where you want to enforce a particular phrasing (e.g. a line break after a colon). A real <br/> should itself be part of your content, a piece of punctuation as much as a comma or period. Instead of hard-coding space after your paragraphs or headers, give them some margin-bottom! A margin of 1em or slightly more (depending on your line-height) should do the trick.

Finally, your h1, h2, and h3 headings should follow a nested sequence that respects their numbers: the top-level heading on any given page should be an h1, and you shouldn't have any h3's unless you first proceed through h2. If you like the look of a smaller header, but that would "require" you to skip a level, instead use your browser's inspector to find the current CSS – font size, color, spacing, etc – and copy/paste that into a new rule for the heading level you're actually up to. (See above for tips on limiting the scope of these changes through classes and descendent selectors.)

Remember to credit your sources somewhere on the site.

If you're using resources you didn't make yourself, be sure to include enough information to recover where it came from: a direct link to the image and to the specific license (if there is one) is ideal. Creative Commons sources often provide that html for you!

Where to put this information? Ideally, somewhere small near the image itself. (There's a semantic html way of doing this with <figure> and <figcaption>, which you may remember from the Semantic HTML section of the tutorial. See also this extended discussion of figures, figcaptions, and alt text.)

Alternately, you can have a rights page somewhere, or use the site footer – or have a live hyperlink from your site to an external credits.md file in your repo.

NB: If an image is under copyright, you can still use it if you can make a good case that it's a Fair Use. See the homework reading after Lesson 4 to review the Four Factors you need to consider.

Gathering questions

As you finish taking in the advice of your peers (and going over my suggestions above), I’d like to know what questions you have that I might be able to help with – especially if it’s about something you’ve seen in assigned readings or revision suggestions, but you’re not sure how to implement.

Head into the google doc and write down what you're thinking about. It can be anonymous!

I’ll float and respond to in-person questions, as usual, but when I have some down time I’ll also come back to these questions in the gdoc and write up responses.

Studio Time!

Check for new feedback

I had set the deadline for asynchronous workshop fairly close to the start of class, so as of my writing this, a lot of notes were still missing. Please open up your website repo, head into the history, and see if you have any unread comments there.

Hopefully everyone has by now received at least 2 (ideally 3) comments from members of your workshop groups! If you have not, please let me know, so I can make sure you’ve got a diverse set of perspectives on your work in progress.

Set an intention

As usual, before you start, go to the next section of the google doc and write a quick line about what you hope to accomplish with your remaining time. e.g. Will you…

  • Work on responsive layout?
  • Work on replacing placeholder content with real content?
  • Work on one of the suggestions above? (Which?)
  • Work on one of your stretch goals? (Which?)
  • etc etc

Just a sentence or two as a guidepost will give you something to come back to, to reorient, if you find yourself walking in circles or caught in a thicket.

Don't forget to save periodically as you go:
  • as an html / css / js file
  • as a git commit, saying what you've just achieved
  • as a screenshot

Work Time

Please ask questions as they come up. Otherwise, I’ll try to work through the questions from the doc.

Exit Note

Before you leave, just as a way for me to check in, I’d like to hear more about what happened today: did you find images? Level up on a particular CSS skill? Decide something about your project? Raise a question in a new way that you’d like some help with?

Homework for next time

  • Continue revising forward on your website. We’ll have one more studio day, then the final unit project will be due in one week, on Thursday 4/7. But so will the reflection, so budget your time accordingly.
  • Don’t forget to save, commit, and push as you go.
  • In Tuesday’s class, I’ll also make sure everyone knows how to take the site live, so you can show it off to friends and family without requiring them to navigate GitHub. ;¬)