All Presentations

On this page…

    Note that all the presentations on this page are available under a Creative Commons Attribution-ShareAlike License. You can use these slides in many ways, provided you follow the terms of the license.

    Web Development

    Scott & Jans: An Intro

    Scott. Jans. Lovecraft. Outlines. Responsive web design.

    Web Development: The Absolute Basics

    Background. History. W3C & WHATWG. Can I Use. How the Web Works. Browsers. Choices. Browser parts. Rendering engines. Web servers. HTTP. 3 Languages: HTML, CSS, & JavaScript. The browser processing pipeline. A simple webpage. Elements, attributes, & values. DTDs. Character encoding. ASCII. UTF-8. Setting character encoding. A simple webpage, corrected. Comments. Editing.

    Bonus: Installing, Configuring, & Using Brackets

    Installation. How it works. First extensions. Brackets as debugging tool. Configuration. Other extensions.

    Bonus: Installing, Configuring, & Using Visual Studio Code

    First tasks. Installation. How VSCode works. The GUI. Key features. Language support. Command palette. IntelliSense. Snippets. Git. Configuration. First extensions. Themes. Basics. Validation. Automation.

    HTML Overview: Elements, Attributes, Entities

    Semantic HTML. Categorization. Basic document structure. Metadata. Attributes & values. Global attributes. Attribute values. Sectioning. Grouping. Text semantics. CSS hooks. Lists. Links. Embedded multimedia. Tables. Forms. Interactivity. Scripting. Character entities. IE. Tools.

    Bonus: Markdown

    Background. Basic syntax. Process. MultiMarkdown. PHP Markdown Extra. Sundown. Pandoc. Testing. Software. Integrating.

    It’s Boxes All the Way Down!: Elements & Their Relationships

    Parents & children. Ancestors & descendants. Grandparents. Siblings. Boxes. Block. Inline.

    CSS Overview: Selectors, Integration, Inheritance, Cascading

    History. Why CSS? DOM. Basic Selectors. Simple selectors. Universal. Type. Class. ID. Compound selectors. Complex selectors with combinators. Descendant. Child. Selector list. Key selectors. Formatting. <span> & <div>. Integrating CSS. Inheritance. Importance. Specificity. Order. The Cascade. Tools.

    CSS Building Blocks: Selectors

    Basics. How many? Simple selectors. Pseudo-classes. Pseudo-elements. <string>. Attributes. Compound selectors. Complex selectors with combinators. Selector lists. 3 wishes.

    CSS Data Types

    Defined. Images. Text. Wide Usage. Media Queries. Animations & Transformation. Future.

    CSS Preprocessors: Extending CSS with Sass to Provide Extra Functionality

    Background. Markdown. Less. Sass. SCSS. Variables. Math operators. Darken & lighten functions. Nesting. Nested properties. Mixins. @if operatives. Collections of mixins. @import directive. Comments. Autoprefixer. Sass Tools. Brackets. Visual Studio Code. CodePen. Task runners. CLI task runners. GUI task runners. Custom CSS properties. CSS environment variables.

    CSS Typography: Fonts & Formatting

    Why? Typefaces, fonts, glyphs, & characters. Types. Measure. Leading. Scale. Operating system defaults. Web browser defaults. Core Fonts for the Web. ClearType Font Collection. Font properties. Font stacks. Text properties. font shorthand. Line box properties. Multi-column layout. Generated content. Font formats. @font-face. Licensing.

    Tables & Lists: Organized Data

    Deprecations & removals. Basic tables. Defining sets of rows. Table title. Styling tables. Columns. Sortable columns. Creating tables the easy way. Styling lists.

    CSS Layout: Boxes, Displays, & Positioning

    Box model. Padding. Border. Margin. box-sizing, width, height, & overflow. Layout modes. display. Positioning. Normal flow. Out of normal flow. float & clear. position. z-index. visibility. Opacity. Flexbox. Grid.

    Webpage Layouts: 5 Methods

    CSS Flexbox Layout: It’s Ridiculously Useful

    CSS Grid Layout: It’s New, It’s Cool, & You’ll Love It

    Decorating with CSS: Cool Ways to Make Things Pretty

    Background images. Background layers. Linear gradients. Radial gradients. border-image. border-radius. box-shadow. transform. Creating shapes.

    Media-Specific Styles: Same HTML, Different CSS

    Overview. Media types. Media styles in action. Common print styles. Print CSS. Media features.

    CSS Animation: Visual Change Over Time

    <shape>. <time>. <timing-function>. <angle>. transition. animation. @keyframes.


    Daily use. How forms work. Labels, fields, & controls. Form attributes. Form containers. Text controls. Choice controls. File select controls. Submission controls. Mobility. Accessibility. Tips & caveats.

    Fixed to Fluid to Responsive: Grids in Design

    Grids in design. Rule of thirds. Foundation. Bootstrap. Skeleton. Fluid layouts. Fixed layouts. Mobile solutions. Mobile site. Adaptive design. Zooming. Responsive design.

    Bootstrap: A Quick Introduction

    The magic tag. Installation & setup. Manually. Link via CDN. Using Bootstrap. Grid system. Containers. Rows. Columns. Tools. Bootstrap 4.

    Web Design

    Design Patterns

    Design patterns: what they are & why they’re useful. From architecture to computer science to Web development.

    Design Theory: The Vitruvian Triad

    How do you judge the quality of a website? Firmness, Commodity, & Delight. Some very bad websites.

    Design Principles

    Principles of Design. Balance, Unity, Emphasis.

    The Design Process

    Roles. Discover, Design, Develop, Deploy.

    Design Structure: Design Patterns in Action

    Content precedes design. Information architecture. Grids. Layouts. Website components (lots of them!).

    Multimedia: Images, Audio, Video

    Formats. Raster & vector. Animation. HTML5 elements for audio & video. Free & inexpensive sources for images, audio, & video.


    History. Basic terminology. Art. Color wheel. Color harmony. Modern color reproduction. RGB. CMY. Perceiving color. The visible spectrum. How we see colors. Theory. Biology. Color blindness. Mind games. Psychological primary colors. Color symbolism. Illusion. Motion. Perspective. Color constancy. Peripheral. Color comparison. Afterimage. Tools.

    CSS for Designers: Capabilities to Know & Pitfalls to Avoid

    Boxes Boxes Boxes. Box Model. Content, Padding, Border, Margin. Overflow. Floats. Backgrounds. Layers. Gradients. Border Effects. Opacity. Animation. Media-Specific CSS.

    Operating Systems

    Getting More From Your Mac

    History. Why a Mac? Computer Rules. Key Commands. Setting Up. Things You’re Not Using Right. Printing. Security. Integrating Windows. Automation.


    What They Know, What You Don’t: Snowden, Surveillance, & Privacy

    I’ve been giving this talk along with civil rights attorney Denise Lieberman for the last few years at Missouri Scholars Academy.

    Legal Issues

    So-Called Intellectual Property: Overviews & Opinions

    Trade Secrets, Trademarks, Patents, Copyrights.


    Our Toolkit: What WebSanity Uses

    Development. Automation. Security. Writing. Amazon Web Services. Server. LAMP. NoSQL.

    Your Digital Toolbox - Software, Tips, & Tricks for Web Developers (& Other Creatives)

    WebSanity Top Secret