Antle teaches information design (Code review lecture)

Code review

Lecture outline

A week to sit down and discuss coding project submissions. Lecture slides will be made available on the day of the lecture (November 5).

In preparation for lecture...

Please close up any laptops, cellphones, Thinkpads, Pippin's and other 'beep-boop' devices.

CSS questions answered

I will go through more of the questions that came up around CSS. If I do not answer your question, please feel free to follow-up via Discord or email.

The box model

content-box vs border-box

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/a63b4e018122c1404ed8ff7999cafc1f

When to use normalize.css?

This file allows you to 'even out' the differences between the ways browsers render HTML and CSS by default.

If using it, load it before your own CSS files.

How do I make images responsive?

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/6ebbaf836f946415213252801c6694f8

What is interactable?

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/168d4cba00f1bf4a79c586e6459aac06

How do I load fonts?

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/e14ea47359f73cd87b6c320cb511e0b7

Why be careful about pixels?

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/129e70491b51c506b895c78f60d6ebe5

Smart CSS

You want to aim for CSS stylings that are scalable and modular. Here are some divisions suggested as a framework:

1. Base rules: direct styling of elements for normalizing or defaults
2. Layout: structural styling for the page (i.e. .grid, .grid-column)
3. Modules: styling for different components (i.e. .nav-bar, .nav-button)
4. State Rules: styling different states (i.e. .is-current, .is-opened)

Coding conventions

When you get started on planning out elements

More things to ensure:

• Use a purpose-oriented naming convention: .external-link (describe the content)
• Avoid naming based on style: .blue-border
• Agree with your teammate: You need to understand one another

Specificity

The order in which things are read

1. Inline styles: should never be used
2. ID's: #home, #cool-stuff
3. Classes, attributes & pseudo-classes: .home, [class], :hover

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/eef2d2786f3f1ca27c334b30f38d66f3

Does CSS only appear in websites?

No. Many modern applications built using frameworks like Electron — i.e. Slack, Visual Studio Code, Figma — will make use of HTML, CSS, and JS to build desktop applications.

How do I publish my site?

With a server! (to be continued shortly)

Git story time

Let's talk about git.

Git tutorial

In preparation for today's git tutorial, please:

• Head to github.sfu.ca to ensure you have access.
• Install GitHub Desktop on your computer.

Building structures demo

A live demo for building out responsiveness in P3.

Next week

In next week's class we will be:

• Holding a P3 code critique
• Covering more on git
• Code reviews for P3 (if necessary)
• Forming teams for P4