reading-notes

Class 05 notes Images, Color, Text

Why is this important?

HTML

  1. A real world use case for alt is having alternative text describing a picture in your website so individuals who might use screen readers can understand what is being displayed.

  2. By adding the alt attribute^

  3. The figure element would be useful to create a container for the caption of an img in your website so the <figcaption> element isn’t randomly sitting on the page and provides more accessibility for individuals with screen readers. It is considered a semantic element.

  4. A GIF or Graphics Interchange Format is prefered for simple images and animations while SVG or Scalable Vector Graphics are preferred for icons, diagrams and UI elements that require a specific size.

  5. I would use PNG or a lossless WebP. If you want to maintain quality with your screenshots, lossless format is preferred.

CSS

  1. Foreground colors define the color of the actual text while the background color defines the color behind the text.

  2. I would start by utilizing some background colors on headings, nav, footer. Maybe even some background colors on elements like asides or lists and their headings as well. Followed by changing the text color to a darker grey instead of black, as well as utilizing some external icons for list items if he/she has them.

  3. You should consider how you want your website to be perceived and what the mood/personality of your website is and what it is geared towards. Use something more formal if it’s informational or want the more professional look and maybe use something less formal if it’s geared to children or a less serious topic.

  4. Font-size sets the actual size of the text for the element you are applying it to while font-weight changes how bold the text is and font-style italicizes the text or not.

  5. You can add spacing around the characters in an h1 by utilizing the letter-spacing property and the word-spacing property.

Things I want to know more about

In class lecture