Today’s Goals:

• Learn about image types:
  when to use jpgs, gifs, and pngs 
  svg and other image file formats 
• Evaluate you inspirational quotes
• Review use of color in web design
• Begin learning CSS

 Today’s featured website:

• https://securityplanner.org/#/ – This visual guide helps you make good decisions to keep your online accounts and internet-connected devices secure.

 Evaluate Your Inspirational Quote Graphics

1. Look at your inspirational quote graphic  and evaluate it based upon the following criteria:
   Text readability
   Overall visual appearance
   Choice of background image to go along with quote
2. Fill out this brief evaluation form  about your graphic

 Color in Web Design

1. 2020 Trend Alert: Bold use of color and color psychology are among upcoming trends  for web design in 2020
2. Read or listen to this article:
   • https://blog.prototypr.io/color-psychology-in-web-design-bf974293beb 
3. Look at these infographics (source):
   • Personality of Color 
   • Where to use Dominant Color on your Website 
   • Where to use Accent Color on your Website 
4. Try these color tools (and pay attention to the color harmonies):
   • https://color.adobe.com/create/color-wheel/ 
   • https://www.sessions.edu/color-calculator/ 
5. Answer these questions: shorturl.at/bxAHO 

 Beginning CSS

• What is CSS and why do we use it? HTML tells the browser what the content IS (link, paragraph, headline, etc.) while CSS STYLES the content (color, layout, positioning, font, etc.).
• Let’s see the difference CSS makes even on a basic webpage. Go to http://medfordpublicschools.org/MHS%20Web%20Design/rainbow.html  and then let’s disable the CSS by using the Chrome developer tools to edit the HTML and comment out the CSS code. What is left?
• Same HTML, different CSS: http://www.csszengarden.com /. Different CSS styles create entirely different webpages using the same HTML! Let’s also disable the CSS and see what’s left.
• CSS syntax: Pointy brackets < > for style tags in head section, curly brackets { } in style sheet (next to the letter P on your keyboard; hit shift to make them) and semi-colons ; at the end of every line (next to the letter L, no shift key needed)
• Let’s look at this example . Let’s change the background color to pink, the h1 color to purple, and the text-align to left. Let’s make the paragraph font-family Arial and the font-size 16px.
• CSS vocabulary: let’s identify the selector, property, and value. What does CSS stand for? What is a style sheet?

 Fun with CSS colors

• To choose colors with CSS, you can either use color names, RGB (red, green, blue) values, or hex color codes- check this out for examples. 
• Hex value examples:
  • #ffffff (white) (full color)
  • #000000 (black) (no color)
  • #ff0000 (red)
  • #00ff00 (green)
  • #0000ff (blue)
• Test your new color knowledge with this fun game!