- Add translation keys for landing page (hero, benefits, learning paths, CTA)
- Support EN, DE, PL, ES, AR, UK languages
- Add data-i18n attributes to landing page HTML elements
- Add comprehensive SEO meta tags (Open Graph, Twitter Cards, JSON-LD)
- Restructure landing page with Khan Academy-style "Why It Works" section
- Replace "How It Works" + "Features" with 3 benefit cards:
- Learn by Doing (code icon)
- Practice at Your Pace (progress icon)
- Master Real Skills (tools icon)
- Add "Explore Learning Paths" section with learning tracks
- Implement dynamic meta tag updates for route-based SEO
- Update page title and descriptions based on current route
- Add new CSS styles for benefit cards, learning paths, and enhanced CTA
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add Reference nav link with subtle separator styling
- Update nav highlight to show active state on reference pages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add side-by-side layout for section pages (text left, code right)
- Include educational content with code examples for CSS, HTML, Tailwind
- Add section overviews explaining each technology
- Make header level pill clickable to return to last lesson
- Update landing page with "How It Works" steps and features section
- Improve code block readability with GitHub-dark color scheme
- Add prominent topic links with SEO-friendly accessible text
- Add responsive grid layout that stacks on mobile
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add share button with SVG link icon in lesson title row
- Create share dialog with copy URL functionality
- Implement URL hash-based routing for lesson navigation
- Support browser back/forward navigation
- Add i18n translations for share dialog in all languages
- Position share button between title and completion badge
- Add RTL support for title row layout
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add lesson indicator pill to header (visible on desktop only)
- Logo stays centered, pill on left with burger menu
- Replace emoji arrows with CSS triangles for iOS compatibility
- Use native <details>/<summary> for expand/collapse
- Update tests for new implementation
- 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
- Remove language button from header
- Add language select dropdown in sidebar settings
- Add translations for "Language" label in all languages
- Remove unused .lang-switch CSS
- Remove ! from CRISPY, add spacing to smiley
- Use darker green for better contrast
- Increase font size to 1.3rem
- Remove GitHub link from sidebar (keep only Gitea)
- 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
- 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
- Remove data-i18n="loading" from lesson title and module name
- Start with empty content instead of "Loading..." placeholder
- Remove data-i18n attribute after restoring cache to prevent overwrites
- 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
- Module pill now in game-controls between prev/next buttons
- Level indicator (e.g. "1 of 3") inside the pill
- Updated pill styling for nav bar context
- 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)
- 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)
- Create i18n.js module with EN/DE translations
- Add data-i18n attributes to index.html for dynamic text
- Update renderer.js to use translation functions
- Language switcher button replaces link to German page
- Stores preference in localStorage, detects browser language
- Add skip-to-content link for keyboard users
- Convert module headers and lesson items from divs to buttons
- Add ARIA attributes (aria-expanded, aria-controls, aria-label)
- Add focus return to trigger element when closing sidebar
- Shift main content when sidebar is open using CSS :has()
- Add code element styling in instruction boxes
- Add module title pill above lesson title showing current category
- Enable next/prev buttons to cross module boundaries
- Automatically advance to next module when completing last lesson
- Go to last lesson of previous module when navigating back
- Convert help and reset modals to native <dialog> elements
- Content is now in HTML, not dynamically generated via JS
- Use dialog.showModal() and dialog.close() native API
- Dialog handles Escape key natively for closing
- Fix list indentation in help dialog with proper padding
- Add styled kbd elements for keyboard shortcuts
- Separate dialogs for help and reset confirmation
- Apply same changes to German version
Benefits:
- Better accessibility (native focus trapping, escape handling)
- Simpler JavaScript (no DOM manipulation for content)
- Content visible in HTML source for easier editing
- Native backdrop styling via ::backdrop
- Add language toggle button in header (EN/DE)
- Link directly to the other language version
- Style consistent with existing header buttons
- Accessible with proper aria-labels
- Add history extension to CodeMirror for undo/redo support
- Ctrl+Z for undo, Ctrl+Shift+Z for redo now work
- Add toolbar buttons: ↶ Undo, ↷ Redo, ⟲ Reset
- Reset button restores editor to initial lesson code
- Add .btn-icon and .editor-tools CSS styles
- 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
