Implement PathManager to orchestrate multi-module learning journeys:
- Add PathManager class with start/pause/resume functionality
- Create learning-paths.json config with CSS Fundamentals path
- Integrate path progress tracking with LessonEngine
- Add path selection UI to homepage and navigation
- Include JSON schema for learning path validation
- Add comprehensive test suite for PathManager
- Mark subtask 6.2 (mobile responsiveness) as completed
- Mark subtask 6.3 (review and refine explanations) as completed
- Add QA iteration history tracking
- Added mobile-specific CSS optimizations for concept section
- Tablet (768px): Reduced diagram font to 0.75rem, padding to 0.75rem
- Mobile (480px): Further reduced to 0.7rem font, 0.5rem padding
- Added momentum scrolling for iOS (-webkit-overflow-scrolling: touch)
- Created comprehensive mobile viewport test report
- Tested across iPhone SE (320px), iPhone 12 (390px), iPad (768px)
- Maintained readability, accessibility, and RTL support
- Added 'concept' objects to all 5 Tailwind lessons explaining utility-first approach
- Lesson 1 (Backgrounds): Explains pre-built utilities vs custom CSS, color scale system
- Lesson 2 (Utility-First): Explains utility-first philosophy and problems it solves
- Lesson 3 (Text Utilities): Explains naming patterns and color shade system
- Lesson 4 (Spacing): Explains base-4 spacing scale and directional shorthands
- Lesson 5 (Breakpoints): Explains mobile-first responsive utilities and media queries
- All concepts include beginner-friendly explanations and detailed ASCII diagrams
- Emphasizes how Tailwind differs from traditional CSS (no naming, no context-switching, no specificity wars)
- Diagrams show workflow comparisons, naming patterns, spacing scales, and breakpoint cascades
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
