- Add comprehensive SEO meta tags (Open Graph, Twitter Cards, JSON-LD)
- Restructure landing page with Khan Academy-style "Why It Works" section
- Replace "How It Works" + "Features" with 3 benefit cards:
- Learn by Doing (code icon)
- Practice at Your Pace (progress icon)
- Master Real Skills (tools icon)
- Add "Explore Learning Paths" section with learning tracks
- Implement dynamic meta tag updates for route-based SEO
- Update page title and descriptions based on current route
- Add new CSS styles for benefit cards, learning paths, and enhanced CTA
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add Reference nav link with subtle separator styling
- Update nav highlight to show active state on reference pages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Remove completion badge and reset Run button text in resetSuccessIndicators()
- Remove lesson from completed array in LessonEngine.reset()
- Update sidebar to remove completed class from lesson item
- Update progress display after reset
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Playground mode was falling through to the CSS branch, wrapping user code
in a <style> tag. This prevented HTML elements and font styles from rendering
correctly. Now playground mode is treated like HTML mode, allowing templates
with <style> blocks and HTML content to work properly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add font-family: system-ui, sans-serif to all template bodies
- Wrap pricing cards in .pricing flex container
- Wrap animation boxes in .animation-demo flex container
- Wrap flexbox layout in .layout container
- Simplify navigation (fewer links to fit preview)
- Reduce sizes to better fit preview area
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- 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)
