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 24).

A stack of lego bricks

Like Building Blocks

Close all laptops please

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

How this breaks down 'atomically'

Projects and exercises

Submission URLs

When submitting a web address to an assignment it should not start with https://webdav.its.sfu.ca/....

It should start with https://www.sfu.ca/siat/student_projects/iat339_2022_summer/.

Style Guide Component

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

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.

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 week

We will be covering git as part of next week's lecture. Please read the announcement for instructions.

Next lecture

The Utility Belt

Approaches for debugging code and an introduction to git. Lecture recordings will typically become available a day or two after the lecture.