Reading-Notes

Reading Notes

Video and Audio Content

Explain how the ability to use video and audio on the web has evolved since the early 2000s.

We have made it past the proprietary plugin-based technologies. Now, luckily, we have the more simplistic and consistent HTML based tag elements, with the JavaScript to control them.

Describe the use of the src and controls attributes in the video element.

The source attribute provides a pathway to the video you want to embed, and the controls (pretty self explanatory) give the users a way to control the videos audio and visual playback.

Why is it important to have fallback content inside the video element?

The paragraph inside the video tag is called the ‘fallback content’ and if there is any issue with accessing the video due to the browser, for whatever reason, it provides an explanation of what is missing or a direct link to the video file so the user can access it in a different way.

Write a very short story where audio and video are characters.

no

A Complete Guide To Grid

How does Grid layout differ from Flex?

Flex is a one directionsl flow whereas grid is two dimesional and has a grid based layout system.

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 ‘display: grid’ is applied, this is the direct parent of all the grid items.
• Grid item: These are the children of 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.

Responsive Images

Besides making a site visually appealing across different screen sizes, why should developers make images responsive?

Sometimes an image holds important information that would be lost in translation between a desktop sie screen and a mobile device if the site is not responsive. It could potentially use up bandwith, which could be troublesome and unnecessary for a mobile user.

Define the following img attributes srcset and sizes. Write an example of how they are used.

These two tags give the computer an option depending on what the conditions are, srcset looks at what the size of the veiwport will be if it’s greater or lesser than ‘x’. Whatever the answer is, the size tag gives it the appropriately sized choice respective to the size of the viewport.

How is srcset more helpful for responsive images than CSS or JavaScript?

When trying to create a responsive environment, it is a wiser choice to begine by using the ‘srcset’ considering it would automatically run first anyway. Otherwise, it would be bogged down loading the inital large image before the JavaScript ran the test to see what size the veiwport was, only to find out it was smaller, therefore the site would also then have to load the smaller image, also but instead as well.

This site is open source. Improve this page.