From 027232f5e8fed8e4b0be2ea8dada65cdde7c9fdb Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Thu, 25 Dec 2025 15:55:26 +0100
Subject: [PATCH] fix: add kbd tags to validation messages for clarity

- Wrap HTML element names in <kbd> tags in all validation messages
- Apply consistent formatting to both English and German lessons
- Make hints clearer about which elements/attributes to use
- Fix mobile editor layout overflow issue
---
 lessons/20-html-elements.json            | 18 ++++++------
 lessons/21-html-forms-basic.json         | 24 ++++++++--------
 lessons/22-html-forms-validation.json    | 36 ++++++++++++------------
 lessons/23-html-details-summary.json     | 16 +++++------
 lessons/24-html-progress-meter.json      | 20 ++++++-------
 lessons/25-html-datalist.json            | 12 ++++----
 lessons/26-html-data-attributes.json     |  2 +-
 lessons/27-html-dialog.json              |  8 +++---
 lessons/28-html-forms-fieldset.json      | 18 ++++++------
 lessons/29-html-figure.json              | 18 ++++++------
 lessons/30-html-tables.json              | 22 +++++++--------
 lessons/31-html-marquee.json             | 12 ++++----
 lessons/32-html-svg.json                 | 18 ++++++------
 lessons/de/20-html-elements.json         | 18 ++++++------
 lessons/de/21-html-forms-basic.json      | 24 ++++++++--------
 lessons/de/22-html-forms-validation.json | 26 ++++++++---------
 lessons/de/23-html-details-summary.json  | 16 +++++------
 lessons/de/24-html-progress-meter.json   | 20 ++++++-------
 lessons/de/25-html-datalist.json         | 12 ++++----
 lessons/de/26-html-data-attributes.json  |  2 +-
 lessons/de/27-html-dialog.json           |  8 +++---
 lessons/de/28-html-forms-fieldset.json   | 18 ++++++------
 lessons/de/29-html-figure.json           | 18 ++++++------
 lessons/de/30-html-tables.json           | 22 +++++++--------
 lessons/de/31-html-marquee.json          | 12 ++++----
 lessons/de/32-html-svg.json              | 18 ++++++------
 src/main.css                             | 14 +++++++--
 27 files changed, 230 insertions(+), 222 deletions(-)

diff --git a/lessons/20-html-elements.json b/lessons/20-html-elements.json
index 940e326..9d668e3 100644
--- a/lessons/20-html-elements.json
+++ b/lessons/20-html-elements.json
@@ -21,12 +21,12 @@
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Add a <p> paragraph element"
+					"message": "Add a <kbd>&lt;p&gt;</kbd> paragraph element"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "p", "child": "strong" },
-					"message": "Wrap the word 'important' with <strong> tags"
+					"message": "Wrap the word 'important' with <kbd>&lt;strong&gt;</kbd> tags"
 				}
 			]
 		},
@@ -45,22 +45,22 @@
 				{
 					"type": "element_exists",
 					"value": "header",
-					"message": "Add a <header> element"
+					"message": "Add a <kbd>&lt;header&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "main",
-					"message": "Add a <main> element"
+					"message": "Add a <kbd>&lt;main&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "footer",
-					"message": "Add a <footer> element"
+					"message": "Add a <kbd>&lt;footer&gt;</kbd> element"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "header", "child": "h1" },
-					"message": "Add an <h1> heading inside your header"
+					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
 				}
 			]
 		},
@@ -79,17 +79,17 @@
 				{
 					"type": "element_exists",
 					"value": "div",
-					"message": "Wrap everything in a <div> element"
+					"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "span",
-					"message": "Add a <span> around the word 'highlighted'"
+					"message": "Add a <kbd>&lt;span&gt;</kbd> around the word 'highlighted'"
 				},
 				{
 					"type": "element_text",
 					"value": { "selector": "span", "text": "highlighted" },
-					"message": "The <span> should contain the word 'highlighted'"
+					"message": "The <kbd>&lt;span&gt;</kbd> should contain the word 'highlighted'"
 				}
 			]
 		}
diff --git a/lessons/21-html-forms-basic.json b/lessons/21-html-forms-basic.json
index 2df99a6..170ba41 100644
--- a/lessons/21-html-forms-basic.json
+++ b/lessons/21-html-forms-basic.json
@@ -21,51 +21,51 @@
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Wrap everything in a <form> element"
+					"message": "Wrap everything in a <kbd>&lt;form&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <label> for your input"
+					"message": "Add a <kbd>&lt;label&gt;</kbd> for your input"
 				},
 				{
 					"type": "element_exists",
 					"value": "input",
-					"message": "Add an <input> element"
+					"message": "Add an <kbd>&lt;input&gt;</kbd> element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "label", "attr": "for", "value": null },
-					"message": "Add a 'for' attribute to your label"
+					"message": "Add a <kbd>for</kbd> attribute to your label"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "id", "value": null },
-					"message": "Add an 'id' attribute to your input"
+					"message": "Add an <kbd>id</kbd> attribute to your input"
 				}
 			]
 		},
 		{
 			"id": "input-types",
 			"title": "Input Types",
-			"description": "Different input types provide appropriate keyboards and validation:<br><br><kbd>type=\"text\"</kbd> - General text<br><kbd>type=\"email\"</kbd> - Email with @ validation<br><kbd>type=\"password\"</kbd> - Hidden characters<br><kbd>type=\"number\"</kbd> - Numeric keyboard<br><kbd>type=\"tel\"</kbd> - Phone keyboard",
-			"task": "Create a login form with two fields:<br>1. An email field: <kbd>&lt;label for=\"email\"&gt;Email:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. A password field: <kbd>&lt;label for=\"password\"&gt;Password:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
+			"description": "Different input types provide appropriate keyboards and validation:<br><br><kbd>type=\"text\"</kbd> - General text<br><kbd>type=<kbd>\"email\"</kbd></kbd> - Email with @ validation<br><kbd>type=<kbd>\"password\"</kbd></kbd> - Hidden characters<br><kbd>type=\"number\"</kbd> - Numeric keyboard<br><kbd>type=\"tel\"</kbd> - Phone keyboard",
+			"task": "Create a login form with two fields:<br>1. An email field: <kbd>&lt;label for=\"email\"&gt;Email:&lt;/label&gt;</kbd> and <kbd>&lt;input type=<kbd>\"email\"</kbd> id=\"email\"&gt;</kbd><br>2. A password field: <kbd>&lt;label for=\"password\"&gt;Password:&lt;/label&gt;</kbd> and <kbd>&lt;input type=<kbd>\"password\"</kbd> id=\"password\"&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <!-- Add email and password inputs -->\n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
+			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "input[type='email']",
-					"message": "Add an input with type=\"email\""
+					"message": "Add an input with type=<kbd>\"email\"</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "input[type='password']",
-					"message": "Add an input with type=\"password\""
+					"message": "Add an input with type=<kbd>\"password\"</kbd>"
 				},
 				{
 					"type": "element_count",
@@ -82,8 +82,8 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <!-- Add submit button -->\n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">Sign In</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\">\n  \n  <!-- Add submit button -->\n</form>",
+			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\">\n  \n  <button type=\"submit\">Sign In</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
diff --git a/lessons/22-html-forms-validation.json b/lessons/22-html-forms-validation.json
index bd7baa5..b35bb8f 100644
--- a/lessons/22-html-forms-validation.json
+++ b/lessons/22-html-forms-validation.json
@@ -14,19 +14,19 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Submit</button>\n</form>",
-			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Submit</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email: *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Submit</button>\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email: *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Submit</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='name']", "attr": "required", "value": true },
-					"message": "Add the 'required' attribute to the name input"
+					"message": "Add the <kbd>required</kbd> attribute to the name input"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='email']", "attr": "required", "value": true },
-					"message": "Add the 'required' attribute to the email input"
+					"message": "Add the <kbd>required</kbd> attribute to the email input"
 				}
 			]
 		},
