ah teaches information design (Technical Questions lecture)

Technical Questions

Lecture outline

A lecture for answering any lingering questions you have about the final project, HTML, or CSS. Lecture slides will be made available on the day of the lecture (November 18).

In preparation for lecture...

Please close up any laptops, cellphones, Palm Pilots, Discmans and other 'beep-boop' devices.

Office hours

Bonus office hours:

  • Thursday, November 20 from 8-9pm (remote).
  • Sunday, November 23 from 8-9pm (remote).
  • Tuesday, November 25 from 2-3pm (in-person or remote).

Changes to existing office hours:

  • Thursday, November 27th office hours are cancelled.

Please make sure to email or DM if looking to attend office hours as they will fill quickly.

Response latency

I apologize in advance as we are heading into the time of year where email/messaging load gets high and I am more likely to miss something. If you do not hear back from me via Discord/email within 48 hours, please ping me again. I am likely to get back to you but there is a small chance I may have missed it.

Grade returns

P3 grades will be returned later today.

If you have any questions or concerns please follow up with Andrew directly.

Code reviews

In some cases it appears that some citations may be missing from P3 deliverables — code has been copied or generated from other sources without citing.

If this has occurred you will receive a temporary zero on the project and a message indicating a code review is required for P3 before the grades can be released. Please follow-up with Andrew to arrange a time to complete a code review.

Design Systems

Answering questions

I'll do my best to answer all of them, but I may not necessarily answer your questions directly.

If you have any follow-up questions, please feel free to email or message me over course chat.

P4: Design and Develop

Do we need to revise our wireframes?

No.

If you are changing or improving your project for P4 you do not need to revisit and revise the P2 wireframes.

Do we need to implement everything we proposed?

Within what you are capable of, yes.

If you have proposed some very complex/fancy interactions in Figma, and cannot replicate that using HTML or CSS, then you are not required to do that. I would recommend speaking with myself or Mehru if you are unsure.

Keep in mind more complex interactions can often be broken down into smaller 'steps' that are a series of separate HTML pages showing how a particular functionality would work. For example, filtering could just be I click on a filter and a new HTML page opens with the filtered contents.

What images can I use?

You may source images as you see fit. Please provide citations within the code indicating where the images are from.

How responsive does it need to be?

The page will need to resize and reorganize effectively between 320px to 1920px. No larger or smaller, but the page shouldn't "explode" outside of those sizes.

Do we need to follow the constraints for the prior projects?

No.

You can use different colours and fonts from the prior projects as you see fit.

Any other project or design questions?

Please raise hand if so.

Development questions

Should I have just one CSS file?

Probably.

It is not required that you condense your CSS into one file, but it likely will make it much easier to manage if you have one stylesheet that is consistent across all your project pages instead of a separate file per page.

How clean does my code need to be?

Your code needs to be legible.

I am not concerned about the 'efficiency' of your code — i.e. if you are being redundant with your styling of an element — but I do need to be able to read it (please indent). If you are applying styling that does nothing I will likely have questions though.

If I use other's code, should I cite it?

Yes!

A citation as a comment within the code itself close to where the other's code is used please.

Can I use JavaScript?

Only if you must.

JavaScript is... a lot more. I would recommend getting in touch with me if you want to explore it 'for reals' instead of just copy/pasting things until it works.

Can I assign an ID and a class on an element?

Of course!

<!-- Assigning both an ID and a class to an element -->
<section id="kittens" class="grid two-column">

How do I link multiple pages?

Unlike a link within the page, linking between pages involves knowing where files are and their names. More on linking at the Mozilla Developer Network.

Consider this file structure:

  • other.html
  • pages/
    • index.html
    • grants-listing.html
<!-- From the index.html page -->
<a href="grants-listing.html">Grants</a>
<a href="grants-listing.html#bc-hydro">BC Hydro Grant</a>
<a href="grants-listing.html#action">Action Grant</a>
<a href="../other.html" target="_blank">Other</a>


<!-- From the other.html page -->
<a href="pages/index.html">Home</a>
<a href="pages/grants-listing.html">Grants</a>

div vs section

When do I use each?

div is semantically meaningless. It is useful for adding structure that we can style in our HTML.

section is a 'logical' section of content in our HTML. It is semantically meaningful and is usually used to associate a heading and related content.

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 choose breakpoints?

Let your content decide.

Start at mobile and bring the page width out until the content looks awkward or is not using the space effectively. That is a breakpoint.

When do I do something in HTML vs CSS?

HTML is for defining what our content is for the browser.

  • What is a paragraph?
  • What is a heading?
  • What is the navigation?

CSS is for defining what our content should look like in the browser.

  • What size font should our paragraph be?
  • How much space should be around the heading?
  • Should the navigation be fixed to the top of the page?

