search

A blog by Dudley Storey on web development, film, travel, books, teaching, music, and anything else that strikes his fancy.

• Login
• Sign up
• Search

featured articles

• Cycling The KVR
• Super-Easy Iris Wipe in CSS3
• Free Responsive Design Testing Tools

popular favourites

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

web developer guide

• Tools
  • Introduction
  • Mac OS X
  • Windows
  • Notepad
  • Textedit
  • Notepad++
  • DreamWeaver
    • Basic Settings
    • Web Publishing
    • MySQL
    • Creating Imagemaps
    • Using Image Roundtrip
  • 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
  • Text Generator & Placeholder Tools
    • Lorem Ipsum Generators
    • Even More Text Generators
    • Yet More Text Generators
    • Placeholder Image Generators
  • Markdown Editors
  • CSS Prettifiers
  • Social CSS
  • Font Identifiers
  • Fonts For Code
  • Music To Code By
  • Music To Code By, Vol. 2
  • Web Development Sandboxes
  • Format Conversion Tools For HTML5 Audio & Video
  • Responsive Design Testing Tools
  • Information Sources For Forms & Databases
• HTML
  • Overview
  • Introduction
    • What Is The Web?
    • 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
  • Web Development Basics
    • The doctype
    • XHTML Template
    • HTML5 Template
    • HTML5 Shortcuts
    • HTML Elements
    • The head and title tags
    • Nesting tags
    • Attributes
    • Naming Conventions
    • Validation
    • Alternative Validators
  • Basic Web Typography
    • UTF-8
    • Common Formatting Errors
    • Headings & Paragraphs
    • Italicization & Bolding
    • Other Text Elements
    • HTML Entities
    • Fractions
    • Writing For The Web
    • Specifying a Language
    • Arabic, Hebrew, and Other RTL Languages
    • Workflow
  • Block vs. Inline Tags
  • Lists
  • 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
    • Workflow
  • Comments
  • HTML5 header & nav
  • 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
  • HTML5 Semantic Containers
  • The <time> element
  • The data attribute
  • Multimedia
    • Codecs & Containers
    • Video Workflow Tips
    • The Object Tag
    • Embedding YouTube Videos
    • Embedding A Google Map
    • HTML5 AV Codec Support
    • HTML5 Audio
    • Triggering Audio Events
    • HTML5 Video
  • Finishing Up Your Site
    • Introduction
    • Favicon Introduction & Formats
    • Favicon Sizes & Design
    • Create A Basic Favicon
    • Multi-Resolution Favicons
    • Create A 404 Redirect Page
    • Validation
    • HTML5 Testing Tools
    • Site Maintenance Checklist
  • Site Optimisation
    • Introduction
    • Offline Page Speed Testing Tools
    • Online Speed Testing Tools
    • Optimize HTML Code
    • Optimizing Images
    • Convert An XHTML Page To HTML5
