- 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
- Wrap lesson label in span for mobile hiding
- Truncate module name with ellipsis if too long
- Hide "Lesson/Lektion" label on mobile, show only "1 / 3"
- Add lessonLabel i18n keys for EN/DE
- 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
- Editor content now extends full height
- Hint area floats at bottom with blur effect
- Hide hint area when empty
- Update hint styling for dark background
- 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)
- 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
- 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
- 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
Native dialog elements don't close on backdrop click by default.
Added click handlers that check if click target is the dialog itself
(not its children) to enable this expected UX behavior.
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.
Document learnings for creating effective lessons:
- Clear task instructions with selector and property
- Use codePrefix for context
- Simple, human-friendly values
- Named CSS colors for engagement
- Focused validations
- Semantic HTML in examples
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
- Style code elements in task instructions with white alpha background
- Style code elements in lesson descriptions and hints
- Add skip-link CSS for keyboard navigation
- Add sidebar shift animation when drawer is open
- Add focus styles for sidebar navigation items
- 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 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
- 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