How do I make images responsive?

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

See this on CodePen.

How do I load fonts?

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

See this on CodePen.

How do I make a dropdown/hamburger menu?

With JavaScript.

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

See this on CodePen.

More tutorials

I have pre-built examples/explanations of various HTML and CSS things available on CodePen:

Please post requests for other examples/resources to Discord.

Any other development questions?

Please raise hand if so.

Next week

Class will be dedicated to critiques/support on the final project. There will be an activity to complete in-class and pre-assigned critique times that will be sent out via announcement before next class.

Critiques

While we are doing critiques please make sure to complete a teamwork reflection and the in-class activity.

Times are approximate. Please be in the class five minutes before your alloted time.

Critiques with Andrew

  • 11:00 19
  • 11:08 Islanders
  • 11:16 It's all you buddy
  • 11:24 To Be Continued
  • 11:32 Ninja Turtles
  • 11:40 Chompers Squared
  • 11:48 The GOATS
  • 11:56 Yeahhh
  • 12:04 Purple
  • 12:12 JD Sport
  • 12:20 Mango Munchers
  • 12:28 Is this due today?
  • 12:36 Chompers
  • 12:44 DAE
  • 12:52 Ok we have decided our name
  • 13:00 CMC
  • 13:08 Group

Critiques with Mehru

  • 11:00 The 3 mimosas
  • 11:08 Team Name
  • 11:16 Sleep deprived
  • 11:24 Mango Sajo
  • 11:32 Rocky III
  • 11:40 Clash Royale
  • 11:48 Team Rocket
  • 11:56 Dookie
  • 12:04 KJG
  • 12:12 Group of 2
  • 12:20 Dryer Lindt
  • 12:28 oh. god. the. pain. help. help. the. pain. it. hurts. help. help. help.
  • 12:36 The Triplettes
  • 12:44 BMJ
  • 12:52 Banana
  • 13:00 Hustlers
  • 13:08 qwertyuiop

Code activity

To practice assessing some of the most common code concerns we have some items for you to review. Please review them in the slides that follow.

A Language is Set

Is a default language defined for the document? For example: <html lang="en">

Semantic Elements

Are the following elements used, and are they used appropriately?

Semantic Elements

Are the following elements used appropriately?

If using <br>, do they define a line break?

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

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>

Semantic Elements

Part 2

Are the following elements used appropriately?

If using a <figure> is there a <figcaption>?

<figure>
<img src="robot.jpg" height="640" width="480" alt="A blocky robot with a menacing expression and glowing red eyes">
<figcaption>Be wary of robots like these</figcaption>
</figure>

Are <section> elements used, and do they contain a heading and related content?

<section>
<h2>Photos of dangerous robots</h2>
<img src="robot.jpg" height="640" width="480" alt="A blocky robot with a menacing expression and glowing red eyes">
</section>

Semantic Elements

Part 3

Are headings structured appropriately?

Do headings move up/down in structure appropriately?

<h1>Pet-site, a site about pets</h1>
<h2>Talking about cats</h2>
<h3>Buying cats</h3>
<h4>How much do they cost?</h4>
<h4>Where should I buy a cat?</h4>
<h3>Adopting cats</h3>
<h4>Where should I adopt a cat?</h4>
<h2>Talking about dogs</h2>

Is there an <h1> element? Do headings jump between levels? Is there a level lower than <h6>?

<h2>Pet-site, a site about pets</h2>
<h4>Talking about cats</h4>
<h3>Buying cats</h3>
<h5>How much do they cost?</h5>
<h7>Where should I buy a cat?</h7>
<h1>Adopting cats</h1>

Appropriate Alt Text

Do your images have appropriate alt-text?

If the image is inside a link, does the alt text describe where the link goes?

<a href="home.html">
<img src="banner-image.jpg" alt="Home page">
</a>
<!-- Because it is in a link, the alt attribute describes where the link goes -->

If it is an image on its own, does the alt text describe the image as if we did not see it?

<img src="sheep.jpg" alt="A white wool sheep grazing in a grassy field">
<!-- The alt attribute describes the content of the image -->

Keyboard Navigation

Try to navigate through the website using only the keyboard — the tab and enter keys. Are there any concerns with clarity of interaction points, or missing information?

Responsiveness

Head to ah.link/rv to load up your project website or styleguide and simulate different display sizes. Where might there be concerns?

Colour Blindness

Head to ah.link/cbv to load up your project website or styleguide and simulate different types of colour blindness. Where might there be concerns?

Validate your code

Head to ah.link/v to validate your code using the password provided on your print-out.

Audit complete

(for now)

Please continue getting support on code and/or working on your projects.

1/1