Responsiveness and You
An introduction to responsive web design and styling your HTML with CSS. Lecture slides will be made available on the day of the lecture (Oct. 28).
P2 grades release
P2 grades will be released later today or tomorrow. Please review the rubric and email Andrew if you have questions or concerns. Pouria and Kimia will be unable to discuss grade concerns.
For next week's labs we will need you to be there, in person, with your laptops for critiques with members of the City of Vancouver in attendance.
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:
<img>with no caption
- Spaces in files/folders/ID names
Spaces in Files/Folders/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> 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>
- 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.
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
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 —
The order in which things are read
Theshould never be used
- ID's: #home, #cool-stuff
- 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 — 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.
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
Block, Inline, and Inline-block
Block elements break to the next line, can have a height and width, and by default are full-width.
Inline elements stay in-line with other inline elements, and listen to their content for their sizing.
Inline-block elements stay in-line with other inline elements, can have a height and width, and listen to their content for their sizing.
Focusing on the building of responsive web layouts and an introduction to your final project. Lecture recordings will be available within two days after the lecture.