Today’s Goals:

• Review code of quote page made with background-blend-mode property
• Find and look at sites that use CSS blend modes
• Learn code trouble-shooting steps– general and for the background image issues
• Learning reflection: quick survey (link below)
• CSS triangle– quick demo

 Today’s featured site:

• https://www.spacejam.com/ – This website has been untouched since 1996, the year the movie Space Jam came out! Can you think of a very popular and successful online yard sale kind of site that looks like it’s from the 90’s?

 CSS Blend Modes

1. Let’s review the code our quote page created with the background-blend-mode property
2. Sites made with CSS blend modes:
   Can you find any?
   Some examples:
   https://anothercolour.com.au/
   https://wearealbert.org/
   https://www.bikebear.com.my/
   https://www.amsterdamferryfestival.nl/?lang=en
   https://teamelitekickboxing.org/
   https://www.bigeyedeers.co.uk/

 Code Trouble-shooting Steps

1. For background-image issues:
   • check if image and webpage are saved in the same spot
   • check if image name is spelled exactly as you saved it (and/or change the file name to a simple, one word name)
   • check file type– name.jpg or name.jpeg- look at image, right click on it to get name
   • check width and height- check image dimensions by right-clicking on it
   • check to see if image is excessively large (over 2000px; sometimes images of this size or larger are too big to load properly)
2. For general issues:
   • check for typos– misspelled words or tags; missing colons, brackets, or semi-colons; code partially commented out
   • copy/paste/delete debug method- copy/paste your code into a new file and start deleting code in the reverse order you added (newest gets deleted first) until you’ve either found your mistake or you’re back to a place where your code is working without any issues
   • use a code debugger/linter (when you’re working with more code; it’s more valuable now for you to find and fix your mistakes)

 Learning Reflection

• Quick CSS review game: https://codepen.io/allison02155/full/rNarOMB 
• Think about the project you completed- what were your biggest challenges and why?
• Look at our CSS Review Sheet  and submit any questions you have through our latest class survey .

 CSS Triangles

• Think: which one of the box model properties (margin, border, or padding) could potentially be used to create a triangle with CSS? Why? Hint: remember all of the box model properties can be applied in all directions- example: margin-top, border-bottom, padding-right, etc.
• Code: https://www.30secondsofcode.org/css/s/triangle (see it) and https://codepen.io/pen/?&editable=true (try it)