ah teaches information design (Accessible styling lecture)

Accessible styling

Lecture outline

An introduction to responsive web design and styling your HTML with CSS. Lecture slides will be made available on the day of the lecture (October 29).

MEGALAB

For this and next week's lab time we will all be meeting in SRYC 3300.

Final P2 critiques

For next week's labs Embark will be joining us for final P2 critiques.

Validate, validate, validate

HTML and CSS validators help you see the errors (that you may have missed).

Why do invalid sites still work?

Browsers are kind, benevolent beings

Browsers are more likely to ignore errors then tell you about them. This makes it easier for you to make websites that 'render' but will not work consistently in the future.

Lessons from last week

There were a couple of common HTML issues that I thought it best to discuss as a class:

• <button> vs <a>
• Appropriate alt text
• Spaces in files/folders/ID names
• Using <br> appropriately

<button> vs <a>

The <a> element is meant for linking to different portions of a page, other pages, or other websites.

The <button> element is meant for on-page, typically JavaScript enabled interactions.

Appropriate Alt Text

Spaces in files, folders and ID names

Instead of spaces, use dashes '-', underscores '_' or camel case 'camelCase' when naming files, folders or IDs.

<a href="#this is not understood"> — will not be understood as an ID.

<a href="#this-is-understood"> — will be understood as an ID.

<a href="#thisIsUnderstood"> — will be understood as an ID.

When is using <br> okay?

The <br> element defines a line break in text. This only really makes semantic sense in a few occasions. Some examples:

• In an address:
  352 Main Street<br>
  Vancouver, BC<br>
  V2V 2V2
• In a poem:
  Another night deprived of slumber<br>
  Hours passing without number<br>
  My eyes trace round the room I lay...

Do not use <br> to 'add space' between elements.

HTML exercise feedback

Grades and feedback on the HTML exercise will provide you with directions for improving your code. Please make sure to read the comments as it will help explain how to improve your HTML moving forward.

CSS3

Cascading Style Sheets

While HTML defines the structure of the content on the page, CSS styles the page to ensure the user get's something usable. Good code will clearly separate semantic markup from styling.

Keeping them apart

A real Romeo/Juliet scenario

Rules for keeping them separate

• Do not use HTML to define styling; i.e. <br>, <i>, <b>...
• Do not use inline CSS styling; <section style="color: blue;">
• Keep files separate; .html defines content, .css defines style, never shall they meet

Let's talk CSS

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

CSS sampler

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

ID vs. class

IDs must always be unique, <section id="kittens"> they can only be specified once per HTML file. While classes can be used as many times as needed — <section class="group">

Specificity

The order in which things are read

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

Units in CSS

In the journey to responsiveness, we want to aim for relative and scalable units as much as possible.

Rems

Rems — root-ems — are units responsive to the font-size set by the browser which help us establish easy relationships in type. As a general rule of thumb, setting your paragraphs to 1rem and scaling other things accordingly is better practice.

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

Dev tools

Your new best friend

Ever wanted to know what the slides would look like with a red background? Right-click and 'Inspect Element' opens up the development tools to mess around with things in.

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

Block, inline, and inline-block

Code tutorial

Get set up with today's code tutorial files at 235.ah.link/t02