demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with HTML, CSS and SVG. To receive more information, including news, updates, and tips, you should follow me on Twitter.

• Login
• Sign up
• Search

remember me

featured articles

• The Face Of Lorem Ipsum
• Hobbiton Tour
• CSS Clip

popular favourites

• DreamWeaver Settings for Site Publishing
• HTML Elements
• Tool Setup: DreamWeaver
• Tool Setup: Firefox
• CSS Typography
• Beginning CSS Web Development
• CSS and Images: The Float Quirk and Clear Solution
• Selector syntax
• CSS Example Quiz
• meta tags

Course Map: CMPN 215 (Continuing Education, SAIT)

Course Map for SAIT’s night course in XHTML

Course Sequence

1. CMPN 215 (HTML)
2. CMPN 266 (CSS)>
3. CMPP-257 (JavaScript)
4. CMPN-151 (PHP)>
5. CMPN-244 (DreamWeaver)

Course Map

Week	Component	Evaluation	Worth
1	Course Overview, Introduction to HTML, Introduction to Tools, Naming Conventions, Creating A Basic XHTML Document
2	Basic Formatting of XHTML Text, Lists and Links
3	Tables and Images
4	Forms	Quiz 1	10%
5	Forms, continued, Meta tags and search engines	Homework due	20%
6	Introduction to CSS	Assignment issued	40%
7	CSS, continued	Quiz 2	10%
8	Work period and question time	Professionalism	20%

You must be signed up in order to leave comments.

web developer guide

• Tools
  • Introduction
  • Operating Systems
    • Mac OS X
    • Windows
  • Editors
    • Notepad
    • Textedit
    • Notepad++
    • Markdown Editors
    • DreamWeaver Basic Settings
    • DreamWeaver Settings For Web Publishing
    • DreamWeaver Settings For MySQL
    • Creating Imagemaps in DreamWeaver
    • Using Image Roundtrip in DreamWeaver
  • PhotoShop
    • Setup
    • Seamless Tiled Images
    • Simple Masked PNGs
    • Complex Masked PNGs
    • Reduce PNG Sizes With Fireworks
    • Create A Curved Dropshadow
    • Batch Processing
    • Edit Image Metadata
  • Browsers & Search Engines
    • Firefox
    • Chrome
    • Keyboard shortcuts
    • Using HTTPS
    • Efficient Search Methods
    • Specialized Search
    • Google Hacks
  • CSS Prettifiers
  • Social CSS
  • Music To Code By
  • Music To Code By, Vol. 2
  • Web Development Sandboxes
• HTML
  • Introduction
    • Overview
    • What Is The Web?
    • The Roles of Web Technologies
    • What Is HTML?
    • Introduction to HTML5
    • What You May Think You Know - XHTML
    • The Difference Between HTML5 & What You Know
    • HTML5 or HTML?
    • Why Learn HTML?
    • Why Not DreamWeaver To Start?
    • History of HTML5
  • Basics
    • The doctype
    • XHTML Template
    • HTML5 Template
    • HTML5 Shortcuts
    • HTML Elements
    • The head and title tags
    • Nesting tags
    • Attributes
    • Block vs. Inline Tags
    • Comments
    • Lists
    • HTML5 Semantic Containers
    • The <time> element
    • The data attribute
    • HTML5 header & nav
    • Naming Conventions
    • Validation
    • Alternative Validators
  • Typography
    • UTF-8
    • Common Formatting Errors
    • Headings & Paragraphs
    • Italicization & Bolding
    • Other Text Elements
    • Lorem Ipsum Generators
    • Even More Text Generators
    • Yet More Text Generators
    • HTML Entities
    • Fractions
    • Writing For The Web
    • Specifying a Language
    • Arabic, Hebrew, and Other RTL Languages
    • Workflow
  • datalist
  • iFrames Introduction
  • iFrames For Portfolio Screenshots
  • Links
    • Introduction
    • Local Links
    • Paths
    • Remote Links
    • Anchor Links
    • empty and mailto links
  • Tables
    • Basic Markup
    • Adding Accessibility
    • col ≈ colgroup
  • Images
    • Formats
    • Image Use
    • Compression
    • Placeholder Image Generators
    • Workflow
  • Forms
    • Introduction
    • Form Design Principles
    • The Form Tag
    • Text Inputs
    • HTML5 Text Inputs
    • HTML5 Numeric Inputs
    • Drop-Down Menus
    • Radio Buttons
    • Checkboxes
    • Textarea
    • HTML5 Form Attributes
    • color
    • Other Input Types
    • Submit & Reset
    • Ethical Considerations
    • Hints & Tips
    • Exercise
  • Multimedia
    • Codecs & Containers
    • Format Conversion Tools
    • Video Workflow Tips
    • The Object Tag
    • Embedding YouTube Videos
    • Embedding A Google Map
    • HTML5 AV Codec Support
    • HTML5 Audio
    • Triggering Audio Events
    • HTML5 Video
  • Site Optimisation
    • Introduction
    • Favicon Introduction & Formats
    • Favicon Sizes & Design
    • Create A Basic Favicon
    • Multi-Resolution Favicons
    • Create A 404 Redirect Page
    • Validation
    • HTML5 Testing Tools
    • Offline Page Speed Testing Tools
    • Online Speed Testing Tools
    • Optimize HTML Code
    • Optimizing Images
    • Convert An XHTML Page To HTML5
    • Site Maintenance Checklist
