Commit Graph

11 Commits

Author SHA1 Message Date
52142f1594 feat: add contact section and smooth lesson transitions
- Add contact section to help dialog with librete.ch, GitHub, Gitea, LinkedIn links
- Add HTML/CSS prefixes to English module titles for consistency with German
- Add CSS transitions for smooth lesson switching
- Add transitioning class to prevent content flash during lesson changes
2025-12-30 20:48:03 +01:00
b269472367 fix: add kbd tags to lesson messages and reorder task/description
- Replace single quotes with <kbd> tags in validation messages
- German and English lessons updated for consistent formatting
- Move task instruction before description in UI (index.html)
2025-12-30 18:08:11 +01:00
919cfc4249 refactor: shorten lesson titles and improve content
- Shorten verbose lesson titles for better sidebar display
- Minor content improvements across lessons
2025-12-30 16:22:48 +01:00
bc06df954f refactor: remove placeholder HTML comments from lesson initialCode
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.
2025-12-30 12:45:18 +01:00
2944b769e5 fix: remove kbd tags from actual HTML code in lessons
- Remove erroneous kbd tags from solution/initialCode fields
- Keep kbd tags only in messages/descriptions where appropriate
2025-12-25 15:59:59 +01:00
027232f5e8 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
2025-12-25 15:55:26 +01:00
b5487b7a1e fix: remove placeholder comments and improve German translations
- 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)
2025-12-25 15:16:31 +01:00
43ac6da8df refactor: simplify HTML lessons to use semantic elements only
- 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
2025-12-24 01:55:47 +01:00
2ef2bc59f5 fix: align HTML lesson task instructions with solution code
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"
2025-12-23 09:39:07 +01:00
ab94d667cc fix: rename solutionCode to solution in HTML lesson files
Consistent property naming across all lesson files - the LessonEngine
expects 'solution' property for rendering expected preview.
2025-12-22 10:38:53 +01:00
50c4d51523 feat: add HTML lessons mode and side-by-side comparison UI
- 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
2025-12-21 22:12:00 +01:00