COIN65 Weekly Topics

This document is an evolving Site Map listing all class topics covered to date. The purpose is to make it more expeditious to find and review past topics. As this document grows you may find it helpful to use your browser's Find/Search function to locate topics by keyword. Each online document is linked for easy access.

Week 1

Welcome & Introduction
- The Different Sites (URLs) for This Course
- The COIN 65 Site
- The ETUDES On-line Classroom
- Your krypton.fhda.edu Account
- Communication in this Course
Online Guide
CSS History/Foundation
- Web Origins
- Browser Wars
- Introduction of Web Standards
  - Components of Standards Based Design
    - Accessibility
- HTML Document Structure | CSS Document Design
  - Presentational Markup
  - Semantic Markup
XHTML Strict Standards
- Guidelines for Creating Documents in this Course
- Anatomy of an XHTML Document
  - DOCTYPE
  - Comments
  - XML Namespace
  - Document Head
  - Document Body
- Validating Your Web Pages
  - What is a Valid Web Page?
    - An XHTML document must have one, and only one <html> tag.
    - Deprecated elements and attributes are not permitted
    - Every element must have a closing tag
    - 'First-Open-Last-End' (FOLE)
    - Naming Conventions
    - Case Sensitivity
  - What is Validation?
  - How Does One Validate a Web Page?
Document Hierarchy
- Terminology
  - Parent
  - Children
  - Siblings
  - Ancestors
  - Descendants
- A Graphic View of How Elements Relate
Standards-Compliant Browsers and Web Development Tools
- Standards-compliant Browsers
  - Browser Marketshare
- Web Page Development and Debug Tools
  - DOM Inspector
  - The Web Developer Toolbar
  - Favelets (aka Bookmarklets)
Firefox Installation Instructions
Web Developer Toolbar Installation Instructions

Return to top

Week 2

On-line Guide
Separating Structure and Presentation
- Benefits of Stylesheets
  - Efficient Code
  - Greater control over design
  - Consistent Rendering
  - Maintainability
  - Accessibility
  - Targeting different user agents
Style Sheets
- Inline, Embedded and Linked Style Sheets
  - Inline Styles
  - Embedded Styles
  - Linked (External) Styles
- Imported & Alternate Style Sheets
  - @import
  - Your First CSS Hack
  - Alternate Style Sheets
CSS Basics
- DIV & SPAN
  - DIV
  - SPAN
  - Figuring It Out
- Deprecated Elements and Attributes
- Anatomy of CSS Rules - Selectors & Declarations
  - Syntax
    - Inline Syntax
    - Embedded/Linked Syntax
- Rule Declarations
  - Numerical Values
    - Numerical Syntax
  - Color Values
Selectors, Classes and IDs
- Basic Selectors
  - Type Selectors
  - Grouping Selectors
  - Combining Rules
- Contextual Selectors
- Classes - Simple
- Specifying Multiple Classes
- Contextual Class Selectors
- Usage Guidelines for Classes
- Using IDs
  - IDs
  - IDs vs Classes
More about Validation
- Design Verification and Modern Browsers
  - Web Development Best Practices
    - Use a Modern Browser to Verify Your Design
    - Validate your Webpage
    - Implement Fixes for Non-compliant Browsers
  - Modern Browsers vs Non-compliant Browsers
    - Behavior of Modern Browsers
    - Behavior of IE5&6/Win
    - IE7/Win
Browser Tools
- Web Developer Toolbar - Setup Options
  - Keys
  - Resize
  - Sidebar
- Web Developer Toolbar - Validation
- Web Developer Toolbar - CSS - View & Edit Styles
  - View Style Information
  - Edit CSS
  - Edit HTML
- Web Developer Toolbar - Element, ID, Class Information
  - Display Element Information
  - Display ID & Class Details
  - Outline Block Level Elements
Setting up your CTIS Web Server Account
Submitting Assignments

Return to top

Week 3

Document Hierarchy Revisited
- Document Hierarchy
  - Family Tree Representation
  - Outline Representation
Advanced Selectors
Pseudo-Classes
- The First-Child Selector
  - Pseudo-Classes
  - First-child Selector
- Link Pseudo-Classes
  - The Dynamic Pseudo-Classes