• CSS
  • Overview
  • Introduction
    • Introduction
    • History & Support
    • Applying CSS
    • Syntax
    • Style Rule Prioritization
    • Shortcuts
    • CSS3 Vendor Prefixes
    • General Rules For Creating CSS
  • 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
  • Comments
  • Selectors
    • Selector Syntax
    • classes
    • The attribute selector
    • Pseudo-element selectors
    • Pseudo-class selectors
    • nth-child
    • Adjacent, first-child, nth-of-type
    • :not
    • !important
  • Measurement Units
  • The Box Model
  • box-sizing
  • Fonts & Typography
    • Font Basics
    • Designing A Font Stack
    • Fonts in CSS3
    • Sizing Text
    • 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
    • Pullquotes
    • Footnotes
    • Newspaper Columns
    • Columns With A Center Floated Image
  • Images
    • Basics
    • The Float Quirk
    • Captioned Images
    • Captioning Images in HTML5
    • HTML5 Captions With Transitions
    • Backgrounds
      • Background Images
      • CSS3 Backgrounds
      • Multiple Backgrounds On An Angle
      • Dynamically Resized Backgrounds
      • Auto-Generated Thumbnails
    • Galleries
      • Simple Image Gallery
      • Animated Gallery: Cross Fade & Rollover
      • Animated Card Fan
      • CSS3 Animated Image Slider
      • Lightbox Gallery
    • Masks
      • Rounded Corners On Images
      • Image Vignettes
      • Advanced Radial Vignettes
    • Image Filters
      • Introduction
      • Flipping Images
      • Turning Images Black & White
      • Sepiatone
      • Blur
      • Animating Filters
      • Develop A Polaroid Photograph
    • border-image
    • Images Into Postage Stamps
    • dataURI
  • 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
    • Enhancing Imagemaps With CSS3 Popups
    • Content tabs
    • Vertical Window Toggle
    • CSS3 Timer
  • span
  • divs
    • Introduction
    • A Simple div example
    • The Float Flag Quirk
  • 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
  • Showing & Hiding Elements
  • Differences between opacity & rgba
  • Shadow Effects
    • 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
  • Gradients
    • 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
  • CSS for HTML5
  • Media Types
  • Print
    • Basic Print @media Queries & Styles
    • Force Accurate Colors When Printing
  • Replaced Elements
  • Resets & Boilerplate
    • UA Stylesheets
    • CSS 1 & 2 Reset
    • CSS3 & HTML5 Reset
    • CSS3 & HTML5 Boilerplate
  • border-radius
  • Making a Consistent Search Input
  • Reversing CSS Rules
  • clip
  • resize
  • CSS Sprites
    • Introduction
    • Making a CSS Sprite
    • CSS3 Sprites
    • CSS3 Sprites for HTML5
• Accessibility
  • Introduction
  • Basic Accessibility For Forms
  • ARIA Landmarks
  • Compensating For Color Blindness
  • Navigation Accesskeys
  • Firefox Accesskey Bugfix
  • link rel
  • Skip nav
  • Introduction to WebVTT
  • Creating & Validating Subtitles
• PHP
  • Introduction
  • Basic Requirements
  • How To Avoid Problems
  • Comments
  • How Do I Know If PHP is Working?
  • echo
  • The XML Prolog Issue
  • include()
  • Variables
  • Concatenation
  • 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
  • Form Validation
    • Introduction
    • Checking Fields
    • Showing Errors
  • PHP & 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
  • PHP-Enhanced 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
  • Make A Simple Database Table
  • Configure DreamWeaver For MySQL
  • Write A MySQL Connection
  • Simple SELECT Query
  • Simple Customizable Query
  • Simple INSERT
  • Useful Queries
• JavaScript
  • Introduction
  • The DOM
  • Writing Effective JavaScript
  • How To Write JavaScript
  • Common Mistakes Made In JavaScript
  • JQuery-CDNs
  • Simple News Ticker
  • Self-Aware Navigation
  • Custom Video Controls
  • “Scroll To Top Then Fixed” Effect
  • Clear JQuery Animation Queue
  • Custom Site Theme Preview
  • Smooth Scroll Effect
• 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
• 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
• 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
  • 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
  • Frameworks
  • The Client-Server Model
  • Cookies
  • Keyframes, Tweening & Framerate
  • Ease-In-&-Out
  • Anticipation-&-Follow-Through
  • DRM
  • Cloud Computing
  • Databases
• For Students
  • Semester I Grade Calculator
  • Student Expectations
  • Instructor Expectations
  • Tips For Student Survival
  • 8 Rules For Students, Teachers & Life
  • Health Tips For Web Developers
  • Tutoring Program
  • Course Overview, CMPN 215
  • Course Map, CMPN 215
  • Books, Podcasts, & Reading Lists
    • Recommended Websites
    • Books
      • XHTML & CSS Reading Lists
      • HTML5 Reading List
      • PHP, MySQL & JavaScript Reading List
      • Book Review: The Truth About HTML5
      • HTML & CSS
      • Pro CSS Animation
      • A Student’s Guide To Web Design Portfolios
    • Web Development Online Resources
    • HTML5 Resources Online
    • Podcasts

featured comment

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.