Notes / links used in class

***complete study guide*** Use this first, then use  links below

7.1 intro to html and html skeleton

• overall intro to HTML

• HTML + CSS 

• the HTML skeleton 

• add website title to browser tab

7.2 creation tags + inline styling (style attribute)

• creation tags

• another version of creation tag notes

• intro to CSS language (inline styling)...(color and font-size)

• extra properties (make all uppercase, lowercase, or capitalize first letter of each word) (move text to center or right)

7.3 editing, formatting, display, div

• editing tags 

• the span tag ()

• how to structure your html (know 100% of this...)

• 3 basic font families

7.4 more useful styling

• study guide for how to use background-color, borders, adding color to horizontal rule lines

7.5 lists

• study guide for lists (ordered and unordered)

7.6 links

• intro to links

  • adding user control to links... psuedo-selectors

  • intro to internal styling (HUGE!)

7.7 images

• how to add image to codehs to upload to your site (first thing you do when using an image)

• how to use the image tag to add images

  • • understanding aspect ratio (notebook lm) important to know to make sure images look right on page 

• intro to the box model (important)

• intro to border-radius (making stabby 90 degree angles curved)

7.8 box model

• intro to the box model (important)

• all the different borders you can choose from

7.9 colors

• all 140 named color and hex values

  • same content, just visually different

7.10 display (block vs inline)

• inline and block elements

• div tag (block element!)

• style tag (intro...for div tags...

  • border attribute (for div, p, h1's, etc...)

7.11 div tag

• intro to the div tag

  • complete div tag guide

7.12 table tag

Extra Resources

7.1 intro to html and html skeleton

• nesting structure

• basic html skeleton

• doctype 

• html tags

• head tags

• body tags

• page structure

• html skeleton infographic (great)

• html document tree visual

• good versus bad formatting

• what is HTML

7.2 creation tags + inline styling

• HTML tag structure

• more tag structure notes

• HTML tags don't notice "whitespace"

• table of "basic tags"

• another table of basic tags (good table)

• headings and paragraph tags

• paragraph tags

• heading tags (text)

• three types of tags (important!!)

• style tag (geeksforgeeks)

• style tag (great resource)

7.3 editing, formatting, display, div

• editing

  • • bold, italics

    • bold, italics
      
      

• formatting

  • • horizontal lines and line breaks

    • horizontal line

    • line break (starts new line)

    • span (important!!!)

    • span tag (good resource)

• display

  • block vs inline elements

7.4 more useful styling

• background-color 

  • basic colors (140 by name)

  • border (for visual)

7.5 lists

• ul (unordered list)

• ol (ordered list)

  • list item (used in lists)

• creating lists

• more examples of lists

7.6 links

• general link info

  • absolute vs relative links

  • creating links

  • more link info (good)

  • even more link info (good)

  • button as a clickable link
    
    
    

• attributes (additional items needed for tag to work)

  • href

  • target

7.7 images

• img tag

• img tag (good)

• more img info 

• even more img info

• img tags + attributes

• img tag as a link

• img as a link

• attributes (additional items needed for tag to work)

  • src (source)

  • alt (alternative)

  • width of image

7.8 box model

• box model 

7.9 colors

• hex colors

  • hex color picker

  • google color picker

• color gradients

  • what is a color gradient?

  • create color gradients (2 colors)

  • create color gradients (3 colors)

  • create gradient (multiple direction)

7.10 display (block vs inline)

inline vs block vs inline -block

7.11 div tag

• div tag