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

GitHub Pages setup

Apologies for the delays!

We will be using GitHub Pages instead of SFU Filespace this term. If you haven't already, please follow this guide for set-up.

Let's do a quick review on how to complete the set-up.

Submission URLs

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

It should start with https://pages.github.sfu.ca/.

Notice the "pages" at the beginning! We will specify when to submit both or either URLs.

In preparation for lecture...

Please close up any laptops, cellphones, Switches, Neo Geo Pockets and other 'beep-boop' devices.

Code questions

word-break

CSS does not understand how to break-up long URLs by default. So we need to tell it that it is allowed to do so:

:focus and images

You cannot use the keyboard to navigate to an <img> element as they are not interactive elements. You will have to wrap it in an interactive element to style it upon interaction:

 a:focus img {
	/* this selects an img inside of a anchor that has focus */
}

Validators

Options for checking semantics:

• IDI Web Accessibility Checker
• Web Accessibility Evaluation Tool

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
• 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.

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.

— Rachel Andrew

Break-time

Please make sure you have today's starter kit — available at short.alfredosherman.com/339-t03

Bring P1 to next lecture

Please make sure to bring P1 to next week's lecture.

Next week

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

Labs critique sign-up

Sign-up for critique times starts with your lab. You will need to make it in your lab by its start time to secure a time-slot.

Critiques will run starting 15 minutes after your lab start time.

Activities during critiques

Code review tools:

1. Upload P1 to your SFU GitHub.
2. Head to ah.link/tools to try out the:
   • Code check assistant
   • Responsive viewer
   • Advanced code validator (password: )