Progress System:
- Replace percentage-based progress with milestone markers (1, 5, 10, 20, 30, 50, 75, 100)
- Add visual milestone indicators with reached/current/next states
- Add celebration animation when milestones are reached
- Update progress bar to show progress toward next milestone
- Add progressTextMilestone i18n key for all 6 languages
New Lessons Activated:
- HTML Dialog (native modal dialogs)
- HTML Progress & Meter (indicator elements)
- HTML Fieldset (form grouping)
- HTML Datalist (autocomplete inputs)
This adds 10 new lessons across all 6 languages, bringing total from ~66 to ~76.
Replace CSS gradient placeholders with actual photos:
- Card Component: mountain landscape
- Profile Card: woman portrait
- Social Post: avatar + nature photo
- Story Highlights: 5 different portrait photos
- Comment Section: 2 avatar photos
- Bio Section: woman portrait with gradient ring
- Status Update: man portrait
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add 10 new social media templates: Social Post, Story Highlights,
Like Button, Comment Section, Notification Badge, Emoji Reactions,
Bio Section, Status Update, Chat Bubble
- Change pricing from $ to € (€9, €29, €99)
- Fix Story Highlights with shorter names for better rendering
- Fix Bio Section avatar overflow issue
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add section-specific CodeMirror syntax highlighting (purple selectors for CSS)
- Logo now uses section colors (CSS purple as default, changes per section)
- Add section color coding for hints
- Add full footer to section and reference pages
- Fix nav highlight updates for sidebar and prev/next navigation
- Change welcome module mode to CSS for purple theme on first lesson
- Rebrand "Code Crispies" to "CODE CRISPIES" across all translations
- Fix scroll to top on section page navigation
- Change HTML section color to raspberry (#c75b7a)
- Add font-family: system-ui, sans-serif to all template bodies
- Wrap pricing cards in .pricing flex container
- Wrap animation boxes in .animation-demo flex container
- Wrap flexbox layout in .layout container
- Simplify navigation (fewer links to fit preview)
- Reduce sizes to better fit preview area
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Reduce welcome module from 3 lessons to 1 concise intro
- Reduce goodbye module from 3 lessons to 1 concise outro
- Create standalone playground module at end of module list
- Update all translated welcome files (de, pl, es, ar, uk)
- Playground now appears after goodbye, less prominent
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- 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)
- Add dialog to confirm resetting code to initial state
- Allow users to skip confirmation with "don't show again" checkbox
- Save preference to user settings
- Improve i18n and CodeEditor components
- 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
- 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
- Remove unnecessary async/await from loadModules (static imports)
- Move game controls to top of right panel
- Move preview header below controls, above preview
- Flip inset shadow to top of preview section
- Reorder modules by learning path: HTML first, then CSS, then Tailwind
- Group modules with comments for clarity
- Change footer link from GitHub to Gitea (librete.ch)
- Import both EN and DE lesson files in lessons.js
- loadModules() now accepts language parameter
- toggleLanguage() reloads lessons in new language
- initializeModules() uses current language from i18n
- Preserves user position when switching languages
- 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
- 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.
- 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
