Cloned:New Web Project

JPG: Thumbnail → Full-size

The Eiffel Tower viewed from the Trocadéro with fountains in the foreground. — Click the thumbnail to view the original high-resolution photo (opens in new tab).

PNG: Image aligned next to text

A white chess pawn icon (transparent PNG).

PNG supports transparency, which makes it ideal for icons and UI elements. Here, the pawn sits to the right and text flows around it. You can also achieve side-by-side layouts with Flexbox or Grid; float is shown to mimic classic article wrapping.

Accessibility note: meaningful images need descriptive alt text. Decorative images should use empty alt="".

GIF: Animated image

Animated GIF of the Earth rotating. — Animated GIFs can add motion to a page. Keep file sizes reasonable for performance.

Custom List Markers

Custom marker (list-style-image)

Images with captions and alt text
Audio and video with controls
Responsive thumbnails linking to originals

Marker icon sourced from an external URL per assignment directions.

Built-in markers (list-style-type)

disc
circle
square

Audio (with controls)

Short beep (OGG). Check your browser’s HTML5 audio support.

Video (with controls)

“Big Buck Bunny” (MP4). Make sure your browser supports HTML5 video.

Attribution & Sources

Eiffel Tower photo (JPG): “Eiffel Tower High Res” by Andyxox — Public Domain (PD-self). Original on Wikimedia Commons. Link used above points to the full-size source.
Chess pawn (PNG): “Chess pawn.png” — licensed CC BY-SA 3.0.
Rotating Earth (GIF): NASA Goddard — Public Domain (PD-USGov/NASA).
Audio: “Beep-09.ogg” — CC BY-SA 4.0.
Video: “Big Buck Bunny” — CC BY 3.0; hosted by Blender Foundation.
Custom bullet icon (list-style-image): star icon from Iconfinder (external URL).

Tip: validate your HTML/CSS before submitting (e.g., W3C Markup Validator & CSS Validator). Include a brief reflection with any fixes you made.