@@ -38,73 +38,73 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } small { display: block; font-size: 12px; color: #666; margin-top: 4px; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"solution": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
+			"solution": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
-					"message": "Add minlength=\"8\" to the password input"
+					"message": "Add <kbd>minlength</kbd>=\"8\" to the password input"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
-					"message": "Add maxlength=\"20\" to the password input"
+					"message": "Add <kbd>maxlength</kbd>=\"20\" to the password input"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[type='password']", "attr": "placeholder", "value": null },
-					"message": "Add a placeholder to hint what to enter"
+					"message": "Add a <kbd>placeholder</kbd> to hint what to enter"
 				}
 			]
 		},
 		{
 			"id": "complete-registration",
 			"title": "Complete Registration Form",
-			"description": "Build a complete registration form with all validation concepts:<br><br>- Required fields marked with *<br>- Email validation (use type=\"email\")<br>- Password with length constraints<br>- Terms checkbox (required)<br>- Submit button",
+			"description": "Build a complete registration form with all validation concepts:<br><br>- Required fields marked with *<br>- Email validation (use type=<kbd>\"email\"</kbd>)<br>- Password with length constraints<br>- Terms checkbox (required)<br>- Submit button",
 			"task": "Complete the registration form. Add required attributes, proper input types, and validation constraints.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } input[type='checkbox'] { width: auto; margin-right: 8px; vertical-align: middle; } label:has(input[type='checkbox']) { display: flex; align-items: center; font-weight: normal; } button { width: 100%; margin-top: 20px; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\">\n  \n  <label for=\"email\">Email *</label>\n  <input id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password *</label>\n  <input id=\"password\" name=\"password\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"solution": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Password *</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
+			"solution": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Password *</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "attribute_value",
 					"value": { "selector": "#fullname", "attr": "required", "value": true },
-					"message": "Make the full name field required"
+					"message": "Make the full name field <kbd>required</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "#email", "attr": "type", "value": "email" },
-					"message": "Set the email input type to 'email'"
+					"message": "Set the email input <kbd>type=\"email\"</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "#email", "attr": "required", "value": true },
-					"message": "Make the email field required"
+					"message": "Make the email field <kbd>required</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "#password", "attr": "type", "value": "password" },
-					"message": "Set the password input type to 'password'"
+					"message": "Set the password input <kbd>type=\"password\"</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "#password", "attr": "required", "value": true },
-					"message": "Make the password field required"
+					"message": "Make the password field <kbd>required</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "#password", "attr": "minlength", "value": "8" },
-					"message": "Add minlength=\"8\" to password"
+					"message": "Add <kbd>minlength</kbd>=\"8\" to password"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "#terms", "attr": "required", "value": true },
-					"message": "Make the terms checkbox required"
+					"message": "Make the terms checkbox <kbd>required</kbd>"
 				}
 			]
 		}
diff --git a/lessons/23-html-details-summary.json b/lessons/23-html-details-summary.json
index c67495f..b493640 100644
--- a/lessons/23-html-details-summary.json
+++ b/lessons/23-html-details-summary.json
@@ -21,22 +21,22 @@
 				{
 					"type": "element_exists",
 					"value": "details",
-					"message": "Add a <details> element"
+					"message": "Add a <kbd>&lt;details&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "summary",
-					"message": "Add a <summary> inside the details"
+					"message": "Add a <kbd>&lt;summary&gt;</kbd> inside the details"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "summary" },
-					"message": "The <summary> must be inside <details>"
+					"message": "The <kbd>&lt;summary&gt;</kbd> must be inside <kbd>&lt;details&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "p" },
-					"message": "Add a <p> inside <details> for the hidden content"
+					"message": "Add a <kbd>&lt;p&gt;</kbd> inside <kbd>&lt;details&gt;</kbd> for the hidden content"
 				}
 			]
 		},
@@ -55,7 +55,7 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "details", "attr": "open", "value": true },
-					"message": "Add the 'open' attribute to <details>"
+					"message": "Add the <kbd>open</kbd> attribute to <details>"
 				}
 			]
 		},
@@ -74,7 +74,7 @@
 				{
 					"type": "element_exists",
 					"value": "h1",
-					"message": "Add an <h1> heading for the FAQ title"
+					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading for the FAQ title"
 				},
 				{
 					"type": "element_count",
@@ -84,12 +84,12 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "summary", "min": 3 },
-					"message": "Each <details> needs a <summary> for the question"
+					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <summary> for the question"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "details p", "min": 3 },
-					"message": "Each <details> needs a <p> for the answer"
+					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <p> for the answer"
 				}
 			]
 		}
diff --git a/lessons/24-html-progress-meter.json b/lessons/24-html-progress-meter.json
index 8b6b24a..20cdc26 100644
--- a/lessons/24-html-progress-meter.json
+++ b/lessons/24-html-progress-meter.json
@@ -21,22 +21,22 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Add a <progress> element"
+					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "value", "value": "70" },
-					"message": "Set value=\"70\" on the progress element"
+					"message": "Set <kbd>value=</kbd>\"70\" on the progress element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "max", "value": "100" },
-					"message": "Set max=\"100\" on the progress element"
+					"message": "Set <kbd>max=</kbd>\"100\" on the progress element"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <label> for the progress bar"
+					"message": "Add a <kbd>&lt;label&gt;</kbd> for the progress bar"
 				}
 			]
 		},
@@ -55,12 +55,12 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Add a <progress> element"
+					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Add a <p> with loading text"
+					"message": "Add a <kbd>&lt;p&gt;</kbd> with loading text"
 				}
 			]
 		},
@@ -79,22 +79,22 @@
 				{
 					"type": "element_exists",
 					"value": "meter",
-					"message": "Add a <meter> element"
+					"message": "Add a <kbd>&lt;meter&gt;</kbd> element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "value", "value": "0.8" },
-					"message": "Set value=\"0.8\" on the meter"
+					"message": "Set <kbd>value=</kbd>\"0.8\" on the meter"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "low", "value": "0.2" },
-					"message": "Set low=\"0.2\" to define the low threshold"
+					"message": "Set <kbd>low=</kbd>\"0.2\" to define the low threshold"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <label> for the meter"
+					"message": "Add a <kbd>&lt;label&gt;</kbd> for the meter"
 				}
 			]
 		}
