Modern HTML and CSS – Courseware

Module 1: A Brief History of HTML and the Web

• Welcome!
• Prerequisites
• 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
• Internet Explorer Conditional 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
• Try it!
• 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
• Form Tools

Module 10 – Multimedia

• Video and Audio
• Video
• Video Formats and Browser Support
• HTML 5 Video
• Video Fallback
• CSS
• JavaScript
• Audio
• Audio Formats
• HTML 5 Audio
• Embedding YouTube Videos
• Working with Animated GIFs

.

While any background in HTML or development is a plus, all you need are basic PC skills and a desire to learn web development.

This class is targeted towards the professional developer new to HTML, self-taught HTML developers, graphics designers and those new to HTML development.