1328d7c004
feat: add undo/redo/reset editor tools with keyboard shortcuts
...
- Add history extension to CodeMirror for undo/redo support
- Ctrl+Z for undo, Ctrl+Shift+Z for redo now work
- Add toolbar buttons: ↶ Undo, ↷ Redo, ⟲ Reset
- Reset button restores editor to initial lesson code
- Add .btn-icon and .editor-tools CSS styles
2025-12-23 23:14:32 +01:00
c98d8326b5
fix: align HTML lesson task instructions with solution code
...
Update task instructions to explicitly specify all content that appears
in the solution, so students can complete lessons without guessing:
- semantic-containers: specify "My Website", "Welcome to my site!", "Copyright 2025"
- form-structure: specify label text "Name:" and attribute values
- input-types: specify label texts "Email:" and "Password:"
- input-constraints: specify placeholder text "Enter password"
2025-12-23 09:39:07 +01:00
1d26a70b38
fix: rename solutionCode to solution in HTML lesson files
...
Consistent property naming across all lesson files - the LessonEngine
expects 'solution' property for rendering expected preview.
2025-12-22 10:38:53 +01:00
90585293c7
fix: hide original textarea to prevent browser form restoration artifact
...
- Add display:none to initial textarea (CodeMirror replaces it)
- Add autocomplete=off to prevent browser from restoring old form values
2025-12-22 10:06:55 +01:00
fc4fb9ef06
fix: resolve initialization bugs breaking level indicator and expected preview
...
- Fix renderLesson to handle null inputEl (CodeMirror replaces textarea)
- Fix renderExpectedPreview to use 'solution' property instead of 'solutionCode'
- These fixes restore level indicator, expected preview, and auto-run functionality
2025-12-22 10:04:41 +01:00
f9d08749d3
fix: use One Dark theme for CodeMirror syntax highlighting
...
- Replace custom highlight styles with @codemirror/theme-one-dark
- Cleaner implementation with official CodeMirror theme
- Keep custom font and padding overrides
2025-12-22 01:17:10 +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
a1f1da0d06
feat: add CodeMirror 6 editor with Emmet support
...
- Replace textarea with CodeMirror 6 for syntax highlighting
- Add Emmet abbreviation expansion (Tab to expand)
- Support HTML and CSS language modes with autocomplete
- Add dark theme matching app design
- Tab indentation with Shift-Tab for outdent
- Update help modal with Emmet shortcuts
2025-12-21 23:37:14 +01:00
b5cf77376f
refactor: redesign layout to Flexbox Froggy style with slide-out sidebar
...
- Implement 50/50 split layout (left: instructions + editor, right: preview)
- Replace always-visible sidebar with slide-out drawer menu
- Move footer, progress, and settings into sidebar
- Add toggleable expected result overlay (hidden by default)
- Create new hint system with step progress indicators
- Add ghost button styles for modal and text button for sidebar reset
- Fix HTML lesson task instruction and typo ("important" not "importing")
- Add padding to preview frames to prevent corner clipping
- Optimize layout for iPadOS and tablet devices
2025-12-21 23:20: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
94cdf368bc
fix: remove sub-folder deployment
2025-06-11 14:29:12 +02:00
Michael Czechowski
3338c012c9
docs: update README to include Tailwind CSS support and enhance clarity
2025-06-10 23:46:00 +02:00
Michael Czechowski
4664bc7fdb
refactor: clean up unused lesson imports and improve code consistency
2025-06-10 23:45:46 +02:00
Michael Czechowski
223cb2d0c9
docs: add comprehensive comparison of commonjs and es modules in german and english
2025-06-06 10:56:23 +02:00
Michael Czechowski
23266a9aea
fix: update validation message for clarity and consistency
2025-06-05 23:38:00 +02:00
Michael Czechowski
f020601437
fix: update success background color for improved visibility and remove unused color variables
2025-06-05 23:37:25 +02:00
Michael Czechowski
a4db81c4c6
feat: update instruction styles with new colors and enhanced readability
2025-06-05 23:31:19 +02:00
Michael Czechowski
5da62807a2
feat: enhance LessonEngine to manage user progress and code storage
2025-06-05 23:31:13 +02:00
Michael Czechowski
229fb1902f
chore: simplify title and enhance preview HTML for tailwind basics module
2025-06-05 23:31:01 +02:00
Michael Czechowski
97b685a39b
feat: update tailwind basics module with enhanced descriptions and new lessons
2025-06-05 23:16:49 +02:00
Michael Czechowski
daab71b6f1
feat: enhance lesson functionality with user code storage and progress tracking
2025-06-05 14:05:35 +02:00
9e28534562
feat: implement tailwind validations and basic example
2025-06-01 22:34:55 +02:00
33a0b7274b
fix: update package lock after package json update
2025-06-01 22:03:19 +02:00
e6961bfa1a
fix: remove deprecated properties
2025-06-01 22:02:55 +02:00
Michael Czechowski
0f88d1a938
fix: update strong selector example to include color property
2025-05-23 14:48:03 +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
c549d5c65e
feat: add footer with links to project repository and author website
2025-05-20 19:42:17 +02:00
Michael Czechowski
6d17801e2f
feat: make sure to scroll to the top when navigating to lesson
2025-05-20 18:49:39 +02:00
Michael Czechowski
d698b42b10
fix: update scroll behavior for lesson navigation and adjust lesson description width for better scrolling
2025-05-20 18:29:40 +02:00
Michael Czechowski
a606011c9a
fix: correct casing in validation message for consistency
2025-05-20 02:18:10 +02:00
Michael Czechowski
1577c8c39a
style: organize CSS with section headers and sort rules
2025-05-20 01:51:50 +02:00
Michael Czechowski
ded85e9b7d
feat: enhance module list rendering with expandable lessons and active lesson tracking
2025-05-20 01:43:57 +02:00
Michael Czechowski
b408d8f7b5
feat: mark modules as work in progress for better clarity
2025-05-20 01:43:44 +02:00
Michael Czechowski
7c7e7c4ba0
fix: adjust hamburger menu animation for improved visual effect
2025-05-20 00:54:34 +02:00
Michael Czechowski
593faacf4c
feat: implement responsive hamburger menu and enhance header layout
2025-05-20 00:52:23 +02:00
Michael Czechowski
371ff7bafa
feat: update progress bar styling to increase height and change background color
2025-05-20 00:39:54 +02:00
Michael Czechowski
8d499bf497
feat: add toggle switch for disabling error feedback and persist user settings
2025-05-20 00:37:36 +02:00
Michael Czechowski
e4de2a8d5c
feat: update validation message to enhance user feedback
2025-05-20 00:26:47 +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
16f6d28107
feat: enhance styling for lesson components and improve kbd element appearance
2025-05-20 00:17:55 +02:00
Michael Czechowski
02fddca908
feat: update format script to include schemas directory for prettier
2025-05-19 23:42:14 +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
00935f02e8
feat: add kbd css styles and make sidebar transparent for better focus on lessons
2025-05-19 22:14:18 +02:00
Michael Czechowski
ad875f7f75
fix: race condition closing error feedback to early when next should appear
2025-05-19 22:13:42 +02:00
Michael Czechowski
ed984a1d2e
feat: add fine grained validations for class-selectors lesson
2025-05-19 22:13:02 +02:00
