Commit Graph

34 Commits

Author SHA1 Message Date
8f4a53f1d9 feat: add random template button to playground
- Create 10 boilerplate templates (cards, nav, forms, animations, etc.)
- Add dice button (🎲) visible only in playground mode
- Load random template and apply to preview on click
- Templates include: Card, Navigation, Profile, Buttons, Pricing,
  Form, Features Grid, Badges, CSS Animation, Flexbox Layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 12:10:17 +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
7125b7adc9 feat: add landing pages and section navigation
- Add home landing page with section cards (CSS, HTML, Tailwind)
- Add section landing pages with module grid and progress tracking
- Implement extended URL routing for pages, sections, and lessons
- Create sections.js configuration for module categorization
- Exclude welcome/goodbye modules from progress stats
- Add main navigation links in header (desktop only)
- Update logo click to navigate to home landing

Routes:
- # → Home landing
- #css, #html, #tailwind → Section landing pages
- #module/index → Lesson (unchanged)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-14 23:15:34 +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
1cecc549a2 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
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