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

    Web Development: The Absolute Basics

    Bonus: Installing, Configuring, & Using Brackets

    Installation. How it works. First extensions. Brackets as debugging tool. Configuration. Other extensions. IMPORTANT: Adobe will not develop or update Brackets after September 1, 2021. Use Visual Studio Code instead.

    Bonus: Installing, Configuring, & Using Visual Studio Code

    Intial info: macOS meta keys, / & \, unzipping, show extensions, main project folder. Installation. Portable mode. How VSCode works. The GUI. Key features: language support, Command Palette, IntelliSense, snippets, Git. Configuration. Extensions. GrannePack HTML. GrannePack CSS. GrannePad Git. GrannePad Markdown.

    HTML Overview: Elements, Attributes, Entities

    Bonus: Markdown

    Pre-processors. Background. Basic syntax. Process. Forks & versions: CommonMark, MultiMarkdown, Markdown Extra, GitHub Flavored Markdown, Pandoc, Compare & Contrast. Tests. Software: Visual Studio Code, Vim, MacDown, Sublime Text, Marked, MarkdownPad, Markdown Monster, iA Writer, Epsilon Notes, Textastic, 1Writer. Integrations. Caveat.

    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? Integrating CSS: inline, embedded, linking, @import. The browser processing pipeline (DOM & CSSOM). Basic selectors. Simple: universal, type, class, ID. Compound. Complex: descendant & child combinators. Key selectors. Selector lists. Formatting. <span> & <div>. Inheritance. Cascading: importance, specificity, order. The Cascade. CSS Reset Keywords. Tools.

    CSS Building Blocks: Selectors

    Basics. How many? Simple selectors: pseudo-classes (e.g., :any-link, :link, :visited, :target, :scope, :hover, :focus, :active, :focus-within, :root, :empty, :first-child, :last-child, :only-child, :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type, :is(), :not(), :where(), :has()), pseudo-elements (::first-line, ::first-letter, <string> data type, ::before, ::after), attributes ([attr], [attr="value"], [attr~="value"], [attr|="value"], [attr^="value"], [attr$="value"], [attr*="value"]). Compound selectors. Complex selectors with combinators (descendant, child, adjacent sibling, general sibling). Selector lists. 3 wishes.

    CSS Data Types

    Defined. Basic data types. <string>. <url>. <length>: absolute, relative, font-relative, viewport percentage, calc(), <color>.

    CSS Preprocessors: Extending CSS with Sass to Provide Extra Functionality

    Background. Markdown. Less. Sass. SCSS. Variables. Scope. Math operators. Darken & lighten functions. Nesting. Complex Selectors with combinators. Compound selectors. & as Sass parent selector. 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 Typography: Fonts & Formatting

    Why care? Typefaces, fonts, glyphs, & characters. Types. Measure. Leading. Scale. Core Fonts for the Web. ClearType Font Collection. Web browser defaults. Font properties. Font stacks. Text properties. font shorthand. Line box properties. Special cases. Printing. Embedded fonts. Font formats. @font-face. Licensing. Embedding. Serving Google Fonts locally. Variable fonts. Final considerations. Appendix A: font-variant & OpenType equivalents.

    Tables & Lists: Organized Data

    Deprecations & removals. Basic tables. Defining sets of rows. Table title. Styling tables. Columns. Sortable columns. Striped rows. Creating tables. Lists. List markers. List counters.

    CSS Layout: The Visual Formatting Model

    Webpage Layouts: 5 Methods

    CSS Flexbox Layout: Flexible, Robust Line-Based Layout

    Terminology. Triggering Flexbox layout. Direction, wrapping, & order. Aligning items & lines. Aligning flex items on the main axis. Aligning flex items on the cross axis. Aligning flex lines on the cross axis. The dangers of data loss. Aligning via writing mode. Gutters & gaps. margin: auto. Sizing flex items. References. Examples.

    CSS Grid Layout: Robust Layout Using Rows & Columns

    Flexbox vs grid. Concepts & terms: container, lines, cells, areas, tracks, items, & gutters. Your first grid. Inspecting grids. Triggering grid layout: display: grid. Track basics: grid-template-columns & grid-template-rows. Placing items: grid-row-start, grid-row-end, grid-row, grid-column-start, grid-column-end, & grid-column. Numbered lines. Named lines. Negative line numbers. Named lines. Named areas: grid-template-areas & grid-area. span. Sizing tracks: fr, max-content, min-content, fit-content(), minmax(), & auto. repeat(). Aligning within the grid. Gutters: row-gap, column-gap, & gap. Aligning grid tracks: justify-content, align-content, & place-content. Aligning grid items: align-items, justify-items, place-items, align-self, justify-self, & place-self. Implicit grid: grid-auto-rows, grid-auto-columns, & grid-auto-flow. Subgrid. Techniques. Tools.

    CSS Effects: 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.

    Getting More From Your Mac


    The original UI compared to today. Names. From cats to California. Default fonts.

    Why a Mac?

    Some very good reasons, starting with “they just work”.

    Computer Rules

    Lazy is good. Take notes. Think before you click. Read the Help.

    Key Commands

    Meta keys. Basics. Symbols. Apps. ⇧. Dialog boxes.

    System Preferences

    System Preferences. General. Accessibility. App Store. Desktop & Screen Saver. Display. Dock. Extensions. iCloud. Keyboard. Language & Region. Mission Control. Mouse. Notifications. Security & Privacy. Sharing. Siri. Trackpad. Users & Groups. 3rd Party. OnyX.

    Installing Software

    DMG. ZIP. PKG. Slides coming soon!


    Components. Finder Preferences. Views. Quick Look. File Management. File Info & Actions. Window Management. Path Finder. Renaming Files. Things Finder Cannot Do (& How To Do Them).

    The Dock

    Slides coming soon!


    Using Spotlight. Spotlight With Booleans. Metadata Attributes. Natural Language Queries. Spotlight Suggestions. Information. Integration with Other Services. Conversions, Calculations, & Definitions. Application Launcher. Working With Spotlight Results. Spotlight Alternatives.

    System-Wide Features

    Share Sheet. Slides coming soon!


    Printer Dialog Box. VipRiser. Printopia. Best Printing Trick Ever.


    Built-In. Gatekeeper. File Quarantine (aka XProtect). FileVault. iCloud Keychain. Passwords. Backup.

    Integrating Windows

    NTFS for macOS. Dual Booting. Virtualization.


    My Sample Workflow. BetterTouchTool. picatext. Hazel. Hyper Key. Keyboard Maestro.


    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