Teaching in Porto, day two

The second day in this week-long masterclass was focused on CSS. But before we could get stuck into that, there were some diversions and tangents brought on by left-over questions from day one.

This was not a problem. Far from it! The questions were really good. Like, how does a web server know that someone has permission to carry out actions via a POST request? What a perfect opportunity to talk about state! Cue a little history lesson on the web’s beginning as a deliberately stateless medium, followed by the introduction of cookies …for good and ill.

We also had a digression about performance, file sizes, and loading times—something I’m always more than happy to discuss. But by mid-morning, we were back on track and ready to tackle CSS.

As with the first day, I wanted to take a “long zoom” look at design and the web. So instead of diving straight into stylesheets, we first looked at the history of visual design: cave paintings, hieroglyphs, illuminated manuscripts, the printing press, the Swiss school …all of them examples of media where the designer knows where the “edges” of the canvas lie. Not so with the web.

So to tackle visual design on the web, I suggested separating layout from all the other aspects of visual design: colour, typography, contrast, negative space, and so on.

At this point we were ready to start thinking in CSS. I started by pointing out that all CSS boils down to one pattern:

selector {
  property: value;
}

The trick, then, is to convert what you want into that pattern. So “I want the body of the page to be off-white with dark grey text” in English is translated into the CSS:

body {
  background-color: rgb(225,225,255);
  color: rgb(51,51,51);
}

…and so one for type, contrast, hierarchy, and more.

We started applying styles to the content we had collectively marked up with post-it notes on day one. Then the students split into groups of two to create an HTML document each. Tomorrow they’ll be styling that document.

There were two important links that come up over the course of day two:

  1. A Dao Of Web Design by John Allsopp, and
  2. The CSS Zen Garden.

If all goes according to plan, we’ll be tackling the third layer of the web technology stack tomorrow: JavaScript.

Have you published a response to this? :

Responses

davidmead

@adactio‘s teaching a masterclass on progressive enhancement in Porto (which looks lovely), and it sounds exactly like the kind of class I would’ve loved. Trouble being there were no classes back when I, we, were starting out. View source was your tutor.

Jeremy is a great presenter and he’s recapping the classes over at his site. I just love his approach on day two, for CSS…

So instead of diving straight into stylesheets, we first looked at the history of visual design: cave paintings, hieroglyphs, illuminated manuscripts, the printing press, the Swiss school …all of them examples of media where the designer knows where the “edges” of the canvas lie. Not so with the web.

Jeremy Keith

I recommend checking out his latest work, Resilient Web Design, too.

Syndicated to:

# Posted by davidmead on Tuesday, February 14th, 2017 at 9:56pm

Previously on this day

7 years ago I wrote Counting down to the Responsive Day Out

Just two weeks to go.

7 years ago I wrote Tweakpoints

Not all media queries are created equal.

12 years ago I wrote Something for the weekend

Eventful.

13 years ago I wrote Helvetica

The film of the typeface.

13 years ago I wrote YouTubing

Clearleft has a YouTube star.

14 years ago I wrote The green, green grass of home

I’m going to Ireland for a week.

15 years ago I wrote Geekend IV: The Revenge

London was the setting for another geekend get-together on Saturday.

18 years ago I wrote A Canticle for Leibowitz

My reading matter lately seems to consist entirely of classic science fiction books I haven’t read in years.

18 years ago I wrote TotL.net Human Virus Scanner

You can keep your Nortons and your McAfees.

18 years ago I wrote Blog This

Consider it blogged.