55319: HTML5 and CSS Courseware

Module 1: A Brief History of HTML and the Web

• Introduction
  
  • Which Comes First? HTML, CSS or JavaScript?
  • Versions?
• History
  • Who “owns” HTML?
  • History?
• Details, Details, Details…
  • Modern Browsers and Compatibility
  • Shims, Shivs, and Polyfills
  • The Web Server
  • Domain Names
  • URL / Uniform Resource Locator
  • Default Page
  • Protocols
  • Port Numbers
• The Life of a Web Page
• HTTP Status Code Definitions
• Most Important Things to Know as a Web Developer

Module 2: Core HTML Elements

• HTML and CSS Editors
  • Editor Features
• Text, Spaces and Tabs
• Working with Tags
  • Terminology
  • Some tags have content.
  • Some tags only have text as content.
  • Some tags have no content.
  • Some tags work in sets.
  • Block-level vs. Inline Elements
  • Context vs. Display
  • HTML is not Case Sensitive
• Attributes
  • Attribute Syntax
  • Empty Attribute Syntax
  • Global Attributes
  • Custom Attributes
• Comments
  • CSS Comments
• Non-Standard Tags
• Every Page Includes…
  • Every page should include:
  • A Simple, but Complete Page
• File Extensions
• Core Page Elements
  • DOCTYPE
  • Document Structure Elements
  • Document Head Elements
• Nesting
• Testing HTML
  • Browser Compatibility
  • Validators
  • Testing Tools
  • Browser and Device Testing
  • Sample Text
• HTML and Text
  • File Encoding
  • HTML Entities
  • White space

Module 3: Cascading Style Sheets

• Before CSS
• With CSS
• Cascading Style Sheets (CSS)
• CSS Demonstration
• Adding CSS to a Page
• Order of CSS Processing
• Experimental Vendor Prefixes
• CSS Units
  • Absolute Units
  • Relative Units
• CSS Selectors
  • Grouping Selectors
  • Attribute Selectors
  • Pseudo-class Selectors
  • Media Queries
• The CSS Box Model
  • CSS Border Tricks!

Module 4: Fonts and Text

• Fonts
  • Fallback
  • Images for Unusual Fonts
  • CSS for Fonts
• CSS for Text
• CSS Text Tricks!
  • Shadows
  • Rotated Text
• Working with Lists
  • Ordered and Unordered Lists
  • List Styling

Module 5: Colors and Backgrounds

• Specifying Colors
  • Color Names
  • RGB Color Numbers
  • HSL Colors
  • The Future
  • Color Tools
• Applying Colors
• Gradients

Module 6: Anchors and Hyperlinks

• <a> and CSS
  • Changing the link style
  • Changing the Mouse Pointer
• Hyperlinks with Images and Other Objects
• Buttons
  • Buttons from Images
  • Buttons from CSS

Module 7: Page Layout

• Page Layout Options
  • Frames
  • Tables
  • DIVs
• Tables
  • <table>
  • <caption>
  • Widths
  • CSS Frequently used for Tables
  • Merging Cells
  • CSS to Control Wrapping
  • CSS Pseudo-classes for Tables
  • Table Sections
• DIVs
• Float
  • Float options
  • Clear
  • Float with Images
  • Float for Wrapping
• SPAN
  • DIV vs. SPAN
• HTML 5 DIV-like Tags
• IFRAMEs

Module 8: Images

• Favicon
• Preparing Images
• Image Files
  • File Size
  • Compression
  • Image Files Types and Features
  • Browser Support
• The IMG Tag
  • <img>
  • Common Attributes
  • File Paths
  • Image Maps
• Background Images
  • For a Page
  • For a DIV or other Tag
• Image Best Practices
• CSS Sprites

Module 9: HTML Forms

• A Basic Form
• POST vs. GET
• name vs. id
• Basic Form Elements
• Basic Form Attributes
• Select
  • Default
  • optgroup
• Uploading Files
  • Input Type=file Attributes
  • Better File Upload Options
• HTML 5 Form Enhancements
  • New HTML 5 INPUT Types
  • New HTML 5 INPUT Attributes
• DataList

Module 10 – Multimedia

• Video and Audio
• HTML 5 Video
  • Video Formats and Browser Support
  • HTML 5 Video
  • Controls
  • Attributes
  • Video Fallback
• CSS
• JavaScript
• Audio
  • Audio Formats
  • HTML 5 Audio
• Hosting Videos in the Cloud
  • Embedding YouTube Videos
  • Working with Animated GIFs