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 Intro for Students: The Absolute Basics
Essential Tech Info & Skills
Installing, Configuring, & Using Visual Studio Code
HTML Overview Condensed: Elements, Attributes, Values, Entities (for short courses)
HTML Overview: Elements, Attributes, Values, 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 Condensed: Selectors, Integration, Inheritance, Cascading (for short courses)
History. Why CSS? Integrating CSS: linking, embedded, inline, @import. The browser processing pipeline (DOM & CSSOM). Basic selectors. Simple: type, class, ID, universal. Compound. Complex: selector subjects, & descendant & child combinators. Selector lists. Formatting. <span> & <div>. Inheritance. Cascading: origin (+ !important, inline, specificity, order. The Cascade. Tools.
CSS Overview: Selectors, Integration, Inheritance, Cascading
History. Why CSS? Integrating CSS: linking, embedded, inline, @import. The browser processing pipeline (DOM & CSSOM). Basic selectors. Simple: type, class, ID, universal. Compound. Complex: selector subjects, & descendant & child combinators. Selector lists. Formatting. <span> & <div>. Inheritance. Cascading: origin (+ !important, inline, 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 Condensed: Typefaces, Fonts, & Formatting
Why care? Typefaces, fonts, glyphs, & characters. Types. Measure. Leading. Scale. Terminology. Core Fonts for the Web. ClearType Font Collection. Web browser defaults. Installing fonts. Font properties: font-size. line-height. font-style. font-weight. Text properties: color. letter-spacing. text-decoration. text-transform. text-indent. Line box properties: text-align. Font stacks: font-family & native font stacks. Embedded fonts. Font formats. @font-face. Licensing. Embedding. Serving Google Fonts locally. Appendix A: font-variant & OpenType equivalents.
CSS Typography: Typefaces, 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
CSS Layout Condensed: The Visual Formatting Model
display. Boxes. Box tree. Box model: content, padding, border, margin, & box-sizing. Width & height. overflow. Box generation. The Flow. Inline layout. Block layout. Floats. Table layout. Flexbox & grid. Positioned layout. Stacking. Multi-column layout.
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.
Forms
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.
Responsive Web Design with Bootstrap: From Soup to Nuts
What is responsive web design? Media types & media features. @media queries. Grids in design. Grid-based frameworks. Fluid designs. Fixed designs. Mobile designs: mobile site, adaptive design, zooming. Responsive layouts. The Magic Tag. Installation & setup of Bootstrap. Using Bootstrap. Grid system: containers, rows, & columns. Tools: themes & testing.
Git: Ya Gotta Know It If You Wanna Be a Developer
Searching. Terminal. Version control: built-in, copying, local, centralized, distributed. Git history. Installation. Visual Studio Code integration with Git. GitHub. Using Git & GitHub. Tools. Your 1st cloned repo. Branching. Learn more.
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.
Information Architecture: Organization, Navigation, Labels
Formerly known as Design Structure: Design Patterns in Action.
Content before design. Information architecture. Organizing websites. Learning more. Tufte. Tools. Webpage components. UI ➝ aesthetic design. Header. Brand. Hero. Core content navigation. Utility navigation. Page title & sub-navigation. Path navigation. Body. Sidebar. Pictures sidebar. Footer. Tables. Calendar. Search/Filters. Wireframing.
Multimedia & the Web: Images, Audio, Video, Fonts
Compression: lossy & lossless. Image formats. Raster & vector. Formats for the web: GIF, JPEG, PNG, SVG, WebP, AVIF, JPEG XL. Formats that do not work on the Web. Formats for animation. HTML5: <video> & <audio>. Containers & codecs. Video (MP4, WebM, OGG) & audio (MP3 & OGG) formats. Licensing. Image sources, free & commercial. Video sources, free & commercial. Audio sources, free & commercial. Font formats: TTF, OTF, EOT, WOFF, WOFF2. Font sources, free & commercial. Installing fonts. Sources of sources.
Color
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
History
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!
Finder
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!
Spotlight
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!
Printing
Printer Dialog Box. VipRiser. Printopia. Best Printing Trick Ever.
Security
Built-In. Gatekeeper. File Quarantine (aka XProtect). FileVault. iCloud Keychain. Passwords. Backup.
Integrating Windows
NTFS for macOS. Dual Booting. Virtualization.
Automation
My Sample Workflow. BetterTouchTool. picatext. Hazel. Hyper Key. Keyboard Maestro.
Internet & Web
Brave: A Better Browser
Browser basics. Rendering engines. Choices. Brave’s Settings. Other features. Brave Talk. Task Manager.
A Guide to the Internet Archive
History. Web. Using the Wayback Machine. Site map. Integrations. Videos. Feature films. Silent films. Prelinger Archives. Animation. TV series. TV movies. TV commercials. News. Audio. Old time radio. 78 RPMs & cylinder recordings. Hip Hop mixtapes. LibraVox Free Audiobook Collection. Concerts. Images. Art. NASA. Commerce. Software. Floppies & CD-ROMs. Linux. Games. Flash. Texts. Computer magazines. Pulp fiction. Entertainment. Universities. U.S. government. Borrow books. Contribute. Help out.
Security
Security Vulnerabilities & Solutions
A semester’s overview in one deck of slides. Security defined. Concepts. CIA triangle. CIA+. Incidents. Malware: viruses, worms, spyware, Trojan horses, rootkits, ransomware. Social engineering. Vulnerability scanning with nmap & Nessus. Botnets. Wi-Fi packet sniffing with Wireshark. Backing up: online & local. Cloning. Passwords. Rules. Password managers.
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.
Software & tools
Our Toolkit: What WebSanity Uses
Development. Automation. Security. Writing. Amazon Web Services. Server. LAMP. NoSQL.