Topic 1 - HTML Responsive Web Design
Responsive web design creates web pages that look good on all screens, such as phones, tablets and laptops. A responsive web page will automatically respond to the screen changing size along with the elements in the web page. The elements will shrink, enlarge or resize, it's all up to the designer of how they want the elements to look when the size of the page will change.
Topic 2 - Reponsive images
Responsive images are images that can scale to any browser, if the CSS width for the image is set to 100% the image will be responsive and scale up and down. If the max width is set to 100% the image will scale down but never scale up to be larger to the original size. The HTML picture element allows you to define different images for different window sizes.
Topic 3 - CSS Media Queries
Media Queries can be used to check different things such as resolution, orientation of viewport, and width and height of viewport. Media queries are popular for tailoring style sheets to different devices. There are three media types which are all, print, screen, media queries consist of media type and can contain one or more media features.