🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

Day 27: Picture Element

HTML Masterclass

Current Task

Serve different images based on screen size automatically.

Step 1: Create a <picture> tag.

Step 2: Inside, add a <source> with srcset="large.jpg" and media="(min-width: 800px)".

Step 3: Add a fallback <img> with src="small.jpg" and alt="Responsive".

index.html

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <img src="small.jpg" alt="Responsive" />
</picture>

* Hint: Correct characters turn green, incorrect ones turn red.

Live Preview

🖼️

Verify your code to see the preview