5 Lessons

Outline

1. Review Padding, Margin, Background, Border, Width, Height
2. divs and spans to create non-semantic elements
3. The natural flow of a page
4. Floats and Clear
5. Code an 8×8 black and red checkboard
6. Absolute, Relative and Fixed Positioning (z-index)
7. View source and Inspector

Floats and Class example from class

layout

Positioning example

Positioning demo from class
Link here

Links

Outline

1. a Pseudo Classes (:hover)
2. Classes
3. Display property: block, inline-block, inline, none
4. Border instead of text-decoration
5. Border-radius (browser prefixes)
6. Text shadow
7. Box-shadow

Example

css2

Links

Outline

1. Calling in CSS (internal)
2. Syntax: declaration blocks, comma separated selectors
3. Text properties (size, line-height,
4. Colors
5. Units
6. Margin, Padding, Border

Example from class

Here it is

Links

Outline

1. Browsers read HTML. HTML is structure.
2. Collection of well-formed tags.
3. Required elements: html, head, title, body
4. Elements, attributes, nesting
5. Block elements: headers, paragraphs, lists
6. Inline elements: anchor, strong, em, cite, abbr
7. Images

In-class Demo

Example marked up last year in class

HTML Basics links

HTML5 links