Skip to main content

Web Unit Post-Workshop Studio

Texts to have read
  • Your partners' websites, if you didn't complete peer review last class.
Work to have achieved

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. (Other html files can be called whatever you want… but will probably work best in lowercase and without spaces.) Note that you don’t need to add a new subfolder: placing the html files directly inside docs is easiest for publishing, as any subdirectories will become part of your site’s URL.
  • Be sure to include some basic spacing, even if you’re keeping your CSS minimalist, to limit the length of lines and let your content breathe.

In addition, after reading through the drafts and comments, I’ve come up with the suggestions below. While not all these ideas will apply to every project, they all apply to more than one, and some projects could benefit from several. Please start by reading through these notes and considering where each might help you!

Have text running into a background image? Try a container with backdrop-filter to improve contrast.

To quote the MDN documentation,

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent.

With just two lines of CSS (again, I'm quoting MDN here), you can add a kind of "frosted glass" effect that will help your foreground pop:


.box {
    background-color: rgb(255 255 255 / 30%);
        /* note that 30% opacity; some transparency  */
        /* is required for this effect.              */
    backdrop-filter: blur(10px);
}

Be sure to check out their example at the bottom of the page linked above.

If alignments or aspect ratios get weird when you resize the window, level up with Grid and Flexbox.

While the basic starting point for a CSS grid has you declaring an explicit number of columns (and sometimes rows), the implicit grid can be very powerful. Check out Rachel Andrew's use of auto-fill repeating tracks: with a single line of CSS...

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;

... she sets up a flexible number of columns. Instead of warping to get smaller than their preferred size (here, 200px), the items just wrap into the next row, and grow to fill the available space. When the window is wide enough for another 200px item, it automatically rearranges the grid.

In that example, each item is just a box, but there's no reason it can't be a flexbox or grid itself, and in fact this is a super-common pattern, often called a card layout. A group of divs (the cards) is arranged in a grid, and each inner div (card) will contain an image and some text. With a few quick lines, you can line up the card's content neatly:


.card {
    display: flex;
    justify-content: space-between;
    align-items: stretch;          /* or center */
}

The MDN card layout linked above uses grid for the card, too, so you've got options.

P.S. Have different sized images, rather than cards all alike? Try the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow"grid-auto-flow: dense</a> property.

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 to the opening <body> tag at the top of the file, and voila! A per-page style within a single sitewide stylesheet.

Use alt text to convey significance as well as the basic facts.

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.

But alt text can also be fun: its purpose is to provide a way for more users to experience your site. If the image is there to help us get a sense of you, the words should do the same. If the image is there to add beauty, let your words add beauty; if the image is there to make us smile, relax, laugh, cry, imagine ways you might get us there – at least part of the way – with words.

For some inspiring examples of poets having a go at alt text, see the Alt Text as Poetry Workbook by Bojana Coklyat and Shannon Finnegan. For bad AI-generated alt text accompanied by some inspired textual descriptions of color, see Alex Haagaard's "Shitty Alt Text" project. For general guidance on how to write useful alt text, including many further links and examples, see Veronica Lewis's guide for the Perkins School for the Blind.

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

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 screenshot
  • as a git commit, saying what you've just achieved

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, 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, aiming to push a finished-for-now version by 10pm on Sunday, April 6 so you can submit a reflection to the issue queue by noon on Monday, April 7. This should include, as usual…
    • at least 500 words describing the work you did and the design decisions you made
    • at least two screenshots showing your work in progress
    • at least one screenshot of feedback that you responded to in revising, and what you did in response
    • your own assessment of how you met the baseline criteria, as well as aspirational criteria as appropriate
  • The main goal of this deadline is to free you up to begin reflecting on the semester as a whole in our Consolidation/​Integration unit. That said, one of your possible projects for that unit is to continue working on a previous project.
    • If you anticipate that you’ll want to just carry on with the website, that’s fine! Please still turn in a reflection for Monday, noting that you’re continuing to revise.
  • Don’t forget to save, commit, and push as you go!