diff --git a/lessons/25-html-datalist.json b/lessons/25-html-datalist.json
index 0cb9c20..84e2fd5 100644
--- a/lessons/25-html-datalist.json
+++ b/lessons/25-html-datalist.json
@@ -21,12 +21,12 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Add a <datalist> element"
+					"message": "Add a <kbd>&lt;datalist&gt;</kbd> element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "browsers" },
-					"message": "Connect the input to datalist using list=\"browsers\""
+					"message": "Connect the input to datalist using <kbd>list=</kbd>\"browsers\""
 				},
 				{
 					"type": "element_count",
@@ -36,7 +36,7 @@
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <label> for the input"
+					"message": "Add a <kbd>&lt;label&gt;</kbd> for the input"
 				}
 			]
 		},
@@ -55,17 +55,17 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Add a <datalist> element"
+					"message": "Add a <kbd>&lt;datalist&gt;</kbd> element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "datalist", "attr": "id", "value": "countries" },
-					"message": "Set id=\"countries\" on the datalist"
+					"message": "Set <kbd>id=</kbd>\"countries\" on the datalist"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "countries" },
-					"message": "Connect the input using list=\"countries\""
+					"message": "Connect the input using <kbd>list=</kbd>\"countries\""
 				},
 				{
 					"type": "element_count",
diff --git a/lessons/26-html-data-attributes.json b/lessons/26-html-data-attributes.json
index e4f04cf..4fb9121 100644
--- a/lessons/26-html-data-attributes.json
+++ b/lessons/26-html-data-attributes.json
@@ -31,7 +31,7 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "article h2", "min": 2 },
-					"message": "Add an <h2> inside each article"
+					"message": "Add an <kbd>&lt;h2&gt;</kbd> inside each article"
 				}
 			]
 		},
diff --git a/lessons/27-html-dialog.json b/lessons/27-html-dialog.json
index 5dbfd9d..fc33f08 100644
--- a/lessons/27-html-dialog.json
+++ b/lessons/27-html-dialog.json
@@ -21,17 +21,17 @@
 				{
 					"type": "element_exists",
 					"value": "dialog",
-					"message": "Add a <dialog> element"
+					"message": "Add a <kbd>&lt;dialog&gt;</kbd> element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "dialog", "attr": "open", "value": true },
-					"message": "Add the 'open' attribute to show the dialog"
+					"message": "Add the <kbd>open</kbd> attribute to show the dialog"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog h2",
-					"message": "Add an <h2> heading inside the dialog"
+					"message": "Add an <kbd>&lt;h2&gt;</kbd> heading inside the dialog"
 				},
 				{
 					"type": "element_exists",
@@ -60,7 +60,7 @@
 				{
 					"type": "element_exists",
 					"value": "dialog[open]",
-					"message": "Add a <dialog> with the open attribute"
+					"message": "Add a <kbd>&lt;dialog&gt;</kbd> with the open attribute"
 				},
 				{
 					"type": "element_exists",
diff --git a/lessons/28-html-forms-fieldset.json b/lessons/28-html-forms-fieldset.json
index 7e6aace..4b71c48 100644
--- a/lessons/28-html-forms-fieldset.json
+++ b/lessons/28-html-forms-fieldset.json
@@ -15,23 +15,23 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Create a form with a fieldset group -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Personal Info</legend>\n    <label for=\"name\">Name:</label>\n    <input type=\"text\" id=\"name\" name=\"name\">\n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n  </fieldset>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Personal Info</legend>\n    <label for=\"name\">Name:</label>\n    <input type=\"text\" id=\"name\" name=\"name\">\n    <label for=\"email\">Email:</label>\n    <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  </fieldset>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Add a <form> element"
+					"message": "Add a <kbd>&lt;form&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Add a <fieldset> inside the form"
+					"message": "Add a <kbd>&lt;fieldset&gt;</kbd> inside the form"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Add a <legend> to title your fieldset"
+					"message": "Add a <kbd>&lt;legend&gt;</kbd> to title your fieldset"
 				},
 				{
 					"type": "element_count",
@@ -54,23 +54,23 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Create a contact form with textarea -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Contact Us</legend>\n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n    <label for=\"message\">Message:</label>\n    <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n    <button type=\"submit\">Send Message</button>\n  </fieldset>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Contact Us</legend>\n    <label for=\"email\">Email:</label>\n    <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n    <label for=\"message\">Message:</label>\n    <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n    <button type=\"submit\">Send Message</button>\n  </fieldset>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Add a <fieldset> element"
+					"message": "Add a <kbd>&lt;fieldset&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Add a <legend> element"
+					"message": "Add a <kbd>&lt;legend&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "textarea",
-					"message": "Add a <textarea> for the message"
+					"message": "Add a <kbd>&lt;textarea&gt;</kbd> for the message"
 				},
 				{
 					"type": "element_exists",
@@ -93,7 +93,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Create a form with multiple fieldsets -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Account Info</legend>\n    <label for=\"username\">Username:</label>\n    <input type=\"text\" id=\"username\" name=\"username\">\n    <label for=\"password\">Password:</label>\n    <input type=\"password\" id=\"password\" name=\"password\">\n  </fieldset>\n  <fieldset>\n    <legend>Preferences</legend>\n    <label for=\"bio\">Bio:</label>\n    <textarea id=\"bio\" name=\"bio\"></textarea>\n  </fieldset>\n  <button type=\"submit\">Register</button>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Account Info</legend>\n    <label for=\"username\">Username:</label>\n    <input type=\"text\" id=\"username\" name=\"username\">\n    <label for=\"password\">Password:</label>\n    <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\">\n  </fieldset>\n  <fieldset>\n    <legend>Preferences</legend>\n    <label for=\"bio\">Bio:</label>\n    <textarea id=\"bio\" name=\"bio\"></textarea>\n  </fieldset>\n  <button type=\"submit\">Register</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
diff --git a/lessons/29-html-figure.json b/lessons/29-html-figure.json
index 279f27e..6eeb8ee 100644
--- a/lessons/29-html-figure.json
+++ b/lessons/29-html-figure.json
@@ -21,17 +21,17 @@
 				{
 					"type": "element_exists",
 					"value": "figure",
-					"message": "Add a <figure> element"
+					"message": "Add a <kbd>&lt;figure&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "figure img",
-					"message": "Add an <img> inside the figure"
+					"message": "Add an <kbd>&lt;img&gt;</kbd> inside the figure"
 				},
 				{
 					"type": "element_exists",
 					"value": "figcaption",
-					"message": "Add a <figcaption> for the caption"
+					"message": "Add a <kbd>&lt;figcaption&gt;</kbd> for the caption"
 				}
 			]
 		},
