Day 4 - Easy images

Housekeeping

• Update on the Program Schedule
  • Tony now teaching CPNT 200
  • Ash now teaching CPNT 262 Days 11-22
• Show and Tell tomorrow
• Ash covering afternoon
• Afternoon attendance
• CPNT 260 Assignment 2

1. Issue Demo

• Font stacks don’t support Linux
• 23rd and 26th are showing the wrong course

2. Image formats

Slides

Activity: Asset inventory

1. Create a Github Project (Beta) labelled “Asset inventory”
2. Find image assets (file system, online, wherever) that you’d like to use for a project.
   • if you don’t have any images handy, add a Card to your Project labelled “Find some cool images”
3. Categorize your images:
   • Is it a high or low frequency image (on average)?
   • Would it be better suited to be a JPEG or PNG image?
   • If your image is in the wrong format, add a Card to your Project labelled “Convert [image-label] to [preferred-format]”

Show and Tell

• Show off your favourite images and talk about them for 2.5-7.5 minutes.
  • 10 points, just sayin’…

3. HTML Images

• Slides

Demo: Adding and HTML image to a page

• Image Generator: Lorem Picsum

Pair-code with Tony

Tony, with the help of a volunteer, will demo one of the following CSS properties:

• object-fit
• mix-blend-mode
• clip-path

Lab Time with Ash!!!

• Ask her about the Squoosh CLI she wants to build!

Prep

Watch list

• By Kevin Powell
  • HTML & CSS for Beginners Part 6: Images
  • HTML & CSS for Beginners Part 13: Background Images

Reading list

• Images in HTML

Search list

• “html vs css images”
• “lorem picsum”
• “responsive images”