PROJECT 03 NOTES

  1. Creating a Template
    1. helps site mantain consistent
    2. templete regions - enclose areas of template to unclock to edit
    3. inserting editable regions
  2. Templates, Divs, and File Management
    1. Make page off of template
    2. 3 ways to insert div tag
    3. Inserting placeholder images
    4. images, pages, and assets folder
  3. Creating Columns
    1. create class - .column
    2. column border
    3. float left
    4. Changing main, header, nav sizes
    5. background-repeat:none
    6. background-position: center to header
  4. CSS Positioning
    1. setting a CSS position:
    2. position : value;
    3. top: value;
    4. left value;
    5. static - default CSS position
    6. relative - the element is positioned relativelt to its original position
    7. absolute (AP) - appear in a specific location in the browser window, ignoring all other HTML elements
    8. z-index - sets the overlapping order of positioned elements.
    9. fixed - elements stands in specific space, does not move
    10. sticky - elements scroll with the page until the target location is reached
  5. Responsive Design
    1. preview live on mobile design
    2. website should be able to adjust its layout in response to its browser size
  6. Creating a Media Query
    1. make media query
    2. add container
    3. declare new position
    4. add correct sizes for header, main and nav
    5. .column margin size need to be added also
  7. Media Query for Mobile Devices
    1. and seperates each property
    2. smaller device
    3. only
    4. make nav longer
  8. Replacing Gallery Placeholders
    1. Can use Photoshop to resize
    2. go into code, use properties panel, browse to photo to replace
    3. Document Relative link - href location is written starting from the current document's location in the root folder. More efficent for very complicated websites with lots of folders. ../ or folder/file name
    4. Site Root Relative Link - address location is written starting from the sites root folder. Represented with a /. Easier for smaller websites that do not have a lot of folders. always /.
    5. Absolute Links - normally only used to link other files outside your root folder. always http://
  9. Alt Text and Accessibility
    1. Alt text - used by screen readers to describe images aloud for the visuallyimpaired. Also will be displayed by the browser if the image won't load.
    2. adding alt text
  10. Adding Video Files
    1. HTML5 tag
    2. HTML5 <video>
    3. no plugins needed
    4. only 3 video types supported : .mp4, .ogg, .webm