@@ -50,22 +50,22 @@
 				{
 					"type": "element_exists",
 					"value": "figure",
-					"message": "Add a <figure> element"
+					"message": "Add a <kbd>&lt;figure&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "pre",
-					"message": "Add a <pre> element for preformatted text"
+					"message": "Add a <kbd>&lt;pre&gt;</kbd> element for preformatted text"
 				},
 				{
 					"type": "element_exists",
 					"value": "code",
-					"message": "Add a <code> element for the code"
+					"message": "Add a <kbd>&lt;code&gt;</kbd> element for the code"
 				},
 				{
 					"type": "element_exists",
 					"value": "figcaption",
-					"message": "Add a <figcaption> describing the code"
+					"message": "Add a <kbd>&lt;figcaption&gt;</kbd> describing the code"
 				}
 			]
 		},
@@ -84,7 +84,7 @@
 				{
 					"type": "element_exists",
 					"value": "figure",
-					"message": "Add a <figure> element"
+					"message": "Add a <kbd>&lt;figure&gt;</kbd> element"
 				},
 				{
 					"type": "element_count",
@@ -94,7 +94,7 @@
 				{
 					"type": "element_exists",
 					"value": "figcaption",
-					"message": "Add a <figcaption> for the gallery"
+					"message": "Add a <kbd>&lt;figcaption&gt;</kbd> for the gallery"
 				}
 			]
 		}
diff --git a/lessons/30-html-tables.json b/lessons/30-html-tables.json
index 54ed137..a60d32c 100644
--- a/lessons/30-html-tables.json
+++ b/lessons/30-html-tables.json
@@ -21,12 +21,12 @@
 				{
 					"type": "element_exists",
 					"value": "table",
-					"message": "Add a <table> element"
+					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "caption",
-					"message": "Add a <caption> for the table title"
+					"message": "Add a <kbd>&lt;caption&gt;</kbd> for the table title"
 				},
 				{
 					"type": "element_count",
@@ -55,22 +55,22 @@
 				{
 					"type": "element_exists",
 					"value": "table",
-					"message": "Add a <table> element"
+					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "caption",
-					"message": "Add a <caption> element"
+					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "thead",
-					"message": "Add a <thead> for the header section"
+					"message": "Add a <kbd>&lt;thead&gt;</kbd> for the header section"
 				},
 				{
 					"type": "element_exists",
 					"value": "tbody",
-					"message": "Add a <tbody> for the data rows"
+					"message": "Add a <kbd>&lt;tbody&gt;</kbd> for the data rows"
 				},
 				{
 					"type": "element_count",
@@ -94,27 +94,27 @@
 				{
 					"type": "element_exists",
 					"value": "table",
-					"message": "Add a <table> element"
+					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "caption",
-					"message": "Add a <caption> element"
+					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "thead",
-					"message": "Add a <thead> section"
+					"message": "Add a <kbd>&lt;thead&gt;</kbd> section"
 				},
 				{
 					"type": "element_exists",
 					"value": "tbody",
-					"message": "Add a <tbody> section"
+					"message": "Add a <kbd>&lt;tbody&gt;</kbd> section"
 				},
 				{
 					"type": "element_exists",
 					"value": "tfoot",
-					"message": "Add a <tfoot> section for the total"
+					"message": "Add a <kbd>&lt;tfoot&gt;</kbd> section for the total"
 				},
 				{
 					"type": "element_count",
diff --git a/lessons/31-html-marquee.json b/lessons/31-html-marquee.json
index e2ba33b..696ed3c 100644
--- a/lessons/31-html-marquee.json
+++ b/lessons/31-html-marquee.json
@@ -21,7 +21,7 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <marquee> element"
+					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
 				}
 			]
 		},
@@ -40,12 +40,12 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <marquee> element"
+					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
-					"message": "Add behavior=\"alternate\" to make it bounce"
+					"message": "Add <kbd>behavior=</kbd>\"alternate\" to make it bounce"
 				}
 			]
 		},
@@ -64,17 +64,17 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <marquee> element"
+					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "direction", "value": "left" },
-					"message": "Add direction=\"left\" for horizontal scrolling"
+					"message": "Add <kbd>direction=</kbd>\"left\" for horizontal scrolling"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
-					"message": "Add scrollamount=\"5\" for smooth speed"
+					"message": "Add <kbd>scrollamount=</kbd>\"5\" for smooth speed"
 				}
 			]
 		}
diff --git a/lessons/32-html-svg.json b/lessons/32-html-svg.json
index f10f4f6..b7c0a44 100644
--- a/lessons/32-html-svg.json
+++ b/lessons/32-html-svg.json
@@ -21,22 +21,22 @@
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <svg> element"
+					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "circle",
-					"message": "Add a <circle> element inside the SVG"
+					"message": "Add a <kbd>&lt;circle&gt;</kbd> element inside the SVG"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cx", "value": "100" },
-					"message": "Set cx=\"100\" for the circle's horizontal center"
+					"message": "Set <kbd>cx=</kbd>\"100\" for the circle's horizontal center"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cy", "value": "100" },
-					"message": "Set cy=\"100\" for the circle's vertical center"
+					"message": "Set <kbd>cy=</kbd>\"100\" for the circle's vertical center"
 				}
 			]
 		},
@@ -55,17 +55,17 @@
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <svg> element"
+					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "rect",
-					"message": "Add a <rect> element"
+					"message": "Add a <kbd>&lt;rect&gt;</kbd> element"
 				},
 				{
 					"type": "element_exists",
 					"value": "line",
-					"message": "Add a <line> element"
+					"message": "Add a <kbd>&lt;line&gt;</kbd> element"
 				}
 			]
 		},
@@ -84,7 +84,7 @@
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <svg> element"
+					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
 				},
 				{
 					"type": "element_count",
@@ -94,7 +94,7 @@
 				{
 					"type": "element_exists",
 					"value": "line",
-					"message": "Add a <line> for the smile"
+					"message": "Add a <kbd>&lt;line&gt;</kbd> for the smile"
 				}
 			]
 		}
diff --git a/lessons/de/20-html-elements.json b/lessons/de/20-html-elements.json
index 3e48306..dc9ad7e 100644
--- a/lessons/de/20-html-elements.json
+++ b/lessons/de/20-html-elements.json
@@ -21,12 +21,12 @@
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Füge ein <p> Absatz-Element hinzu"
+					"message": "Füge ein <kbd>&lt;p&gt;</kbd> Absatz-Element hinzu"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "p", "child": "strong" },
-					"message": "Umschließe das Wort 'wichtigen' mit <strong>-Tags"
+					"message": "Umschließe das Wort 'wichtigen' mit <kbd>&lt;strong&gt;</kbd>-Tags"
 				}
 			]
 		},
@@ -45,22 +45,22 @@
 				{
 					"type": "element_exists",
 					"value": "header",
-					"message": "Füge ein <header>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;header&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "main",
-					"message": "Füge ein <main>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;main&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "footer",
-					"message": "Füge ein <footer>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;footer&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "header", "child": "h1" },
-					"message": "Füge eine <h1>-Überschrift in deinem Header hinzu"
+					"message": "Füge eine <kbd>&lt;h1&gt;</kbd>-Überschrift in deinem Header hinzu"
 				}
 			]
 		},
