c560676544
feat: implement #4 — replace answer-revealing validation messages with pedagogical hints
...
Rewrite ~120 validation error messages across 17 English lesson modules
and their localized variants (ar, de, es, pl, uk) to use concept questions,
property hints, and directional nudges instead of revealing the exact
CSS property-value answers.
Priority modules (flexbox, box-model, colors, positioning) fully rewritten.
All remaining CSS modules updated. Only message strings changed — no
validation logic modifications.
2026-03-28 19:40:28 +01:00
ab056c42c3
refactor(lessons): improve CSS Basics and Typography with real-world examples
...
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
2026-01-14 02:43:27 +01:00
2cd94caafb
feat: reorder learning path for design students and improve animations
...
Learning path changes:
- Reorder modules: CSS visual (selectors, colors, typography) first,
then layout (flexbox, grid), then HTML structure last
- Add intro lessons on CSS property syntax before selectors
- Add Figure module (images with captions)
- Remove Progress/Meter module (too niche)
- Reduce Tables from 3 to 1 lesson
- Reduce Form Validation from 3 to 1 lesson
- Rename "CSS Selectors" module to "CSS Basics"
Animation improvements:
- Change success text to "Your CODE looks CRISPY!"
- Increase animation duration to 3s
- Fix Firefox glow: use linear-gradient pulse instead of conic rotation
- Fix expected result toggle: match padding to prevent layout jump
🤖 Generated with [Claude Code](https://claude.com/claude-code )
2026-01-14 01:30:19 +01:00
98d4362706
refactor: rewrite CSS lessons with realistic real-world examples
...
- Box Model: profile cards, alerts, buttons instead of generic boxes
- Flexbox: navigation bars, headers, toolbars, card layouts
- Grid: photo gallery with SVG images, product cards, dashboard layout
- Colors: notification alerts, buttons, badges with visible changes
- Units/Variables: article width, brand variables, sidebar calc, hero vh
- Responsive: feature cards grid instead of numbered divs
- Added missing solutions to enable "Show Expected" feature
- Fixed barely visible border color change in colors lesson
🤖 Generated with [Claude Code](https://claude.com/claude-code )
2026-01-13 21:11:41 +01:00
52abfb37db
fix(lessons): improve validation completeness and best practices
...
- 00-basic-selectors: add missing validation message, fix semicolons
- 05-units-variables: replace hex color with named color, use round numbers
- 08-responsive: rename "Flex Grids" to "Responsive Grid" for clarity
- 24-html-progress-meter: add missing high/max/optimum validations
- 32-html-svg: add comprehensive attribute validations for SVG elements
2026-01-07 14:16:16 +01:00
3addeda28d
feat: add contact section and smooth lesson transitions
...
- Add contact section to help dialog with librete.ch, GitHub, Gitea, LinkedIn links
- Add HTML/CSS prefixes to English module titles for consistency with German
- Add CSS transitions for smooth lesson switching
- Add transitioning class to prevent content flash during lesson changes
2025-12-30 20:48:03 +01:00
38541c7a78
fix: add kbd tags to lesson messages and reorder task/description
...
- Replace single quotes with <kbd> tags in validation messages
- German and English lessons updated for consistent formatting
- Move task instruction before description in UI (index.html)
2025-12-30 18:08:11 +01:00
15f10bcdf8
refactor: shorten lesson titles and improve content
...
- Shorten verbose lesson titles for better sidebar display
- Minor content improvements across lessons
2025-12-30 16:22:48 +01:00
3d36de57af
fix: add category prefixes to module titles in sidebar
...
- CSS: Basic Selectors
- CSS: Advanced Selectors
- Tailwind: Basics
HTML modules already have "HTML" in their titles.
2025-12-22 01:09:47 +01:00
Michael Czechowski
0f88d1a938
fix: update strong selector example to include color property
2025-05-23 14:48:03 +02:00
Michael Czechowski
e0b0a44cc2
feat: update task description to include HTML tags for paragraph and color properties; add solution code for CSS rule
2025-05-20 00:26:39 +02:00
Michael Czechowski
e123e4b84a
feat: update task descriptions to include HTML tags for clarity in basic selectors lesson
2025-05-20 00:18:05 +02:00
Michael Czechowski
391eb25d4b
feat: add solution code and enhance validation rules for basic selectors lesson
2025-05-19 23:42:04 +02:00
Michael Czechowski
6c7ef3ff0b
feat: enhance lesson preview functionality and improve run button interaction; change lesson indicator to percentage; split preview css for better isolation
2025-05-19 23:30:22 +02:00
Michael Czechowski
ed984a1d2e
feat: add fine grained validations for class-selectors lesson
2025-05-19 22:13:02 +02:00
Michael Czechowski
51faf1957c
feat: simplify module description for clarity
2025-05-19 20:32:23 +02:00
Michael Czechowski
cf650b0842
feat: refine lessons
2025-05-19 20:20:49 +02:00
Michael Czechowski
7962bbdf43
feat: enhance validation feedback in code editor, improve layout and reset functionality
2025-05-19 13:20:40 +02:00
Michael Czechowski
e4d03c6b7f
WIP: enhance validation feedback in code editor, add support for multiple validation indicators and new validation types
2025-05-19 12:55:43 +02:00
Michael Czechowski
65b12d961e
feat: add CSS Basic Selectors module
2025-05-14 12:07:25 +02:00
