ah teaches web design & development (Like Building Blocks lecture)

Like Building Blocks

Lecture outline

More depth on styleguides, as well as thinking and building responsive structures online.. Lecture slides will be made available on the day of the lecture (May 27).

A stack of lego bricks

Like Building Blocks

An example of a search form including the search button and form field

How this breaks down 'atomically'

Why We Style Guide

Style guides help us to:

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

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: <a href="" class="button-default">Default Button</a>
  • The component rendered out:
    Default Button

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.


Options for checking semantics:

A stack of lego bricks

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

Can I Use...


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


Grids help

If you need support for grids, I recommend A Complete Guide to Grid (CSS Tricks).

Flexbox or grids?

Do you want to let your content control the way it is displayed, on a row by row or column by column basis? That’s flexbox.

Or, do you want to define a grid, and either allow items to be auto-placed into the cells defined by that grid, or control their positioning using line-based positioning or grid template areas. That’s grid.

Rachel Andrew

An animated gif illustrating how breakpoints work

From 9 Basic Principles of Responsive Web Design

Media Queries with Flexbox
Media Queries with Grids
P1: Process
This week's exercise

Next lecture

The Utility Belt

Approaches for debugging code and an introduction to git. Pre-recorded lectures and slides will typically become available the day after the lecture.