@@ -79,17 +79,17 @@
 				{
 					"type": "element_exists",
 					"value": "div",
-					"message": "Umschließe alles mit einem <div>-Element"
+					"message": "Umschließe alles mit einem <kbd>&lt;div&gt;</kbd>-Element"
 				},
 				{
 					"type": "element_exists",
 					"value": "span",
-					"message": "Füge ein <span> um das Wort 'hervorgehoben' hinzu"
+					"message": "Füge ein <kbd>&lt;span&gt;</kbd> um das Wort 'hervorgehoben' hinzu"
 				},
 				{
 					"type": "element_text",
 					"value": { "selector": "span", "text": "hervorgehoben" },
-					"message": "Das <span> sollte das Wort 'hervorgehoben' enthalten"
+					"message": "Das <kbd>&lt;span&gt;</kbd> sollte das Wort 'hervorgehoben' enthalten"
 				}
 			]
 		}
diff --git a/lessons/de/21-html-forms-basic.json b/lessons/de/21-html-forms-basic.json
index bf64118..66c92e1 100644
--- a/lessons/de/21-html-forms-basic.json
+++ b/lessons/de/21-html-forms-basic.json
@@ -21,51 +21,51 @@
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Umschließe alles mit einem <form>-Element"
+					"message": "Umschließe alles mit einem <kbd>&lt;form&gt;</kbd>-Element"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Füge ein <label> für deine Eingabe hinzu"
+					"message": "Füge ein <kbd>&lt;label&gt;</kbd> für deine Eingabe hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "input",
-					"message": "Füge ein <input>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;input&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "label", "attr": "for", "value": null },
-					"message": "Füge ein 'for'-Attribut zu deinem Label hinzu"
+					"message": "Füge ein <kbd>for</kbd>-Attribut zu deinem Label hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "id", "value": null },
-					"message": "Füge ein 'id'-Attribut zu deiner Eingabe hinzu"
+					"message": "Füge ein <kbd>id</kbd>-Attribut zu deiner Eingabe hinzu"
 				}
 			]
 		},
 		{
 			"id": "input-types",
 			"title": "Eingabetypen",
-			"description": "Verschiedene Eingabetypen bieten passende Tastaturen und Validierung:<br><br><kbd>type=\"text\"</kbd> - Allgemeiner Text<br><kbd>type=\"email\"</kbd> - E-Mail mit @-Validierung<br><kbd>type=\"password\"</kbd> - Versteckte Zeichen<br><kbd>type=\"number\"</kbd> - Numerische Tastatur<br><kbd>type=\"tel\"</kbd> - Telefon-Tastatur",
-			"task": "Erstelle ein Anmeldeformular mit zwei Feldern:<br>1. Ein E-Mail-Feld: <kbd>&lt;label for=\"email\"&gt;E-Mail:&lt;/label&gt;</kbd> und <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. Ein Passwort-Feld: <kbd>&lt;label for=\"password\"&gt;Passwort:&lt;/label&gt;</kbd> und <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
+			"description": "Verschiedene Eingabetypen bieten passende Tastaturen und Validierung:<br><br><kbd>type=\"text\"</kbd> - Allgemeiner Text<br><kbd>type=<kbd>\"email\"</kbd></kbd> - E-Mail mit @-Validierung<br><kbd>type=<kbd>\"password\"</kbd></kbd> - Versteckte Zeichen<br><kbd>type=\"number\"</kbd> - Numerische Tastatur<br><kbd>type=\"tel\"</kbd> - Telefon-Tastatur",
+			"task": "Erstelle ein Anmeldeformular mit zwei Feldern:<br>1. Ein E-Mail-Feld: <kbd>&lt;label for=\"email\"&gt;E-Mail:&lt;/label&gt;</kbd> und <kbd>&lt;input type=<kbd>\"email\"</kbd> id=\"email\"&gt;</kbd><br>2. Ein Passwort-Feld: <kbd>&lt;label for=\"password\"&gt;Passwort:&lt;/label&gt;</kbd> und <kbd>&lt;input type=<kbd>\"password\"</kbd> id=\"password\"&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <!-- Füge E-Mail- und Passwort-Eingaben hinzu -->\n</form>",
-			"solution": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
+			"solution": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "input[type='email']",
-					"message": "Füge eine Eingabe mit type=\"email\" hinzu"
+					"message": "Füge eine Eingabe mit type=<kbd>\"email\"</kbd> hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "input[type='password']",
-					"message": "Füge eine Eingabe mit type=\"password\" hinzu"
+					"message": "Füge eine Eingabe mit type=<kbd>\"password\"</kbd> hinzu"
 				},
 				{
 					"type": "element_count",
@@ -82,8 +82,8 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <!-- Füge Absende-Button hinzu -->\n</form>",
-			"solution": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">Anmelden</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\">\n  \n  <!-- Füge Absende-Button hinzu -->\n</form>",
+			"solution": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\">\n  \n  <button type=\"submit\">Anmelden</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
diff --git a/lessons/de/22-html-forms-validation.json b/lessons/de/22-html-forms-validation.json
index 60251cd..4ffd7f6 100644
--- a/lessons/de/22-html-forms-validation.json
+++ b/lessons/de/22-html-forms-validation.json
@@ -14,19 +14,19 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">E-Mail: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
-			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">E-Mail: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">E-Mail: *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">E-Mail: *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='name']", "attr": "required", "value": true },
-					"message": "Füge required zum Namensfeld hinzu"
+					"message": "Füge <kbd>required</kbd> zum Namensfeld hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='email']", "attr": "required", "value": true },
-					"message": "Füge required zum E-Mail-Feld hinzu"
+					"message": "Füge <kbd>required</kbd> zum E-Mail-Feld hinzu"
 				}
 			]
 		},
