reading-notes

🗒️ Class 11: Audio, Video, Images

Video and Audio content

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

  Online videos and audio was made possible by plug-in based technology like Flash and Silveright.

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

  The src attributes is similar to images and contains a path to the video. The controls is used to give users the ability to control the video and audio playback.

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

  Having the fallback content inside the <video> element is important.

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

A Complete Guide To Grid

• How does Grid layout differ from Flex?

  Grids are two-dimensional vs Flex which are one-dimensional

• 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 containers: the element that the grid is applied to. Grid items: direct descendent of the grid containers. Grid Lines: Horizontal and Vertical lines that makeup the structure of the grid

Responsive Images

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

  We should make images responsive so that they are not only visually appealing but also so that the image is completely visible and doesnt get cut off on the side.

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

  srcset: used to include multiple files with hints to the browser to pick the right one based on sizes. eg srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes: defines the media conditions followed by sizes in px to hint to the browser what image from the sourcset to use.

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

  its more helpful because it allows us to tell the browser what exact image to use for certain screen sizes vs letting it scale down and hoping the image works.

Lecture Notes

.setupGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; 
grid-template-rows: 1fr 1fr 1fr;
}

.gridPositioning{
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}