COMP 101 Spring 2015

Snippets

Templates

  1. HTML template
  2. CSS template

CSS Snippets

  1. Box Model
    1. Illusrating the boxmodel
  2. Centering
    1. Centering text and boxes
    2. Centering lists (no visible boxes, visible boxes)
  3. Size
    1. Difference between pt and px
    2. Using em (v1, v2)
    3. Fixed vs variable width divs
  4. Borders
    1. Border Basics
    2. Using Borders to Create Objects
    3. CSS Shapes
  5. Selectors
    1. Simple CSS
    2. Multiple selectors
    3. Classes
    4. Ids
    5. Context
    6. Multiple selectors with classes
    7. Descendents and children
    8. Siblings
    9. Using th for row headers
    10. Inheritance
    11. nth-child
    12. adjacent sibling
  6. Formatting
    1. Pseudo-elements in Paragraghs
    2. Display options
    3. Floating Pictures
    4. Filmstrip Pictures

Links Snippets

  1. Links
    1. On-page links
    2. Multipage site links
    3. Cross-page section links
    4. External links
    5. Formatting Navigation Bar
    6. Formatting Buttons
  2. On Page Navigation Styles
    1. On-page Table of Contents
    2. Navigation Bar with Float
    3. Side Bar Navigation
  3. Multipage Navigation Styles
    1. Horizontal Nav Bar
    2. Tabs
    3. Multipage Table of Contents
    4. Next Prev
    5. Next Prev with Float

Image Snippets

  1. Image formats
  2. Image size
  3. Formatting an image
  4. Storing images
  5. Figures
  6. Background
  7. Listmarkers

Table Snippets

  1. Basic Parts
  2. Spanning Rows and Columns
  3. Column Widths
    1. Automatic Sizing
    2. All Columns the Same
    3. Different Widths by class
  4. Simple Calendar
  5. Formatted Calendar
  6. Link as Table Content (Jeopardy)
  7. TH as Row Header
  8. Pictures in Tables

Multimedia

  1. Audio and Video
  2. PDF

JavaScript

  1. Using javaScript console
  2. JavaScript Alerts
    1. Onclick on div
    2. Alert from onclick
    3. Alert with text from onclick
    4. Alert with number from onclick
    5. Set an initial value for a text box
    6. Set a placeholder for a text box
  3. Forms
    1. Image as Button Background
    2. Button with Hover
    3. Datalist
    4. Reset Button
    5. Formatting a Form
    6. Text Input Options
    7. Select Input Options
    8. Date Input (Not Well Supported)
    9. Color Input
  4. JavaScript Writing to Page [no functions used]
    1. Write output to the page
    2. Write output to the page using a function
    3. Format input boxes using [] selector in CSS
    4. Access elements in diffferent forms
    5. Hide the box using CSS
  5. JavaScript Functions (No Value Returned)
    1. Alert using function, no parameters
    2. Alert using function, one parameter, one use
    3. Alert using function, one parameter, multiple uses
    4. Alert using function, two parameters
    5. Alert using numbers
  6. JavaScript Returning Values From Functions
    1. Return a value from a function [function returns value]
    2. Add two numbers and returns their sum [function takes two parameters and returns value]
    3. Two different functions in one file [functions take two parameters and return value]
  7. Pictures
    1. Change a picture by changing src
  8. JavaScript if staements
    1. simple if no else [building string]
    2. if, else [building string]
    3. if, else if, else [building string]
    4. simple if [Use of Number]
    5. return inside if
    6. button to select function
    7. single button switces picture [Use of Splice]
  9. JavaScript Arrays
    1. Select an element from an array based on a number entered by the user
      [function takes one parameter and returns value]
    2. Get an index from a select (dropdown) element and returns a value from an array
      [function takes one parameter and returns value]
    3. Convert Month and Day of Week to text using arrays [function returns value]
  10. JavaScript Dates
    1. Uses Date functions to build message [function returns value]
    2. Uses Date functions but builds strings using += operator [function returns value]
    3. Converts Month and Day of Week to text using arrays [function returns value]
  11. JavaScript Conditionals
    1. Generates one of 2 messages based on Day using if - else and JavaScript OR function [function returns value]
    2. Creates one of 3 messages based on Hour using if - else if - else [function returns value]
    3. Converts Day value to string using array [function returns value]
    4. Random Conditionals
      1. Random message generated using if - else [function returns value]
      2. Convert random to integer [function does not return value; sets two values inside function]
  12. JavaScript Scope
    1. Counts the number of times the button is clicked using a global variable
    2. Illustrates the difference between global and local variables
  13. JavaScript Content Creation
    1. Using innerHTML to generate more complex content
    2. carousel with form
    3. carousel with div
    4. change class
  14. JavaScript Content Creation at Page Load
    1. Random selection of picture
  15. Canvas
    1. single rectangle
    2. formatting the canvas
    3. two rectangles on a single canvas
    4. overlapping rectangles
    5. overlapping rectangles, opacity, and multiple canvasses
    6. lines and triangles
    7. single circle
    8. circles and arcs