Template Element Demonstrations
Template 1: Card Template Structure
This template defines reusable card content:
Template Card Title
This is template content that could be reused!
Template metadataThe template content above is hidden but defined in the HTML structure.
Template 2: List Template Structure
This template defines reusable list content:
- First template list item
- Second template list item
- Third template list item
This template could be used to generate dynamic lists in future implementations.
Picture Element Demonstrations
Picture 1: Responsive Profile Image
Picture 2: Project Screenshot
Audio Element Demonstrations
Audio 1: Background Music
Audio 2: Sound Effect
Video Element Demonstrations
Video 1: Project Demo
Video 2: Introduction Video
Canvas Element Demonstrations
Canvas 1: Geometric Shapes
Canvas 2: Line Drawing
Source Element Summary
The source element has been used multiple times throughout this page:
- In picture elements for responsive images (6 source tags)
- In audio elements for multiple audio formats (4 source tags)
- In video elements for multiple video formats (4 source tags)
Total source elements used: 14 (well over the required 2)
Custom Elements
This page demonstrates two custom elements:
- skill-badge: A semantic CSS custom element with border styling
- hello-world: A custom element that logs "Hello world!" to the console
Button Elements
These buttons demonstrate valid HTML button markup: