A developer saves the same photograph as both a JPEG and a PNG and is surprised the PNG version is noticeably larger.

A student needs photos for a class project and doesn’t have a budget for stock photography.

A designer creates a simple two-color animated icon and a separate, richly colored animated banner with smooth gradients, planning to save both as GIFs.

A demo lets a user drag a slider that changes the simulated browser font size, while comparing one element with px padding to another with rem padding. What should the user observe about the px-padded element as the slider moves?

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?

A student on a Linux laptop wants a full desktop image editor they can install for free, without relying on a browser tab.

A vintage clothing shop’s nav tags each have generous padding, but visitors complain that clicking just past the visible text does nothing. What’s the underlying cause?

A large site uses `var(–text)` and `var(–bg)` consistently across every component, and the design team wants to know if they’ll need to update each component individually to support dark mode.

A designer notices that stacking two boxes vertically with generous top/bottom margins produces a smaller gap than expected, but placing two boxes side by side with the same margin values produces the full combined gap. What best explains this difference?

A tea shop’s site has a nav link with a light green background and generous padding. A visitor asks whether that green area they see is really part of the link’s clickable box, or just decorative space around it. What’s accurate?