Week 5

Notes

Images

• Images For the Web
• Image Optimization
• Web Graphics Usage
• Exercises: Graphics
• Free photography Sites
  • Unsplash
  • Death to Stock

Fonts on the Web

• Web Safe Fonts and Font Stacks
• Real Typefaces with @font-face
• Web Font Licensing and Embedding Services
• Exercises: Using web fonts

Homework

Reading

Required

Learning Web Design:

• Read Chapter 14:
  • pages 355-380: Start at beginning of chapter, stop at "Assigning Display Types", you may skip the exercise sections
• Read Chapter 9:
  • pages 131-137: Start of chapter, stop at "Adding SVG Images" - (Review)
• Read Chapter 23:
  • pages 641-654: Start at "Meet the Formats", stop at "The Performant WebP" - (Review)

Supplemental

• Selectutorial - CSS selectors, especially:
  • Inheritance
  • Cascade
  • What happens when conflicts occur?

• On font stacks
  • Best Fonts for the Web
  • 8 Definitive Web Font Stacks Article

Exercises

Class Website

Find a photo that you took on your phone to work with. It should be large (over 3000px wide). Link the original photo to a class 5 section on your course website. Work through the steps for optimizing the photo shown in Image Optimization.

• Link to an optimized version of the photo to the week 5 section of your class website
  • It should be 800px at it largest edge
  • It should be below 100 KB in file size

Recipe Book Site

Fix all images on your recipe book site:

• All images should display and have alt text
• All images should be optimized (exact size is up to you)

Create a logo or logotype if you haven't already:

• Add your own logo or logotype to each page.
• Make sure the logo links to the Recipe Book index page, on each page

Blog Assignment

No assignment this week. Use the extra time to ensure that you're caught up on your reading and your Class and Recipe Book websites look great.