FYI - Links

Explanation of Document Categories

  • Demo - Files provided for the instructor or student to demonstrate or test a procedure.
  • Notes about documentation by others - My comments about books, website info, and so forth.
  • Exercise - Step-by-step instructions for creating a specific result, often utilizing more than one technique.
  • How-To - Step-by-step instructions for a technique or procedure, but not for a specific result (which is covered in the exercise category).
  • Lesson - Information about a topic.
  • User Guide - Information about the purpose of menu options, language options, and so forth.

Notation conventions used in Dan's documents

References - General references about building web pages

  1. MDN - Mozilla Developers Network
  2. W3C - Worldwide Web Consortium
  3. W3 Schools
  4. CSS-Tricks
  5. Can I Use? – Find out if you can use specific CSS properties in different browsers
  6. A List Apart
  7. Smashing Magazine
  8. HTML Goodies - this covers a lot more than just HTML
  9. Dave Woods
  10. Impressive Webs
  11. Wikibooks CSS
  12. Top Web tutorial sites - includes several of the ones listed above - some links need to be corrected.
  13. Emmet abbreviated codes
  14. Special Characters - LOTS!

The following are listed by software/topic and then document type:

Adobe Animate

Exercises

  1. Zoom-Down Letters Using Adobe Animate CC 2022

User Guides

  1. Adobe Animate info by Adobe: Adobe Animate Learn & Support

Adobe Bridge

User Guides

  1. Adobe Bridge info by Adobe: Adobe Bridge Learn & Support

Adobe Dreamweaver

How-Tos

  1. Dreamweaver preference settings
  2. Defining a site in Dreamweaver

User Guide

  1. Dreamweaver - Design View vs. Live View
  2. Comparing code files in Dreamweaver (Good Luck!)

Adobe Express

How-Tos

  1. Convert image to SVG

Adobe Illustrator

How-Tos

  1. How to export an SVG file from Adobe Illustrator

User Guides

  1. Ai Preferences - recommended settings
  2. Adobe Illustrator info by Adobe: Illustrator Learn & Support

Adobe Photoshop

Adobe Photoshop Learn & Support

Demos

  1. Channels demo - compare the primary and secondary colors in the Channels panel
  2. Using Photoshop's Generator Plugin to Create Image Assets

Exercises

  1. Optimizing images with Photoshop
  2. GIF animation of a ball bouncing using Photoshop
  3. GIF animation of a corkscrew using Photoshop
  4. Spot Healing Brush Tool - Bric-a-Brac
  5. Spot Healing Brush Tool - Gladiolus
  6. How to select and remove the background of photos of dahlia flowers
  7. Optional?
    1. Masks 01 - Using the blue channel as a mask - Aurora
    2. Selections 01 - Tower of London

How-Tos

  1. Downloading and installing patterns in Photoshop
  2. Move a shape's rotation point
  3. Create a pattern in Photoshop
  4. Adobe site: Save an image (or part of an image) as a pattern preset

Lessons

  1. Animated GIFs & Photoshop - An Overview
  2. Tiling Images - An Overview of the Principle

User Guides

  1. Photoshop preference settings
  2. A List of Photoshop Presets & Their File Extensions
  3. Photoshop preference file functions, names, & locations
  4. Spot Healing Brush Tool User Guide

Aliasing

  1. Anti-Aliasing Examples

Browsers

  1. How to view the source code of a web page in a web browser
  2. How to save the code of a web page from a browser

Canvas

This refers to the Canvas LMS - learning management system - not the <canvas> HTML element

Exercises

  1. Upload to Canvas

Colors

Lessons

  1. Colors: Names | Web color names | RGB values | Hexadecimal values

CSS - Cascading Stylesheets

Demos

  1. Example of CSS file from the Beverly Hills Public Library site to use for demo purposes only.
  2. User Agent (browser default) CSS stylesheet examples:
    1. Firefox user agent (default) styles — These must be opened using the Firefox address bar:
      1. General default styles in Firefox:
        • Enter this in the Firefox address bar:
          resource://gre-resources/html.css
      2. Form styles used by Firefox
        • Enter this in the Firefox address bar:
          resource://gre-resources/forms.css
      3. Other resources used by Firefox
        • Enter this in the Firefox address bar:
          resource://gre-resources/
    2. Webkit stylesheet (Safari, and others; formerly Chrome)
    3. Jens Oliver Meiert's User Agent Style Sheets: Basics and Samples
      • Lots of examples, but may not be up to date.
  3. Opacity setting using the "a" (alpha) in rgba color specifications
  4. Demo of inheritance: using the font-size property
  5. Demo of a pseudo-class combined with a pseudo-element
  6. Examples of font-weights
  7. Proximity and precedence
  8. Media queries
    1. min-width and...
    2. ...an explanation of the demo
  9. List item positioning of an image
  10. Inset box shadow & how to make an oval and circle with the border-radius property.
  11. CSS backgrounds
    1. Striped background examples
    2. Gradient backgrounds
      1. Simple 2-color linear gradient: full page and div with box-shadow
      2. Two simple 2-color linear gradients: full page
      3. Multi-color, diagonal linear gradient: full page
  12. column-count property
    1. column-count with text-align:justify
  13. Demo of CSS float property

Exercises

  1. HTML & CSS Basics - 01

Lessons

  1. CSS Basics
  2. The CSS Box Model
  3. The CSS Cascade
  4. CSS selectors

Files & Operating Systems

How-Tos

  1. Set Your Computer to See File Extensions; also opting for Windows Details view
  2. Zip and Unzip files

FTP

How-Tos

  1. How to set up FTP in Filezilla and Dreamweaver

Google

How-Tos

  1. How to Create a Google Form For Use As a Survey Tool

HTML

Demos

  1. HTML flow and text wrap
  2. SVG code used for creating the New York Times logo

Exercises

  1. Basic HTML5 file
  2. Create an HTML Basic Document 

Reference

Images

  1. LIBRESHOT
    1. "Free images even for commercial use. No watermark. No attribution."
    2. More info
  2. Wikimedia Commons
    1. These images usually require attribution - which means providing a credit for the creator.
      1. You will usually see code that you can copy into your html code to display the credit.
      2. You may want to put it directly under the image or near the bottom of your page.
      3. The <figcaption> element is an appropriate vehicle to carry the message.
    2. Search Creative Commons
    3. Terrific Images - often free to use, but check the license agreement before using:
      1. Commons:Featured pictures - Wikimedia Commons
      2. Category:Valued images - Wikimedia Commons
      3. Commons:Quality images - Wikimedia Commons
      4. Category:Images - Wikimedia Commons

Text Editors

How-Tos

  1. Choosing a plain text editor
  2. Instructions for changing TextEdit preferences in order to use it for writing code

YouTube

How-Tos

  1. Providing YouTube on a web page