• CSS
  • Introduction
    • Overview
    • Introduction
    • History & Support
    • Applying CSS
    • Syntax
    • Comments
    • Style Rule Prioritization
    • Shortcuts
    • CSS3 Vendor Prefixes
    • General Rules For Creating CSS
    • Style Anything On A Web Page
  • Color
    • Color in CSS
    • An Easy Guide To HSL Color
    • Three Ways To Use HSL Color
    • Color Theory Introduction
    • Color Schemes
    • Gamma
    • sRGB
    • Color Tools
  • Selectors
    • Selector Syntax
    • The id selector
    • classes
    • The attribute selector
    • Pseudo-element selectors
    • Pseudo-class selectors
    • Descendant
    • Child & Sibling
    • nth-child
    • Adjacent, first-child, nth-of-type
    • :not
    • Universal
    • !important
    • Reversing CSS Rules
  • Typography
    • CSS Typography Basics
    • CSS Font Basics
    • Designing A Font Stack
    • Legalities of Font Embedding
    • Fonts in CSS3
    • Free Font Hosting Services
    • Make Your Own Webfont
    • Sizing Text
    • Line Height
    • Hyphenation
    • Ligatures & Kerning Pairs
    • Discretionary Ligatures & True Small Caps
    • OpenType Swashes
    • Automatic Fractions With OpenType
    • Hanging Indent
    • Initial & Drop Caps
    • First-line run-in
    • Stroked Text
    • Extruded 3D Text
    • CSS3 Neon Glow
    • Blurring Text
    • Brushed Metal Lettering
    • Pullquotes
    • Footnotes
    • Newspaper Columns
    • Columns With A Center Floated Image
    • Font Identifiers
    • Fonts For Code
  • The Box Model
    • Introduction
    • Measurement Units
    • box-sizing
  • Images
    • Basics
    • The Float Quirk
    • Captioned Images
    • Captioning Images in HTML5
    • HTML5 Captions With Transitions
    • Rounded Corners On Images
    • Image Vignettes
    • Advanced Radial Vignettes
    • Background Images
    • CSS3 Backgrounds
    • Multiple Backgrounds On An Angle
    • Dynamically Resized Backgrounds
    • Fading Background Images
    • Auto-Generated Thumbnails
    • Simple Image Gallery
    • Animated Gallery: Cross Fade & Rollover
    • Animated Card Fan
    • CSS3 Animated Image Slider
    • Lightbox Gallery
    • Visual Database
    • Animated Gallery With Persistent Images
    • border-image
    • Images Into Postage Stamps
    • dataURI Images
  • Filters
    • Introduction
    • Flipping Images
    • Showing & Hiding Elements
    • Differences between opacity & rgba
    • Turning Images Black & White
    • Sepiatone
    • Blur
    • Animating Filters
    • Develop A Polaroid Photograph
  • Lists
    • list-style-type
    • CSS3 Lists
    • Decorating Lists With Images
  • Tables
    • Design Patterns for Tables
    • Dynamic Customized Table
    • Elegant Table with OpenType
    • A Scrolling Fade-In Table
  • Interfaces & Navigation
    • Simple Horizontal
    • Decorated Horizontal
    • Simple Vertical
    • Introduction to Hierarchical Navigation
    • Accordion Menu
    • Horizontal Reverse-Focus
    • Drop-Down Menu
    • Animated Menu Bar
    • Animated Gradient Menu
    • CSS3 Tab Navigation
    • Animated Navigation with Overlapped Elements
    • Enhancing Imagemaps With CSS3 Popups
    • Content tabs
    • Vertical Window Toggle
    • Hover Effect From Different Directions
    • CSS3 Timer
    • Cylon-Inspired Site UI
    • Introduction to CSS Sprites
    • Making a Sprite
    • CSS3 Sprites
    • CSS3 Sprites for HTML5
    • “Sprites” Made With CSS3 Filters
  • div & span
    • Introduction
    • A Simple div example
    • The Float Flag Quirk
    • span
    • border-radius
    • clip
  • Positioning & stacking
    • position: static
    • position: relative
    • position: absolute
    • position: fixed
    • Stacking order & z-index
  • Layouts
    • Design Principles
    • Single div, fluid/fixed
    • Single Column Text
    • Multiple Columns
    • Image “float center” in columns
    • Introduction to Grids
    • display: table
    • Web grid example
    • Newspaper Columns
    • Wrapping Text On A Curve
    • Appearing & Disappearing Elements
    • Non-Rectangular Layouts
    • Forms
      • Basic Form Layout
      • HTML5 Form Errors
      • resize
  • Shadows & Gradients
    • text-shadow
    • box-shadow
    • Introduction to Lifted Curved Drop Shadows
    • Simple CSS3 Lifted Drop Shadow
    • Applying Curved Drop Shadows
    • Pure CSS Curved Dropshadows
    • Pure CSS Curved Dropshadows, Method 2
    • Box-Shadow vs. Drop-Shadow Filter
    • Cross-Browser Drop-Shadow Filter
    • Linear Gradients
    • Radial Gradients
    • Gradient Stripes & Tartans
    • More Gradient Patterns
    • Pop-Art Backgrounds
    • Animating Gradients With Filters
  • Transforms & Animation
    • Transforms Introduction
    • rotate
    • skew, scale & translate
    • Animation Introduction
    • The Limits of CSS3 Animation
    • Basics of CSS3 Keyframe Animation
    • Keyframes, Tweening & Framerate
    • Ease-In-&-Out
    • Anticipation-&-Follow-Through
    • Falling Autumn Leaves
    • Flickering Neon Bar Sign
    • Animated Image Mosaic
  • Introduction to CSS 3D Animation
  • Print
    • Media Types
    • Basic Print @media Queries & Styles
    • Force Accurate Colors When Printing
    • Improve Print Quality With Filters
    • Add QR Codes To Web Pages Automatically
  • Replaced Elements
  • Resets & Boilerplate
    • UA Stylesheets
    • CSS 1 & 2 Reset
    • CSS for HTML5
    • CSS3 & HTML5 Reset
    • Making a Consistent Search Input
    • CSS3 & HTML5 Boilerplate
