Today’s goals:

• Review: shorthand properties and auto value for margin property
• Choice of assignment (same from yesterday)- see below

 Today’s featured website:

• https://jenniferdewalt.com/rock_paper_scissors.html– Can you beat the computer in this classic game?

 Review- Shorthand Properties and Auto Value for Margin Property

• Shorthand properties:
  • Margin- Let’s look at this example
  • Border- Let’s collapse border-width, border-style, and border-color into a single line of CSS
  • Padding- works in a similar way to margin (top, right, bottom, and left values can be written with four values, three values, two values, and one value). Let’s see this example.
• Auto value for margin property
  • Only used with margin-left and margin-right
  • Used to center content from the left and from the right. For example, when we set up a page wrapper, we tell the browser to center the wrapper from the left and the right by using margin-left: auto; and margin-right: auto;. You will often see this shorthand code for setting up margins for a page wrapper- margin: 0px auto; which means the margin for the top and bottom is 0px and the margin for the left and right is auto.

 Options when you’re done:

1. CSS Diner Game
   • Do your best to identify the selectors in the CSS Diner Game. You might find the CSS Vocabulary site helpful to review the different selectors. Some of these selectors you already know (type, ID, and class) and some are new.
2. HTML and CSS Review Exercises
   • Go to https://learn.freecodecamp.org/#html5-and-css and complete any exercises you want- review what you already know and/or check out some new things
3. Create a digital get well soon card
   • One of our period 6 students is out following a medical procedure. Make Joe a get well soon digital card! You can use Canva, Pixlr.com, or Google (Doc, presentation, drawing). Let me know when you’re done so I can review it. I will email Joe all digital cards!