@@ -38,37 +38,37 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } small { display: block; font-size: 12px; color: #666; margin-top: 4px; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Muss 8-20 Zeichen lang sein</small>\n  \n  <button type=\"submit\">Konto erstellen</button>\n</form>",
-			"solution": "<form>\n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Passwort eingeben\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Muss 8-20 Zeichen lang sein</small>\n  \n  <button type=\"submit\">Konto erstellen</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"password\">Passwort:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Muss 8-20 Zeichen lang sein</small>\n  \n  <button type=\"submit\">Konto erstellen</button>\n</form>",
+			"solution": "<form>\n  <label for=\"password\">Passwort:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Passwort eingeben\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Muss 8-20 Zeichen lang sein</small>\n  \n  <button type=\"submit\">Konto erstellen</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
-					"message": "Füge minlength=\"8\" zum Passwort hinzu"
+					"message": "Füge <kbd>minlength</kbd>=\"8\" zum Passwort hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
-					"message": "Füge maxlength=\"20\" zum Passwort hinzu"
+					"message": "Füge <kbd>maxlength</kbd>=\"20\" zum Passwort hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[type='password']", "attr": "placeholder", "value": null },
-					"message": "Füge einen Placeholder hinzu, der andeutet, was einzugeben ist"
+					"message": "Füge einen <kbd>placeholder</kbd> hinzu, der andeutet, was einzugeben ist"
 				}
 			]
 		},
 		{
 			"id": "complete-registration",
 			"title": "Vollständiges Registrierungsformular",
-			"description": "Erstelle ein vollständiges Registrierungsformular mit allen Validierungskonzepten:<br><br>- Pflichtfelder mit * markiert<br>- E-Mail-Validierung (type=\"email\" verwenden)<br>- Passwort mit Längenbeschränkungen<br>- AGB-Checkbox (Pflichtfeld)<br>- Absende-Button",
-			"task": "Vervollständige das Registrierungsformular. Füge required-Attribute, passende Eingabetypen und Validierungsbeschränkungen hinzu.",
+			"description": "Erstelle ein vollständiges Registrierungsformular mit allen Validierungskonzepten:<br><br>- Pflichtfelder mit * markiert<br>- E-Mail-Validierung (type=<kbd>\"email\"</kbd> verwenden)<br>- Passwort mit Längenbeschränkungen<br>- AGB-Checkbox (Pflichtfeld)<br>- Absende-Button",
+			"task": "Vervollständige das Registrierungsformular. Füge <kbd>required</kbd>-Attribute, passende Eingabetypen und Validierungsbeschränkungen hinzu.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } input[type='checkbox'] { width: auto; margin-right: 8px; vertical-align: middle; } label:has(input[type='checkbox']) { display: flex; align-items: center; font-weight: normal; } button { width: 100%; margin-top: 20px; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <h2>Konto erstellen</h2>\n  \n  <label for=\"fullname\">Vollständiger Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\">\n  \n  <label for=\"email\">E-Mail *</label>\n  <input id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Passwort *</label>\n  <input id=\"password\" name=\"password\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n    Ich stimme den Nutzungsbedingungen zu *\n  </label>\n  \n  <button type=\"submit\">Registrieren</button>\n</form>",
-			"solution": "<form>\n  <h2>Konto erstellen</h2>\n  \n  <label for=\"fullname\">Vollständiger Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">E-Mail *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Passwort *</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    Ich stimme den Nutzungsbedingungen zu *\n  </label>\n  \n  <button type=\"submit\">Registrieren</button>\n</form>",
+			"solution": "<form>\n  <h2>Konto erstellen</h2>\n  \n  <label for=\"fullname\">Vollständiger Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">E-Mail *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Passwort *</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    Ich stimme den Nutzungsbedingungen zu *\n  </label>\n  \n  <button type=\"submit\">Registrieren</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -99,7 +99,7 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "#password", "attr": "minlength", "value": "8" },
-					"message": "Füge minlength=\"8\" zum Passwort hinzu"
+					"message": "Füge <kbd>minlength</kbd>=\"8\" zum Passwort hinzu"
 				},
 				{
 					"type": "attribute_value",
diff --git a/lessons/de/23-html-details-summary.json b/lessons/de/23-html-details-summary.json
index 2555024..b4c32aa 100644
--- a/lessons/de/23-html-details-summary.json
+++ b/lessons/de/23-html-details-summary.json
@@ -21,22 +21,22 @@
 				{
 					"type": "element_exists",
 					"value": "details",
-					"message": "Füge ein <details>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;details&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "summary",
-					"message": "Füge ein <summary> innerhalb von details hinzu"
+					"message": "Füge ein <kbd>&lt;summary&gt;</kbd> innerhalb von details hinzu"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "summary" },
-					"message": "Das <summary> muss innerhalb von <details> sein"
+					"message": "Das <kbd>&lt;summary&gt;</kbd> muss innerhalb von <details> sein"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "p" },
-					"message": "Füge ein <p> innerhalb von <details> für den versteckten Inhalt hinzu"
+					"message": "Füge ein <kbd>&lt;p&gt;</kbd> innerhalb von <details> für den versteckten Inhalt hinzu"
 				}
 			]
 		},
@@ -55,7 +55,7 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "details", "attr": "open", "value": true },
-					"message": "Füge das 'open'-Attribut zu <details> hinzu"
+					"message": "Füge das <kbd>open</kbd>-Attribut zu <details> hinzu"
 				}
 			]
 		},
@@ -74,7 +74,7 @@
 				{
 					"type": "element_exists",
 					"value": "h1",
-					"message": "Füge eine <h1>-Überschrift für den FAQ-Titel hinzu"
+					"message": "Füge eine <kbd>&lt;h1&gt;</kbd>-Überschrift für den FAQ-Titel hinzu"
 				},
 				{
 					"type": "element_count",
@@ -84,12 +84,12 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "summary", "min": 3 },
-					"message": "Jedes <details> braucht ein <summary> für die Frage"
+					"message": "Jedes <kbd>&lt;details&gt;</kbd> braucht ein <kbd>&lt;summary&gt;</kbd> für die Frage"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "details p", "min": 3 },
-					"message": "Jedes <details> braucht ein <p> für die Antwort"
+					"message": "Jedes <kbd>&lt;details&gt;</kbd> braucht ein <kbd>&lt;p&gt;</kbd> für die Antwort"
 				}
 			]
 		}
diff --git a/lessons/de/24-html-progress-meter.json b/lessons/de/24-html-progress-meter.json
index 5d8773b..dc31168 100644
--- a/lessons/de/24-html-progress-meter.json
+++ b/lessons/de/24-html-progress-meter.json
@@ -21,22 +21,22 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Füge ein <progress>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;progress&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "value", "value": "70" },
-					"message": "Setze value=\"70\" beim Progress-Element"
+					"message": "Setze <kbd>value=</kbd>\"70\" beim Progress-Element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "max", "value": "100" },
-					"message": "Setze max=\"100\" beim Progress-Element"
+					"message": "Setze <kbd>max=</kbd>\"100\" beim Progress-Element"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Füge ein <label> für den Fortschrittsbalken hinzu"
+					"message": "Füge ein <kbd>&lt;label&gt;</kbd> für den Fortschrittsbalken hinzu"
 				}
 			]
 		},
@@ -55,12 +55,12 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Füge ein <progress>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;progress&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Füge ein <p> mit Ladetext hinzu"
+					"message": "Füge ein <kbd>&lt;p&gt;</kbd> mit Ladetext hinzu"
 				}
 			]
 		},
@@ -79,22 +79,22 @@
 				{
 					"type": "element_exists",
 					"value": "meter",
-					"message": "Füge ein <meter>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;meter&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "value", "value": "0.8" },
-					"message": "Setze value=\"0.8\" beim Meter"
+					"message": "Setze <kbd>value=</kbd>\"0.8\" beim Meter"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "low", "value": "0.2" },
-					"message": "Setze low=\"0.2\", um den niedrigen Schwellenwert zu definieren"
+					"message": "Setze <kbd>low=</kbd>\"0.2\", um den niedrigen Schwellenwert zu definieren"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Füge ein <label> für das Meter hinzu"
+					"message": "Füge ein <kbd>&lt;label&gt;</kbd> für das Meter hinzu"
 				}
 			]
 		}
