reading-notes

Code Fellows 201

Using Images In HTML. Read Common Image Types and Choosing Image Formats.

The user is visually impaired, and is using a screen reader to read the web out to them. In fact, having alt text available to describe images is useful to most users.
Essentially, the key is to deliver a usable experience, even when the images can’t be seen. This ensures all users are not missing any of the content. Try turning off images in your browser and see how things look. You’ll soon realize how helpful alt text is if the image cannot be seen.

A better solution, is to use the HTML <figure> and <figcaption> elements. These are created for exactly this purpose: to provide a semantic container for figures, and to clearly link the figure to the caption.
The <figcaption> element tells browsers, and assistive technology that the caption describes the other content of the <figure> element.
- A figure doesn’t have to be an image. It is an independent unit of content that:
- Expresses your meaning in a compact, easy-to-grasp way.
- Could go in several places in the page’s linear flow.
- Provides essential information supporting the main text.
- A figure could be several images, a code snippet, audio, video, equations, a table, or something else.

WebP modern format for better performance and compression (especially for large images/animations)

Using Color in CSS. Styling HTML Text Elements

If we imagine laying elements of HTML like stacking a baseball card on top of a newspaper. Background is the newspaper and foreground is the baseball card

margin, padding, border, and content can all have background colors. Even with all black text, this would significantly draw attention to different areas of the webpage

Web safe fonts Speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called web safe fonts.
Most of the time, as web developers we want to have more specific control over the fonts used to display our text content. The problem is to find a way to know which font is available on the computer used to see our web pages. There is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (Windows, macOS, the most common Linux distributions, Android, and iOS).
The list of actual web safe fonts will change as operating systems evolve, but it’s reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the Microsoft Core fonts for the Web initiative in the late 90s and early 2000s):

font-size: adjusts the size of the font
font-weight: Sets how bold the text is. This has many values available in case you have many font variants available (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you’ll rarely use any of them except for normal and bold:
- normal, bold: Normal and bold font weight.
- lighter, bolder: Sets the current element’s boldness to be one step lighter or heavier than its parent element’s boldness.
- 100–900: Numeric boldness values that provide finer grained control than the above keywords, if needed.
font-style: Used to turn italic text on or off. Possible values are as follows (you’ll rarely use this, unless you want to turn some italic styling off for some reason):
- normal: Sets the text to the normal font (turns existing italics off).
- italic: Sets the text to use the italic version of the font, if available; if not, it will simulate italics with oblique instead.
- oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.