Johnston - Reading Notes - Home
Code 201, Foundations of Software Development
Class 11 - Reading Notes
Readings: Audio, Video, Images
Explain how the ability to use video and audio on the web has evolved since the early 2000s.
- Dial-up was the king, in the early 2000s. As a result, internet usage was governed by internet speed. Today, most users have access to higher internet speeds today.
Describe the use of the src and controls attributes in the <video> element.
- src: the src (source) attribute contains the path to the video you want embedded.
- controls: the inclusion of a way to start/stop the media, and the ability to make volume adjustments.
Why is it important to have fallback content inside the <video> element?
- Paragraphs, inside of a video tag, are called fallback content in the event the browser doesn't support the video.
Write a very short story where <audio> and <video> are characters.
- This is a short story about two friends named audio and video. Video specialized in displaying pictures with spoken word, while Audio could only speak - absent visual reinforcement. Though different, both excelled at reaching others, to communicate a message.
How does Grid layout differ from Flex?
- Flex changes, due to the content of the container. Grid types must be declared and CSS defines the elements.
Grid container, grid item, and grid line are a few important terms to understand when using Grid. Please describe these terms in a few sentences.
- Grid Container: the element on which the grid is applied. Direct parent of all grid items.
- Grid Item: the children (i.e. direct descendants) of the grid container.
- Grid Line: the dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column.
Besides making a site visually appealing across different screen sizes, why should developers make images responsive?
- Images start becoming distorted if you aren't utilizing a vector image. A more responsive site improves user accessibility, across all devices!.
Define the following <img> attributes srcset and sizes. Write an example of how they are used.
- srcset allows for a list of images to the browser can choose a lower quality image for lower network speeds, display types, or sizes. It also allows for a responsive design and a more dynamic page.
- sizes is the list of varying sizes for an image set. srcset will work with this attribute to determine the best possible browser image sizing.
How is srcset more helpful for responsive images than CSS or JavaScript?
- srcset is more useful because when loading a browser page, it pre-loads all images.
Things I want to know more about:
https://chrisjohnston1986.github.io/reading-notes/201class11reading