Skip to content

class201-03.md

Latest commit

 

History

History
96 lines (83 loc) · 3.49 KB

class201-03.md

File metadata and controls

96 lines (83 loc) · 3.49 KB

Duckett HTML & CSS:

Chapter 3: “Lists”

There are three (3) different list types in HTML

  1. Ordered Lists (numbered list) <ol>
    • each item is represented by a list item <li>
  2. Unordred Lists (bulleted list) <ul>
    • each item is represented by a list item <li>
  3. Definition Lists (terms w/ definitions)
    • <dl>: definition list element, wraps all terms and definitions
    • <dt>: definition term, wraps the term
    • <dd>: definition, wraps the definition

Chapter 13: “Boxes”

CSS provides each HTML element it's own box. For each box we can control the size, border, padding, and margin.

Size is controlled:

  • width, height: basic size control (pixels, %, etc)
  • min-width, min-height: the smallest allowable size for a box (when not using a fixed size like %)
  • max-width, max-height: maximum allowable size for a box (when not using a fixed size like %)

Content that doesn't fit within the box is called overflow, which is controlled:

  • hidden: hides extra content
  • scroll: puts a scroll bar in place

Borders - separates boxes from each other

  • border-width: thickness of the border
  • border-style: solid, dotted, dashed etc line styles
  • border-color: ...color...
  • border: shorthand that allows all three above to be specified in one line 
    border: 2px solid red;

Padding: space from border to content inside

  • top, right, bottom, left: all affect respective padding size Margin: space from boarder to another box outside
  • top, right, bottom, left: all affect respective margin size
  • centering boxes use auto for left and right values

Other features:

  • Display: convert block element to inline and vice versa, make both, or none
  • Visibility: show the block or not
  • border-image
  • box-shadow
  • boarder-radius

Duckett JAVASCRIPT & JQUERY:

Chapter 2: “Basic JavaScript Instructions”

  • Arrays: stores multiple values separated by commas
    • let array = [value1, value2, value 3];
    • index starts at position 0
    • methods can be applied to arrays

Chapter 4: “Decisions and Loops”

Switch statments can be used as an alternative for if/else statements in certain scenarios.

Switch statements are stuctured as follows:

switch(variable_being_cycled){
    case 'alternate_value_for_variable':
        code to be executed;
        additional code to be executed;
        break;
    default:
        code to be executed;
}
  • switch(): calls the function on a variable
  • case: defines the value being evaluated for that variable, would typically have multiple cases in a switch statement
  • break: stops code below the break from being executed
  • default: code that will execute if value is called that isn't expected

JavaScript (weak typing language) will use type coercion to make sense of a datatype. Be aware of this as this can cause unexpected bugs.

  • use strict operators === and !==

Truthy and Falsy Values:

  • Falsy: false, 0, empty strings, NaN, undefined
    • treated as false
  • Truthy: all other values...
    • treated as true

Loops

  • for:
    • three inputs: variable initialization, condition, increment
    • used when you know how many times you want to loop through
  • while:
    • condition (variable declared outside)
    • need a way to break or will result in infinte loop (retest condition)
    • used when you can't predict the number of loops needed
  • do while:
    • similar to while, but statement written in do before the while condition