Skip to main content

Core Concepts of HTML & CSS + Studio

Texts to have read
Work to have achieved
  • Push your tutorial code to GitHub

Plan for the day:

  1. Tutorial check-in (~10 min)
    • Who used which tutorial?
    • Compare your results so far, discuss design choices & challenges
  2. Alt text activity (~20-30 min)
  3. Designing with dev tools (~10 min)
  4. Studio / practice (~30 min)

1. Tutorial check-in

First question: was everyone able to log into the Kevin Powell site eventually? If not, who used Interneting is Hard?

What I mostly want to do here is give you a chance to compare notes, and especially to compare the tutorial-led websites you’ve been building so far. Working in pairs or groups of 3, show each other what you’ve built:

  • What choices have you made in implementing the design spec in the Powell tutorial? Or what modifications have you made (if any) from the basic instructions in Interneting is Hard?
  • Is there anything you were not able to achieve? See if you can figure it out together, and call me over if you need help.

Let’s take about 5-10 minutes here; any remaining questions you have, you’re probably not alone, so let’s talk about them together!

2. Alt text activity

As you should know by now, every <img> on the web requires alt="". As this guide from NCSU libraries explains,

Good alt text describes what is in the image, focusing on what is most relevant to the reason for including the image and has the following properties:

  • it is as concise as reasonably possible
  • it relates to the surrounding content of the page without being repetitive
  • it avoids relying only on “sensory characteristics” to convey meaning
  • its writing style is consistent with the writing style of the page

Notice that this emphasis on reasons and reasonability mean that context is really important – so it’s hard to rely on an AI alt-text generator, even as they’re getting better. Your human sense of purpose is part of what you’re doing here.

A few relevant metaphors: writing a text description of an image is kind of like leading a Dungeons & Dragons campaign, trying to bring readers/listeners along on a shared adventure; it’s also a bit like poetry, trying to convey a wealth of subjective meaning using condensed, expressive language.

The authors of the latter site also point out that alt text is a kind of translation: it always involves creative decisions, with no single correct answer, and you have to recognize that something will always be lost – but ideally something will be gained as well.

Practicing together

I’m going to pull a random image or two from unsplash, but let’s recognize that we’ll need to imagine an artificial context. Some shout out if you see an image that starts to tell a story for you, and we can get it into our notes doc and write a few descriptions for it.

Practicing in pairs – and on your own

  1. Working in groups of two, repeat the process: find a picture that suggests a context for you, that you could imagine writing alt text for.

  2. Working solo first, write a text description of the image, keeping your context in mind.

  3. Compare descriptions. What differences did you notice? What similarities?

EXT: waiting for the others? Repeat the process, using pictures from your own camera roll. What do you emphasize when describing your own picture that your neighbor did not?

Full-group discussion

  • What surprised you, or what do you most want to remember from this experience?
  • How did/does subjectivity enter into text descriptions? In what contexts does that feel most or least helpful?

Let’s get some notes in the shared doc.

3. Designing with dev tools

Toward the end of the CSS module, Powell shows you how to use your browser to look for broken CSS rules. Did you know you can also use those tools to make changes on the fly?

Let’s have a look at the CSS Zen Garden, stripped of its CSS. (You can also download this HTML file from https://www.csszengarden.com/.)

  • You can see how the HTML relates to what’s displayed
  • You can add rules for the currently selected element
    • NB: it will use the most specific selector available, which may not be what you want. We can come back to that.
  • You can edit existing rules to see what changes.
  • You can see the full list of rules we’ve applied: it’s actually a new stylesheet!
  • If you don’t save (rules from) the inspector stylesheet, those rules will be lost when you refresh the page.

Your turn (~5 min)

You probably already have this lesson plan open; if not, go ahead and open it now.

  • Fire up the Chrome or Firefox inspector and explore the rules I already have in place.
  • Make some changes and see what happens. :)
  • If you have some new CSS you’d like to propose I adopt, please do send them my way!

4. Studio / Practice (45-60 min)

See below for options, then please go to <a href="https://bit.ly/cdm2025spring-notes>our notes doc</a> and let me know what you're working on; this helps me figure out where I can be most helpful.

  1. If your tutorial pages aren’t looking like the examples, tell me now, so I can help you get there! You’ll get a lot more out of the later tutorials if you’ve got these first ones solidly under your belt.

  2. The assignment for next class includes another two chapters in the tutorial and some optional texts on more advanced CSS selectors. If you haven’t yet gotten that far, why not start those homework assignments?

  3. How would you describe your own visual unit project if presenting it as alt text? Work up a couple options.

  4. If you’re feeling good about all that, start translating your website sketches – especially your website content – into HTML and then CSS.
    • Begin by adapting the tutorials, once you know you’ve got them working, to include your own materials: first build out the HTML tags you think you’ll need, so you’re sure they open/close appropriately, then write your content into the tags.
    • Use the docs folder for files you’ll eventually want to publish on the web.
    • Call the file for your landing/home page index.html. You can always change the <title>.
  5. Above all, call me over for help as needed.

EXT: If you’ve already done the above, and you’re good on what a CSS class is, and how to add it to an HTML element, read up on CSS frameworks on our course Resources page. They’re basically a bunch of pre-created CSS classes you can use to design your own layout from scratch: a little like Lego for web design. (I use the Bootstrap framework on this site.)

Homework for Next Time