ah teaches web design & development (Debugging Day lecture)

Debugging Day

Lecture outline

As the title suggests we'll spend this lecture helping you debug your final projects in addition to covering some speed optimization. Lecture slides will be made available on the day of the lecture (December 2).

Critique setup

Please get set up for today's critique:

• Please open up your portfolio in either Chrome or Firefox with the following tabs:
  • Open a blank tab
  • Open a tab with the source code (right-click view source, or devtools)
  • Open a tab with the responsive viewer (ah.link/rv)
  • Open a tab with the validator (ah.link/v)
• Please select a spot in the rectangle to place your project.
• Please put a post-it with your name on it on your project.

Process

Please be clear what you were commenting on and why your critique is valid/important.

After each prompt you will:

• Return the website to the home or landing page.
• Write your name on your post-it.
• Leave the post-it at the project you are at.
• Move to the next project (+1 from where you are).

Peer critique start

Please move +1 project.

Process analysis

Read through the process analysis. Can you:

• Understand what the project was about?
• See why a particular process was undertaken?
• See what the thinking behind this process was?

You have...

Process analysis

Read through the process analysis. Can you:

• Do they clearly connect the images and the text?
• Identify this individual's contribution?
• See a reflection that ties back to what was said in the analysis?

You have...

Please open a blank tab overtop of the portfolio

First impressions

Briefly look at the landing page of the website. What do you understand this website is about? and why?

10 seconds

First impressions

Briefly look at the landing page of the website. Who would you say this individual is/what do they do? and why?

10 seconds

First impressions

Briefly look at the landing page of the website. Do you feel the visual language is unique? Why so, or why not?

30 seconds

Ethos

Step through the website. Do you believe this person can do what they claim to?

You have...

Visual identity

Does the visual language or identity presented communicate what this individual does? Why or why not?

You have...

Consistency

Is the visual language used through the portfolio site consistent?

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

Responsiveness

Open up our responsive viewer at ah.link/rv and check: Does the website respond effectively to these different sizes?

Note: This will only work if the website has been uploaded.

You have...

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:

Note: This will only work if the website has been uploaded.

You have...

HTML code review

Review the HTML for:

• Do the <img> elements have alt attributes describe the image (as if we did not see it), or describe its destination if it is within a <a>?
• Do the <img> elements have a height and width attribute set (unless using srcset)?
• Is there an <h1> element for the page? Is it the main title?
• Are the headings ordered appropriately? i.e. does it jump from <h1> to <h3> (which is not good)?
• Are <br> elements used only in addresses or poetry?
• Is it all <div>s, or are <section>s used logically?

You have...

CSS code review

Review the CSS for:

• Is a non-rem or em unit sizing used for fonts? or font-related properties (i.e. p { font-size: 16pt; margin: 10px; })
• Is a non-rem or em unit used for media queries? (i.e. @media (min-width: 640px) {})

You have...

Critique complete

Thank-you for participating in today's critique.

Portfolio sharing

Thank-you