Explain how the ability to use video and audio on the web has evolved since the early 2000s.
flash and silverlight were the first the first proprietary plug-in based technologies for audio and video online.
had security and accessibility issues
now obsolete
replaced by native HTML solutions <video> and <audio> elements and the availability of JS APIs for controlling them
Describe the use of the src and controls attributes in the
src contains the path to the video you want to embed
controls allows the user to control the video and audio playback
critical for users with epilepsy
you can also build out your own control interface using JS API
minimum requirements; start, stop and volume
Why is it important to have fallback content inside the
fallback content is displayed if the browser doesn’t support the <video>
Write a very short story where
<video> showed audio a moving picture that said, “Look at this…” and <audio> said, “I can’t hear you…”. So they decided to work together. As a team they took over the internet and succeeding in dumbing down 90% of the human population and did more to increase the wealth gap between the lower class, middle class, and upper class than any other technology before.
A Complete Guide to Grid
How does Grid layout differ from Flex?
grid deals in 2 dimensions, rows and columns
flex deals in 1 dimentsion, rows or columns
grid can handle items in a combination of cells
flex can only be in a single row or column in a straight line
grid is mores suitable for complex and responsive designs as it allows easy layout control for different screen sizes
flex is for simpler, one-dimensional designs that require items to be centered or aligned in a single row or column
grid allows complex nested structures
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.
container: defines the element as a grid container and establishes a new grid formatting context for its contents; grid or inline-grid
items: children of the container element these define the properties of the items within the grid
line: can be a name or number used to refer to a named grid line; automatically assigned positive numbers
Responsive Images
Besides making a site visually appealing across different screen sizes, why should developers make images responsive?
bandwidth, page load, and accessibility
Define the following attributes srcset and sizes. Write an example of how they are used.
srcset defines the set of images allowed the browser depending on screen size
sizes defines a set of media conditions and indicates what image size would be best to choose from when certain conditions are true
How is srcset more helpful for responsive images than CSS or JavaScript?
because browsers preload images before the main parser has started to load and interpret the page’s CSS and JavaScript