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).
Like Building Blocks
Close all laptops please
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:
- 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.
Just a bunch of blocks
Flexbox
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.
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.