Imagery and Colour

Review and Spoilers

1. Assignment 1 CPNT-201 is due today at 11:59pm.
2. Initializing a git repository from the command line.
3. HTML and CSS Validation
   • W3C Markup Validation Service
   • CSS Validation Service
   • HTMLHint VS Code Extension

Activity: Easy Images

Materials

• Images in HTML
• Starter Code

Tools

• Lorem Picsum

Instructions

Responsive Image

1. Copy and paste the starter code into your workspace or use your own code from yesterday.
2. Add an <img> element to the top of the page inside the <section> element:
   • Set src to a Lorem Picsum images such as:
     • https://picsum.photos/id/237/200/300
     • Experiment with the last two numbers in the URL to set different a height and width of the image.
   • Set alt text to something that describes your image;
3. In your CSS, target your new image with a type selector:
   • Set display to block
   • Set width to 100% (this makes your image responsive)

Floated Circular Image

1. Repeat Steps 1 and 2 above, placing the image before an <h2> element;
2. In your CSS, target your second image using a class selector and:
   • Set float property to left or right (try both and see what happens)
   • Set border-radius to 50% or some other length value.

Activity: Adding a Splash of Colour

Materials

• Your Moodboard colour palettes!
• The Ultimate Collection of Google Font Pairings (for its colours)

Tools

• Contrast Ration Checker
• Firefox Eyedropper Tool

Instructions

1. In Firefox, go to a webpage with a colour pallette you’d like to copy such as The Ultimate Collection of Google Font Pairings.
2. Inspect the page by right-clicking on the page;
3. Click the eyedropper tool and click a light colour to copy it to your clipboard;
4. In the CSS of your starter code:
   • Set the color of your body element to the colour you copied.
5. Repeat Step 3 with a dark colour;
6. In the CSS of your starter code:
   • Set the background-color of your body element to the second colour you copied.
7. Important! Use the Contrast Ration Checker to confirm that your colour selections have enough contrast.
8. Now try adding a third colour to the section element.