diff --git a/lessons/de/25-html-datalist.json b/lessons/de/25-html-datalist.json
index 96ed029..e460191 100644
--- a/lessons/de/25-html-datalist.json
+++ b/lessons/de/25-html-datalist.json
@@ -21,12 +21,12 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Füge ein <datalist>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;datalist&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "browsers" },
-					"message": "Verbinde das Eingabefeld mit der Datalist über list=\"browsers\""
+					"message": "Verbinde das Eingabefeld mit der Datalist über <kbd>list=</kbd>\"browsers\""
 				},
 				{
 					"type": "element_count",
@@ -36,7 +36,7 @@
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Füge ein <label> für die Eingabe hinzu"
+					"message": "Füge ein <kbd>&lt;label&gt;</kbd> für die Eingabe hinzu"
 				}
 			]
 		},
@@ -55,17 +55,17 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Füge ein <datalist>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;datalist&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "datalist", "attr": "id", "value": "countries" },
-					"message": "Setze id=\"countries\" bei der Datalist"
+					"message": "Setze <kbd>id=</kbd>\"countries\" bei der Datalist"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "countries" },
-					"message": "Verbinde das Eingabefeld über list=\"countries\""
+					"message": "Verbinde das Eingabefeld über <kbd>list=</kbd>\"countries\""
 				},
 				{
 					"type": "element_count",
diff --git a/lessons/de/26-html-data-attributes.json b/lessons/de/26-html-data-attributes.json
index ccceff2..4ca3d72 100644
--- a/lessons/de/26-html-data-attributes.json
+++ b/lessons/de/26-html-data-attributes.json
@@ -31,7 +31,7 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "article h2", "min": 2 },
-					"message": "Füge ein <h2> in jeden Article ein"
+					"message": "Füge ein <kbd>&lt;h2&gt;</kbd> in jeden Article ein"
 				}
 			]
 		},
diff --git a/lessons/de/27-html-dialog.json b/lessons/de/27-html-dialog.json
index 1bbb62f..027b111 100644
--- a/lessons/de/27-html-dialog.json
+++ b/lessons/de/27-html-dialog.json
@@ -21,17 +21,17 @@
 				{
 					"type": "element_exists",
 					"value": "dialog",
-					"message": "Füge ein <dialog>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;dialog&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "dialog", "attr": "open", "value": true },
-					"message": "Füge das 'open'-Attribut hinzu, um den Dialog anzuzeigen"
+					"message": "Füge das <kbd>open</kbd>-Attribut hinzu, um den Dialog anzuzeigen"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog h2",
-					"message": "Füge eine <h2>-Überschrift im Dialog hinzu"
+					"message": "Füge eine <kbd>&lt;h2&gt;</kbd>-Überschrift im Dialog hinzu"
 				},
 				{
 					"type": "element_exists",
@@ -60,7 +60,7 @@
 				{
 					"type": "element_exists",
 					"value": "dialog[open]",
-					"message": "Füge ein <dialog> mit dem open-Attribut hinzu"
+					"message": "Füge ein <kbd>&lt;dialog&gt;</kbd> mit dem open-Attribut hinzu"
 				},
 				{
 					"type": "element_exists",
diff --git a/lessons/de/28-html-forms-fieldset.json b/lessons/de/28-html-forms-fieldset.json
index c54885c..8b8365e 100644
--- a/lessons/de/28-html-forms-fieldset.json
+++ b/lessons/de/28-html-forms-fieldset.json
@@ -15,23 +15,23 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Erstelle ein Formular mit einer Fieldset-Gruppe -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Persönliche Daten</legend>\n    <label for=\"name\">Name:</label>\n    <input type=\"text\" id=\"name\" name=\"name\">\n    <label for=\"email\">E-Mail:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n  </fieldset>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Persönliche Daten</legend>\n    <label for=\"name\">Name:</label>\n    <input type=\"text\" id=\"name\" name=\"name\">\n    <label for=\"email\">E-Mail:</label>\n    <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  </fieldset>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Füge ein <form>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;form&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Füge ein <fieldset> im Formular hinzu"
+					"message": "Füge ein <kbd>&lt;fieldset&gt;</kbd> im Formular hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Füge ein <legend> für den Titel hinzu"
+					"message": "Füge ein <kbd>&lt;legend&gt;</kbd> für den Titel hinzu"
 				},
 				{
 					"type": "element_count",
@@ -54,23 +54,23 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Erstelle ein Kontaktformular mit Textarea -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Kontaktiere uns</legend>\n    <label for=\"email\">E-Mail:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n    <label for=\"message\">Nachricht:</label>\n    <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n    <button type=\"submit\">Nachricht senden</button>\n  </fieldset>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Kontaktiere uns</legend>\n    <label for=\"email\">E-Mail:</label>\n    <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n    <label for=\"message\">Nachricht:</label>\n    <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n    <button type=\"submit\">Nachricht senden</button>\n  </fieldset>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Füge ein <fieldset>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;fieldset&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Füge ein <legend>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;legend&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "textarea",
-					"message": "Füge eine <textarea> für die Nachricht hinzu"
+					"message": "Füge eine <kbd>&lt;textarea&gt;</kbd> für die Nachricht hinzu"
 				},
 				{
 					"type": "element_exists",
@@ -93,7 +93,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Erstelle ein Formular mit mehreren Fieldsets -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Kontodaten</legend>\n    <label for=\"username\">Benutzername:</label>\n    <input type=\"text\" id=\"username\" name=\"username\">\n    <label for=\"password\">Passwort:</label>\n    <input type=\"password\" id=\"password\" name=\"password\">\n  </fieldset>\n  <fieldset>\n    <legend>Einstellungen</legend>\n    <label for=\"bio\">Bio:</label>\n    <textarea id=\"bio\" name=\"bio\"></textarea>\n  </fieldset>\n  <button type=\"submit\">Registrieren</button>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Kontodaten</legend>\n    <label for=\"username\">Benutzername:</label>\n    <input type=\"text\" id=\"username\" name=\"username\">\n    <label for=\"password\">Passwort:</label>\n    <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\">\n  </fieldset>\n  <fieldset>\n    <legend>Einstellungen</legend>\n    <label for=\"bio\">Bio:</label>\n    <textarea id=\"bio\" name=\"bio\"></textarea>\n  </fieldset>\n  <button type=\"submit\">Registrieren</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
diff --git a/lessons/de/29-html-figure.json b/lessons/de/29-html-figure.json
index 430c693..aa0189b 100644
--- a/lessons/de/29-html-figure.json
+++ b/lessons/de/29-html-figure.json
@@ -21,17 +21,17 @@
 				{
 					"type": "element_exists",
 					"value": "figure",
-					"message": "Füge ein <figure>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;figure&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "figure img",
-					"message": "Füge ein <img> in die Figure ein"
+					"message": "Füge ein <kbd>&lt;img&gt;</kbd> in die Figure ein"
 				},
 				{
 					"type": "element_exists",
 					"value": "figcaption",
-					"message": "Füge ein <figcaption> für die Beschriftung hinzu"
+					"message": "Füge ein <kbd>&lt;figcaption&gt;</kbd> für die Beschriftung hinzu"
 				}
 			]
 		},
