Skip to main content

Phase 3 Exercises: Multimedia 🎨

Mentor's Note: These exercises help you master HTML media elements. You'll start with an image gallery, progress to audio/video playback, and finish by creating vector graphics with SVG — all without a single line of CSS or JavaScript!

📍 Prerequisites​

Before attempting these exercises, complete these lessons:

🎯 Exercise Flow​

🔰 Starter Challenge: Photo Gallery Page​

Title​

Create a Photo Gallery Page

Description​

Build a photo gallery page displaying 3 or more images, each wrapped in a <figure> element with a <figcaption> describing the image. This exercise teaches you how to properly associate captions with images using semantic HTML.

Learning Objectives​

  • Use <figure> to group image and caption
  • Use <figcaption> to provide descriptive text
  • Add multiple images with meaningful alt attributes
  • Structure a gallery layout using only HTML

HTML Starter Code​

<!DOCTYPE html>
<html>
<head>
    <title>My Photo Gallery</title>
</head>
<body>
    <h1>My Photo Gallery</h1>
    <p>A collection of my favorite memories</p>

    <figure>
        <img src="https://via.placeholder.com/300x200/FF6B6B/FFFFFF" alt="Sunset over the mountains">
        <figcaption>Sunset at the mountain viewpoint — a breathtaking end to the day.</figcaption>
    </figure>

    <figure>
        <img src="https://via.placeholder.com/300x200/4ECDC4/FFFFFF" alt="Beach waves crashing on shore">
        <figcaption>Waves crashing on the shore at sunrise.</figcaption>
    </figure>

    <figure>
        <img src="https://via.placeholder.com/300x200/45B7D1/FFFFFF" alt="Forest path covered in autumn leaves">
        <figcaption>Walking through the autumn forest.</figcaption>
    </figure>
</body>
</html>

Expected Output​

A browser page showing:

  • A main heading "My Photo Gallery"
  • 3 images arranged vertically (or side-by-side with future CSS)
  • Each image has a centered caption below it describing the scene
  • All images have proper alt text

⭐ Medium Challenge: Media Player Page​

Title​

Build a Media Player Page

Description​

Create a media player page that includes an audio player with controls, a video player with controls, and a responsive YouTube video embed using an <iframe>. This exercise covers embedding different media types and using fallback content for unsupported formats.

Learning Objectives​

  • Use <audio> with controls attribute and multiple <source> formats
  • Use <video> with controls, width, and height attributes
  • Embed a YouTube video using <iframe>
  • Provide fallback text for browsers that don't support the media

HTML Starter Code​

<!DOCTYPE html>
<html>
<head>
    <title>Media Player</title>
</head>
<body>
    <h1>Media Player</h1>

    <h2>Audio Player</h2>
    <audio controls>
        <source src="sample-audio.mp3" type="audio/mpeg">
        <source src="sample-audio.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>

    <h2>Video Player</h2>
    <video controls width="480" height="320">
        <source src="sample-video.mp4" type="video/mp4">
        <source src="sample-video.webm" type="video/webm">
        Your browser does not support the video element.
    </video>

    <h2>YouTube Video</h2>
    <iframe
        width="480"
        height="320"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
    </iframe>
</body>
</html>

Expected Output​

A browser page showing:

  • An audio player with play/pause, volume, and progress controls
  • A video player (480x320) with controls — replace the src with a real video file to test
  • A YouTube video embedded with fullscreen and playback controls
  • Fallback text visible if media elements are not supported

🏆 Hard Challenge: SVG Illustration Page​

Title​

Create an SVG Illustration Page

Description​

Build a page that showcases SVG graphics. Include at least 4 different SVG shapes (circle, rectangle, line, polygon, path), an inline SVG icon set (home, search, user icons), and a combined illustration. This exercise introduces vector graphics that scale perfectly at any resolution.

Learning Objectives​

  • Draw basic SVG shapes: <circle>, <rect>, <line>, <polygon>
  • Use SVG attributes: cx, cy, r, x, y, width, height, fill, stroke
  • Create an inline SVG icon set
  • Combine shapes into a cohesive illustration

HTML Starter Code​

<!DOCTYPE html>
<html>
<head>
    <title>SVG Illustration Showcase</title>
</head>
<body>
    <h1>SVG Illustration Showcase</h1>

    <h2>Basic Shapes</h2>
    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
        <!-- Circle -->
        <circle cx="60" cy="80" r="40" fill="#FF6B6B" stroke="#333" stroke-width="2"/>

        <!-- Rectangle -->
        <rect x="130" y="40" width="80" height="80" fill="#4ECDC4" stroke="#333" stroke-width="2"/>

        <!-- Rounded Rectangle -->
        <rect x="240" y="40" width="80" height="80" rx="10" fill="#45B7D1" stroke="#333" stroke-width="2"/>

        <!-- Line -->
        <line x1="30" y1="160" x2="370" y2="160" stroke="#333" stroke-width="2"/>
    </svg>

    <h2>Polygon Star</h2>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <polygon points="100,10 120,70 190,70 135,110 155,180 100,140 45,180 65,110 10,70 80,70"
                 fill="#FFD93D" stroke="#E6A800" stroke-width="2"/>
    </svg>

    <h2>Inline SVG Icon Set</h2>
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">
        <!-- Home icon -->
        <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
    </svg>

    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">
        <!-- Search icon -->
        <circle cx="11" cy="11" r="8"/>
        <path d="M21 21l-4.35-4.35"/>
    </svg>

    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">
        <!-- User icon -->
        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
        <circle cx="12" cy="7" r="4"/>
    </svg>

    <h2>Combined Illustration: House Scene</h2>
    <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
        <!-- Sky -->
        <rect width="400" height="300" fill="#E8F4FD"/>

        <!-- Sun -->
        <circle cx="340" cy="50" r="35" fill="#FFD93D"/>

        <!-- House body -->
        <rect x="120" y="140" width="160" height="120" fill="#A8E6CF" stroke="#333" stroke-width="2"/>

        <!-- Roof -->
        <polygon points="100,140 200,70 300,140" fill="#FF8B94" stroke="#333" stroke-width="2"/>

        <!-- Door -->
        <rect x="180" y="200" width="40" height="60" fill="#6C5CE7" stroke="#333" stroke-width="2"/>

        <!-- Windows -->
        <rect x="135" y="160" width="30" height="30" fill="#FFEAA7" stroke="#333" stroke-width="2"/>
        <rect x="235" y="160" width="30" height="30" fill="#FFEAA7" stroke="#333" stroke-width="2"/>

        <!-- Ground -->
        <rect x="0" y="260" width="400" height="40" fill="#81ECEC"/>
    </svg>
</body>
</html>

Expected Output​

A browser page showing:

  • 4 basic shapes (circle, rectangle, rounded rectangle, line)
  • A polygon star shape
  • 3 SVG icons (home, search, user) in a row
  • A combined house scene illustration with sky, sun, house body, roof, door, windows, and ground
  • All graphics scale without losing quality

💡 Tips for Success​

  • Use placeholder image services like via.placeholder.com or picsum.photos for testing
  • For audio/video, use free sample files from the web (e.g., sample-videos.com)
  • SVG attributes like fill, stroke, and stroke-width control appearance
  • Always set width and height on media elements to prevent layout shifts
  • Test YouTube embeds with real video IDs

← Back to HTML Exercises