- The Focus Pseudo-Class
Pseudo-Elements
Inheritance
- What is Inheritance, and Which Properties Inherit?
  - An Example of Inheritance
  - Properties which do Inherit
  - Properties which do NOT Inherit
  - Why some Properties DO NOT Inherit
- Forcing Inheritance
- Class Inheritance
The Cascade
- Definition of Terms
  - Definitions
    - The "User Agent"
    - Default Browser Style Sheet... the UA
    - User Style Sheets
    - Author Style Sheets
    - Author Embedded Styles
    - Author Inline Styles
    - A "Rule"
    - A "Declaration"
- Style Sheet Order
  - The Latest Declaration Wins!
  - What if it were more complicated?
- Specificity and Conflict Resolution
  - #1 - Assimilate All Declarations
  - #2 - Calculate Weight and Origin
  - #3 - Determine Specificity
  - Some other examples from the W3C
- !important Rules
  - The !important Directive
  - The Purpose of !important
  - CSS Version History
    - Version CSS1
    - Version CSS2
  - Should the Author use !important?
  - An Aside for Programmers
Browser Tools
- The DOM Inspector
  - Mozilla DOM Inspector
  - DOM Inspector Setup
  - The Document Panel
    - Searching for Elements by Tag, ID, or Class
    - Text Nodes
- Web Developer Toolbar: Document Outline - DIV Order
  - View Document Outline
  - Display DIV Order
- Web Developer Toolbar: Element Names - Outline Element
  - Show Element Names When Outlining
  - Outline Current Element
- Pixy Favelet
  - Downloading the Pixy Favelet
  - Using the Pixy Favelet

Return to top

Week 4

Semantics in CSS
- Semantics in Practice
Styling Fonts and Text
- Typography Basics
  - Type
  - Typeface
  - Are typefaces fonts?
  - Aren't Fonts and Text the Same thing?
  - Conventions of Typefaces
- Fonts
  - Font Properties
  - Default Fonts
  - Fonts Available on Macs and PCs
Font Sizing
Font Styles and Variants
- Font-Style
- Font-Weight
- Font-Variant
- Font Shorthand
Text Properties
- Color
- Text-Indent
- Letter-Spacing
- Word_Spacing
- Text_Decoration
- Text-Align
- Text-Transform
- Vertical-Align
- Line-Height
Browser Tools
- Web Developer Toolbar - Measuring Tools
  - Display Line Guides
  - Display Ruler
- ColorZilla
  - Installing ColorZilla
  - Using ColorZilla
  - The ColorZilla Menu
    - Capturing a Color Value to the Clipboard
    - Use Zoom to Sample Text Color
    - Creating a Color Palette from Sampled Colors

Return to top

Week 5

Box Model Basics
- Box Basics
- Terminology
  - Block-level element
  - Box Model
  - Collapsing Margins
  - Containing Block
  - Content Area
  - Element Box
  - Inline element
  - Non-replaced element
  - Normal flow
  - Positioning
  - Replaced element
  - Root element
  - Visible Box
- The Basic Box Model
Borders, Padding & Margins
- Borders
  - Border Shorthand Notation
  - Declaring Properties for Specific Sides of the Border
  - The border-style Property
- Padding
- Margins
  - Negative Margins
  - Collapsing Margins
- Margins are Transparent
Understanding the Box Model
- The Containing Block
- The Visible Area of a Box
  - The "width" Property
  - The Visible Portion of a Box
  - Padding Adds Size to the "Visible Box"
- Margins as Part of The Box
  - Margins Are Part of the Box Model Too!
  - Margins Are Invisible
  - Margins Are Included in the Size of an Element Box
- Using the Box Model In Practice
  - When Nested Boxes Are Wider Than The Containing Block
  - Using The Width Property Wisely
- Box Model Diagram & Summary
  - Jon Hicks' 3D Box Model Illustration
  - Eric Meyer's Diagram
  - A Simple Rule From Eric Meyer
- IE Windows Gets It Wrong
  - How IE Win 5.5 Gets It Wrong
  - IE Browser Rendering
Browser Tools
- Firebug
  - Installing Firebug
  - The Firebug Interface
  - Navigating the Document Hierarchy
  - Using Firebug to Examine Element Boxes
    - The Layout Object
- Web Developer Toolbar - Display Block Size