ah teaches web design & development (The Utility Belt lecture)

The Utility Belt

Lecture outline

Approaches for debugging code and an introduction to git. Lecture slides will be made available on the day of the lecture (May 31).

A toy Batman utility belt

Meet your toolkit

P1 audit

In preparation for our P1 critiques today, please open up your project in Firefox or Chrome. Write your name on a post-it and attach it to the computer monitor.

In an additional tab, please open:

P1 audit

To practice assessing some of the most common P1 concerns, we will be doing some critique during our class today. We will be reviewing:

  • Valid HTML and CSS
  • Use of semantic elements.
  • Appropriate use of alt text.
  • Associating labels to inputs.
  • Use of responsive units.
  • Visually distinct styleguide.
  • Consistency in the treatment of elements.
  • Effective use of space.
  • Clear interaction cues.


Please make sure to include your names as part of your comments and be clear what you were commenting on (in case people need to follow-up).

After each prompt you will:

Valid HTML and CSS

Open the validator at http://ah.link/validate

Run the website through the validator. Comment on any frequent concerns.

Validator password is:

You have...

Semantic Elements

Are the following elements used appropriately?

Are the <br> elements defining a line break?

<p class="address">
SFU Surrey<br>
12747 102 Avenue<br>
Surrey, BC

Are ID's — <p id="name_of_this"> — for elements uniqe?

<!-- ID attributes must not be the same -->
<h2 id="introduction">Introduction</h2>
<h2 id="kittens">Kittens</h2>
<!-- If IDs are used as below, it is likely a good case for using a class -->
<section id="banner_style"></section>
<section id="banner_style"></section>

You have...

Appropriate Alt Text

Do your images have appropriate alt-text? Does it describe the content or the function of the image?

Does it describe its function or content?

<a href="home.html">
<img src="banner-image.jpg" alt="Home page">
<img src="logo.jpg" alt="Shoes-r-us">

Or not?

<a href="home.html">
<img src="banner-image.jpg" alt="A photo of shoes walking themselves across the street">
<img src="logo.jpg" alt="logo">

You have...

Labels Tied to Inputs

Are labels associated with inputs?

<label for="email">Email address:</label>
<input type="text" id="email" placeholder="name@email.com">

Or not?

<label for="email">Email address:</label>
<input type="text" name="email" placeholder="name@email.com">
<input type="text" placeholder="email address">

You have...

Use of responsive units

Look through the CSS and consider if the following cases may be okay, or cause for concern:

Visually distinct

Does this style guide look like the template provided? How so, or how not?

You have...


Does the treatment of the elements in the styleguide feel visually consistent? How so, or how not?

You have...

Effective use of space

Looking at the combined elements - the navigation and the product listing - do they make effective use of space in the responsiveness viewer? (ah1.ca/rv)

You have...

Clear Interaction Cues

Can we tell what is a link, and when we use the mouse and keyboard to navigate to it, does it visually cue us?

You have...

Critique complete

We are done with critique for P1.

Dev Environment

Adding to the toolkit

File Structure

Keep things clear

Things to ensure:

Dev Environment

Adding to the toolkit

Dev Environment

Adding to the toolkit

Save for Web

Images should be sized and compressed appropriately for web distribution. We will talk more about resolutions in the coming weeks, but some suggested tools for compression:

P2: Company

P2 Expectations

While working on a team, please note:

Working as a Team

The horror, the HORROR!

Come to an agreement on:

Dev Environment

Adding to the toolkit

An illustration of the purpose and use of git for code versioning

This drawing is explained in detail in the recorded lecture

git ready

In preparation for our tutorial today, please follow the instructions at ah.link/git

Code exercise #4