From 24457beb6e4bf3729f5af39e1ab7767f8034dde0 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 30 Dec 2025 12:37:54 +0100 Subject: [PATCH] docs: clarify that progress element is not self-closing Make explicit that requires a closing tag and can contain fallback text, unlike self-closing tags like . --- lessons/24-html-progress-meter.json | 2 +- lessons/de/24-html-progress-meter.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lessons/24-html-progress-meter.json b/lessons/24-html-progress-meter.json index 20cdc26..5dcfa6e 100644 --- a/lessons/24-html-progress-meter.json +++ b/lessons/24-html-progress-meter.json @@ -9,7 +9,7 @@ { "id": "progress-basic", "title": "Progress Bars", - "description": "The <progress> element shows task completion. Use value for current progress and max for the total.

The text inside is fallback for older browsers.", + "description": "The <progress> element shows task completion. Use value for current progress and max for the total.

Note: This is not a self-closing tag! Write <progress>...</progress> with fallback text inside for older browsers.", "task": "Create a progress bar showing 70% completion:
1. Add a <label> saying 'Download:'
2. Add a <progress> with value=\"70\" and max=\"100\"", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }", diff --git a/lessons/de/24-html-progress-meter.json b/lessons/de/24-html-progress-meter.json index dc31168..940097b 100644 --- a/lessons/de/24-html-progress-meter.json +++ b/lessons/de/24-html-progress-meter.json @@ -9,7 +9,7 @@ { "id": "progress-basic", "title": "Fortschrittsbalken", - "description": "Das <progress>-Element zeigt den Aufgabenfortschritt. Verwende value für den aktuellen Stand und max für das Maximum.

Der Text darin ist ein Fallback für ältere Browser.", + "description": "Das <progress>-Element zeigt den Aufgabenfortschritt. Verwende value für den aktuellen Stand und max für das Maximum.

Wichtig: Dies ist kein selbstschließendes Tag! Schreibe <progress>...</progress> mit einem Fallback-Text dazwischen für ältere Browser.", "task": "Erstelle einen Fortschrittsbalken mit 70% Fortschritt:
1. Füge ein <label> mit 'Download:' hinzu
2. Füge ein <progress> mit value=\"70\" und max=\"100\" hinzu", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",