Learn how the width and height attributes stop layout shift in HTML. Understand aspect ratio, how browsers reserve space, responsive sizing with CSS, the aspect-ratio property, high-density screens, and Cumulative Layout Shift on CodeHarborHub.
Learn how to lazy load images in HTML with the loading attribute. Understand which images to lazy load and which not to, protect your main image, reserve space with width and height, lazy load iframes, use IntersectionObserver, and measure the results on CodeHarborHub.
Learn which image format to use on the web. Compare JPEG, PNG, GIF, WebP, AVIF and SVG, understand lossy and lossless compression, transparency and animation, browser support, optimization tools, metadata privacy, and how to choose the best format 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 what belongs inside the HTML head element, what does not, and what the browser does when you break the rules. Includes a live parser lab that shows where the browser really puts each element, and a simulation of how script loading affects your page.
Learn the HTML link element: how it connects your page to stylesheets, icons, canonical addresses, translated versions, feeds, and performance hints like preload and preconnect. Includes a live stylesheet lab, a real link-tag checker, and an hreflang builder.
Learn the HTML script element: inline and external scripts, defer, async and type module, where to place scripts, data blocks like JSON-LD, noscript fallbacks, and how to load JavaScript safely. Includes a live loading-order experiment, a script tag checker, and a JSON data block demo.