@@ -50,22 +50,22 @@
 				{
 					"type": "element_exists",
 					"value": "figure",
-					"message": "Füge ein <figure>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;figure&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "pre",
-					"message": "Füge ein <pre>-Element für formatierten Text hinzu"
+					"message": "Füge ein <kbd>&lt;pre&gt;</kbd>-Element für formatierten Text hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "code",
-					"message": "Füge ein <code>-Element für den Code hinzu"
+					"message": "Füge ein <kbd>&lt;code&gt;</kbd>-Element für den Code hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "figcaption",
-					"message": "Füge ein <figcaption> hinzu, das den Code beschreibt"
+					"message": "Füge ein <kbd>&lt;figcaption&gt;</kbd> hinzu, das den Code beschreibt"
 				}
 			]
 		},
@@ -84,7 +84,7 @@
 				{
 					"type": "element_exists",
 					"value": "figure",
-					"message": "Füge ein <figure>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;figure&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_count",
@@ -94,7 +94,7 @@
 				{
 					"type": "element_exists",
 					"value": "figcaption",
-					"message": "Füge ein <figcaption> für die Galerie hinzu"
+					"message": "Füge ein <kbd>&lt;figcaption&gt;</kbd> für die Galerie hinzu"
 				}
 			]
 		}
diff --git a/lessons/de/30-html-tables.json b/lessons/de/30-html-tables.json
index f15b75b..4c9b33d 100644
--- a/lessons/de/30-html-tables.json
+++ b/lessons/de/30-html-tables.json
@@ -21,12 +21,12 @@
 				{
 					"type": "element_exists",
 					"value": "table",
-					"message": "Füge ein <table>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;table&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "caption",
-					"message": "Füge eine <caption> als Tabellentitel hinzu"
+					"message": "Füge eine <kbd>&lt;caption&gt;</kbd> als Tabellentitel hinzu"
 				},
 				{
 					"type": "element_count",
@@ -55,22 +55,22 @@
 				{
 					"type": "element_exists",
 					"value": "table",
-					"message": "Füge ein <table>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;table&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "caption",
-					"message": "Füge ein <caption>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;caption&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "thead",
-					"message": "Füge ein <thead> für den Kopfbereich hinzu"
+					"message": "Füge ein <kbd>&lt;thead&gt;</kbd> für den Kopfbereich hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "tbody",
-					"message": "Füge ein <tbody> für die Datenzeilen hinzu"
+					"message": "Füge ein <kbd>&lt;tbody&gt;</kbd> für die Datenzeilen hinzu"
 				},
 				{
 					"type": "element_count",
@@ -94,27 +94,27 @@
 				{
 					"type": "element_exists",
 					"value": "table",
-					"message": "Füge ein <table>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;table&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "caption",
-					"message": "Füge ein <caption>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;caption&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "thead",
-					"message": "Füge einen <thead>-Abschnitt hinzu"
+					"message": "Füge einen <kbd>&lt;thead&gt;</kbd>-Abschnitt hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "tbody",
-					"message": "Füge einen <tbody>-Abschnitt hinzu"
+					"message": "Füge einen <kbd>&lt;tbody&gt;</kbd>-Abschnitt hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "tfoot",
-					"message": "Füge einen <tfoot>-Abschnitt für die Summe hinzu"
+					"message": "Füge einen <kbd>&lt;tfoot&gt;</kbd>-Abschnitt für die Summe hinzu"
 				},
 				{
 					"type": "element_count",
diff --git a/lessons/de/31-html-marquee.json b/lessons/de/31-html-marquee.json
index 52e4cdc..18fa5f6 100644
--- a/lessons/de/31-html-marquee.json
+++ b/lessons/de/31-html-marquee.json
@@ -21,7 +21,7 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Füge ein <marquee>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;marquee&gt;</kbd>-Element hinzu"
 				}
 			]
 		},
@@ -40,12 +40,12 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Füge ein <marquee>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;marquee&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
-					"message": "Füge behavior=\"alternate\" zum Springen hinzu"
+					"message": "Füge <kbd>behavior=</kbd>\"alternate\" zum Springen hinzu"
 				}
 			]
 		},
@@ -64,17 +64,17 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Füge ein <marquee>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;marquee&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "direction", "value": "left" },
-					"message": "Füge direction=\"left\" für horizontales Scrollen hinzu"
+					"message": "Füge <kbd>direction=</kbd>\"left\" für horizontales Scrollen hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
-					"message": "Füge scrollamount=\"5\" für flüssige Geschwindigkeit hinzu"
+					"message": "Füge <kbd>scrollamount=</kbd>\"5\" für flüssige Geschwindigkeit hinzu"
 				}
 			]
 		}
diff --git a/lessons/de/32-html-svg.json b/lessons/de/32-html-svg.json
index cd291ba..16ce8b2 100644
--- a/lessons/de/32-html-svg.json
+++ b/lessons/de/32-html-svg.json
@@ -21,22 +21,22 @@
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Füge ein <svg>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;svg&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "circle",
-					"message": "Füge ein <circle>-Element in das SVG ein"
+					"message": "Füge ein <kbd>&lt;circle&gt;</kbd>-Element in das SVG ein"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cx", "value": "100" },
-					"message": "Setze cx=\"100\" für das horizontale Zentrum"
+					"message": "Setze <kbd>cx=</kbd>\"100\" für das horizontale Zentrum"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cy", "value": "100" },
-					"message": "Setze cy=\"100\" für das vertikale Zentrum"
+					"message": "Setze <kbd>cy=</kbd>\"100\" für das vertikale Zentrum"
 				}
 			]
 		},
@@ -55,17 +55,17 @@
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Füge ein <svg>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;svg&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "rect",
-					"message": "Füge ein <rect>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;rect&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "line",
-					"message": "Füge ein <line>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;line&gt;</kbd>-Element hinzu"
 				}
 			]
 		},
@@ -84,7 +84,7 @@
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Füge ein <svg>-Element hinzu"
+					"message": "Füge ein <kbd>&lt;svg&gt;</kbd>-Element hinzu"
 				},
 				{
 					"type": "element_count",
@@ -94,7 +94,7 @@
 				{
 					"type": "element_exists",
 					"value": "line",
-					"message": "Füge eine <line> für das Lächeln hinzu"
+					"message": "Füge eine <kbd>&lt;line&gt;</kbd> für das Lächeln hinzu"
 				}
 			]
 		}
diff --git a/src/main.css b/src/main.css
index fe0ad89..268d676 100644
--- a/src/main.css
+++ b/src/main.css
@@ -976,24 +976,32 @@ input:checked + .toggle-slider::before {
 	.left-panel,
 	.right-panel {
 		width: 100%;
-		min-height: 50vh;
+		flex-shrink: 0;
 		border-right: none;
 	}
 
 	.left-panel {
+		min-height: 80vh;
 		border-bottom: 1px solid var(--border-color);
 	}
 
+	.right-panel {
+		min-height: 50vh;
+	}
+
 	.instructions {
-		max-height: 30vh;
+		max-height: 25vh;
+		overflow-y: auto;
 	}
 
 	.editor-section {
+		flex: 1;
 		min-height: 50vh;
 	}
 
 	.editor-content {
-		min-height: 40vh;
+		flex: 1;
+		min-height: 45vh;
 	}
 
 	.preview-wrapper {