• Accessibility
  • Introduction
  • Basic Accessibility For Forms
  • ARIA Landmarks
  • Compensating For Color Blindness
  • Contrast Ratio & Font Sizes
  • Navigation Accesskeys
  • Firefox Accesskey Bugfix
  • link rel
  • Skip nav
  • Introduction to WebVTT
  • Creating & Validating Subtitles
• PHP
  • Introduction
    • Introduction
    • Basic Requirements
    • The Client-Server Model
    • How To Avoid Problems
    • Comments
    • How Do I Know If PHP is Working?
    • echo
    • The XML Prolog Issue
    • include()
    • Variables
    • Concatenation
    • Cookies
    • Pattern Matching
    • if & Operators
    • Arrays
    • Syntax Shortcuts
  • Time, Dates, Calendars & Seasons
    • date()
    • Changing The Default Timezone
    • Calendar Generation
    • Creating Seasonal CSS Site Themes
  • PHP & .htaccess
  • Creating A PHP Stylesheet
  • Forms
    • Introduction
    • Checking Fields
    • Showing Errors
  • Images
    • Simple Image Gallery
    • Random Images
    • Folder Reads To Make A Gallery
    • Captioning Images With GET
    • Captioning Images With Filenames
    • Captioning Images With Metadata
    • Resizing Images
  • Interfaces & Navigation
    • Self-Aware Navigation
    • Breadcrumb Navigation
  • Cookies
  • Custom Site Themes
  • Self-Made Pages
  • Functions
  • Auto-generated CSS3 prefixes
  • eMail
    • Sending eMail
    • eMail Headers
  • Enabling User File Uploads
    • Introduction
    • The XHTML Form
    • Transferring The File
    • Checking The File
