Building Responsive HTML Videos with CSS
Design fluid video embeds that scale across devices using modern CSS ratio properties, container constraints, and wrapper techniques.
Design fluid video embeds that scale across devices using modern CSS ratio properties, container constraints, and wrapper techniques.
Learn best practices for embedding responsive, interactive geographic maps using iframe endpoints from Google Maps and OpenStreetMap.
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.
Configure the meta viewport tag to control layout scaling, viewport dimensions, and pinch-zoom behaviors on mobile devices.
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.
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.