Add conceptual explanations to all 4 lessons in 05-units-variables.json:
- Lesson 1 (Absolute vs Relative Units): Explains fixed px vs scalable rem/%, why rem is preferred for accessibility, and how units calculate
- Lesson 2 (CSS Custom Properties): Explains variable definition/reference, inheritance cascade, scoping, and live updates vs preprocessor variables
- Lesson 3 (calc): Explains runtime calculation, mixing units, syntax requirements for operators
- Lesson 4 (Viewport Units): Explains vw/vh/vmin/vmax relative to viewport, auto-resize behavior, and difference from percentage units
All concepts include beginner-friendly explanations (2-4 sentences) and detailed ASCII diagrams showing calculations and visual representations.
Add 'concept' objects to all 4 lessons in 02-selectors.json:
- Element selectors: Explain DOM traversal and specificity (0,0,0,1)
- Class selectors: Explain attribute matching and medium specificity (0,0,1,0)
- ID selectors: Explain uniqueness and high specificity (0,1,0,0)
- Combined selectors: Explain AND logic and specificity addition
Each concept includes:
- Beginner-friendly explanation (2-4 sentences)
- ASCII diagram showing how selectors match
- Specificity comparison and cascade behavior
Subtask 3.5 - Advanced selectors conceptual explanations
Added 'concept' objects to 4 lessons in basic selectors module:
- Type + ID: Explains specificity boost from combining selectors
- Selector Lists: Explains OR logic and independent matching
- Universal Selector: Explains wildcard matching and descendant context
- Specificity: Explains cascade and point system for selector precedence
All concepts include beginner-friendly explanations (2-4 sentences) and ASCII diagrams showing how selectors match elements and resolve conflicts.
- Add logic to populate concept explanation, diagram, and containerVsItem fields
- Show concept section when concept data exists, hide when not defined
- Clear optional fields to prevent stale data from previous lessons
- Use textContent for text fields and innerHTML for diagram (SVG support)
- 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
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.
- Swap left/right panels in RTL mode
- Flip left panel border to left side
- Flip hint border to right side
- Flip lessons container indentation (margin, border, padding)
- Flip module expand icon and lesson checkmark margins
- Flip toggle switch slider margin
- Reverse setting row and preview controls
- 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
- Language switcher now shows current language code (EN, DE, PL, etc.)
- Add RTL layout support for Arabic (dir="rtl" on html element)
- Sidebar slides from right in RTL mode
- Flip horizontal layouts, navigation, and text alignment for RTL
- 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
- 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