• MySQL
  • Introduction
  • Database Concepts
  • Make A Simple Database Table
  • Information Sources For Forms & Databases
  • Write A MySQL Connection
  • Simple SELECT Query
  • Simple Customizable Query
  • Simple INSERT
  • Useful Queries
• JavaScript
  • Introduction
  • The DOM
  • Frameworks
  • Writing Effective JavaScript
  • How To Write JavaScript
  • Common Mistakes Made In JavaScript
  • JQuery-CDNs
  • Simple News Ticker
  • Self-Aware Navigation
  • Custom Video Controls
  • Fade In Elements Sequentially
  • Clear JQuery Animation Queue
  • Custom Site Theme Preview
  • “Scroll To Top Then Fixed” Effect
  • Smooth Scroll Effect
  • Fade A Background Image On Scroll
  • Insert Anchors Into URLs
• SVG
  • Introduction
  • Using SVG
  • Text
  • Basic SVG Style Properties
  • Text Clipping Masks
  • Filters
  • Validating SVG
• Design
  • The Triple Challenges
  • Redesign Principles
  • Avoiding Procrastination & Paralysis
  • Designing One-Page Sites
  • Paper as a Design Tool
• Mobile & Responsive Design
  • Introduction to Responsive Design
  • Responsive Design Testing Tools
  • The Mobile First Philosophy
  • Pixel Density & Resolution
  • @media Queries
  • A Responsive Resume
  • Site Icons For Mobile Devices
  • Basic Responsive Design Patterns
  • Fluid Image Techniques
  • Responsive Animated Menu
  • Responsive Slider
• Search Engine Optimisation
  • Introduction
  • Semantic Markup
  • Meta tags
  • Submitting Your Site
  • Removing Pages From Google
  • Relationships
  • Robots
  • Introduction to Microformats
  • Street Addresses
  • Introduction to Microdata
  • Add Microdata To Your Blog
  • Phone Numbers
  • Calendar With Microdata
  • Action meta tags
  • Metatag Support in HTML5
  • rel
  • The Four Personas Of Social Media
  • Generate An XML Sitemap
  • Common SEO Arguments
• IE Development
  • Dealing With IE
  • Can You Drop IE6?
  • Testing
  • HTML5 Support
  • Applying ChromeFrame
  • CSS3 Support
  • Colors, Gradients and Opacity in IE
  • Conditional Comments
• Web Servers, Domains, Hosting
  • Introduction
  • The Domain Name System
  • Choosing & Registering a Domain
  • Choosing a Hosting Provider
  • Recommendations
  • Setting Up Your Own Server
  • OS X Web Server Options
  • Windows Web Server Options
  • FTP
• Client Relationships & Self-Promotion
  • Making A Good Pitch
  • Lies
  • Estimation
  • Contracts
  • Invoices
  • Resumes & Cover Letters
  • How To Succeed Through Sharing
  • How Will I Make Money If I Give Away My Work?
  • Self Promotion Strategies
  • Interview Tips
• Concepts
  • The Roles of HTML, CSS, PHP & JavaScript
  • Land & Ocean On The Web
  • How To Make A Popular Site
  • DRM
  • Cloud Computing
• For Students
  • Student Expectations
  • Instructor Expectations
  • Tips For Student Survival
  • 8 Rules For Students, Teachers & Life
  • Health Tips For Web Developers
  • Tutoring Program
• Resources
  • Recommended Websites
  • XHTML & CSS Reading Lists
  • HTML5 Reading List
  • PHP, MySQL & JavaScript Reading List
  • Book Review: The Truth About HTML5
  • Book Review: HTML & CSS
  • Book Announcement: Pro CSS Animation
  • Book Review: A Student’s Guide To Web Design Portfolios
  • Web Development Online Resources
  • HTML5 Resources Online
  • Podcasts

featured comment

Haha, that is actually incredibly clever.

by Aisling Brock in New Business Card Design 12 months ago

what i'm reading

A Feast for Crows: A Song of Ice and Fire: Book Four

what i'm watching

Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]

what i'm playing

Borderlands

what i'm hearing

Planets

blogs

• Metafilter
• Slashdot
• Penny Arcade
• XKCD

podcasts

• 99% Invisible
• A Life Well Wasted
• This American Life
• AstronomyCast
• Common Sense
• In Our Time
• GeeksOn
• Hardcore History
• The History of Rome
• The Memory Palace
• Planet Money
• radioLab
• Search Engine
• TED Talks

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.