Commit Graph

35 Commits

Author SHA1 Message Date
ae8f9fef45 feat: add JavaScript learning section with starter lessons and sidebar section headers
Implementation following plan:
- S01: Foundation: schema, section config, and router
- S02: Install CodeMirror JavaScript language support
- S03: Create JavaScript lesson JSON files (variables, DOM, events)
- S04: Register JavaScript lessons in module stores
- S05: Add JavaScript validation logic
- S06: Add JavaScript mode to LessonEngine preview rendering
- S07: Add JavaScript mode to CodeEditor
- S08: Update app.js for JavaScript mode support
- S09: Update navigation HTML and CSS theming for JavaScript section
- S10: Add section grouping headers in sidebar navigation
- S11: Update and write tests
2026-03-28 20:22:50 +01:00
739470e045 feat: add Markdown learning module with 8 beginner lessons
- Add markdown-basics module with lessons for headings, text formatting,
  lists, links, and inline code
- Integrate markdown section with blue color theme (#5b8dd9)
- Add markdown mode support in CodeEditor and LessonEngine
- Add markdown preview rendering using marked library
- Add section overview page with educational content
- Add markdown reference page with syntax guide
- Add i18n translations for 6 languages (EN, DE, PL, ES, AR, UK)
- Update router to recognize #markdown as section route
- Add all section-specific CSS styles for markdown theme
2026-01-25 11:27:07 +01:00
be9c753a0e feat: add new lesson modules and reach 101 total lessons
New CSS Modules:
- Gradients (3 lessons): linear-gradient, radial-gradient, direction
- Filters (4 lessons): blur, grayscale, brightness, drop-shadow
- Positioning (4 lessons): relative, absolute, offset properties
- Pseudo-elements (4 lessons): ::before, ::after, content, decorative

New HTML Module:
- Semantic HTML (3 lessons): article, section, aside

Expanded Existing Modules:
- Typography: +2 lessons (text-decoration, text-shadow)
- Tables: +2 lessons (thead/tbody/tfoot, colspan)

Total lessons: 101 (up from ~66)
- Enables full milestone system (1, 5, 10, 20, 30, 50, 75, 100)
- All modules added to all 6 language stores with EN fallback
2026-01-16 14:17:13 +01:00
d2fbe0e085 feat: implement milestone-based progress system and activate new lessons
Progress System:
- Replace percentage-based progress with milestone markers (1, 5, 10, 20, 30, 50, 75, 100)
- Add visual milestone indicators with reached/current/next states
- Add celebration animation when milestones are reached
- Update progress bar to show progress toward next milestone
- Add progressTextMilestone i18n key for all 6 languages

New Lessons Activated:
- HTML Dialog (native modal dialogs)
- HTML Progress & Meter (indicator elements)
- HTML Fieldset (form grouping)
- HTML Datalist (autocomplete inputs)

This adds 10 new lessons across all 6 languages, bringing total from ~66 to ~76.
2026-01-16 13:56:29 +01:00
6d5d727ad6 refactor: simplify onboarding/offboarding and move playground to end
- 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)
2026-01-15 12:02:58 +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
fb33930328 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
fbe0f20ef7 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
b9d9a0ab0c 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
89ad5228b4 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
4a9db6d10f feat: add Playground module with full-height editor 2025-12-31 00:36:14 +01:00
a7cc035410 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
bc4972b1d6 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
6eec215096 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
334b147706 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
2e8cd6a050 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
09f937ca07 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
529256b367 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
b13c8ffea5 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
4664bc7fdb refactor: clean up unused lesson imports and improve code consistency 2025-06-10 23:45:46 +02:00
9e28534562 feat: implement tailwind validations and basic example 2025-06-01 22:34:55 +02:00
Michael Czechowski
e1e7fcb827 wip 2025-05-23 14:35:05 +02:00
Michael Czechowski
e1b699db3b feat: add CSS carousels module and update lesson imports 2025-05-23 08:12:23 +02:00
Michael Czechowski
03f4a5c1d0 feat: add advanced selectors module and update lesson imports accordingly and release 2025-05-23 08:05:00 +02:00
Michael Czechowski
5e885e974f feat: add extended CSS examples and update lesson imports 2025-05-23 07:47:48 +02:00
Michael Czechowski
593faacf4c feat: implement responsive hamburger menu and enhance header layout 2025-05-20 00:52: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
4f5154b795 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
c6f1179568 WIP: enhance code editor layout and implement live preview functionality 2025-05-18 21:55:49 +02:00
Michael Czechowski
f4bdd660a9 feat: add basic selectors module and update layout styles 2025-05-14 12:07:34 +02:00
Michael Czechowski
9249f122a4 feat: restructure lesson files and update success indicators 2025-05-14 00:51:10 +02:00
Michael Czechowski
0f2308a132 style: run format first time 2025-05-13 21:08:18 +02:00
Michael Czechowski
ab4279f9ca refactor: reorganize project structure and update import paths 2025-05-13 20:29:59 +02:00