Commit Graph

31 Commits

Author SHA1 Message Date
f6c7cca63f 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
76e7e40256 feat: restructure learning path with new modules and enhanced explanations
- 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)
2026-01-13 20:32:45 +01:00
f7a8b85157 feat: add reset code confirmation dialog with skip option
- 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
2026-01-07 14:16:45 +01:00
513c5a8506 feat(i18n): add support for Polish, Spanish, Arabic, and Ukrainian
- Create lesson directories and copy English lessons as templates
- Add full UI translations for pl, es, ar, uk languages
- Update lessons.js with module stores for all new languages
- Implement language cycling (en → de → pl → es → ar → uk → en)
- Fix playground mode detection (lesson.mode takes precedence)
2025-12-31 01:45:52 +01:00
7744468aaa refactor: merge playground into welcome module
- Rename welcome lessons to Get Started, Overview, Playground
- Remove separate playground module files
- Fix playground detection to check lesson.mode instead of module.id
2025-12-31 00:46:42 +01:00
c0bb79da9f feat: add Playground module with full-height editor 2025-12-31 00:36:14 +01:00
e28f23d126 feat: add welcome lesson, DVD bounce animation, mobile layout reorder
- Add Welcome module with intro lessons (EN/DE)
- Success message now bounces like DVD screensaver (10s duration)
- Mobile: nav bar at top, preview before editor
- Logo: CODE with purple background pill
2025-12-30 21:44:37 +01:00
b6655ced44 perf: make module loading synchronous, flip right panel layout
- Remove unnecessary async/await from loadModules (static imports)
- Move game controls to top of right panel
- Move preview header below controls, above preview
- Flip inset shadow to top of preview section
2025-12-30 21:07:00 +01:00
2cab401597 refactor: remove lessons not covered in HdM lectures
Keep only modules covered in 223015c lectures:
- HTML: Elements, Forms, Validation, Details, Progress, Tables, SVG, Marquee
- CSS: Basic Selectors, Box Model, Units & Variables, Flexbox, Responsive, Transitions

Remove:
- Advanced Selectors
- Tailwind
- HTML: Datalist, Data Attributes, Dialog, Fieldset, Figure
2025-12-30 20:26:45 +01:00
d89c1cb693 refactor: reorder lesson modules and update footer links
- Reorder modules by learning path: HTML first, then CSS, then Tailwind
- Group modules with comments for clarity
- Change footer link from GitHub to Gitea (librete.ch)
2025-12-30 18:09:47 +01:00
d353221f1c feat(i18n): add dynamic lesson loading by language
- Import both EN and DE lesson files in lessons.js
- loadModules() now accepts language parameter
- toggleLanguage() reloads lessons in new language
- initializeModules() uses current language from i18n
- Preserves user position when switching languages
2025-12-30 15:43:00 +01:00
6ea81a67e9 feat: add CSS lessons matching lecture content (box model, flexbox, responsive, transitions, variables)
- Add 5 CSS modules to lessons.js config (EN)
- Create German translations for all 5 CSS modules
- Add CSS modules to lessons.de.js config
- Fix test to use toBeGreaterThanOrEqual for module count
2025-12-29 15:26:59 +01:00
d2cbf7d381 feat: add 10 new HTML5 lesson modules (EN + DE)
New lesson modules covering native HTML5 features:
- Details & Summary: disclosure widgets
- Progress & Meter: progress bars and gauges
- Datalist: autocomplete inputs
- Data Attributes: custom data-* attributes
- Dialog: native modal dialogs
- Forms with Fieldset: grouped form controls
- Figure & Figcaption: self-contained content
- Tables: structured data with caption, thead, tbody, tfoot
- Marquee: classic scrolling text (deprecated but fun)
- SVG Basics: drawing circles, rectangles, and lines

Each module includes 2-3 progressive lessons with fancy
styling (pastel gradients, 100vh layouts, etc).
2025-12-25 14:23:37 +01:00
81614431e9 feat: add complete German translation of the website
- Add German HTML entry point (index.de.html)
- Add German app.js with translated UI strings (app.de.js)
- Add German lesson config (lessons.de.js)
- Add German translations of all 6 lesson modules:
  - HTML Elements: Block vs Inline
  - HTML Forms: Basic Inputs
  - HTML Forms: Validation
  - CSS: Basic Selectors
  - CSS: Advanced Selectors
  - Tailwind: Basics

All IDs, variable names, and code examples remain in English.
Only user-facing text has been translated to German.
2025-12-24 00:32:07 +01:00
50c4d51523 feat: add HTML lessons mode and side-by-side comparison UI
- Add HTML mode support with new validation types (element_exists,
  element_count, attribute_value, element_text, parent_child, sibling)
- Create 3 HTML lesson modules: Elements, Forms Basic, Forms Validation
- Implement side-by-side preview comparison (Your Output vs Expected)
- Add merge animation with "Perfect Match!" overlay on validation success
- Render expected output from solutionCode field in lesson JSON
- Update schema to support HTML mode and solutionCode
- Reorder modules: HTML first, then CSS, then Tailwind
- Update tests for new functionality
2025-12-21 22:12:00 +01:00
Michael Czechowski
671b6cc813 refactor: clean up unused lesson imports and improve code consistency 2025-06-10 23:45:46 +02:00
10fce10033 feat: implement tailwind validations and basic example 2025-06-01 22:34:55 +02:00
Michael Czechowski
6e4b3a141c wip 2025-05-23 14:35:05 +02:00
Michael Czechowski
17da3eb647 feat: add CSS carousels module and update lesson imports 2025-05-23 08:12:23 +02:00
Michael Czechowski
5b3068898d feat: add advanced selectors module and update lesson imports accordingly and release 2025-05-23 08:05:00 +02:00
Michael Czechowski
6995ab94e4 feat: add extended CSS examples and update lesson imports 2025-05-23 07:47:48 +02:00
Michael Czechowski
edf737092a feat: implement responsive hamburger menu and enhance header layout 2025-05-20 00:52:23 +02:00
Michael Czechowski
dc1da0ffd6 feat: refine lessons 2025-05-19 20:20:49 +02:00
Michael Czechowski
ee8a8d6649 feat: enhance validation feedback in code editor, improve layout and reset functionality 2025-05-19 13:20:40 +02:00
Michael Czechowski
f8172644dc 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
1ce1f6cd2f feat: update localStorage keys for user progress and last module ID, enhance editor layout with validation indicator 2025-05-18 23:22:17 +02:00
Michael Czechowski
10094e36dc WIP: enhance code editor layout and implement live preview functionality 2025-05-18 21:55:49 +02:00
Michael Czechowski
d2be51ac49 feat: add basic selectors module and update layout styles 2025-05-14 12:07:34 +02:00
Michael Czechowski
c391f6a96b feat: restructure lesson files and update success indicators 2025-05-14 00:51:10 +02:00
Michael Czechowski
19188f1415 style: run format first time 2025-05-13 21:08:18 +02:00
Michael Czechowski
94bd7ba0cb refactor: reorganize project structure and update import paths 2025-05-13 20:29:59 +02:00