- 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
Synchronizes 72 lesson files across 5 languages (de, pl, es, ar, uk) to match
the English source. This ensures code, solutions, and validations are identical
while only title, description, task, and message fields are translated.
Changes include:
- Box model lessons (01-box-model.json)
- Units and variables (05-units-variables.json)
- Transitions and animations (06-transitions-animations.json)
- Responsive design (08-responsive.json)
- HTML elements (20-html-elements.json)
- HTML forms basic and validation (21, 22)
- HTML details/summary, progress/meter (23, 24)
- HTML datalist, dialog, fieldset (25, 27, 28)
- HTML tables and SVG (30, 32)
- HTML marquee (31)
- Welcome module (00-welcome.json)
Fixes validation inconsistencies and removes extra content that exceeded
English source. German translations were largely correct; Polish, Spanish,
Arabic, and Ukrainian required full translations.
- Updated de, pl, es, ar, uk flexbox lessons to use identical structure
- All 6 lessons now match English: previewHTML, validations, solutions
- Only title, description, task, and message fields are translated
- Real-world examples: nav menus, headers, cards, toolbars
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Task text now says "Add property: value" instead of "Set property on selector"
since the selector is already shown in the editor via codePrefix.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Updated de, pl, es, ar, uk translations to have identical structure
- All 10 lessons now match English: code, solutions, validations
- Only title, description, task, and message fields are translated
- Removed obsolete lessons not present in English version
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add scale transition (50% → 100%) to crispy badge animation
- Rotate through random encouraging quotes on completion
- Keep gradient border visible after completing a lesson
- Match completion badge gradient colors to glow effect
- Improve bounce animation with elastic bezier curve
CSS Basics:
- Rewrite lessons 3-10 with real UI components (coffee shop, dashboard, buttons)
- Remove artificial examples with dashed borders
- Students write full selectors when learning selector syntax
- Use codePrefix only when focus is on property concepts
Typography:
- Replace Georgia font with universal monospace for code examples
- Use system-ui throughout for consistent rendering
- Replace text-shadow with text-transform and letter-spacing
- Add rich descriptions explaining the "why" behind each property
- Border increased from 4px to 6px
- Glow layer uses same conic-gradient with 20px blur
- Reduced preview-frame padding to compensate
- Higher glow opacity (0.8) for more vibrant effect
Based on https://codetv.dev/blog/animated-css-gradient-border
- Uses @property for smooth angle interpolation
- Two backgrounds: padding-box + border-box approach
- Blurred glow layer synced with border rotation
- Works in Chrome, Safari, Edge (not Firefox)
Use transform: rotate(-360deg) to physically spin the conic-gradient
around the preview border. Two layers:
- Blurred glow layer (z-index: -2)
- Crisp border using mask-composite (z-index: -1)
The gradient colors (purple/magenta/cyan/violet) now visually travel
anti-clockwise around the border like Gemini's UI.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Previous implementation used CSS @property which isn't supported in
Firefox. New approach uses animated box-shadow with three layers:
- 3px solid border cycling through colors
- 15px inner glow
- 30px outer glow
Colors cycle: purple → magenta → cyan → violet → purple, then fade out.
Works in all modern browsers.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Remove bouncing "CRISPY" text animation (dvd-bounce)
- Add rotating conic-gradient border with glow effect
- Colors: purple (#9b59b6), magenta (#e040fb), cyan (#00bcd4), violet (#7c4dff)
- Animation plays once (2.5s) then fades out so students can continue
- Update success colors from green to purple theme:
- success-color: #9b6dd4
- success-color-dark: #7c4dff
- success-color-light: #c9b8e8
- Uses CSS @property for animating conic-gradient angle
- Two layers: blurred glow + crisp border using mask-composite
🤖 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
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
