Pudology HTML Learning Lab

1. Ordered List Experiment

Tag: <ol>

Purpose: Displays steps in a numbered order.

Pudology Example: How to Enjoy Your Pudding

1. Choose your favorite pudding flavor.
2. Keep your pudding refrigerated.
3. Enjoy it chilled!

Future use: Instructions for ordering, storing, or enjoying Pudology products.

2. Template Experiment

Tag: <template>

Purpose: Stores reusable HTML content without displaying it automatically.

Pudology Example: Reusable Pudding Card

The Vanilla Velvet card is stored in the template above, but it is intentionally hidden.

Future use: JavaScript could create pudding product cards from this template.

3. Span Experiment

Tag: <span>

Purpose: Groups specific words within a sentence without creating a new line.

Pudology Example: Highlighting Protein

Our Vanilla Velvet pudding contains 30g of protein per serving.

Future use: CSS could highlight the protein amount in green, while JavaScript could update nutritional information.

Note: The span looks like normal text until styling or functionality is added.

4. Div Experiment

Tag: <div>

Purpose: Groups multiple elements together without assigning a specific semantic meaning.

Pudology Example: Product Information Group

Future use: CSS could style this group as a product card with a background, border, and spacing.

5. Line Break Experiment

Tag: <br>

Purpose: Creates a line break without starting a new paragraph.

Pudology Example: Contact Information

Pudology
San Diego, California
Instagram: @enjoypudology

Future use: Displaying addresses or short contact details on multiple lines.

6. Italic Text Experiment

Tag: <i>

Purpose: Identifies text in an alternate voice or language.

Pudology Example: Italian Expression

At Pudology, we believe in buon appetito!

Future use: Displaying foreign-language expressions or special terms in product descriptions.

7. Bold Text Experiment

Tag: <b>

Purpose: Draws attention to text without adding importance.

Pudology Example: Featured Flavor

This week's featured flavor: Chocolate Peanut Butter

Future use: Highlighting product names, featured flavors, or keywords.

8. Noscript Experiment

Tag: <noscript>

Purpose: Provides alternative content when JavaScript is unavailable.

Pudology Example: Community Rewards

In the future, Pudology may have an interactive community rewards counter.

Future use: Keeping important information accessible when interactive features are unavailable.

9. SVG Experiment

Tag: <svg>

Purpose: Creates scalable graphics directly in HTML.

Pudology Example: Avocado Illustration

Future use: Creating scalable icons, illustrations, and decorative graphics for the Pudology website.

10. Iframe Experiment

Tag: <iframe>

Purpose: Embeds another webpage or HTML document.

Pudology Example: Featured Pudding Preview

Future use: Embedding maps, videos, or other content on the Pudology website.

11. Audio Experiment

Tag: <audio>

Purpose: Adds audio content to a webpage.

Pudology Example: Welcome Message

Future use: Sharing a welcome message, product stories, or customer testimonials.

12. Canvas Experiment

Tag: <canvas>

Purpose: Draws graphics using JavaScript.

Pudology Example: Avocado Green Circle

Future use: Creating interactive graphics and visualizing community milestones.

13. Holiday Highlight Custom Element

Purpose: Display special holiday announcements.

Future use: Highlighting Christmas, Valentine's Day, and other seasonal Pudology specials.

14. Video Experiment

Tags: <video> and <source>

Purpose: Display a video on a webpage.

Pudology Brand Video

Future use: Introducing Pudology to new customers.