public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

fix: add kbd tags to validation messages for clarity

Browse Source 
- 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

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Michael Czechowski
2025-12-25 15:55:26 +01:00
parent 6f550a36ea
commit 3b03d35c5f
27 changed files with 230 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
lessons/20-html-elements.json
View File

@@ -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'"
}
]
}