Ask your AI Ask your AI to turn this code into a guided bug-finding exercise.
Claude ChatGPT I am reading "A hero image needs a square crop on phones and a wide crop on desktops. Which markup expresses that art-direction requirement?" on CodeWiki (https://codewiki.com/practice/mcq/frontend/checkpoint-4/checkpoint-4-fix/).
Context (verbatim from the page):
"""
A hero image needs a square crop on phones and a wide crop on desktops. Which markup expresses that art-direction requirement?
A `<picture>` element with media-conditioned `<source>` elements and an `<img>` fallback
One oversized `<img>` hidden with `overflow: hidden` at every width
A background image whose file name is changed by JavaScript after every resize event
"""
Introduce three subtle bugs into the example above and let me find them. Reveal each answer only after I have guessed.
Answer in English. Keep code examples in Frontend. Where you are unsure, say so.