PROJECT 02 NOTES

  1. HTML5 Structural Elements and the DOM Panel
    1. <head> nondisplaying information VS <header> top of page
    2. Using DOM panel to add elements- header, main, footer
  2. External CSS Rules
    1. <link> links HTML page to other files like CSS and JavaScript
    2. Background images
    3. Background-repeat: none and background-size: cover
  3. Floating Boxes
    1. <aside> side bar, have to float aside and main
    2. Clear both for footer
    3. CSS comment looks like /*lorem*/
    4. HTML comments look like <!--lorem-->
  4. Div Containers
    1. <div> general box
    2. div id=#container (like a shipping container) NEED # FOR ALL ID
    3. margin: auto; (to center div)
  5. Creating Content
    1. edit------>preferences
    2. Formatting text in sections
    3. <article> used to subdivide page content that could be published independently
    4. Triple click on live mode to edit
    5. LAYOUT W DIVS: have to make sure your main, aside, and padding pixel #s add up to container pixel #
  6. Positioning Images
    1. Floating images
  7. Styling Text
    1. Adding adobe fonts
    2. serif- have feet
    3. sans-serif- smooth and round
    4. <span> inline css
  8. Adding Classes to Existing Elements
    1. class- a CSS rule that can be applied to multiple elements (unlike an id) indentified as .class
    2. camelCase- first word lowercase other words uppercase
    3. add class in properties panel
  9. Creating a Nav Bar
    1. needs to be organized
    2. <nav>
    3. inline element- doesn't start a new line
    4. block element- always starts a new line
    5. margin: auto; only works if your container has a width
  10. Styling Nav Links
    1. page properties
    2. LoVe makes me HAppy (link, visited, hover, active)
  11. Styling Buttons
    1. <form>
    2. <br> break
    3. value (in properties panel)- default text in form box
    4. Radio groups
    5. Radio buttons- single response
    6. Checkbox- multiple responses
  12. Submit Button
    1. Back End- code on web serves that handles data interactions
    2. Front End- code visible to viewers
    3. Form methods (in properties panel)
      1. Get method- adds data from to form to the URL- all info visible
      2. Post method- data is embedded in the body of the page request- invisible (no limit to characters
      3. Box Shadow in CSS Designer for drop shadows
  13. Cascading Style Sheets
    1. External CSS (styles.css)
    2. Internal CSS (<style>)
    3. Inline CSS (<span>
  14. Connecting Our Site Pages