- Reduce welcome module from 3 lessons to 1 concise intro
- Reduce goodbye module from 3 lessons to 1 concise outro
- Create standalone playground module at end of module list
- Update all translated welcome files (de, pl, es, ar, uk)
- Playground now appears after goodbye, less prominent
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Use CodeMirror in read-only mode for code examples
- Auto-detect CSS vs HTML based on content
- Clean up views when navigating between sections
- Add transparent background to blend with code-block container
🤖 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
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)
