Clean up lesson files by removing useless HTML comment placeholders
from initialCode fields. Users now start with a clean editor instead
of seeing instructional comments they need to delete.
- 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
- Remove presentational classes (.form-group, .required, .hint, .checkbox-group)
- Replace <span class="required">*</span> with plain * in label text
- Replace <div class="hint"> with semantic <small> element
- Simplify checkbox markup to use native label wrapping pattern
- Update previewBaseCSS to style semantic elements directly
- Add code quality standards to CLAUDE.md emphasizing WCAG compliance and native HTML
Update task instructions to explicitly specify all content that appears
in the solution, so students can complete lessons without guessing:
- semantic-containers: specify "My Website", "Welcome to my site!", "Copyright 2025"
- form-structure: specify label text "Name:" and attribute values
- input-types: specify label texts "Email:" and "Password:"
- input-constraints: specify placeholder text "Enter password"
- Add HTML mode support with new validation types (element_exists,
element_count, attribute_value, element_text, parent_child, sibling)
- Create 3 HTML lesson modules: Elements, Forms Basic, Forms Validation
- Implement side-by-side preview comparison (Your Output vs Expected)
- Add merge animation with "Perfect Match!" overlay on validation success
- Render expected output from solutionCode field in lesson JSON
- Update schema to support HTML mode and solutionCode
- Reorder modules: HTML first, then CSS, then Tailwind
- Update tests for new functionality
