Class Eleven Notes (201)
Audio, Video, Images
Video and Audio
- Since the early 2000s, the audio/video were plugin-based technologies like flash and silverlight which are now obslete. Now the videos are HTML
<audio> and <video> elements that can be controlled using JS APS’s.
- The
<src> attribute specifies the path, and <control> attribute includes the browser’s own control interface, which at the minimumm can start/stop the media and adjust the volume
- The fallback content inside the
<video> element will be displayed when the <video> isn’t available
- Audio and videos are best friends, and when they get along, they create great harmonies, when they don’t get along, we may or may not be able to tell the full story.
A Guide to the Grid
- Grid differs from flex box as it’s 2-dimentional while flex box is only 1 dimentional
- Grid container is the element on which
display:grid is applied, and it applies to all the direct children of the container; grid item is applied to the item element but not its children; and grid line is the line that divides the structure of the grid it can be either horizontal(row) or vertical(column)
Responsive Imges
- A developer hould make images responsive because if the user’s screen is much narrower than how the webpage is designed, it may be come difficult to read the content and there will be art direction problem
- the
<img> attribute srcset defines a set of images that allows the browser to choose between; and sizes specifies what size the image is.
srcset is more helpful for responsive images than CSS or JS because it gives the browser a selection of images with pre-defined sizes, instead of manipulating it after the fact.
Things I want to know more about
- How do I manage rearrangement of images if the screen changes from a laptop to a phone?
Back to main page
References