Blog

A developer sets `autoplay` on a “ element without adding `muted`, and is confused when the video doesn’t start playing automatically in most visitors’ browsers.

A site’s images occasionally fail to load due to a broken file path, and the developer wants users to at least see something meaningful in that case.

A flower shop wants its nav’s hover-triggered background color change to feel smooth rather than sudden. Which property, applied to the link’s background-color, achieves that per the deck’s example?

Aperture Photography Studio’s designer wants three side-by-side promotional panels — pricing, portfolio link, and contact info — arranged next to each other. A teammate suggests putting them in one table row as three cells. Why is CSS Grid or Flexbox generally the better fit here?

Detail Dynamics Car Care’s toolbar has a logo icon and a settings icon inside a `display: flex;` container, and needs the logo flush to the far left, the settings icon flush to the far right, with even space between them. Which `justify-content` value does exactly that?

A developer has written padding-top: 10px, padding-right: 10px, padding-bottom: 10px, and padding-left: 10px as four separate declarations on the same element, and wants to condense them into one line using shorthand. What single declaration is equivalent?

Willow Creek Wellness Spa wants its body paragraphs to look slightly lighter than the normal 400 weight, using a value like 320, on a variable font. Why does this work with a variable font when it might not with a traditional one?

Meridian Realty Group has a three-column layout — a sidebar, a main content area, and an ad panel — with the sidebar and ad panel set to `flex-grow: 0;` and the main content area set to `flex-grow: 1;`. When the browser window is widened, which column absorbs the extra space?

A tattoo parlor’s designer wants nav links where the entire button-like box responds to a click, matching what the deck calls essential for navigation usability. Which single change accomplishes this?

Vinyl Vault Record Shop gives three album cards `flex: 1;` inside a row container. What does that shorthand expand to, and what’s the visual result?