- Add 5 CSS modules to lessons.js config (EN)
- Create German translations for all 5 CSS modules
- Add CSS modules to lessons.de.js config
- Fix test to use toBeGreaterThanOrEqual for module count
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove erroneous kbd tags from solution/initialCode fields
- Keep kbd tags only in messages/descriptions where appropriate
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 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>
- Add aria-describedby to password inputs for screen readers
- Connect hint text to input via id reference
- Increase mobile editor min-height to 50vh
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove placeholder comments from initialCode fields
- Fix typo: "wichtig Wort" -> "wichtigen Wort" in de/20-html-elements.json
- Improve German validation messages for readability
- Use consistent terminology (Eingabefeld instead of Input)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 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
🤖 Generated with [Claude Code](https://claude.ai/code)
- Add German HTML entry point (index.de.html)
- Add German app.js with translated UI strings (app.de.js)
- Add German lesson config (lessons.de.js)
- Add German translations of all 6 lesson modules:
- HTML Elements: Block vs Inline
- HTML Forms: Basic Inputs
- HTML Forms: Validation
- CSS: Basic Selectors
- CSS: Advanced Selectors
- Tailwind: Basics
All IDs, variable names, and code examples remain in English.
Only user-facing text has been translated to German.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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"
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Consistent property naming across all lesson files - the LessonEngine
expects 'solution' property for rendering expected preview.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Implement 50/50 split layout (left: instructions + editor, right: preview)
- Replace always-visible sidebar with slide-out drawer menu
- Move footer, progress, and settings into sidebar
- Add toggleable expected result overlay (hidden by default)
- Create new hint system with step progress indicators
- Add ghost button styles for modal and text button for sidebar reset
- Fix HTML lesson task instruction and typo ("important" not "importing")
- Add padding to preview frames to prevent corner clipping
- Optimize layout for iPadOS and tablet devices
- 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
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
