ah teaches web design and development: 03 Like Building Blocks

ah teaches web design and development: 03 Like Building Blocks — A slide deck

Like Building Blocks

Lecture outline

Covered this week:

  • Style guides
  • Responsive web design
  • Your first grids

Lecture slides will be available the day of the lecture.

Close All Laptops

No laptops during lecture time please.

Show, Don't Tell

It is very important that when we start talking about brands, colours, layouts, (etc) that you show us what you intend.

"I'm thinking a sky blue" vs.

Like Building Blocks
An example of a search form
According to 'Atomic Design' principles, how would we break this down?

Why We Style Guide

Style guides help us to:

  • Document our design
  • Test cross-browser
  • Avoid duplicates
  • Create a common language
  • Work in teams
P1: Process

Style Guide Component

At minimum, each component in your style guide should include:

  • A title for the element: Default Button Style
  • A CSS selector for the item: .button-default
  • A sample for the element in code: code <a href="" class="button-default">Default Button</a>
  • The component rendered out:
    Default Button

Style Guide Template

We have put together a style-guide template for you to work with if you would like to, available at the course sub-site and on Canvas.

Total Validator
Your Total Validator

Alternative Validators

Alternative options for checking semantics:

It's just a bunch of blocks
An animated gif illustrating the differences between responsive and adaptive web design
From 9 Basic Principles of Responsive Web Design


Item #1
Item #2
Tousled gentrify whatever, art party sustainable.

Can I Use... Flexbox?


If you need support for flexbox, I recommend The Flexbox Cheatsheet Cheatsheet (Joni Trythall).

An animated gif illustrating how breakpoints work
From 9 Basic Principles of Responsive Web Design

Media Queries and Breakpoints

@media (min-width: 40em) { /* the condition */
.grid-col { /* the selector */
flex-grow: 2; /* conditional changes to selector */


Runaway! Runaway...

You may:

  • Skip merrily through some posies (not provided)
  • Sternly stare at the floor
  • Ask a question

This week's labs

The low-down

This week's lab will be focused on P01 crits, and will include a visit from Andrew.

Next week's lecture

Meet Your Toolkit

  • Git
  • Debugging code
  • Troubleshooting

Next week's reading

Chapter 1 of Git for Humans by David Demaree — it is important that you complete this reading.

Requirements for Next Week

Please make sure to:

  1. Sign up for a Gitlab account at SFU Gitlab Server before lecture.
  2. Install GitKraken (Mac/PC) before lecture.
  3. Complete the reading before lecture.

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna