Learn how srcset and sizes work in HTML. Understand width descriptors and pixel density descriptors, how to write the sizes attribute with media conditions and calc, how browsers choose a file, how to plan image widths, test results, and avoid common mistakes on CodeHarborHub.
Learn how to make HTML tables work on phones and small screens. Use scrolling containers, sticky columns, fluid widths, stacked card layouts, and priority columns, understand the accessibility trade-offs of each approach, and choose the right technique for your data on CodeHarborHub.
Make HTML video fit every screen: width and height attributes with max-width and height auto, the CSS aspect-ratio property, object-fit and object-position, responsive iframe embeds, preventing layout shift, saving data on mobile, vertical video, and common mistakes, with live resizable demos.
Learn the big picture of responsive images in HTML. Understand screen sizes and pixel density, flexible images with CSS, resolution switching with srcset, art direction with the picture element, fluid galleries with CSS grid, and how to test what the browser downloads on CodeHarborHub.
Learn how the HTML picture element works. Use source and img together to switch image formats with fallbacks, art direction with media queries, combine srcset and sizes, serve dark-mode images, and avoid common mistakes with AVIF, WebP and JPEG on CodeHarborHub.
Learn the viewport meta tag: why phones need it, what width=device-width and initial-scale=1 do, why you should never block zoom, safe-area settings for notched phones, and how it connects to responsive CSS. Includes a live viewport reader and a mobile page simulator.