Synchronizes 72 lesson files across 5 languages (de, pl, es, ar, uk) to match
the English source. This ensures code, solutions, and validations are identical
while only title, description, task, and message fields are translated.
Changes include:
- Box model lessons (01-box-model.json)
- Units and variables (05-units-variables.json)
- Transitions and animations (06-transitions-animations.json)
- Responsive design (08-responsive.json)
- HTML elements (20-html-elements.json)
- HTML forms basic and validation (21, 22)
- HTML details/summary, progress/meter (23, 24)
- HTML datalist, dialog, fieldset (25, 27, 28)
- HTML tables and SVG (30, 32)
- HTML marquee (31)
- Welcome module (00-welcome.json)
Fixes validation inconsistencies and removes extra content that exceeded
English source. German translations were largely correct; Polish, Spanish,
Arabic, and Ukrainian required full translations.
- Updated de, pl, es, ar, uk flexbox lessons to use identical structure
- All 6 lessons now match English: previewHTML, validations, solutions
- Only title, description, task, and message fields are translated
- Real-world examples: nav menus, headers, cards, toolbars
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Task text now says "Add property: value" instead of "Set property on selector"
since the selector is already shown in the editor via codePrefix.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Updated de, pl, es, ar, uk translations to have identical structure
- All 10 lessons now match English: code, solutions, validations
- Only title, description, task, and message fields are translated
- Removed obsolete lessons not present in English version
🤖 Generated with [Claude Code](https://claude.com/claude-code)
CSS Basics:
- Rewrite lessons 3-10 with real UI components (coffee shop, dashboard, buttons)
- Remove artificial examples with dashed borders
- Students write full selectors when learning selector syntax
- Use codePrefix only when focus is on property concepts
Typography:
- Replace Georgia font with universal monospace for code examples
- Use system-ui throughout for consistent rendering
- Replace text-shadow with text-transform and letter-spacing
- Add rich descriptions explaining the "why" behind each property
- Add CSS Colors, Typography, Advanced Selectors, and Grid modules
- Remove deprecated HTML Marquee module from all languages
- Remove redundant div & span lesson from HTML Block & Inline
- Move SVG module from HTML to CSS section
- Enhance first lessons with comprehensive explanations:
- Flexbox: historical context, axes concept
- Colors: named colors, background-color explained
- Grid: comparison to Flexbox, key properties
- Swap header logo highlight (CRISPIES instead of CODE)
- Use English fallbacks for new modules in non-EN languages
- Fix test to include 'playground' mode
New path: 19 modules (~78 lessons) vs previous 16 modules (62 lessons)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Update task instructions from old format to match English source:
- Old: "Add <kbd>padding: 1rem</kbd> to <kbd>.box</kbd>"
- New: "Set <kbd>padding</kbd> to <kbd>1rem</kbd>"
Removes redundant class name references since codePrefix shows the selector.
Affected languages: ar, es, pl, uk
- Hello World lesson now styles plain text (no h1 required)
- Added syntax examples to CSS Variables, calc(), Media Queries, Flexbox, Grid
- Added goodbye/offboarding module with contribution encouragement
- Fixed validation in welcome lesson (Hello World instead of Hello)
- Replaced 'quoted text' with <code>quoted text</code> in all task descriptions
- Added syntax examples to Transitions and Keyframes lessons
- Updated all language versions (en, de, pl, es, ar, uk)
- Changed solution in 00-welcome.json from "Hallo Welt" to "Hello World"
- Added missing solution fields to 01-box-model.json (8 lessons)
- Added missing solution fields to 05-units-variables.json (4 lessons)
- Added missing solution fields to 06-transitions-animations.json (4 lessons)
- Added missing solution fields to 08-responsive.json (4 lessons)
- Fixed flexbox.json class names from .green/.red/.yellow to .box1/.box2/.box3
- Added missing solution fields to flexbox.json (6 lessons)
German translations now keep all CSS code in English for maintainability,
with only instructional text translated.
- Create lesson directories and copy English lessons as templates
- Add full UI translations for pl, es, ar, uk languages
- Update lessons.js with module stores for all new languages
- Implement language cycling (en → de → pl → es → ar → uk → en)
- Fix playground mode detection (lesson.mode takes precedence)
- Rename welcome lessons to Get Started, Overview, Playground
- Remove separate playground module files
- Fix playground detection to check lesson.mode instead of module.id
- Hide Run button (live preview is stable)
- Update all references from librete.ch to LibreTECH
- Add context to repo links (Gitea Source, GitHub Mirror)
- Fix welcome lesson redundant text
- Slow down CRISPY animation to 8s
- Remove editor-tools margin-right
- Add Welcome module with intro lessons (EN/DE)
- Success message now bounces like DVD screensaver (10s duration)
- Mobile: nav bar at top, preview before editor
- Logo: CODE with purple background pill
- 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
- Shorten German module titles with consistent HTML/CSS prefixes
- Add .completion-badge styling for the lesson title completion badge
- Make sidebar lessons section fill available height on desktop
- Improve flexbox lesson descriptions with more context
- 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)
- Add <kbd> tags to CSS property values and selectors in task descriptions
- Add solution code to all lessons for better guidance
- Improve animation contrast in transitions lesson (black/white instead
of similar purples, dramatic color changes for visibility)
- Simplify validation messages with kbd formatting
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.
Prevent HTML elements like <details>, <option>, <form> from being
rendered as actual elements in hint messages by properly escaping
them with < > and wrapping in <kbd> tags.
Flexbox and Box Model lessons:
- Use explicit task instructions with selector AND property
- Include selector in codePrefix for better context
- Replace hex colors with named CSS colors (steelblue, coral, etc.)
- Simplify values (2px instead of 0.125rem, 1rem instead of 1.25rem)
- Remove redundant contains validations
- Wrap code examples in <code> tags for proper styling
- 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
- 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
