Essential storage keeps sign-in and learning features working. Google Analytics measures visits; Microsoft Clarity records interactions to help us improve usability. Both are optional and stay off until you choose. Read our privacy policy.
Create a responsive picture card coding exercise | SovranCode
Study the question, then follow the complete answer and its reasoning.
01 · QUESTION
What should the HTML contain?
Build an article card whose image can use a wide source on large screens while retaining a dependable fallback image and accessible description.
Requirements
Place picture inside article
Add source with media=(min-width: 800px)
Give source a srcset value
Keep img as the final picture child
Give img non-empty alt, width=640, and height=800
Key idea
picture contains source candidates followed by one img fallback. source uses media and srcset; img still owns alt and dimensions.
02 · SOLUTION
Complete HTML answer
<article>
<h1>Meet the workshop mentor</h1>
<picture>
<source media="(min-width: 800px)" srcset="/images/mentor-wide.webp">
<img
src="/images/mentor-portrait.webp"
alt="Samira reviewing an HTML page with a learner"
width="640"
height="800"
>
</picture>
<p>Samira helps new developers build accessible web pages.</p>
</article>
03 · EXPLANATION
Why this solution works
picture lets the browser select an image source based on media conditions. source provides the wide-screen candidate, while the final img is the required fallback and owns the accessible alternative. Its dimensions reserve the correct aspect ratio before loading.
Concepts demonstrated
Use picture for art direction
Provide a dependable image fallback
Preserve accessibility across image sources
Why this pattern matters
Responsive imagery should not require every device to download the same crop. The picture element supports art direction by offering a wide composition when space allows, while the required img fallback keeps the content robust and carries the alternative text shared across source choices.
Solution walkthrough
The picture element groups all candidates for one conceptual image.
The source appears first and supplies a wide file when the viewport satisfies its media condition.
The img remains the final child so unsupported conditions and browsers retain a dependable fallback.
Alternative text and intrinsic dimensions belong on img because it is the image element rendered in the document.
Common mistakes to avoid
Omitting the fallback img
Putting alt on source instead of img
Using picture only to serve smaller files when srcset and sizes would express the need better
EXERCISE FAQ
Before you move on.
What does “Create a responsive picture card” teach?
This intermediate HTML exercise focuses on Use picture for art direction, Provide a dependable image fallback, Preserve accessibility across image sources. Its requirements define the exact behavior to implement before you write code.
How should I validate this HTML solution?
Start with the displayed example input and expected output, then test a boundary case suggested by the requirements. Edit the HTML, inspect the live preview, then run the checks before comparing your structure with the complete answer.
When should I open the reference solution?
Attempt Create a responsive picture card first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.
