Glow up sites with Audio and Video
Explain how the ability to use video and audio on the web has evolved since the early 2000s.
Similar to the
<img>element we can now used<video>and<audio>to embed our media directly into the HTML. Prior to this, plugins such as Flash were used.
Describe the use of the src and controls attributes in the <video> element.
The
srcattribute works the same as it does with the<img>element by embedding a link to the video you are displaying. Thecontrolselement displays the browser’s default video control panel.
Why is it important to have fallback content inside the <video> element?
Some browsers don’t support the
<video>element. The fallback content is what will be displayed in the video’s stead.
Write a very short story where <audio> and <video> are characters.
Audio and Visual grew up as rvials in the small town of Sensoria. Visual liked to brag about their superior speediness… they could move at the speed of light after all. Audio bragged about their ability to rattle solid objects. One day, a new kid moved into town. Their name was Flavor, and they had all the other kids licked. The end.
How does Grid layout differ from Flex?
Flex is one-dimensional - you choose to display your elements in a flex row or column. Grid layout allows for positioning elements in two dimensio0ns by .
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.
A grid container is the parent element in which the grid container is nested. A grid item are any “first generation” or “direct descendent” child elements of the grid container. Grid lines are the horizontal or vertical boundaries of grid columns and rows.
Besides making a site visually appealing across different screen sizes, why should developers make images responsive?
One reason other than aesthetics would be to prevent unnecessary use of bandwidth. Devices with small displays do not need to load the same size images as those with larger displays.
Define the following <img> attributes srcset and sizes. Write an example of how they are used.
The
srcsetattribute is essentially the same as thesrcattribute, except that is allows for the multiple sources to be embedded at once for this situation where we are directing the browser to choose the most appropriately sized image for it’s display. Thesizesattribute is how we direct the browser to choose which image… essentailly, we give conditions based on viewport size.
How is srcset more helpful for responsive images than CSS or JavaScript?
*Images are downloaded before CSS and JS is read, so if we provided instructions to download a different img based on conditions provided in the JS or CSS we would end up with multiple images.
I think I’d like to spend more time getting better at last week’s topics. Need to figure how the JS debugger works in Chrome.