fix: balance section colors - more vibrant but still readable

- Add CSS variables for section colors (CSS violet, HTML raspberry, Tailwind cyan)
- Set data-section attribute on body based on current route
- Color code header nav links, logo, reference nav, topic links
- Color code CodeMirror editor cursor/selection
- Color code task instruction bubble
- Add reference page footer
- Section pages, lessons, and references all use matching colors

LESSON_EVALUATION.md

@@ -0,0 +1,851 @@
+# Code Crispies Lesson Evaluation
+
+This document evaluates all lessons using the 5-question framework to identify gaps, improvements needed, and restructuring recommendations.
+
+## Evaluation Framework
+
+### The 5 Questions
+1. **Q1: PURPOSE** - What concept does this teach and why does a student need it?
+2. **Q2: PREREQUISITES** - Does it assume knowledge already taught?
+3. **Q3: TASK CLARITY** - Can students complete it without guessing?
+4. **Q4: EXPLANATION DEPTH** - Is depth appropriate for position?
+5. **Q5: PROGRESSION** - Does it prepare for the next lesson?
+
+### Scoring
+- **5** = Excellent
+- **4** = Good
+- **3** = Adequate
+- **2** = Needs Improvement
+- **1** = Requires Rewrite
+
+---
+
+## Module 1: Welcome (00-welcome.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Get Started | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Overview | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Playground | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+
+**Module Summary:** Excellent onboarding. Comprehensive explanation of platform, clear navigation guidance.
+
+**Issues:** None
+
+**Recommendation:** Keep as-is
+
+---
+
+## Module 2: HTML Block & Inline (20-html-elements.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Block vs Inline | 4 | 5 | 5 | 3 | 5 | 22/25 | Enhance |
+| Semantic Tags | 4 | 5 | 4 | 3 | 5 | 21/25 | Enhance |
+| div & span | 2 | 5 | 5 | 2 | 4 | 18/25 | **REMOVE** |
+
+**Module Summary:** Good content but lesson 3 (div & span) is redundant with lesson 1.
+
+**Issues:**
+- Q4: First lesson (Block vs Inline) needs more historical context about document flow
+- Q4: Missing explanation of why block/inline matters for layout
+- Q1: Lesson 3 (div & span) is redundant - block/inline already covered in lesson 1
+
+**Recommendation:**
+- **REMOVE lesson 3 (div & span)** - redundant to lesson 1
+- Enhance lesson 1 with comprehensive explanation (~200 words)
+- Add "why" context: Why does HTML distinguish block from inline?
+
+---
+
+## Module 3: HTML Forms - Basics (21-html-forms-basic.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Form Structure | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Input Types | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Submit Button | 5 | 5 | 5 | 3 | 5 | 23/25 | Minor edit |
+
+**Module Summary:** Well-structured with good accessibility focus (mentions `for` attribute).
+
+**Issues:**
+- Q4: First lesson could have more context about why forms exist, HTTP form submission
+- Q4: Depth is similar across all lessons instead of progressive reduction
+
+**Recommendation:**
+- Add comprehensive intro to lesson 1 about forms' role in web applications
+- Reduce depth in lesson 3 (Submit Button)
+
+---
+
+## Module 4: HTML Validation (22-html-forms-validation.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Required Fields | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Constraints | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Full Form | 5 | 5 | 4 | 3 | 5 | 22/25 | Minor edit |
+
+**Module Summary:** Good coverage of native validation attributes.
+
+**Issues:**
+- Q3: Full Form lesson task says "Add required attributes, proper input types, and validation constraints" - somewhat vague
+- Q4: Difficulty marked as "intermediate" but content is beginner-friendly
+
+**Recommendation:**
+- Clarify task in lesson 3: specify exactly what to add
+- Change difficulty to "beginner"
+
+---
+
+## Module 5: HTML Details & Summary (23-html-details-summary.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| First Widget | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Pre-expanded | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| FAQ Accordion | 5 | 5 | 5 | 4 | 4 | 23/25 | Keep |
+
+**Module Summary:** Excellent demonstration of native HTML interactivity.
+
+**Issues:**
+- Q4: First lesson could mention historical context (before details, needed JS)
+- Q5: FAQ Accordion is a good capstone but doesn't connect to next module
+
+**Recommendation:**
+- Add "why" context to lesson 1: "Before HTML5, collapsible content required JavaScript"
+
+---
+
+## Module 6: HTML Progress & Meter (24-html-progress-meter.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Progress Bars | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Indeterminate | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Meter Gauges | 5 | 5 | 5 | 4 | 4 | 23/25 | Keep |
+
+**Module Summary:** Good coverage of native visualization elements.
+
+**Issues:**
+- Q4: Meter lesson has many attributes - could be overwhelming
+
+**Recommendation:** Keep as-is
+
+---
+
+## Module 7: HTML Tables (30-html-tables.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Basic Table | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Head & Body | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Complete Table | 5 | 5 | 5 | 3 | 4 | 22/25 | Minor edit |
+
+**Module Summary:** Good semantic table structure teaching.
+
+**Issues:**
+- Q4: First lesson could explain when to use tables (tabular data, not layout!)
+- Q4: Progressive depth reduction works well
+
+**Recommendation:**
+- Add context to lesson 1: "Tables are for tabular data, not page layout"
+
+---
+
+## Module 8: HTML SVG (32-html-svg.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Drawing Circles | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Rectangles & Lines | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Multiple Shapes | 5 | 5 | 5 | 3 | 3 | 21/25 | Review |
+
+**Module Summary:** Good intro to SVG but positioned oddly in HTML section.
+
+**Issues:**
+- Q5: Final lesson doesn't connect to CSS section that follows
+- Position: SVG involves graphics/styling - better fit in CSS section
+
+**Recommendation:**
+- MOVE to CSS section after Units & Variables
+- Add comprehensive intro about SVG vs raster images
+
+---
+
+## Module 9: HTML Marquee (31-html-marquee.json) - DEPRECATED
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Scrolling Text | 2 | 5 | 5 | 3 | 3 | 18/25 | REMOVE |
+| Direction & Behavior | 2 | 5 | 5 | 3 | 3 | 18/25 | REMOVE |
+| Retro News Ticker | 2 | 5 | 5 | 3 | 2 | 17/25 | REMOVE |
+
+**Module Summary:** Teaches deprecated HTML element.
+
+**Issues:**
+- Q1: Marquee is deprecated and should not be taught as standard practice
+- Q5: Doesn't lead to anything practical
+
+**Recommendation:**
+- **REMOVE from learning path**
+- Could be moved to optional "Web History" section if desired
+
+---
+
+## Module 10: CSS Selectors (00-basic-selectors.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| What's a Selector? | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Type Selectors | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Class Selectors | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Multiple Classes | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Combining Types | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| ID Selectors | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Type + ID | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Selector Lists | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Universal (*) | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Specificity | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+
+**Module Summary:** EXCELLENT! This is the gold standard for explanation depth. First lesson has comprehensive "why" context with code examples.
+
+**Issues:** None significant
+
+**Recommendation:**
+- Keep as-is
+- Use as template for other modules
+- Note: Progressive depth reduction could be stronger (lessons 5-10 have similar depth)
+
+---
+
+## Module 11: CSS Box Model (01-box-model.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Box Model Components | 5 | 5 | 5 | 4 | 5 | 24/25 | Enhance |
+| Adding Borders | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Adding Margins | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Box Sizing | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Margin Collapse | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Margin Shorthand | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Padding Shorthand | 5 | 5 | 5 | 2 | 5 | 22/25 | Keep |
+| Border on Specific Sides | 5 | 5 | 5 | 2 | 4 | 21/25 | Keep |
+
+**Module Summary:** Good structure with proper progression.
+
+**Issues:**
+- Q4: First lesson could have MORE comprehensive explanation (like CSS Selectors has)
+- Q4: Last lessons appropriately brief - good depth progression!
+
+**Recommendation:**
+- Enhance lesson 1 description with "why" context (like CSS Selectors lesson 1)
+- Visual diagram reference would help but not critical
+
+---
+
+## Module 12: CSS Units & Variables (05-units-variables.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Absolute vs Relative | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| CSS Custom Properties | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Unit Calculations | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Viewport & Responsive | 5 | 5 | 5 | 3 | 4 | 22/25 | Keep |
+
+**Module Summary:** Good coverage of units and variables.
+
+**Issues:**
+- Q5: Last lesson could better transition to Flexbox module
+- GAP: Colors and Typography should come BEFORE this module
+
+**Recommendation:**
+- Add transition text mentioning layout modules next
+- INSERT Colors and Typography modules before this one
+
+---
+
+## Module 13: CSS Flexbox (flexbox.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Container | 5 | 5 | 5 | 2 | 5 | 22/25 | **ENHANCE** |
+| Direction & Wrap | 5 | 5 | 5 | 2 | 5 | 22/25 | Keep |
+| Justify Content | 5 | 5 | 5 | 2 | 5 | 22/25 | Keep |
+| Align Items | 5 | 5 | 5 | 2 | 5 | 22/25 | Keep |
+| Flex Grow | 5 | 5 | 5 | 2 | 5 | 22/25 | Keep |
+| Align Self | 5 | 5 | 5 | 2 | 4 | 21/25 | Keep |
+
+**Module Summary:** MAJOR ISSUE - First lesson has minimal explanation compared to CSS Selectors!
+
+**Issues:**
+- Q4: **CRITICAL** - Lesson 1 description is only 2 sentences + code block
+- Q4: No "why" context about flexbox history or when to use it
+- Q4: All lessons have similar minimal depth - no progressive reduction
+
+**Recommendation:**
+- **REWRITE lesson 1** with comprehensive explanation:
+  - History: Before flexbox, layout was done with floats/positioning
+  - Why: Flexbox solves the "vertical centering problem" and responsive layouts
+  - Main vs cross axis explained
+  - When to use flexbox vs grid
+- Keep lessons 2-6 brief (appropriate for later lessons)
+
+---
+
+## Module 14: CSS Responsive Design (08-responsive.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Media Queries | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Fluid Type | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Responsive Grid | 5 | 4 | 5 | 3 | 5 | 22/25 | Review |
+| Mobile-First | 5 | 5 | 5 | 3 | 4 | 22/25 | Keep |
+
+**Module Summary:** Good coverage but has prerequisite issue.
+
+**Issues:**
+- Q2: Lesson 3 (Responsive Grid) uses CSS Grid concepts but Grid hasn't been taught!
+- GAP: Grid module should come BEFORE Responsive Design
+
+**Recommendation:**
+- ADD Grid module before Responsive Design
+- Or remove/rewrite Responsive Grid lesson to use flexbox only
+
+---
+
+## Module 15: CSS Animations (06-transitions-animations.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Transitions | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Timing Funcs | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Keyframes | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Animation Properties | 5 | 5 | 5 | 3 | 4 | 22/25 | Keep |
+
+**Module Summary:** Good structure with appropriate progression.
+
+**Issues:**
+- Q4: First lesson could have more context about when to use animations (UX principles)
+
+**Recommendation:**
+- Add brief UX context to lesson 1: "Animations should enhance UX, not distract"
+
+---
+
+## Module 16: Goodbye (99-goodbye.json)
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Well Done! | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Contribute | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Keep Learning | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+
+**Module Summary:** Excellent closing with resources and encouragement.
+
+**Issues:** None
+
+**Recommendation:** Keep as-is
+
+---
+
+# Unused Modules Evaluation
+
+## Colors (03-colors.json) - NOT IN PATH
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Setting Background Colors | 5 | 5 | 4 | 3 | 5 | 22/25 | Enhance |
+| Text Color and Contrast | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| CSS Gradients | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Background Images | 5 | 5 | 4 | 3 | 4 | 21/25 | Review |
+
+**Issues:**
+- Q3: Lesson 1 uses hex code (#e0f7fa) instead of named color - inconsistent with guidelines
+- Q4: First lesson needs more explanation about color theory, accessibility
+- Q3: Lesson 4 task is vague: "using a placeholder URL"
+
+**Recommendation:**
+- **ADD to learning path** after CSS Selectors
+- Change hex codes to named colors where possible
+- Enhance lesson 1 with color accessibility context (contrast ratios)
+- Clarify task in lesson 4
+
+---
+
+## Typography (04-typography.json) - NOT IN PATH
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Font Family & Fallbacks | 5 | 5 | 5 | 3 | 5 | 23/25 | Enhance |
+| Font Size & Line Height | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Font Weight & Style | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Text Decoration & Shadow | 5 | 5 | 4 | 3 | 4 | 21/25 | Review |
+
+**Issues:**
+- Q4: First lesson needs more context about web fonts, system fonts, why fallbacks matter
+- Q3: Lesson 4 task is vague: "Apply an underline... and a light shadow"
+
+**Recommendation:**
+- **ADD to learning path** after Colors
+- Enhance lesson 1 with font loading context
+- Specify exact values in lesson 4 task
+
+---
+
+## Grid (grid.json) - NOT IN PATH
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| Grid Container Basics | 5 | 5 | 5 | 4 | 5 | 24/25 | Enhance |
+| Grid Template Areas | 5 | 5 | 5 | 4 | 5 | 24/25 | Keep |
+| Spanning Grid Cells | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Automatic Grid Placement | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Grid Alignment | 5 | 5 | 5 | 3 | 5 | 23/25 | Keep |
+| Overlapping Grid Items | 5 | 5 | 5 | 3 | 4 | 22/25 | Keep |
+
+**Issues:**
+- Q4: First lesson needs comprehensive intro about Grid vs Flexbox (when to use which)
+
+**Recommendation:**
+- **ADD to learning path** after Flexbox
+- Enhance lesson 1 with Grid vs Flexbox comparison
+
+---
+
+## Advanced Selectors (01-advanced-selectors.json) - NOT IN PATH
+
+| Lesson | Q1 | Q2 | Q3 | Q4 | Q5 | Total | Action |
+|--------|----|----|----|----|----|----|--------|
+| [attribute] | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Attr Matching | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Child (>) | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Descendant | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Adjacent (+) | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| Sibling (~) | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| :hover | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+| :first-child | 5 | 5 | 5 | 5 | 5 | 25/25 | Keep |
+
+**Issues:** None - this is an excellent module!
+
+**Recommendation:**
+- **ADD to learning path** after CSS Basic Selectors
+- This module has the BEST explanation depth of all modules
+
+---
+
+# Summary
+
+## Overall Statistics
+
+| Category | Count |
+|----------|-------|
+| Total Active Lessons | 62 |
+| Lessons Scoring 24-25 | 35 (56%) |
+| Lessons Scoring 21-23 | 22 (35%) |
+| Lessons Scoring <21 | 5 (8%) |
+| Modules to REMOVE | 1 (Marquee) |
+| Modules to ADD | 4 (Colors, Typography, Grid, Adv Selectors) |
+
+## Critical Issues
+
+### 1. Missing Modules (HIGH PRIORITY)
+- **Colors** - Students use colors without learning them
+- **Typography** - Font properties not taught
+- **Grid** - Essential layout missing
+- **Advanced Selectors** - Excellent content not being used
+
+### 2. Explanation Depth Issues (MEDIUM PRIORITY)
+- **Flexbox Lesson 1** - Needs comprehensive rewrite (currently only 2 sentences)
+- **HTML Block & Inline Lesson 1** - Needs "why" context
+- **Box Model Lesson 1** - Could be more comprehensive
+
+### 3. Module Position Issues (MEDIUM PRIORITY)
+- **SVG** - Should be in CSS section, not HTML section
+- **Responsive Design** - Uses Grid concepts before Grid is taught
+
+### 4. Deprecated Content (HIGH PRIORITY)
+- **Marquee** - Remove from learning path
+
+## Recommended New Structure
+
+```
+1.  Welcome
+2.  HTML Block & Inline
+3.  HTML Forms - Basics
+4.  HTML Forms - Validation
+5.  HTML Details & Summary
+6.  HTML Progress & Meter
+7.  HTML Tables
+8.  CSS Selectors - Basics      (existing)
+9.  CSS Selectors - Advanced    (ADD - excellent content)
+10. CSS Colors                  (ADD)
+11. CSS Typography              (ADD)
+12. CSS Box Model
+13. CSS Units & Variables
+14. CSS SVG                     (MOVE from HTML)
+15. CSS Flexbox                 (ENHANCE lesson 1)
+16. CSS Grid                    (ADD)
+17. CSS Responsive Design
+18. CSS Animations
+19. What's Next?
+
+REMOVED: HTML Marquee
+```
+
+## Priority Actions
+
+### Immediate (Before Next Release)
+1. Remove HTML Marquee from `src/config/lessons.js`
+2. Remove "div & span" lesson from HTML Block & Inline (redundant)
+3. Add Advanced Selectors to path after Basic Selectors
+4. Enhance Flexbox lesson 1 with comprehensive explanation
+
+### Short-term
+5. Add Colors module to path (after Basic Selectors)
+6. Add Typography module to path (after Colors)
+7. Add Grid module to path (after Flexbox)
+8. Move SVG from HTML section to CSS section
+
+### Medium-term
+9. Enhance all first lessons with comprehensive explanations
+10. Fix hex colors in Colors module to use named colors
+11. Clarify vague tasks (Typography lesson 4, Colors lesson 4)
+
+### Long-term
+12. Implement progressive depth reduction across all modules
+13. Update translations for new module order
+
+---
+
+## UI Changes
+
+### Header Logo
+- **Current:** "code" has background highlight, "crispies" is plain
+- **Change:** Swap so "crispies" has background highlight, "code" is plain
+
+---
+
+# Detailed Lesson-Level Improvements
+
+## HTML Section Lessons
+
+### Module: HTML Block & Inline (20-html-elements.json)
+
+#### Lesson 1: Block vs Inline Elements
+**Current Description:**
+> "HTML elements fall into two main categories: Block elements (containers) start on a new line and take full width. Examples: div, p, h1, section. Inline elements flow within text and only take needed width. Examples: span, a, strong, em"
+
+**Issues:**
+- No "why" context - why does HTML distinguish between block and inline?
+- No historical context
+- No practical application explanation
+
+**Improved Description:**
+```
+<strong>Understanding Document Flow</strong><br><br>
+
+When browsers render HTML, they follow a concept called <em>document flow</em> - the natural way elements arrange themselves on a page. This fundamental concept, dating back to HTML's origins as a document markup language, divides elements into two categories:<br><br>
+
+<strong>Block elements</strong> behave like paragraphs in a word processor - they start on a new line and stretch to fill available width. Think of them as "containers" that stack vertically. Examples: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br>
+
+<strong>Inline elements</strong> behave like words in a sentence - they flow within text without breaking the line, taking only the width they need. Examples: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd><br><br>
+
+<strong>Why this matters:</strong> Understanding block vs inline is essential for CSS layout. You cannot set width/height on inline elements, and vertical margins behave differently. This distinction forms the foundation of all web layout.
+```
+
+#### Lesson 2: Semantic Tags
+**Current Description:** Good, but could add brief "why" for accessibility
+
+**Add to beginning:**
+```
+Semantic HTML helps both browsers and assistive technologies (like screen readers) understand your content structure. Using the right semantic elements improves accessibility and SEO.<br><br>
+```
+
+#### Lesson 3: div & span
+**Action:** REMOVE (redundant - block/inline already covered in lesson 1)
+
+---
+
+### Module: HTML Forms - Basics (21-html-forms-basic.json)
+
+#### Lesson 1: Form Structure
+**Current Description:**
+> "Every form needs a form wrapper. Inside, use label to describe inputs and input for user data entry. The for attribute on labels should match the id on inputs for accessibility."
+
+**Issues:**
+- No context about what forms ARE or why they exist
+- No mention of HTTP form submission
+
+**Improved Description:**
+```
+<strong>HTML forms are the primary way users send data to websites</strong> - from login credentials to search queries to payment information. Without forms, the web would be read-only.<br><br>
+
+Every form needs a <kbd>&lt;form&gt;</kbd> wrapper that defines where data goes when submitted. Inside, you build the interface with:<br><br>
+
+• <kbd>&lt;label&gt;</kbd> - Describes what each input is for<br>
+• <kbd>&lt;input&gt;</kbd> - Where users enter data<br><br>
+
+<strong>Accessibility tip:</strong> The <kbd>for</kbd> attribute on labels should match the <kbd>id</kbd> on inputs. This lets users click the label to focus the input - essential for users with motor impairments.
+```
+
+#### Lesson 2: Input Types
+**Status:** Good as-is (score 24/25)
+
+#### Lesson 3: Submit Button
+**Current Description:** Good but could be briefer (this is lesson 3)
+**Action:** Reduce slightly - appropriate for late-module position
+
+---
+
+### Module: HTML Forms - Validation (22-html-forms-validation.json)
+
+#### Lesson 3: Full Form (Complete Registration)
+**Current Task:**
+> "Complete the registration form. Add required attributes, proper input types, and validation constraints."
+
+**Issue:** Task is vague - doesn't specify exactly what to add
+
+**Improved Task:**
+```
+Complete the registration form by adding:<br>
+1. <kbd>required</kbd> to all fields marked with *<br>
+2. <kbd>type="email"</kbd> to the email input<br>
+3. <kbd>type="password"</kbd> to the password input<br>
+4. <kbd>minlength="8"</kbd> to the password input<br>
+5. <kbd>required</kbd> to the terms checkbox
+```
+
+---
+
+### Module: HTML Details & Summary (23-html-details-summary.json)
+
+#### Lesson 1: First Widget
+**Add to description beginning:**
+```
+Before HTML5, creating collapsible content required JavaScript. The <kbd>&lt;details&gt;</kbd> element gives you this functionality natively - no scripts needed, fully accessible, works everywhere.<br><br>
+```
+
+---
+
+### Module: HTML Tables (30-html-tables.json)
+
+#### Lesson 1: Basic Table Structure
+**Add to description beginning:**
+```
+<strong>Important:</strong> Tables are for <em>tabular data</em> only (like spreadsheets, schedules, or comparison charts). Never use tables for page layout - that's what CSS Grid and Flexbox are for.<br><br>
+```
+
+---
+
+### Module: HTML SVG (32-html-svg.json)
+
+#### Lesson 1: Drawing Circles
+**Add to description beginning:**
+```
+<strong>SVG (Scalable Vector Graphics)</strong> creates images using mathematical descriptions rather than pixels. Unlike JPG or PNG, SVG images stay crisp at any size - perfect for logos, icons, and illustrations.<br><br>
+```
+
+---
+
+## CSS Section Lessons
+
+### Module: CSS Selectors (00-basic-selectors.json)
+**Status:** EXCELLENT - Use as template for other modules. No changes needed.
+
+---
+
+### Module: CSS Box Model (01-box-model.json)
+
+#### Lesson 1: Box Model Components
+**Current Description:**
+> "The CSS box model consists of four concentric layers: content area (innermost), padding, border, and margin (outermost). Understanding how these components interact is essential for precise layout control."
+
+**Issues:**
+- Good but could be more comprehensive like CSS Selectors lesson 1
+
+**Improved Description:**
+```
+<strong>The CSS box model is the foundation of all web layout.</strong> Every HTML element is rendered as a rectangular box, and understanding this box is crucial for controlling spacing and sizing.<br><br>
+
+The box model consists of four concentric layers (from inside out):<br>
+1. <strong>Content</strong> - Your actual text, images, or nested elements<br>
+2. <strong>Padding</strong> - Space between content and border (inside the element)<br>
+3. <strong>Border</strong> - The visible edge of the element<br>
+4. <strong>Margin</strong> - Space between this element and others (outside the element)<br><br>
+
+<pre>.box {
+  /* Content is determined by width/height */
+  padding: 20px;   /* Inside spacing */
+  border: 2px solid black;
+  margin: 10px;    /* Outside spacing */
+}</pre>
+
+<strong>Key insight:</strong> Padding adds to the element's visual size; margin creates empty space around it.
+```
+
+---
+
+### Module: CSS Flexbox (flexbox.json) - CRITICAL
+
+#### Lesson 1: Container
+**Current Description:**
+> "Learn how to create a flex container and understand the main and cross axes.
+> [code block]"
+
+**Issues:**
+- ONLY 2 sentences before code block!
+- No "why" context
+- No comparison to older methods
+- No explanation of when to use flexbox
+
+**Improved Description:**
+```
+<strong>Flexbox revolutionized CSS layout.</strong> Before flexbox (2012), developers used floats and positioning hacks for layouts - techniques that were never designed for that purpose. Flexbox was created specifically to solve common layout problems.<br><br>
+
+<strong>When to use Flexbox:</strong><br>
+• Centering content (finally easy!)<br>
+• Distributing space between items<br>
+• Aligning items in a row or column<br>
+• Creating responsive navigation bars<br>
+• Building card layouts<br><br>
+
+<strong>The two axes:</strong><br>
+Flexbox works along two perpendicular axes:<br>
+• <strong>Main axis</strong> - The direction items flow (horizontal by default)<br>
+• <strong>Cross axis</strong> - Perpendicular to main axis (vertical by default)<br><br>
+
+<pre>.container {
+  display: flex;        /* Creates flex container */
+  justify-content: center; /* Align on main axis */
+  align-items: center;    /* Align on cross axis */
+}</pre>
+
+To start, you only need <kbd>display: flex</kbd> on the parent container. This immediately makes all direct children "flex items" that can be aligned and distributed.
+```
+
+#### Lessons 2-6
+**Status:** Good as-is - appropriately brief for later lessons
+
+---
+
+### Module: CSS Responsive Design (08-responsive.json)
+
+#### Lesson 1: Media Queries
+**Add to description beginning:**
+```
+<strong>Responsive design</strong> means your layout adapts to different screen sizes - from phones to desktops. Media queries are CSS rules that only apply when certain conditions (like screen width) are met.<br><br>
+```
+
+---
+
+### Module: CSS Animations (06-transitions-animations.json)
+
+#### Lesson 1: Transitions
+**Add to description:**
+```
+<strong>UX principle:</strong> Animations should enhance usability, not distract. Use subtle, fast transitions (0.2-0.3s) for interactive feedback. Reserve longer animations for meaningful state changes.<br><br>
+```
+
+---
+
+## Unused Modules to Add
+
+### Module: CSS Colors (03-colors.json)
+
+#### Lesson 1: Setting Background Colors
+**Current Issues:**
+- Uses hex code (#e0f7fa) instead of named color
+- No context about color accessibility
+
+**Improved Description:**
+```
+<strong>Color is fundamental to web design</strong>, but it's also one of the most important accessibility considerations. Approximately 8% of men have some form of color blindness.<br><br>
+
+CSS offers multiple ways to specify colors:<br>
+• <strong>Named colors:</strong> <kbd>steelblue</kbd>, <kbd>coral</kbd>, <kbd>gold</kbd> (147 names)<br>
+• <strong>Hex codes:</strong> <kbd>#3498db</kbd> (harder to read)<br>
+• <strong>RGB:</strong> <kbd>rgb(52, 152, 219)</kbd><br>
+• <strong>HSL:</strong> <kbd>hsl(204, 70%, 53%)</kbd> (easiest to adjust)<br><br>
+
+For learning, we'll use named colors - they're memorable and readable.
+```
+
+**Fix task:** Change `#e0f7fa` to `lightcyan` (equivalent named color)
+
+#### Lesson 4: Background Images
+**Current Task:** "Set a background image on '.bg-img' using a placeholder URL, center it, and prevent tiling."
+
+**Issue:** Vague - what URL? What values?
+
+**Improved Task:**
+```
+The background image is already set. Add these properties to <kbd>.bg-img</kbd>:<br>
+1. <kbd>background-position: center</kbd><br>
+2. <kbd>background-repeat: no-repeat</kbd>
+```
+
+---
+
+### Module: CSS Typography (04-typography.json)
+
+#### Lesson 1: Font Family & Fallbacks
+**Add context:**
+```
+<strong>Web fonts vs System fonts:</strong> Web fonts (like Google Fonts) load from the internet, adding download time. System fonts (like Georgia, Arial) are already on users' devices - instant and reliable.<br><br>
+
+<strong>Fallback stacks</strong> ensure text displays even if your preferred font fails to load. Always end with a generic family (<kbd>serif</kbd>, <kbd>sans-serif</kbd>, <kbd>monospace</kbd>).
+```
+
+#### Lesson 4: Text Decoration & Shadow
+**Current Task:** "Apply an underline with text-decoration and a light shadow using text-shadow on '.fancy'."
+
+**Issue:** Doesn't specify shadow values
+
+**Improved Task:**
+```
+Style <kbd>.fancy</kbd> with:<br>
+1. <kbd>text-decoration: underline</kbd><br>
+2. <kbd>text-shadow: 1px 1px 2px gray</kbd>
+```
+
+---
+
+### Module: CSS Grid (grid.json)
+
+#### Lesson 1: Grid Container Basics
+**Add context about Grid vs Flexbox:**
+```
+<strong>Grid vs Flexbox - when to use which?</strong><br><br>
+
+• <strong>Flexbox:</strong> One-dimensional layouts (a row OR a column)<br>
+• <strong>Grid:</strong> Two-dimensional layouts (rows AND columns together)<br><br>
+
+Use Grid when you need to align items in both directions simultaneously - like a photo gallery, dashboard, or page layout. Use Flexbox for navigation bars, card rows, or centering content.<br><br>
+
+Grid was the last major layout feature added to CSS (2017), completing the layout toolkit that web designers had wanted for decades.
+```
+
+---
+
+# Summary: Lessons Requiring Changes
+
+| Module | Lesson | Change Type | Priority |
+|--------|--------|-------------|----------|
+| HTML Block & Inline | 1. Block vs Inline | Rewrite description | HIGH |
+| HTML Block & Inline | 2. Semantic Tags | Add accessibility context | MEDIUM |
+| HTML Block & Inline | 3. div & span | **REMOVE** | HIGH |
+| HTML Forms | 1. Form Structure | Enhance description | MEDIUM |
+| HTML Forms Validation | 3. Full Form | Clarify task | MEDIUM |
+| HTML Details | 1. First Widget | Add history context | LOW |
+| HTML Tables | 1. Basic Table | Add "not for layout" warning | MEDIUM |
+| HTML SVG | 1. Drawing Circles | Add SVG vs raster context | LOW |
+| CSS Box Model | 1. Components | Enhance description | MEDIUM |
+| **CSS Flexbox** | **1. Container** | **REWRITE description** | **CRITICAL** |
+| CSS Responsive | 1. Media Queries | Add responsive context | LOW |
+| CSS Animations | 1. Transitions | Add UX principle | LOW |
+| CSS Colors | 1. Background Colors | Fix hex→named, add a11y | MEDIUM |
+| CSS Colors | 4. Background Images | Clarify task | MEDIUM |
+| CSS Typography | 1. Font Family | Add web font context | MEDIUM |
+| CSS Typography | 4. Decoration | Specify shadow values | MEDIUM |
+| CSS Grid | 1. Container Basics | Add Grid vs Flexbox | MEDIUM |

LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

README.md

@@ -1,16 +1,16 @@
 ![Code Crispies Logo](./public/android-chrome-192x192.png)
 # Code Crispies
 
-An interactive platform for learning CSS and Tailwind CSS through practical challenges.
+An interactive platform for learning HTML, CSS, and Tailwind CSS through practical challenges.
 
 ## 📚 Overview
 
-Code Crispies is a web-based learning platform designed to help users master CSS and Tailwind CSS through hands-on exercises. The application presents a series of progressive challenges organized into themed modules, allowing learners to build their skills step by step while receiving immediate feedback.
+Code Crispies is a web-based learning platform designed to help users master HTML, CSS, and Tailwind CSS through hands-on exercises. The application presents a series of progressive challenges organized into themed modules, allowing learners to build their skills step by step while receiving immediate feedback.
 
 ### Key Features
 
-- **Interactive Lessons**: Learn CSS and Tailwind concepts through practical, hands-on challenges
-- **Dual Mode Support**: Switch between CSS and Tailwind CSS learning modes
+- **Interactive Lessons**: Learn HTML, CSS, and Tailwind concepts through practical, hands-on challenges
+- **Multiple Learning Paths**: CSS fundamentals, HTML semantics, and Tailwind CSS utilities
 - **Progressive Difficulty**: Modules are structured to build skills gradually from basic to advanced
 - **Real-Time Feedback**: Get immediate validation on your code solutions with comprehensive feedback
 - **Progress Tracking**: Your learning progress is automatically saved in the browser
@@ -256,4 +256,4 @@ When adding new lessons:
 
 ## 📄 License
 
-Copyright (c) 2026 Michael Czechowski. Licensed under the [./LICENSE](WTFPL).
+This project is released into the public domain under the [Unlicense](./LICENSE). You are free to copy, modify, publish, use, compile, sell, or distribute this software for any purpose.

lessons/00-basic-selectors.json

@@ -1,548 +1,257 @@
 {
 	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "css-basic-selectors",
-	"title": "CSS Selectors",
-	"description": "CSS selectors are the foundation of styling web pages, allowing you to target specific HTML elements for styling. This module introduces fundamental selector types including element type selectors, class selectors, ID selectors, and the universal selector.",
+	"title": "CSS Basics",
+	"description": "Learn the fundamental building blocks of CSS: properties, values, and selectors. This module teaches you the syntax rules that every CSS declaration follows.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
-			"id": "introduction-to-selectors",
-			"title": "What's a Selector?",
-			"description": "A CSS selector is the first part of a CSS rule that tells the browser which HTML elements should receive the styles defined in the declaration block. Selectors are essentially patterns that match against elements in your HTML document. Understanding selectors is fundamental because they determine which elements your CSS rules will affect. The element or elements targeted by a selector are referred to as the 'subject of the selector.' When writing a CSS rule, you first specify the selector, followed by curly braces that contain the style declarations.<br/>For example, to change the text color of elements, you can use the <kbd>color</kbd> property within your declaration block.<br><br><pre>/* Element selector */\np {\n  color: orangered;\n  /* │       └─── Indicates the value of the expression\n     │                                                     \n     └─────────── Indicates the property of the expression */\n}</pre>",
-			"task": "Write a CSS rule using a type selector that targets all paragraph elements <kbd>p</kbd> in the document. Make the text blue by setting the <kbd>color</kbd> property to <kbd>blue</kbd>.",
-			"previewHTML": "<h1>Introduction to CSS Selectors</h1>\n<p>This paragraph should turn blue.</p>\n<div>This div element should remain unchanged.</div>\n<p>This second paragraph should also turn blue.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, p, div { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Write a type selector to target all paragraph elements */\n",
+			"id": "css-properties",
+			"title": "CSS Properties",
+			"description": "CSS styles elements using <strong>declarations</strong> - pairs of properties and values. Every declaration follows the same pattern:<br><br><pre>property: value;</pre><br>The <strong>property</strong> is what you want to change (like <kbd>color</kbd> or <kbd>background</kbd>). The <strong>value</strong> is what you're setting it to. A colon separates them, and a semicolon ends the line.<br><br>Values come in different types:<br>• <strong>Keywords:</strong> <kbd>red</kbd>, <kbd>bold</kbd>, <kbd>center</kbd><br>• <strong>Numbers with units:</strong> <kbd>16px</kbd>, <kbd>2rem</kbd>, <kbd>100%</kbd><br>• <strong>Colors:</strong> <kbd>steelblue</kbd>, <kbd>#ff0000</kbd>",
+			"task": "Complete the declaration by adding <kbd>color: coral;</kbd> to change the text color.",
+			"previewHTML": "<p class=\"text\">This text should turn coral.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .text { font-size: 1.25rem; }",
+			"sandboxCSS": "",
+			"codePrefix": ".text {\n  ",
 			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
-			"solution": "p { color: blue }",
+			"solution": "color: coral;",
 			"validations": [
 				{
-					"type": "regex",
-					"value": "^p\\s*{",
-					"message": "Start your rule with <kbd>p { … }</kbd> to select all paragraph elements",
-					"options": {
-						"caseSensitive": false
-					}
-				},
+					"type": "property_value",
+					"value": { "property": "color", "expected": "coral" },
+					"message": "Add <kbd>color: coral;</kbd>"
+				}
+			]
+		},
+		{
+			"id": "multiple-properties",
+			"title": "Multiple Properties",
+			"description": "A rule can have multiple declarations. Each one goes on its own line, and each needs a semicolon at the end:<br><br><pre>.box {<br>  background: gold;<br>  color: navy;<br>  padding: 1rem;<br>}</pre><br>The order usually doesn't matter - CSS applies them all. When properties conflict, the last one wins.",
+			"task": "Add two declarations: <kbd>background: lavender;</kbd> and <kbd>padding: 1rem;</kbd>",
+			"previewHTML": "<div class=\"card\">A styled card with background and padding.</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .card { border-radius: 8px; }",
+			"sandboxCSS": "",
+			"codePrefix": ".card {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "background: lavender;\n  padding: 1rem;",
+			"validations": [
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color:</kbd> property in your CSS rule"
-				},
-				{
-					"type": "contains",
-					"value": "blue",
-					"message": "Set the color value to <kbd>blue</kbd>"
+					"type": "property_value",
+					"value": { "property": "background", "expected": "lavender" },
+					"message": "Add <kbd>background: lavender;</kbd>"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "blue"
-					},
-					"message": "Use <kbd>color: blue</kbd> to set the text color"
-				},
-				{
-					"type": "regex",
-					"value": "p\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": false
-					}
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "Add <kbd>padding: 1rem;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "type-selectors",
 			"title": "Type Selectors",
-			"description": "Type selectors (also called tag name selectors or element selectors) target HTML elements based on their tag name. For example, <kbd>p</kbd> selects all paragraph elements, <kbd>h1</kbd> selects all level-one headings, and <kbd>div</kbd> selects all division elements. Type selectors are the most fundamental way to select elements, applying styles consistently to all instances of a particular HTML element throughout your document. You can define a variety of CSS properties with type selectors, such as <kbd>color</kbd> for text color, <kbd>background-color</kbd> for the background, and <kbd>font-weight</kbd> for text emphasis. They provide a broad approach for styling your page and are often the starting point for more specific styling using other selector types.",
-			"task": "Write three separate CSS rules using type selectors to target specific HTML elements: make <kbd>h2</kbd> headings <kbd>purple</kbd>, give <kbd>span</kbd> elements a <kbd>yellow</kbd> background, and make <kbd>strong</kbd> elements <kbd>red</kbd>.",
-			"previewHTML": "<h2>Type Selectors Example</h2>\n<p>Regular paragraph text <span>with a highlighted span</span> that should have a yellow background.</p>\n<p>Another paragraph with <strong>strong important text</strong> that should be red.</p>\n<h2>Another Heading</h2>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, span, strong { padding: 3px; }",
-			"codePrefix": "/* Write three separate type selectors below */\n\n",
-			"initialCode": "/* 1. Make h2 headings purple */\n\n\n/* 2. Give span elements a yellow background */\n\n\n/* 3. Make strong elements red */\n",
+			"description": "A <strong>selector</strong> tells the browser which elements to style. The simplest selector is a <strong>type selector</strong> — just the HTML tag name.<br><br><pre>p {<br>  color: steelblue;<br>}</pre><br>This rule targets every <kbd>&lt;p&gt;</kbd> element on the page. Type selectors are great for setting base styles.",
+			"task": "Style all paragraphs. Write a rule with <kbd>p</kbd> as the selector and set <kbd>color: steelblue</kbd>.",
+			"previewHTML": "<article>\n  <h2>Fresh Roasted Coffee</h2>\n  <p>Our beans are sourced from small farms in Colombia and Ethiopia.</p>\n  <p>Each batch is roasted weekly to ensure peak freshness.</p>\n</article>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h2 { margin: 0 0 1rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": "/* 1. Make h2 headings purple */\nh2 {\n  color: purple;\n}\n\n/* 2. Give span elements a yellow background */\nspan {\n  background-color: yellow;\n}\n\n/* 3. Make strong elements red */\nstrong {\n  color: red;\n}",
+			"solution": "p {\n  color: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^h2\\s*{",
-					"message": "Include an <kbd>h2 { … }</kbd> selector"
+					"value": "p\\s*\\{",
+					"message": "Start with <kbd>p {</kbd> to select paragraphs"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Set the <kbd>color</kbd> property to <kbd>purple</kbd> for h2 elements"
-				},
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "Set <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "styling-links",
+			"title": "Styling Links",
+			"description": "Type selectors work for any HTML element. The <kbd>a</kbd> selector targets all links on a page.<br><br>Links have a default blue color and underline. You can change both with CSS — use <kbd>color</kbd> for the text and <kbd>text-decoration: none</kbd> to remove the underline.",
+			"task": "Style the navigation links. Write a rule with <kbd>a</kbd> as the selector and set <kbd>color: coral</kbd>.",
+			"previewHTML": "<nav>\n  <a href=\"#\">Home</a>\n  <a href=\"#\">Menu</a>\n  <a href=\"#\">About</a>\n  <a href=\"#\">Contact</a>\n</nav>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } nav { display: flex; gap: 1.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": "a {\n  color: coral;\n}",
+			"validations": [
 				{
 					"type": "regex",
-					"value": "h2\\s*{[^}]*}",
-					"message": "Make sure to close your h2 rule with a closing brace <kbd>}</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "^span\\s*{",
-					"message": "Include a <kbd>span { … }</kbd> selector"
+					"value": "a\\s*\\{",
+					"message": "Start with <kbd>a {</kbd> to select links"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Set a <kbd>background-color: yellow</kbd> for span elements"
-				},
-				{
-					"type": "regex",
-					"value": "span\\s*{[^}]*}",
-					"message": "Make sure to close your span rule with a closing brace <kbd>}</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "^strong\\s*{",
-					"message": "Include a <kbd>strong { … }</kbd> selector"
-				},
-				{
-					"type": "regex",
-					"value": "strong\\s*{\\s*color:\\s*red;[^}]*}",
-					"message": "Set the <kbd>color: red</kbd> for strong elements"
+					"value": { "property": "color", "expected": "coral" },
+					"message": "Set <kbd>color: coral</kbd>"
 				}
 			]
 		},
 		{
 			"id": "class-selectors",
 			"title": "Class Selectors",
-			"description": "Class selectors target elements with a specific class attribute value. They begin with a dot (.) followed by the class name. Classes are powerful because they allow you to apply the same styles to multiple elements regardless of their type. An HTML element can have multiple classes (separated by spaces in the class attribute), and a class can be applied to any number of elements. When using class selectors, you can apply properties like <kbd>background-color</kbd> to set the background color of elements, and <kbd>font-weight</kbd> to control text thickness, making text bold or normal. This flexibility makes class selectors one of the most commonly used methods for applying styles in CSS, allowing for modular and reusable styling across your website.",
-			"task": "Create a CSS rule using a class selector that targets elements with the class <kbd>highlight</kbd>. Give these elements a <kbd>yellow</kbd> background and <kbd>bold</kbd> text.",
-			"previewHTML": "<h2>Using Class Selectors</h2>\n<p>This is a regular paragraph, but <span class=\"highlight\">this span has the highlight class</span> applied to it.</p>\n<p class=\"highlight\">This entire paragraph has the highlight class.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"highlight\">This list item is highlighted</li>\n</ul>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, li { padding: 5px; margin-bottom: 10px; }",
-			"codePrefix": "/* Create a class selector for elements with the 'highlight' class */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^\\.highlight\\s*{",
-					"message": "Start your rule with <kbd>.highlight { … }</kbd> to create a class selector",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color:</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Set the background color to <kbd>yellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "font-weight:",
-					"message": "Include the <kbd>font-weight:</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-weight",
-						"expected": "bold"
-					},
-					"message": "Set the font-weight to <kbd>bold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.highlight\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "multiple-classes",
-			"title": "Multiple Classes",
-			"description": "HTML elements can have multiple classes applied simultaneously, allowing for composable and modular CSS designs. When an element has multiple classes, it will receive styles from all matching class selectors. This approach enables you to build a library of reusable CSS classes that can be combined in different ways. You can also target elements that have a specific combination of classes by chaining class selectors together without spaces (e.g., <kbd>.class1.class2</kbd>). When styling these elements, you might use properties like <kbd>border-color</kbd> to change the color of element borders, and <kbd>background-color</kbd> to set the background color of elements. This technique lets you create conditional styles that only apply when certain classes appear together.",
-			"task": "Complete the CSS rule that targets elements with both <kbd>card</kbd> and <kbd>featured</kbd> classes by chaining the selectors. Set the border-color to gold and the background-color to lemonchiffon to make featured cards stand out.",
-			"previewHTML": "<h2>Multiple Class Combinations</h2>\n<div class=\"card\">Regular Card</div>\n<div class=\"card featured\">Featured Card</div>\n<div class=\"featured\">Just Featured (not a card)</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .card { border: 2px solid gray; padding: 15px; margin-bottom: 10px; border-radius: 5px; }",
+			"description": "Type selectors style <em>all</em> elements of that type. But what if you want to style just some of them?<br><br><strong>Class selectors</strong> target elements with a specific <kbd>class</kbd> attribute. They start with a dot:<br><br><pre>.badge {<br>  background: coral;<br>}</pre><br>This styles only elements with <kbd>class=\"badge\"</kbd>.",
+			"task": "Style the notification badge. Write a rule with <kbd>.badge</kbd> as the selector and set <kbd>background: tomato</kbd>.",
+			"previewHTML": "<header>\n  <h1>Dashboard</h1>\n  <span class=\"badge\">3</span>\n</header>\n<p>You have new notifications waiting.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } h1 { margin: 0; font-size: 1.5rem; } .badge { color: white; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.875rem; } p { color: #555; margin: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* The .card class already has basic styling */\n/* Now target elements with BOTH classes: 'card' AND 'featured' */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": ".card.featured { border-color: gold; background-color: lemonchiffon; }",
+			"solution": ".badge {\n  background: tomato;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.card\\.featured\\s*{",
-					"message": "Chain the selectors as <kbd>.card.featured</kbd> (no space between them)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "border-color:",
-					"message": "Include the <kbd>border-color</kbd> property"
+					"value": "\\.badge\\s*\\{",
+					"message": "Start with <kbd>.badge {</kbd> (don't forget the dot!)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "border-color",
-						"expected": "gold"
-					},
-					"message": "Set the border color to <kbd>gold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*;",
-					"message": "Make sure to end your CSS rule with a semicolon <kbd>;</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lemonchiffon"
-					},
-					"message": "Set the background color to <kbd>lemonchiffon</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "tomato" },
+					"message": "Set <kbd>background: tomato</kbd>"
 				}
 			]
 		},
 		{
-			"id": "class-with-type",
-			"title": "Combining Types",
-			"description": "You can combine type selectors with class selectors to target specific HTML elements that have a certain class. This creates a more specific selector that only matches when both conditions are true: the element is of the specified type AND it has the specified class. For example, <kbd>p.note</kbd> would select paragraph elements with the class <kbd>note</kbd>, but would not select divs or spans with that same class. You can style these combined selections using properties like <kbd>background-color</kbd> to set a colored background for your elements. This approach allows you to apply different styles to the same class when it appears on different element types.",
-			"task": "Create a CSS rule that specifically targets <kbd>&lt;span&gt;</kbd> elements with the class <kbd>highlight</kbd>. Make those elements have an orange background, while other elements with the highlight class remain untouched.",
-			"previewHTML": "<h2>Type and Class Combinations</h2>\n<p>This paragraph has a <span class=\"highlight\">highlighted span</span> that should have an orange background.</p>\n<p class=\"highlight\">This paragraph has the highlight class but should NOT have an orange background.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .highlight { font-weight: bold; }",
-			"sandboxCSS": "h2, p, span { padding: 5px; }",
-			"codePrefix": "/* The .highlight class already sets font-weight to bold */\n/* Now target ONLY span elements with the highlight class */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^span\\.highlight\\s*{",
-					"message": "Use <kbd>span.highlight</kbd> selector (no space between element and class)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "orange"
-					},
-					"message": "Set the background color to <kbd>orange</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "span\\.highlight\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-selectors",
-			"title": "ID Selectors",
-			"description": "ID selectors target elements with a specific id attribute. They begin with a hash/pound sign (#) followed by the ID name. Unlike classes, IDs must be unique within a document—each ID value should be used only once per page. ID selectors have higher specificity than class or element selectors, meaning they override those selectors when conflicts arise. When styling with ID selectors, you can use properties like <kbd>color</kbd> to define text color, and <kbd>text-decoration</kbd> to control the appearance of text, such as adding underlines to elements. Because of their uniqueness requirement, IDs are best used for one-of-a-kind elements like page headers, main navigation, or specific unique components that appear only once on a page.",
-			"task": "Create a CSS rule with an ID selector that targets the element with the ID <kbd>main-title</kbd>. Set its color to purple and add an underline with <kbd>text-decoration: underline</kbd>.",
-			"previewHTML": "<h1 id=\"main-title\">Main Page Title</h1>\n<p>Regular paragraph content.</p>\n<h2>Secondary Heading</h2>\n<p id=\"intro\">Introduction paragraph (different ID).</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Create an ID selector to target the element with id=\"main-title\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^#main-title\\s*{",
-					"message": "Start your rule with <kbd>#main-title</kbd> to create an ID selector",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Set the color to <kbd>purple</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "text-decoration:",
-					"message": "Include the <kbd>text-decoration</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "text-decoration",
-						"expected": "underline"
-					},
-					"message": "Set the text-decoration to <kbd>underline</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "#main-title\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-with-type",
-			"title": "Type + ID",
-			"description": "Similar to how you can combine type and class selectors, you can also combine type selectors with ID selectors. For example, <kbd>h1#title</kbd> targets an h1 element with the ID 'title'. When using this combined approach, you can apply CSS properties like <kbd>font-style</kbd> to control the slant of the text, making it italic or normal. While this selector combination is more specific than using just the ID selector, it's often unnecessary since IDs should already be unique in a document. However, this technique can be useful for improving code readability or when you want to emphasize that a particular ID should only appear on a specific element type.",
-			"task": "Create a CSS rule that combines a type selector with an ID selector to target specifically a paragraph element with the ID <kbd>special</kbd>. Set its font style to italic.",
-			"previewHTML": "<h2 id=\"special\">Heading with ID \"special\" (should NOT be affected)</h2>\n<p id=\"special\">Paragraph with ID \"special\" (should become italic)</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Create a combined type+ID selector for a paragraph with id=\"special\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^p#special\\s*{",
-					"message": "Use <kbd>p#special</kbd> to target paragraphs with ID <kbd>special</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "font-style:",
-					"message": "Include the <kbd>font-style</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-style",
-						"expected": "italic"
-					},
-					"message": "Set the font-style to <kbd>italic</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "p#special\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "selector-lists",
-			"title": "Selector Lists",
-			"description": "When multiple elements need the same styling, you can group them together using a selector list (also known as grouping selectors). Selector lists are created by separating individual selectors with commas. This approach reduces repetition in your CSS, making it more maintainable and efficient. For example, <kbd>h1, h2, h3 { color: blue; }</kbd> applies the same blue color to all three heading levels. When styling multiple selectors at once, you can apply properties like <kbd>background-color</kbd> to set the background, <kbd>border-left</kbd> to create a left border with a specific thickness, style, and color, and <kbd>padding-left</kbd> to create space between the content and the left border. Whitespace around commas is optional, and each selector in the list can be any valid selector type-elements, classes, IDs, or even more complex selectors.",
-			"task": "Create a selector list that applies the same styles to three different elements: paragraphs with class <kbd>note</kbd>, list items with class <kbd>important</kbd>, and the element with ID <kbd>summary</kbd>. Give them a <kbd>lightyellow</kbd> background, a <kbd>gold</kbd> left border, and some left <kbd>padding</kbd>.",
-			"previewHTML": "<p class=\"note\">This is a note paragraph.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"important\">Important list item</li>\n</ul>\n<div id=\"summary\">Summary section</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p, li, div { padding: 8px; margin-bottom: 8px; border: 1px dashed gray; }",
-			"codePrefix": "/* Create a selector list to apply the same styles to multiple different elements */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"solution": "p.note,\nli.important,\n#summary {\n  background-color: lightyellow;\n  border-left: 3px solid gold;\n  padding-left: 10px;\n}",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "p.note",
-					"message": "Include <kbd>p.note</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "li.important",
-					"message": "Include <kbd>li.important</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "#summary",
-					"message": "Include <kbd>#summary</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "regex",
-					"value": "(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)",
-					"message": "Create a comma-separated list with all three selectors",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lightyellow"
-					},
-					"message": "Set the background color to <kbd>lightyellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "border-left:",
-					"message": "Include the <kbd>border-left</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "border-left",
-						"expected": "3px solid gold"
-					},
-					"message": "Use <kbd>border-left: 3px solid gold</kbd> to create a left border"
-				},
-				{
-					"type": "contains",
-					"value": "padding-left:",
-					"message": "Include the <kbd>padding-left</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "padding-left",
-						"expected": "10px"
-					},
-					"message": "Use <kbd>padding-left: 10px</kbd> to add left padding"
-				}
-			]
-		},
-		{
-			"id": "universal-selector",
-			"title": "Universal (*)",
-			"description": "The universal selector is denoted by an asterisk (*) and matches any element of any type. It selects everything in the document or, when combined with other selectors, everything within a specific context. For example, <kbd>* { margin: 0; }</kbd> removes margins from all elements, while <kbd>article *</kbd> selects all elements inside article elements. When using the universal selector in combination with other selectors, you can apply properties like <kbd>margin</kbd> to control the spacing around elements. The universal selector is powerful but should be used carefully due to its broad impact. It's commonly used in CSS resets, to override default browser styling, or to target all children of a particular element.",
-			"task": "Use the universal selector to remove margins from all elements inside the container div. Create a rule using <kbd>div.container *</kbd> as the selector and set <kbd>margin: 0</kbd>.",
-			"previewHTML": "<div class=\"container\">\n  <h2>Inside Container</h2>\n  <p>This paragraph is inside the container.</p>\n  <ul>\n    <li>List item inside container</li>\n  </ul>\n</div>\n<p>This paragraph is outside the container and should not be affected.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } div.container { border: 2px solid navy; padding: 15px; background-color: lavender; } h2, p, ul, li { margin: 15px 0; }",
+			"id": "button-variants",
+			"title": "Button Variants",
+			"description": "Elements can have multiple classes. When you chain class selectors without spaces, you target elements that have <em>all</em> those classes:<br><br><pre>.btn.primary {<br>  background: steelblue;<br>}</pre><br>This targets elements with both <kbd>class=\"btn primary\"</kbd>, not just <kbd>.btn</kbd> or just <kbd>.primary</kbd>.",
+			"task": "Style the primary button. Write a rule with <kbd>.btn.primary</kbd> as the selector and set <kbd>background: steelblue</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Cancel</button>\n  <button class=\"btn primary\">Save Changes</button>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #e0e0e0; color: #333; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use the universal selector to target all elements inside the container */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": ".btn.primary {\n  background: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^div\\.container\\s+\\*\\s*{",
-					"message": "Use <kbd>div.container *</kbd> selector (with a space between container and *)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "margin:",
-					"message": "Include the <kbd>margin</kbd> property"
+					"value": "\\.btn\\.primary\\s*\\{",
+					"message": "Use <kbd>.btn.primary {</kbd> (no space between classes)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "margin",
-						"expected": "0"
-					},
-					"message": "Set margin to <kbd>0</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "div\\.container\\s+\\*\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "steelblue" },
+					"message": "Set <kbd>background: steelblue</kbd>"
 				}
 			]
 		},
 		{
-			"id": "specificity-basics",
-			"title": "Specificity",
-			"description": "CSS specificity determines which styles take precedence when multiple conflicting rules target the same element. Specificity follows a hierarchical system: inline styles have the highest specificity, followed by ID selectors, then class/attribute/pseudo-class selectors, and finally element/pseudo-element selectors. This can be conceptualized as a four-part score (inline, ID, class, element). When creating multiple rules that may target the same elements, you can use the <kbd>color</kbd> property to set text colors, and specificity will determine which color is actually applied. Understanding specificity is crucial for predictable styling and debugging CSS conflicts. When two selectors have equal specificity, the one that comes last in the stylesheet wins.",
-			"task": "Examine the existing CSS rules and add a new rule with higher specificity to override the text color of the paragraph. Create a rule using '.content p' as the selector and set color: green.",
-			"previewHTML": "<div class=\"content\">\n  <p>What color will this paragraph be? Look at the CSS rules and their specificity.</p>\n</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p { border: 1px dashed gray; padding: 10px; }",
-			"codePrefix": "/* These CSS rules target the same paragraph but have different specificity */\n\n/* Rule 1: Element selector (lowest specificity) */\np {\n  color: red;\n}\n\n/* Rule 2: Descendant selector (higher specificity than just 'p') */\n",
+			"id": "specific-elements",
+			"title": "Targeting Specific Elements",
+			"description": "Sometimes you want a class to look different on different elements. Combine a type selector with a class selector (no space) to be more specific:<br><br><pre>a.btn {<br>  text-decoration: none;<br>}</pre><br>This styles only <kbd>&lt;a&gt;</kbd> elements with the <kbd>btn</kbd> class, not <kbd>&lt;button&gt;</kbd> elements with that class.",
+			"task": "Remove the underline from link buttons. Write a rule with <kbd>a.btn</kbd> as the selector and set <kbd>text-decoration: none</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Regular Button</button>\n  <a href=\"#\" class=\"btn\">Link Button</a>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; align-items: center; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: steelblue; color: white; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": "a.btn {\n  text-decoration: none;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.content\\s+p\\s*{",
-					"message": "Use <kbd>.content p</kbd> as your selector (note the space between)",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": "a\\.btn\\s*\\{",
+					"message": "Use <kbd>a.btn {</kbd> (type + class, no space)"
 				},
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color</kbd> property"
+					"type": "property_value",
+					"value": { "property": "text-decoration", "expected": "none" },
+					"message": "Set <kbd>text-decoration: none</kbd>"
+				}
+			]
+		},
+		{
+			"id": "grouping-selectors",
+			"title": "Grouping Selectors",
+			"description": "When multiple elements need the same styles, list them separated by commas. This keeps your CSS clean and maintainable.<br><br><pre>h1, h2, h3 {<br>  color: steelblue;<br>}</pre><br>This applies the same color to all three heading levels in one rule.",
+			"task": "Style all headings consistently. Add <kbd>color: steelblue</kbd> to the grouped <kbd>h1, h2, h3</kbd> selector.",
+			"previewHTML": "<article><h1>Main Title</h1><p>Introduction paragraph with some text.</p><h2>Section Heading</h2><p>More content here.</p><h3>Subsection</h3><p>Final paragraph.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } p { color: #555; line-height: 1.6; }",
+			"sandboxCSS": "",
+			"codePrefix": "h1, h2, h3 {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "color: steelblue;",
+			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "Set <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "descendant-selectors",
+			"title": "Descendant Selectors",
+			"description": "Target elements inside other elements using a space between selectors. This is one of the most useful patterns in CSS.<br><br><pre>.nav a {<br>  color: white;<br>}</pre><br>This styles only links inside <kbd>.nav</kbd>, leaving other links unchanged.",
+			"task": "Style navigation links differently. Write a rule with <kbd>.nav a</kbd> as the selector and set <kbd>color: white</kbd>.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav><p>Read more in our <a href=\"#\">documentation</a>.</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; margin: 0; } .nav { background: steelblue; padding: 1rem; display: flex; gap: 1rem; border-radius: 8px; margin-bottom: 1rem; } .nav a { text-decoration: none; } p a { color: steelblue; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".nav a {\n  color: white;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.nav\\s+a\\s*\\{",
+					"message": "Use <kbd>.nav a {</kbd> (space between .nav and a)"
 				},
 				{
-					"type": "contains",
-					"value": "green",
-					"message": "Set the color to <kbd>green</kbd>"
+					"type": "property_value",
+					"value": { "property": "color", "expected": "white" },
+					"message": "Set <kbd>color: white</kbd>"
+				}
+			]
+		},
+		{
+			"id": "nested-styling",
+			"title": "Nested Styling",
+			"description": "Descendant selectors let you create contextual styles. The same element can look different depending on where it appears.<br><br>For example, paragraphs in a <kbd>.card</kbd> might be smaller than paragraphs in an <kbd>article</kbd>.",
+			"task": "Make paragraphs inside the card smaller. Write a rule with <kbd>.card p</kbd> as the selector and set <kbd>font-size: 0.9rem</kbd>.",
+			"previewHTML": "<article><h2>Article Title</h2><p>This is a regular article paragraph with normal-sized text for comfortable reading.</p><div class=\"card\"><strong>Quick Tip</strong><p>Card paragraphs should be slightly smaller to fit the compact design.</p></div><p>Back to regular article text here.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } h2 { color: steelblue; margin-top: 0; } p { line-height: 1.6; color: #444; } .card { background: #f0f4f8; padding: 1rem; border-radius: 8px; border-left: 4px solid steelblue; } .card strong { color: steelblue; display: block; margin-bottom: 0.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".card p {\n  font-size: 0.9rem;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.card\\s+p\\s*\\{",
+					"message": "Use <kbd>.card p {</kbd> (space between .card and p)"
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "font-size", "expected": "0.9rem" },
+					"message": "Set <kbd>font-size: 0.9rem</kbd>"
 				}
 			]
 		}

lessons/00-welcome.json

@@ -1,16 +1,17 @@
 {
 	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "welcome",
-	"title": "Code Crispies",
-	"description": "Welcome to Code Crispies - your interactive web development learning platform",
+	"title": "Welcome",
+	"description": "Get started with Code Crispies",
 	"mode": "html",
 	"difficulty": "beginner",
+	"excludeFromProgress": true,
 	"lessons": [
 		{
-			"id": "get-started",
-			"title": "Get Started",
-			"description": "<strong>Code Crispies</strong> is a free, open-source platform for learning web development through hands-on exercises. No account required!<br><br><strong>What you'll learn:</strong><br>• <strong>HTML</strong> - Semantic elements, forms, tables, SVG (<em>HTML Block & Inline</em>, <em>HTML Forms</em>, <em>HTML Tables</em>)<br>• <strong>CSS</strong> - Selectors, box model, flexbox, animations (<em>CSS Selectors</em>, <em>CSS Box Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media queries and mobile-first layouts<br><br><strong>How it works:</strong><br>1. Read the task in the left panel<br>2. Write code in the editor<br>3. See live results in the preview<br>4. Get instant feedback with hints<br><br><strong>Keyboard shortcuts:</strong> <kbd>Ctrl+Z</kbd> to undo, <kbd>Ctrl+Shift+Z</kbd> to redo<br><br><strong>More resources:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript solutions<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript technology roadmap",
-			"task": "Write <code>Hello World</code>",
+			"id": "hello",
+			"title": "Getting started!",
+			"description": "<strong>Welcome to Code Crispies!</strong> Learn CSS and HTML through hands-on exercises.<br><br><strong>How it works:</strong><br>1. Read the task on the left<br>2. Write code in the editor<br>3. See live results in the preview<br><br><strong>Tips:</strong> Use <kbd>Ctrl+Z</kbd> to undo. Open the menu (☰) to browse all modules.",
+			"task": "Write <code>Hello World</code> to get started",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }",
 			"sandboxCSS": "",
@@ -24,39 +25,6 @@
 					"message": "Write <code>Hello World</code>"
 				}
 			]
-		},
-		{
-			"id": "overview",
-			"title": "Overview",
-			"description": "<strong>You're ready!</strong> Open the menu (☰) to explore all modules.<br><br><strong>Recommended learning path:</strong><br>1. <em>HTML Block & Inline</em> - Understand container vs inline elements<br>2. <em>HTML Forms</em> - Build interactive forms with validation<br>3. <em>CSS Selectors</em> - Target elements precisely<br>4. <em>CSS Box Model</em> - Master padding, margin, borders<br>5. <em>CSS Flexbox</em> - Create flexible layouts<br>6. <em>CSS Animations</em> - Add motion and transitions<br><br><strong>Tips:</strong><br>• Use <em>Show Expected</em> to see the target result<br>• Your progress is saved automatically<br>• Try Emmet in HTML mode: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Made by <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
-			"task": "Click Next to continue",
-			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }",
-			"sandboxCSS": "",
-			"initialCode": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "Hello",
-					"message": "Click Next to continue"
-				}
-			]
-		},
-		{
-			"id": "playground",
-			"title": "Playground",
-			"mode": "playground",
-			"description": "",
-			"task": "",
-			"previewHTML": "",
-			"previewBaseCSS": "",
-			"sandboxCSS": "",
-			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
-			"solution": "",
-			"previewContainer": "preview-area",
-			"validations": []
 		}
 	]
 }

lessons/01-advanced-selectors.json

@@ -17,7 +17,7 @@
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": "input[type=\"text\"] {\n  background-color: lightblue;\n  border: 2px solid blue\n}",
+			"solution": "input[type=\"text\"] {\n  background-color: lightblue;\n  border: 2px solid blue;\n}",
 			"validations": [
 				{
 					"type": "regex",

lessons/01-box-model.json

@@ -7,13 +7,13 @@
 	"lessons": [
 		{
 			"id": "box-model-1",
-			"title": "Box Model Components",
-			"description": "The CSS box model consists of four concentric layers: content area (innermost), padding, border, and margin (outermost). Understanding how these components interact is essential for precise layout control.",
-			"task": "Set <kbd>padding</kbd> to <kbd>1rem</kbd> to create space between the content and border.",
-			"previewHTML": "<div class=\"box\">Box Model Components</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }",
+			"title": "Padding",
+			"description": "Every element in CSS is a box with four layers: content, padding, border, and margin. <strong>Padding</strong> creates breathing room between your content and the box's edge.<br><br>Without padding, text presses against borders awkwardly. Padding makes content readable and visually balanced.<br><br><pre>.card {\n  padding: 1rem;\n}</pre>",
+			"task": "This profile card looks cramped. Add <kbd>padding: 1rem</kbd> to <kbd>.card</kbd> so the text has room to breathe.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "padding: 1rem;",
@@ -28,56 +28,56 @@
 		},
 		{
 			"id": "box-model-2",
-			"title": "Adding Borders",
-			"description": "Borders outline an element, creating visual separation from surrounding content. The border shorthand accepts three values: width, style, and color.",
-			"task": "Set <kbd>border</kbd> to <kbd>2px solid darkslategray</kbd>.",
-			"previewHTML": "<div class=\"box\">This box needs a border</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }",
+			"title": "Borders",
+			"description": "Borders create visual boundaries around elements. The <kbd>border</kbd> shorthand takes three values: width, style, and color.<br><br>Common styles: <kbd>solid</kbd>, <kbd>dashed</kbd>, <kbd>dotted</kbd>, <kbd>none</kbd>",
+			"task": "Add a subtle left accent to the card with <kbd>border-left: 4px solid steelblue</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border: 2px solid darkslategray;",
+			"solution": "border-left: 4px solid steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "border:\\s*2px\\s+solid\\s+darkslategray",
-					"message": "Set <kbd>border: 2px solid darkslategray</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
+					"message": "Set <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-3",
-			"title": "Adding Margins",
-			"description": "Margins create space between elements, controlling how they relate to one another within a layout. Unlike padding (which affects internal spacing), margins exist outside the element's border.",
-			"task": "Set <kbd>margin</kbd> to <kbd>1rem</kbd> to create space between this element and its neighbors.",
-			"previewHTML": "<div class=\"container\"><div class=\"outer\">This box needs margins</div><div class=\"neighbor\">Adjacent element</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .outer { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }",
+			"title": "Margins",
+			"description": "Margins create space <em>outside</em> the element, separating it from neighbors. While padding pushes content inward, margins push other elements away.",
+			"task": "Add space between these two profile cards with <kbd>margin-bottom: 1rem</kbd> on <kbd>.card</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article><article class=\"card\"><h3>Alex Rivera</h3><p>UX Designer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".outer {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem;",
+			"solution": "margin-bottom: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "margin", "expected": "1rem" },
-					"message": "Set <kbd>margin: 1rem</kbd>"
+					"value": { "property": "margin-bottom", "expected": "1rem" },
+					"message": "Set <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-4",
-			"title": "Box Sizing: Border-Box",
-			"description": "The <kbd>box-sizing</kbd> property determines how element dimensions are calculated. The default <kbd>content-box</kbd> excludes padding and border from width/height, while <kbd>border-box</kbd> includes them, making layout calculations more intuitive.",
-			"task": "Set <kbd>box-sizing</kbd> to <kbd>border-box</kbd> so padding and border are included in the width.",
-			"previewHTML": "<div class=\"sizing-demo\"><div class=\"box default\">Content-box (default)</div><div class=\"box sized\">Border-box</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .default { box-sizing: content-box; }",
+			"title": "Box Sizing",
+			"description": "By default, <kbd>width</kbd> only sets the content width. Padding and borders add to the total. This causes layout headaches.<br><br><kbd>box-sizing: border-box</kbd> includes padding and border in the width, making sizing predictable. Most developers apply this to all elements.",
+			"task": "Both cards have <kbd>width: 200px</kbd>. The left uses default sizing (content-box), making it wider than expected. Fix the right card with <kbd>box-sizing: border-box</kbd>.",
+			"previewHTML": "<div class=\"demo\"><article class=\"card\">Content-box</article><article class=\"card fix\">Border-box</article></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .demo { display: flex; gap: 1rem; } .card { width: 200px; padding: 1rem; border: 4px solid steelblue; background: white; border-radius: 8px; }",
 			"sandboxCSS": "",
-			"codePrefix": ".sized {\n  ",
+			"codePrefix": ".fix {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "box-sizing: border-box;",
@@ -92,87 +92,98 @@
 		},
 		{
 			"id": "box-model-5",
-			"title": "Margin Collapse",
-			"description": "When two vertical margins meet, they collapse to the larger value instead of adding up. Understanding this behavior is crucial for consistent vertical spacing.",
-			"task": "Set <kbd>margin-bottom</kbd> to <kbd>2rem</kbd>. Notice the space between paragraphs equals 2rem (not 3rem) due to margin collapse.",
-			"previewHTML": "<div class=\"collapse-demo\"><p class=\"first\">This paragraph has a bottom margin.</p><p class=\"second\">This paragraph has a top margin of 1rem.</p></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }",
+			"title": "Padding Shorthand",
+			"description": "Padding accepts 1-4 values:<br>• 1 value: all sides<br>• 2 values: vertical | horizontal<br>• 4 values: top | right | bottom | left",
+			"task": "This button needs more horizontal space than vertical. Set <kbd>padding: 8px 1rem</kbd> (8px top/bottom, 1rem left/right).",
+			"previewHTML": "<button class=\"btn\">Follow</button>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .btn { background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }",
 			"sandboxCSS": "",
-			"codePrefix": ".first {\n  ",
+			"codePrefix": ".btn {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin-bottom: 2rem;",
+			"solution": "padding: 8px 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "property_value",
-					"value": { "property": "margin-bottom", "expected": "2rem" },
-					"message": "Set <kbd>margin-bottom: 2rem</kbd>"
+					"type": "regex",
+					"value": "padding:\\s*8px\\s+1rem",
+					"message": "Set <kbd>padding: 8px 1rem</kbd>",
+					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-6",
-			"title": "Margin Shorthand Notation",
-			"description": "The margin shorthand can set all four sides at once. Two values set vertical (top/bottom) and horizontal (left/right) margins respectively.",
-			"task": "Set <kbd>margin</kbd> to <kbd>1rem 2rem</kbd> for 1rem top/bottom and 2rem left/right.",
-			"previewHTML": "<div class=\"container\"><div class=\"spaced\">This box needs margins: 1rem top/bottom, 2rem left/right</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .spaced { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }",
+			"title": "Margin Shorthand",
+			"description": "Margin uses the same shorthand pattern as padding. A common pattern is centering block elements horizontally with <kbd>margin: 0 auto</kbd>.",
+			"task": "Center this card horizontally. Set <kbd>margin: 0 auto</kbd> to auto-calculate equal left/right margins.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { width: 250px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".spaced {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem 2rem;",
+			"solution": "margin: 0 auto;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "margin:\\s*1rem\\s+2rem",
-					"message": "Set <kbd>margin: 1rem 2rem</kbd>",
+					"value": "margin:\\s*0\\s+auto",
+					"message": "Set <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-7",
-			"title": "Padding Shorthand Notation",
-			"description": "Like margin, padding shorthand allows setting all sides at once. A single value applies to all four sides equally.",
-			"task": "Set <kbd>padding</kbd> to <kbd>2rem</kbd> to add equal padding on all sides.",
-			"previewHTML": "<div class=\"padded\">This box needs equal padding on all sides</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }",
+			"title": "Border Radius",
+			"description": "While not part of the classic box model, <kbd>border-radius</kbd> rounds the corners of an element's border box. Use <kbd>50%</kbd> on a square element to create a circle.",
+			"task": "Make the avatar image circular with <kbd>border-radius: 50%</kbd>.",
+			"previewHTML": "<article class=\"card\"><img class=\"avatar\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='25' fill='%23666'/%3E%3Ccircle cx='50' cy='90' r='40' fill='%23666'/%3E%3C/svg%3E\" alt=\"Avatar\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; text-align: center; } .avatar { width: 80px; height: 80px; background: #ddd; margin-bottom: 8px; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".padded {\n  ",
+			"codePrefix": ".avatar {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "padding: 2rem;",
+			"solution": "border-radius: 50%;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "padding", "expected": "2rem" },
-					"message": "Set <kbd>padding: 2rem</kbd>"
+					"value": { "property": "border-radius", "expected": "50%" },
+					"message": "Set <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-8",
-			"title": "Border on Specific Sides",
-			"description": "For granular control, you can target specific sides with <kbd>border-top</kbd>, <kbd>border-right</kbd>, <kbd>border-bottom</kbd>, or <kbd>border-left</kbd>.",
-			"task": "Set <kbd>border-bottom</kbd> to <kbd>4px solid dodgerblue</kbd>.",
-			"previewHTML": "<div class=\"line\">This element needs only a bottom border</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }",
+			"title": "Complete Card",
+			"description": "Let's combine everything. This notification card needs styling to look polished.",
+			"task": "Style the notification: add <kbd>padding: 1rem</kbd>, <kbd>border-left: 4px solid coral</kbd>, and <kbd>border-radius: 4px</kbd>.",
+			"previewHTML": "<div class=\"alert\"><strong>New message</strong><p>You have 3 unread notifications</p></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { background: seashell; } .alert strong { color: coral; } .alert p { margin: 4px 0 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".line {\n  ",
+			"codePrefix": ".alert {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border-bottom: 4px solid dodgerblue;",
+			"solution": "padding: 1rem;\n  border-left: 4px solid coral;\n  border-radius: 4px;",
 			"previewContainer": "preview-area",
 			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "Set <kbd>padding: 1rem</kbd>"
+				},
 				{
 					"type": "regex",
-					"value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue",
-					"message": "Set <kbd>border-bottom: 4px solid dodgerblue</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+coral",
+					"message": "Set <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "border-radius", "expected": "4px" },
+					"message": "Set <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}

lessons/03-colors.json

@@ -1,119 +1,91 @@
 {
 	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "colors-backgrounds",
-	"title": "Colors",
-	"description": "Learn how to apply and manipulate colors, backgrounds, and graphical fills using CSS properties.",
+	"title": "CSS Colors",
+	"description": "Learn how to apply colors to text and backgrounds using CSS properties.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "colors-1",
-			"title": "Setting Background Colors",
-			"description": "Use the <code>background-color</code> property to fill elements with solid colors.",
-			"task": "Apply a light cyan background (#e0f7fa) to the element with class 'colorbox'.",
-			"previewHTML": "<div class=\"colorbox\">Background Demo</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .colorbox { padding: 1rem; }",
+			"title": "Background Color",
+			"description": "Color is one of the most powerful tools in web design. It creates visual hierarchy, conveys meaning, and establishes brand identity. CSS provides multiple ways to specify colors.<br><br><strong>CSS named colors:</strong> CSS includes 147 named colors like <kbd>steelblue</kbd>, <kbd>coral</kbd>, <kbd>gold</kbd>, and <kbd>tomato</kbd>. These are easy to remember and read.<br><br><strong>The background-color property:</strong> Sets the fill color behind an element's content and padding areas.<br><br><pre>.card {\n  background-color: lightblue;\n}</pre>",
+			"task": "This notification card needs a subtle background. Add <kbd>background-color: seashell</kbd>.",
+			"previewHTML": "<div class=\"alert\"><strong>New message</strong><p>You have 3 unread notifications</p></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { padding: 1rem; border-left: 4px solid coral; border-radius: 4px; } .alert strong { display: block; margin-bottom: 4px; } .alert p { margin: 0; color: #666; font-size: 0.9rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Set a background color */\n.colorbox {",
+			"codePrefix": ".alert {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
+			"codeSuffix": "\n}",
+			"solution": "background-color: seashell;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": ".colorbox", "message": "Select <kbd>.colorbox</kbd>", "options": { "caseSensitive": false } },
-				{
-					"type": "contains",
-					"value": "background-color",
-					"message": "Use <kbd>background-color</kbd> property",
-					"options": { "caseSensitive": false }
-				},
 				{
 					"type": "property_value",
-					"value": { "property": "background-color", "expected": "#e0f7fa" },
-					"message": "Set background-color to <kbd>#e0f7fa</kbd>",
-					"options": { "exact": true }
+					"value": { "property": "background-color", "expected": "seashell" },
+					"message": "Set <kbd>background-color: seashell</kbd>"
 				}
 			]
 		},
 		{
 			"id": "colors-2",
-			"title": "Text Color and Contrast",
-			"description": "Apply the <code>color</code> property to control text readability against backgrounds.",
-			"task": "Set the text color of '.colorbox' to deep blue (#01579b). Ensure good contrast.",
-			"previewHTML": "<div class=\"colorbox\">Color & Contrast</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .colorbox { padding: 1rem; background: #e0f7fa; }",
+			"title": "Text Color",
+			"description": "The <kbd>color</kbd> property sets the color of text content. Good contrast between text and background is essential for readability and accessibility.",
+			"task": "Make the alert title stand out. Add <kbd>color: coral</kbd>.",
+			"previewHTML": "<div class=\"alert\"><strong class=\"title\">Warning</strong><p>Your session will expire in 5 minutes</p></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { padding: 1rem; background-color: seashell; border-left: 4px solid coral; border-radius: 4px; } .alert .title { display: block; margin-bottom: 4px; } .alert p { margin: 0; color: #666; font-size: 0.9rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Set text color */\n.colorbox {",
+			"codePrefix": ".title {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
+			"codeSuffix": "\n}",
+			"solution": "color: coral;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": ".colorbox", "message": "Select <kbd>.colorbox</kbd>", "options": { "caseSensitive": false } },
-				{ "type": "contains", "value": "color", "message": "Use the <kbd>color</kbd> property", "options": { "caseSensitive": false } },
 				{
 					"type": "property_value",
-					"value": { "property": "color", "expected": "#01579b" },
-					"message": "Set color to <kbd>#01579b</kbd>",
-					"options": { "exact": true }
+					"value": { "property": "color", "expected": "coral" },
+					"message": "Set <kbd>color: coral</kbd>"
 				}
 			]
 		},
 		{
 			"id": "colors-3",
-			"title": "CSS Gradients",
-			"description": "Learn to create smooth transitions between colors using linear and radial gradients.",
-			"task": "Apply a linear gradient background from #ff9a9e to #fad0c4 on an element with class 'gradient-box'.",
-			"previewHTML": "<div class=\"gradient-box\">Gradient Demo</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .gradient-box { padding: 1rem; color: white; text-align: center; }",
+			"title": "Border Color",
+			"description": "Borders can have their own color using <kbd>border-color</kbd>. This is useful when you want to change just the color without redefining the entire border.",
+			"task": "This card needs an accent border. Add <kbd>border-color: coral</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Premium Plan</h3><p>Unlimited access to all features</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { padding: 1rem; background: white; border: 4px solid #ddd; border-radius: 8px; } .card h3 { margin: 0 0 8px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Set a linear gradient background */\n.gradient-box {",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
+			"codeSuffix": "\n}",
+			"solution": "border-color: coral;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": ".gradient-box", "message": "Select <kbd>.gradient-box</kbd>", "options": { "caseSensitive": false } },
 				{
-					"type": "contains",
-					"value": "background-image",
-					"message": "Use <kbd>background-image</kbd> property",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "regex",
-					"value": "linear-gradient\\(.*#ff9a9e.*,.*#fad0c4.*\\)",
-					"message": "Use <kbd>linear-gradient</kbd> from <kbd>#ff9a9e</kbd> to <kbd>#fad0c4</kbd>",
-					"options": { "caseSensitive": false }
+					"type": "property_value",
+					"value": { "property": "border-color", "expected": "coral" },
+					"message": "Set <kbd>border-color: coral</kbd>"
 				}
 			]
 		},
 		{
 			"id": "colors-4",
-			"title": "Background Images & Repeat",
-			"description": "Add images as backgrounds and control repetition and positioning.",
-			"task": "Set a background image on '.bg-img' using a placeholder URL, center it, and prevent tiling.",
-			"previewHTML": "<div class=\"bg-img\">Image Background</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .bg-img { height: 150px; display: flex; align-items: center; justify-content: center; color: white; }",
+			"title": "Hex Colors",
+			"description": "Beyond named colors, CSS supports hex codes (<kbd>#ff6347</kbd>), RGB (<kbd>rgb(255, 99, 71)</kbd>), and HSL (<kbd>hsl(9, 100%, 64%)</kbd>). Hex codes are the most common format in professional projects.",
+			"task": "Set the badge background to gold using its hex code. Add <kbd>background-color: #ffd700</kbd>.",
+			"previewHTML": "<span class=\"badge\">NEW</span>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; color: #333; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Set background image */\n\n.bg-img {",
-			"initialCode": "  background-image: url('http://placekitten.com/320/320');\n  background-position: center; background-repeat: no-repeat;\n  ",
-			"codeSuffix": "}",
+			"codePrefix": ".badge {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"solution": "background-color: #ffd700;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "contains",
-					"value": "background-image",
-					"message": "Use <kbd>background-image</kbd> property",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "contains",
-					"value": "background-position: center",
-					"message": "Center the background image with <kbd>background-position: center</kbd>",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "contains",
-					"value": "background-repeat: no-repeat",
-					"message": "Prevent image tiling with <kbd>background-repeat: no-repeat</kbd>",
-					"options": { "caseSensitive": false }
+					"type": "property_value",
+					"value": { "property": "background-color", "expected": "#ffd700" },
+					"message": "Set <kbd>background-color: #ffd700</kbd>"
 				}
 			]
 		}

lessons/04-typography.json

@@ -2,93 +2,70 @@
 	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "typography-fonts",
 	"title": "Typography",
-	"description": "Learn how to control text appearance through font selection, sizing, spacing, and decorative effects.",
+	"description": "Learn how to control text appearance through font selection, sizing, spacing, and styling.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
-			"id": "typography-1",
-			"title": "Font Family & Fallbacks",
-			"description": "Specify custom fonts and reliable fallback stacks for consistent typography across devices.",
-			"task": "Set the <code>font-family</code> of the '.text' element to 'Georgia, serif' with serif fallback.",
-			"previewHTML": "<p class=\"text\">This text shows the chosen font family.</p>",
-			"previewBaseCSS": "body { padding: 1rem; }",
+			"id": "monospace-font",
+			"title": "Monospace Fonts",
+			"description": "Different font families create different visual impressions. <kbd>monospace</kbd> fonts have equal-width characters, making them perfect for displaying code, data, or keyboard shortcuts.<br><br>Every computer has a monospace font built in, so <kbd>font-family: monospace</kbd> always works. This makes it a safe choice for inline code in any web project.",
+			"task": "Style the inline code with a monospace font. Add <kbd>font-family: monospace</kbd>.",
+			"previewHTML": "<article>\n  <h3>Quick Tip</h3>\n  <p>Press <span class=\"code\">Ctrl + S</span> to save your work, or <span class=\"code\">Ctrl + Z</span> to undo.</p>\n</article>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h3 { margin: 0 0 0.5rem; } p { margin: 0; color: #555; line-height: 1.6; } .code { background: #f0f0f0; padding: 0.2rem 0.4rem; border-radius: 4px; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Set font family */\n.text {",
+			"codePrefix": ".code {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
+			"solution": "font-family: monospace;",
 			"validations": [
 				{
-					"type": "contains",
-					"value": "font-family",
-					"message": "Use the <kbd>font-family</kbd> property",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "regex",
-					"value": "Georgia, serif",
-					"message": "Include <kbd>Georgia, serif</kbd> in the font stack",
-					"options": { "caseSensitive": false }
+					"type": "property_value",
+					"value": { "property": "font-family", "expected": "monospace" },
+					"message": "Set font-family to <kbd>monospace</kbd>"
 				}
 			]
 		},
 		{
-			"id": "typography-2",
-			"title": "Font Size & Line Height",
-			"description": "Control text scale and readability by adjusting size and line heights.",
-			"task": "Set the heading '.heading' to 1.5rem font-size and 1.5 line-height.",
-			"previewHTML": "<h2 class=\"heading\">Readable Heading</h2>",
-			"previewBaseCSS": "body { padding: 1rem; }",
+			"id": "font-size-line-height",
+			"title": "Readable Body Text",
+			"description": "Good typography is invisible—readers focus on content, not struggling to read it. Two properties work together for readability:<br><br><kbd>font-size</kbd> controls how big the text appears. For body text, <kbd>1rem</kbd> (16px by default) is a comfortable starting point.<br><br><kbd>line-height</kbd> sets the space between lines. A value of <kbd>1.6</kbd> means the line height is 1.6 times the font size—giving text room to breathe.",
+			"task": "Make the text comfortable to read. Add <kbd>font-size: 1rem</kbd> and <kbd>line-height: 1.6</kbd>.",
+			"previewHTML": "<article>\n  <h2>The Art of Coffee</h2>\n  <p>Great coffee starts with quality beans. The roast level affects flavor—light roasts are fruity and acidic, while dark roasts are bold and smoky.</p>\n  <p>Water temperature matters too. Brew between 90-96°C for optimal extraction. Too hot burns the coffee; too cold leaves it weak.</p>\n</article>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h2 { margin: 0 0 1rem; color: #333; } p { margin: 0 0 1rem; color: #444; } p:last-child { margin-bottom: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Set size and line height */\n.heading {",
+			"codePrefix": "article {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
+			"solution": "font-size: 1rem;\n  line-height: 1.6;",
 			"validations": [
-				{ "type": "contains", "value": "font-size", "message": "Use <kbd>font-size</kbd> property", "options": { "caseSensitive": false } },
 				{
 					"type": "property_value",
-					"value": { "property": "font-size", "expected": "1.5rem" },
-					"message": "Set font-size to <kbd>1.5rem</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "line-height",
-					"message": "Use <kbd>line-height</kbd> property",
-					"options": { "caseSensitive": false }
+					"value": { "property": "font-size", "expected": "1rem" },
+					"message": "Set font-size to <kbd>1rem</kbd>"
 				},
 				{
 					"type": "property_value",
-					"value": { "property": "line-height", "expected": "1.5" },
-					"message": "Set line-height to <kbd>1.5</kbd>"
+					"value": { "property": "line-height", "expected": "1.6" },
+					"message": "Set line-height to <kbd>1.6</kbd>"
 				}
 			]
 		},
 		{
-			"id": "typography-3",
-			"title": "Font Weight & Style",
-			"description": "Apply weight and style variations like bold, light, italic to emphasize text.",
-			"task": "Make the paragraph '.emphasis' italic and bold using <code>font-style</code> and <code>font-weight</code>.",
-			"previewHTML": "<p class=\"emphasis\">This text should stand out.</p>",
-			"previewBaseCSS": "body { padding: 1rem; }",
+			"id": "font-weight",
+			"title": "Bold Headings",
+			"description": "Font weight controls how thick or thin text appears. Common values include:<br><br>• <kbd>normal</kbd> (400) — default body text<br>• <kbd>bold</kbd> (700) — strong emphasis<br>• <kbd>lighter</kbd> / <kbd>bolder</kbd> — relative to parent<br><br>Card titles and headings often use bold text to create visual hierarchy and draw attention to key information.",
+			"task": "Make the card title stand out. Add <kbd>font-weight: bold</kbd>.",
+			"previewHTML": "<article class=\"card\">\n  <span class=\"title\">Weekend Special</span>\n  <p>Fresh pastries and artisan coffee, 20% off all items this Saturday and Sunday.</p>\n</article>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .card { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; max-width: 320px; } .title { display: block; font-size: 1.25rem; color: steelblue; margin-bottom: 0.5rem; font-weight: normal; } p { margin: 0; color: #555; line-height: 1.5; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Emphasize text */\n.emphasis {",
+			"codePrefix": ".title {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
+			"solution": "font-weight: bold;",
 			"validations": [
-				{ "type": "contains", "value": "font-style", "message": "Use <kbd>font-style</kbd> property", "options": { "caseSensitive": false } },
-				{
-					"type": "property_value",
-					"value": { "property": "font-style", "expected": "italic" },
-					"message": "Set font-style to <kbd>italic</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "font-weight",
-					"message": "Use <kbd>font-weight</kbd> property",
-					"options": { "caseSensitive": false }
-				},
 				{
 					"type": "property_value",
 					"value": { "property": "font-weight", "expected": "bold" },
@@ -97,29 +74,28 @@
 			]
 		},
 		{
-			"id": "typography-4",
-			"title": "Text Decoration & Shadow",
-			"description": "Add decorative underlines, overlines, line-throughs and subtle shadows to text.",
-			"task": "Apply an underline with <code>text-decoration</code> and a light shadow using <code>text-shadow</code> on '.fancy'.",
-			"previewHTML": "<p class=\"fancy\">Fancy text effect!</p>",
-			"previewBaseCSS": "body { padding: 1rem; } .fancy { font-size: 1.25rem; }",
+			"id": "text-transform",
+			"title": "Uppercase Labels",
+			"description": "The <kbd>text-transform</kbd> property changes text capitalization without editing the HTML. This keeps content semantic while styling it differently:<br><br>• <kbd>uppercase</kbd> — ALL CAPS (great for labels, buttons)<br>• <kbd>lowercase</kbd> — all lowercase<br>• <kbd>capitalize</kbd> — First Letter Of Each Word<br><br>Combined with <kbd>letter-spacing</kbd>, uppercase text creates a clean, modern label style often used in UI design.",
+			"task": "Style the tag labels. Add <kbd>text-transform: uppercase</kbd> and <kbd>letter-spacing: 1px</kbd>.",
+			"previewHTML": "<article>\n  <div class=\"tags\">\n    <span class=\"tag\">Design</span>\n    <span class=\"tag\">CSS</span>\n    <span class=\"tag\">Tutorial</span>\n  </div>\n  <h3>Getting Started with Typography</h3>\n  <p>Learn the fundamentals of web typography in this beginner-friendly guide.</p>\n</article>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .tags { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .tag { background: #e8f4f8; color: steelblue; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.75rem; } h3 { margin: 0 0 0.5rem; } p { margin: 0; color: #555; line-height: 1.5; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Decorate text */\n.fancy {",
+			"codePrefix": ".tag {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
+			"solution": "text-transform: uppercase;\n  letter-spacing: 1px;",
 			"validations": [
 				{
-					"type": "contains",
-					"value": "text-decoration",
-					"message": "Use <kbd>text-decoration</kbd> property",
-					"options": { "caseSensitive": false }
+					"type": "property_value",
+					"value": { "property": "text-transform", "expected": "uppercase" },
+					"message": "Set text-transform to <kbd>uppercase</kbd>"
 				},
 				{
-					"type": "contains",
-					"value": "text-shadow",
-					"message": "Use <kbd>text-shadow</kbd> property",
-					"options": { "caseSensitive": false }
+					"type": "property_value",
+					"value": { "property": "letter-spacing", "expected": "1px" },
+					"message": "Set letter-spacing to <kbd>1px</kbd>"
 				}
 			]
 		}

lessons/05-units-variables.json

@@ -7,109 +7,94 @@
 	"lessons": [
 		{
 			"id": "units-1",
-			"title": "Absolute vs. Relative Units",
-			"description": "Learn the difference between px, rem, em, %, and vw/vh for flexible, responsive layouts.<br><br><pre>width: 80%;      /* relative to parent */\nmax-width: 40rem; /* relative to root font */\npadding: 16px;   /* fixed pixels */</pre>",
-			"task": "Set the <kbd>width</kbd> of <kbd>.box</kbd> to <kbd>80%</kbd> and <kbd>max-width</kbd> to <kbd>40rem</kbd>.",
-			"previewHTML": "<div class=\"box\">Resize me!</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background: #f5f5f5; padding: 1rem; }",
+			"title": "Relative Units",
+			"description": "CSS offers two types of units: <em>absolute</em> (like <kbd>px</kbd>) and <em>relative</em> (like <kbd>%</kbd> and <kbd>rem</kbd>). Relative units adapt to their context, making layouts flexible and accessible.<br><br><strong>Common relative units:</strong><br>• <kbd>%</kbd> – Relative to parent element<br>• <kbd>rem</kbd> – Relative to root font size (typically 16px)<br>• <kbd>em</kbd> – Relative to element's font size<br><br>A common pattern for readable content: set <kbd>width: 100%</kbd> so it fills available space, then <kbd>max-width: 40rem</kbd> to cap line length for readability.",
+			"task": "This article text runs too wide on large screens. Add <kbd>max-width: 40rem</kbd> to <kbd>.article</kbd> for optimal reading width.",
+			"previewHTML": "<article class=\"article\"><h2>The Art of Typography</h2><p>Good typography is invisible. When text is set well, readers absorb information without noticing the design decisions that make it comfortable to read. Line length is crucial—too wide and eyes get lost, too narrow and reading becomes choppy.</p><p>The ideal line length is 45-75 characters per line. At typical font sizes, this works out to roughly 40rem maximum width.</p></article>",
+			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 1rem; background: #f9f9f9; } .article { background: white; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .article h2 { margin: 0 0 1rem; color: #333; } .article p { margin: 0 0 1rem; line-height: 1.6; color: #444; } .article p:last-child { margin-bottom: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Set flexible sizing */\n.box {",
+			"codePrefix": ".article {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 80%;\n  max-width: 40rem;",
+			"codeSuffix": "\n}",
+			"solution": "max-width: 40rem;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "width", "message": "Use <kbd>width</kbd> property", "options": { "caseSensitive": false } },
-				{ "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Set width to <kbd>80%</kbd>" },
-				{ "type": "contains", "value": "max-width", "message": "Use <kbd>max-width</kbd> property", "options": { "caseSensitive": false } },
 				{
 					"type": "property_value",
 					"value": { "property": "max-width", "expected": "40rem" },
-					"message": "Set max-width to <kbd>40rem</kbd>"
+					"message": "Set <kbd>max-width: 40rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "units-2",
-			"title": "CSS Custom Properties",
-			"description": "Define and reuse variables (--custom properties) to centralize your theme values.<br><br><pre>:root {\n  --main-color: mediumpurple;\n}\n.themed {\n  border-color: var(--main-color);\n}</pre>",
-			"task": "Create a <kbd>--main-color</kbd> variable in <kbd>:root</kbd> with <kbd>mediumpurple</kbd> and apply it as the border color on <kbd>.themed</kbd>.",
-			"previewHTML": "<div class=\"themed\">Variable Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }",
+			"title": "CSS Variables",
+			"description": "CSS custom properties (variables) let you define reusable values. Define them with <kbd>--name</kbd> and use them with <kbd>var(--name)</kbd>. Variables defined on <kbd>:root</kbd> are available everywhere.",
+			"task": "Define <kbd>--brand: steelblue</kbd> in <kbd>:root</kbd>, then use it as the <kbd>background</kbd> color for <kbd>.btn</kbd>.",
+			"previewHTML": "<div class=\"actions\"><button class=\"btn\">Subscribe</button><button class=\"btn\">Learn More</button></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .actions { display: flex; gap: 1rem; } .btn { color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #ccc; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Define and use a CSS variable */\n:root {",
+			"codePrefix": ":root {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}\n.themed { }",
-			"solution": "  --main-color: mediumpurple;\n}\n.themed {\n  border-color: var(--main-color);",
+			"codeSuffix": "\n}\n\n.btn {\n  background: var(--brand);\n}",
+			"solution": "--brand: steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "contains",
-					"value": "--main-color",
-					"message": "Define <kbd>--main-color</kbd> in :root",
+					"value": "--brand",
+					"message": "Define <kbd>--brand</kbd> variable",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
-					"value": "var(--main-color)",
-					"message": "Use <kbd>var(--main-color)</kbd>",
+					"value": "steelblue",
+					"message": "Set the value to <kbd>steelblue</kbd>",
 					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "property_value",
-					"value": { "property": "border", "expected": "var(--main-color)" },
-					"message": "Apply variable to border color",
-					"options": { "exact": false }
 				}
 			]
 		},
 		{
 			"id": "units-3",
-			"title": "Unit Calculations (calc)",
-			"description": "Use the <kbd>calc()</kbd> function to combine different units in one expression.<br><br><pre>width: calc(100% - 2rem);\nmin-height: calc(10vh + 1rem);</pre>",
-			"task": "Set the <kbd>width</kbd> of <kbd>.sized</kbd> to <kbd>calc(100% - 2rem)</kbd> and <kbd>min-height</kbd> to <kbd>calc(10vh + 1rem)</kbd>.",
-			"previewHTML": "<div class=\"sized\">Calc Demo</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }",
+			"title": "calc() Function",
+			"description": "The <kbd>calc()</kbd> function lets you mix different units in calculations. This is essential for layouts that combine fixed and flexible sizing, like a sidebar layout.",
+			"task": "The main content should fill the remaining space after the 200px sidebar. Set <kbd>width: calc(100% - 200px)</kbd> on <kbd>.main</kbd>.",
+			"previewHTML": "<div class=\"layout\"><aside class=\"sidebar\">Sidebar<br>Navigation</aside><main class=\"main\"><h2>Main Content</h2><p>This area should fill the remaining width after accounting for the fixed-width sidebar.</p></main></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .layout { display: flex; gap: 1rem; } .sidebar { width: 200px; background: #1a1a2e; color: white; padding: 1rem; border-radius: 8px; flex-shrink: 0; } .main { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .main h2 { margin: 0 0 8px; } .main p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use calc for dynamic sizing */\n.sized {",
+			"codePrefix": ".main {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: calc(100% - 2rem);\n  min-height: calc(10vh + 1rem);",
+			"codeSuffix": "\n}",
+			"solution": "width: calc(100% - 200px);",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "calc", "message": "Use <kbd>calc()</kbd> function", "options": { "caseSensitive": false } },
 				{
 					"type": "regex",
-					"value": "width:\\s*calc\\(100% - 2rem\\)",
-					"message": "Width should be <kbd>calc(100% - 2rem)</kbd>",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "regex",
-					"value": "min-height:\\s*calc\\(10vh \\+ 1rem\\)",
-					"message": "Min-height should be <kbd>calc(10vh + 1rem)</kbd>",
+					"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
+					"message": "Set <kbd>width: calc(100% - 200px)</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "units-4",
-			"title": "Viewport & Responsive Units",
-			"description": "Control layouts relative to viewport size with vw, vh, and vmin/vmax units.<br><br><pre>width: 50vw;   /* 50% of viewport width */\nheight: 20vh;  /* 20% of viewport height */</pre>",
-			"task": "Give <kbd>.view</kbd> a <kbd>width</kbd> of <kbd>50vw</kbd> and <kbd>height</kbd> of <kbd>20vh</kbd>.",
-			"previewHTML": "<div class=\"view\">Viewport Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .view { background: #ffe0b2; }",
+			"title": "Viewport Units",
+			"description": "Viewport units size elements relative to the browser window:<br>• <kbd>vw</kbd> – 1% of viewport width<br>• <kbd>vh</kbd> – 1% of viewport height<br><br>These are perfect for full-screen sections like hero banners.",
+			"task": "Make this hero section fill the viewport height by setting <kbd>min-height: 100vh</kbd> on <kbd>.hero</kbd>.",
+			"previewHTML": "<section class=\"hero\"><h1>Welcome</h1><p>Scroll down to explore</p></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .hero { background: linear-gradient(135deg, #1a1a2e 0%, steelblue 100%); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .hero h1 { margin: 0 0 1rem; font-size: 2.5rem; } .hero p { margin: 0; opacity: 0.8; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use viewport units */\n.view {",
+			"codePrefix": ".hero {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 50vw;\n  height: 20vh;",
+			"codeSuffix": "\n}",
+			"solution": "min-height: 100vh;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "vw", "message": "Use <kbd>vw</kbd> unit", "options": { "caseSensitive": false } },
-				{ "type": "contains", "value": "vh", "message": "Use <kbd>vh</kbd> unit", "options": { "caseSensitive": false } },
-				{ "type": "property_value", "value": { "property": "width", "expected": "50vw" }, "message": "Set width to <kbd>50vw</kbd>" },
-				{ "type": "property_value", "value": { "property": "height", "expected": "20vh" }, "message": "Set height to <kbd>20vh</kbd>" }
+				{
+					"type": "property_value",
+					"value": { "property": "min-height", "expected": "100vh" },
+					"message": "Set <kbd>min-height: 100vh</kbd>"
+				}
 			]
 		}
 	]

lessons/08-responsive.json

@@ -59,15 +59,15 @@
 		{
 			"id": "responsive-3",
 			"title": "Responsive Grid",
-			"description": "Combine CSS Grid with <kbd>auto-fit</kbd> or <kbd>auto-fill</kbd> for responsive column layouts.",
-			"task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.cards</kbd>.",
-			"previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
+			"description": "Combine CSS Grid with <kbd>auto-fit</kbd> or <kbd>auto-fill</kbd> for responsive column layouts that automatically adjust the number of columns based on available space.",
+			"task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.features</kbd>.",
+			"previewHTML": "<section class=\"features\"><article class=\"feature\"><h3>Fast</h3><p>Lightning quick load times</p></article><article class=\"feature\"><h3>Secure</h3><p>Enterprise-grade security</p></article><article class=\"feature\"><h3>Reliable</h3><p>99.9% uptime guaranteed</p></article><article class=\"feature\"><h3>Support</h3><p>24/7 customer service</p></article></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .feature { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .feature h3 { margin: 0 0 8px; color: steelblue; } .feature p { margin: 0; color: #666; font-size: 0.9rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Create a responsive grid */\n.cards {",
+			"codePrefix": ".features {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
+			"codeSuffix": "\n}",
+			"solution": "display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{

lessons/20-html-elements.json

@@ -63,35 +63,6 @@
 					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
 				}
 			]
-		},
-		{
-			"id": "div-vs-span",
-			"title": "div & span",
-			"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
-			"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
-			"sandboxCSS": "",
-			"initialCode": "The most highlighted moment was unforgettable.",
-			"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "div",
-					"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "span",
-					"message": "Add a <kbd>&lt;span&gt;</kbd> around the word <kbd>highlighted</kbd>"
-				},
-				{
-					"type": "element_text",
-					"value": { "selector": "span", "text": "highlighted" },
-					"message": "The <kbd>&lt;span&gt;</kbd> should contain the word <kbd>highlighted</kbd>"
-				}
-			]
 		}
 	]
 }

lessons/22-html-forms-validation.json

@@ -1,110 +1,32 @@
 {
 	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-validation",
-	"title": "HTML Validation",
-	"description": "Learn HTML5 built-in form validation attributes",
+	"title": "Form Validation",
+	"description": "Use HTML5 built-in validation for better user experience",
 	"mode": "html",
-	"difficulty": "intermediate",
+	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "required-fields",
 			"title": "Required Fields",
-			"description": "The <kbd>required</kbd> attribute prevents form submission if the field is empty.<br><br>Add it to any input that must be filled:<br><kbd>&lt;input type=\"text\" required&gt;</kbd><br><br>The browser shows a validation message automatically.",
-			"task": "Make both the name and email fields required by adding the <kbd>required</kbd> attribute.",
+			"description": "The <kbd>required</kbd> attribute prevents form submission if the field is empty. The browser shows a validation message automatically - no JavaScript needed!<br><br>Add it to any input that must be filled:<br><kbd>&lt;input type=\"text\" required&gt;</kbd>",
+			"task": "Make both the name and email fields required by adding the <kbd>required</kbd> attribute to each input.",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 320px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } input:focus { outline: 2px solid steelblue; border-color: transparent; } button { margin-top: 20px; padding: 10px 20px; background: steelblue; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Submit</button>\n</form>",
-			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Submit</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"name\">Name *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Submit</button>\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Name *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Submit</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='name']", "attr": "required", "value": true },
-					"message": "Add the <kbd>required</kbd> attribute to the name input"
+					"message": "Add <kbd>required</kbd> to the name input"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='email']", "attr": "required", "value": true },
-					"message": "Add the <kbd>required</kbd> attribute to the email input"
-				}
-			]
-		},
-		{
-			"id": "input-constraints",
-			"title": "Constraints",
-			"description": "Control what users can enter:<br><br><kbd>minlength</kbd> / <kbd>maxlength</kbd> - Text length limits<br><kbd>min</kbd> / <kbd>max</kbd> - Number range<br><kbd>pattern</kbd> - Regex pattern matching<br><kbd>placeholder</kbd> - Hint text (not a label!)",
-			"task": "Add validation to the password input:<br>1. Add <kbd>minlength=\"8\"</kbd> for minimum length<br>2. Add <kbd>maxlength=\"20\"</kbd> for maximum length<br>3. Add <kbd>placeholder=\"Enter password\"</kbd> as a hint",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } small { display: block; font-size: 12px; color: #666; margin-top: 4px; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"solution": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
-					"message": "Add <kbd>minlength</kbd>=\"8\" to the password input"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
-					"message": "Add <kbd>maxlength</kbd>=\"20\" to the password input"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "placeholder", "value": null },
-					"message": "Add a <kbd>placeholder</kbd> to hint what to enter"
-				}
-			]
-		},
-		{
-			"id": "complete-registration",
-			"title": "Full Form",
-			"description": "Build a complete registration form with all validation concepts:<br><br>- Required fields marked with *<br>- Email validation (use type=\"email\")<br>- Password with length constraints<br>- Terms checkbox (required)<br>- Submit button",
-			"task": "Complete the registration form. Add required attributes, proper input types, and validation constraints.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } input[type='checkbox'] { width: auto; margin-right: 8px; vertical-align: middle; } label:has(input[type='checkbox']) { display: flex; align-items: center; font-weight: normal; } button { width: 100%; margin-top: 20px; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\">\n  \n  <label for=\"email\">Email *</label>\n  <input id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password *</label>\n  <input id=\"password\" name=\"password\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"solution": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Password *</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#fullname", "attr": "required", "value": true },
-					"message": "Make the full name field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "type", "value": "email" },
-					"message": "Set the email input <kbd>type=\"email\"</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "required", "value": true },
-					"message": "Make the email field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "type", "value": "password" },
-					"message": "Set the password input <kbd>type=\"password\"</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "required", "value": true },
-					"message": "Make the password field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "minlength", "value": "8" },
-					"message": "Add <kbd>minlength</kbd>=\"8\" to password"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#terms", "attr": "required", "value": true },
-					"message": "Make the terms checkbox <kbd>required</kbd>"
+					"message": "Add <kbd>required</kbd> to the email input"
 				}
 			]
 		}

lessons/30-html-tables.json

@@ -2,20 +2,20 @@
 	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "html-tables",
 	"title": "HTML Tables",
-	"description": "Create structured data tables with headers and captions",
+	"description": "Create structured data tables with semantic markup",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "table-basic",
-			"title": "Basic Table Structure",
-			"description": "Tables use <kbd>&lt;table&gt;</kbd> with <kbd>&lt;tr&gt;</kbd> for rows. Inside rows, use <kbd>&lt;th&gt;</kbd> for headers and <kbd>&lt;td&gt;</kbd> for data cells.<br><br>The <kbd>&lt;caption&gt;</kbd> element provides an accessible title for the table.",
-			"task": "Create a simple table with:<br>1. A <kbd>&lt;caption&gt;</kbd> saying <code>Fruit Prices</code><br>2. A header row with <code>Fruit</code> and <code>Price</code> columns<br>3. At least 2 data rows",
+			"title": "Data Tables",
+			"description": "Tables display structured data in rows and columns. Use <kbd>&lt;table&gt;</kbd> as the container, <kbd>&lt;tr&gt;</kbd> for rows, <kbd>&lt;th&gt;</kbd> for header cells, and <kbd>&lt;td&gt;</kbd> for data cells.<br><br>Add <kbd>&lt;caption&gt;</kbd> for an accessible title that describes the table's content.",
+			"task": "Create a pricing table:<br>1. A <kbd>&lt;caption&gt;</kbd> saying <code>Pricing</code><br>2. A header row with <code>Plan</code> and <code>Price</code><br>3. Two data rows for Basic ($9) and Pro ($29)",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px; font-weight: 600; font-size: 1.2rem; color: #333; background: #f8f9fa; } th, td { padding: 12px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 500; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 350px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 16px; font-weight: 600; font-size: 1.1rem; color: #333; background: #f8f9fa; } th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: steelblue; color: white; font-weight: 500; } tr:last-child td { border-bottom: none; } tr:hover td { background: #f8f9fa; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<table>\n  <caption>Fruit Prices</caption>\n  <tr>\n    <th>Fruit</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Apple</td>\n    <td>$1.50</td>\n  </tr>\n  <tr>\n    <td>Banana</td>\n    <td>$0.75</td>\n  </tr>\n</table>",
+			"solution": "<table>\n  <caption>Pricing</caption>\n  <tr>\n    <th>Plan</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Basic</td>\n    <td>$9</td>\n  </tr>\n  <tr>\n    <td>Pro</td>\n    <td>$29</td>\n  </tr>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -31,95 +31,12 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "th", "min": 2 },
-					"message": "Add at least 2 header cells (th)"
+					"message": "Add header cells (<kbd>&lt;th&gt;</kbd>) for Plan and Price"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "tr", "min": 3 },
-					"message": "Add at least 3 rows (1 header + 2 data rows)"
-				}
-			]
-		},
-		{
-			"id": "table-thead-tbody",
-			"title": "Table Head & Body",
-			"description": "Use <kbd>&lt;thead&gt;</kbd> to group header rows and <kbd>&lt;tbody&gt;</kbd> to group data rows. This helps browsers and assistive technology understand the table structure.<br><br>You can also use <kbd>&lt;tfoot&gt;</kbd> for footer rows like totals.",
-			"task": "Create a structured table:<br>1. A <kbd>&lt;caption&gt;</kbd> with <code>Monthly Sales</code><br>2. A <kbd>&lt;thead&gt;</kbd> with Month and Revenue headers<br>3. A <kbd>&lt;tbody&gt;</kbd> with at least 2 data rows",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } table { border-collapse: collapse; width: 100%; max-width: 450px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } caption { padding: 20px; font-weight: 700; font-size: 1.3rem; color: white; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); caption-side: top; } thead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } th { padding: 15px 20px; text-align: left; color: white; font-weight: 500; } tbody tr { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } td { padding: 15px 20px; color: #333; } tbody tr:last-child { border-bottom: none; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Monthly Sales</caption>\n  <thead>\n    <tr>\n      <th>Month</th>\n      <th>Revenue</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>January</td>\n      <td>$12,500</td>\n    </tr>\n    <tr>\n      <td>February</td>\n      <td>$14,200</td>\n    </tr>\n  </tbody>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Add a <kbd>&lt;thead&gt;</kbd> for the header section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Add a <kbd>&lt;tbody&gt;</kbd> for the data rows"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Add at least 2 data rows in tbody"
-				}
-			]
-		},
-		{
-			"id": "table-complete",
-			"title": "Complete Table with Footer",
-			"description": "Add <kbd>&lt;tfoot&gt;</kbd> to create a footer section for totals or summary data. The footer stays at the bottom even if tbody has many rows.<br><br>Combine all sections for a fully structured, accessible table.",
-			"task": "Create a complete table:<br>1. A <kbd>&lt;caption&gt;</kbd> with <code>Order Summary</code><br>2. A <kbd>&lt;thead&gt;</kbd> with Item and Price headers<br>3. A <kbd>&lt;tbody&gt;</kbd> with 2 items<br>4. A <kbd>&lt;tfoot&gt;</kbd> with a Total row",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px 20px; font-weight: 600; font-size: 1.1rem; color: #333; text-align: left; background: #f8f9fa; border-bottom: 2px solid #eee; } th, td { padding: 12px 20px; text-align: left; } thead th { background: #2c3e50; color: white; } tbody td { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } tfoot { background: #ecf0f1; font-weight: 600; } tfoot td { border-top: 2px solid #2c3e50; color: #2c3e50; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Order Summary</caption>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Price</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Widget</td>\n      <td>$25.00</td>\n    </tr>\n    <tr>\n      <td>Gadget</td>\n      <td>$35.00</td>\n    </tr>\n  </tbody>\n  <tfoot>\n    <tr>\n      <td>Total</td>\n      <td>$60.00</td>\n    </tr>\n  </tfoot>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Add a <kbd>&lt;thead&gt;</kbd> section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Add a <kbd>&lt;tbody&gt;</kbd> section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tfoot",
-					"message": "Add a <kbd>&lt;tfoot&gt;</kbd> section for the total"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Add at least 2 item rows in tbody"
+					"message": "Add 3 rows (1 header + 2 data rows)"
 				}
 			]
 		}

lessons/98-playground.json

@@ -0,0 +1,25 @@
+{
+	"$schema": "../schemas/code-crispies-module-schema.json",
+	"id": "playground",
+	"title": "Playground",
+	"description": "Experiment freely with HTML and CSS",
+	"mode": "playground",
+	"difficulty": "beginner",
+	"excludeFromProgress": true,
+	"lessons": [
+		{
+			"id": "sandbox",
+			"title": "HTML & CSS Editor",
+			"mode": "playground",
+			"description": "",
+			"task": "",
+			"previewHTML": "",
+			"previewBaseCSS": "",
+			"sandboxCSS": "",
+			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n  \n  h1 {\n    color: steelblue;\n  }\n</style>\n\n<h1>Hello World</h1>\n<p>Write any HTML and CSS here!</p>",
+			"solution": "",
+			"previewContainer": "preview-area",
+			"validations": []
+		}
+	]
+}

lessons/99-goodbye.json

@@ -2,20 +2,21 @@
 	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "goodbye",
 	"title": "What's Next?",
-	"description": "Congratulations on completing your learning journey!",
+	"description": "Continue your learning journey",
 	"mode": "html",
 	"difficulty": "beginner",
+	"excludeFromProgress": true,
 	"lessons": [
 		{
-			"id": "congratulations",
-			"title": "Well Done!",
-			"description": "<strong>Congratulations!</strong> You've made it through Code Crispies!<br><br>You've learned:<br>• <strong>HTML</strong> - Semantic elements, forms, tables, and more<br>• <strong>CSS</strong> - Selectors, box model, flexbox, grid, animations<br>• <strong>Responsive Design</strong> - Media queries and mobile-first layouts<br><br>These are the building blocks of every website on the internet. Keep practicing and building!",
+			"id": "next-steps",
+			"title": "Keep Going!",
+			"description": "<strong>Great progress!</strong> You're building real web development skills.<br><br><strong>Continue learning:</strong><br>• <a href=\"https://developer.mozilla.org\" target=\"_blank\">MDN Web Docs</a> - The definitive reference<br>• <a href=\"https://css-tricks.com\" target=\"_blank\">CSS-Tricks</a> - Practical techniques<br><br><strong>Practice ideas:</strong><br>• Build your portfolio site<br>• Recreate a website you like<br>• Try the <a href=\"#playground/0\">Playground</a> to experiment freely<br><br><strong>Contribute:</strong> Code Crispies is <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">open source</a>. Add lessons, fix bugs, or translate!<br><br><strong>Support:</strong> Help keep it free and open source!<br><a href=\"https://liberapay.com/libretech/donate\" target=\"_blank\" onclick=\"typeof umami !== 'undefined' && umami.track('support_click', {location: 'goodbye'})\"><img alt=\"Donate using Liberapay\" src=\"https://liberapay.com/assets/widgets/donate.svg\" style=\"margin-top: 8px;\"></a>",
 			"task": "Type <code>Thank you!</code>",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } p { font-size: 1.5rem; color: #6366f1; }",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 1.5rem; color: #6366f1; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<p>Thank you!</p>",
+			"solution": "Thank you!",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -24,44 +25,6 @@
 					"message": "Type <code>Thank you!</code>"
 				}
 			]
-		},
-		{
-			"id": "contribute",
-			"title": "Contribute",
-			"description": "<strong>Help others learn!</strong><br><br>Code Crispies is open source and always looking for new lessons. You can contribute by:<br><br>• <strong>Writing new lessons</strong> - Share your knowledge on topics we haven't covered<br>• <strong>Translating lessons</strong> - Help make Code Crispies accessible in more languages<br>• <strong>Fixing bugs</strong> - Found something broken? Help us fix it!<br>• <strong>Improving content</strong> - Make existing lessons clearer and better<br><br><strong>Get started:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea Repository</a> - Main source code<br>• <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub Mirror</a> - Alternative access<br><br>Lessons are simple JSON files in the <code>lessons/</code> folder. Check existing lessons for the format!",
-			"task": "Click Next to continue",
-			"previewHTML": "<div class=\"card\"><h2>Your First Lesson</h2><p>Create a JSON file in <code>lessons/</code></p><pre>{\n  \"id\": \"my-lesson\",\n  \"title\": \"My Lesson\",\n  \"lessons\": [...]\n}</pre></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } .card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; } h2 { color: #6366f1; margin-top: 0; } pre { background: #1e293b; color: #e2e8f0; padding: 12px; border-radius: 4px; overflow-x: auto; }",
-			"sandboxCSS": "",
-			"initialCode": "<div class=\"card\">\n  <h2>Your First Lesson</h2>\n  <p>Create a JSON file in <code>lessons/</code></p>\n  <pre>{\n  \"id\": \"my-lesson\",\n  \"title\": \"My Lesson\",\n  \"lessons\": [...]\n}</pre>\n</div>",
-			"solution": "<div class=\"card\">\n  <h2>Your First Lesson</h2>\n  <p>Create a JSON file in <code>lessons/</code></p>\n  <pre>{\n  \"id\": \"my-lesson\",\n  \"title\": \"My Lesson\",\n  \"lessons\": [...]\n}</pre>\n</div>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "card",
-					"message": "Click Next to continue"
-				}
-			]
-		},
-		{
-			"id": "keep-learning",
-			"title": "Keep Learning",
-			"description": "<strong>Your journey continues!</strong><br><br><strong>Recommended resources:</strong><br>• <a href=\"https://developer.mozilla.org/en-US/docs/Web\" target=\"_blank\">MDN Web Docs</a> - The definitive web development reference<br>• <a href=\"https://css-tricks.com\" target=\"_blank\">CSS-Tricks</a> - Practical CSS techniques and tutorials<br>• <a href=\"https://web.dev\" target=\"_blank\">web.dev</a> - Modern web development best practices<br><br><strong>Practice projects:</strong><br>• Build your personal portfolio website<br>• Recreate your favorite website's layout<br>• Create a responsive landing page<br>• Build a CSS-only interactive component<br><br><strong>Remember:</strong> The best way to learn is by building. Start small, iterate, and have fun!<br><br><em>Thank you for learning with Code Crispies!</em>",
-			"task": "Explore the Playground",
-			"previewHTML": "<div class=\"message\"><span class=\"emoji\">🎉</span><h1>Happy Coding!</h1><p>See you in the code!</p></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .message { text-align: center; color: white; } .emoji { font-size: 4rem; display: block; margin-bottom: 1rem; } h1 { margin: 0 0 0.5rem; } p { margin: 0; opacity: 0.9; }",
-			"sandboxCSS": "",
-			"initialCode": "<div class=\"message\">\n  <span class=\"emoji\">🎉</span>\n  <h1>Happy Coding!</h1>\n  <p>See you in the code!</p>\n</div>",
-			"solution": "<div class=\"message\">\n  <span class=\"emoji\">🎉</span>\n  <h1>Happy Coding!</h1>\n  <p>See you in the code!</p>\n</div>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "message",
-					"message": "Explore the Playground"
-				}
-			]
 		}
 	]
 }

lessons/ar/00-basic-selectors.json

@@ -1,548 +1,257 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "css-basic-selectors",
-	"title": "CSS Selectors",
-	"description": "CSS selectors are the foundation of styling web pages, allowing you to target specific HTML elements for styling. This module introduces fundamental selector types including element type selectors, class selectors, ID selectors, and the universal selector.",
+	"title": "أساسيات CSS",
+	"description": "تعلم اللبنات الأساسية لـ CSS: الخصائص والقيم والمحددات. يعلمك هذا الوحدة قواعد الصياغة التي يتبعها كل إعلان CSS.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
-			"id": "introduction-to-selectors",
-			"title": "What's a Selector?",
-			"description": "A CSS selector is the first part of a CSS rule that tells the browser which HTML elements should receive the styles defined in the declaration block. Selectors are essentially patterns that match against elements in your HTML document. Understanding selectors is fundamental because they determine which elements your CSS rules will affect. The element or elements targeted by a selector are referred to as the 'subject of the selector.' When writing a CSS rule, you first specify the selector, followed by curly braces that contain the style declarations.<br/>For example, to change the text color of elements, you can use the <kbd>color</kbd> property within your declaration block.<br><br><pre>/* Element selector */\np {\n  color: orangered;\n  /* │       └─── Indicates the value of the expression\n     │                                                     \n     └─────────── Indicates the property of the expression */\n}</pre>",
-			"task": "Write a CSS rule using a type selector that targets all paragraph elements <kbd>p</kbd> in the document. Make the text blue by setting the <kbd>color</kbd> property to <kbd>blue</kbd>.",
-			"previewHTML": "<h1>Introduction to CSS Selectors</h1>\n<p>This paragraph should turn blue.</p>\n<div>This div element should remain unchanged.</div>\n<p>This second paragraph should also turn blue.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, p, div { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Write a type selector to target all paragraph elements */\n",
+			"id": "css-properties",
+			"title": "خصائص CSS",
+			"description": "تقوم CSS بتنسيق العناصر باستخدام <strong>الإعلانات</strong> - أزواج من الخصائص والقيم. كل إعلان يتبع نفس النمط:<br><br><pre>property: value;</pre><br><strong>الخصاصية</strong> هي ما تريد تغييره (مثل <kbd>color</kbd> أو <kbd>background</kbd>). <strong>القيمة</strong> هي ما تضبطها عليه. النقطتان تفصلهما، والفاصلة المنقوطة تنهي السطر.<br><br>القيم تأتي بأنواع مختلفة:<br>• <strong>كلمات مفتاحية:</strong> <kbd>red</kbd>، <kbd>bold</kbd>، <kbd>center</kbd><br>• <strong>أرقام بوحدات:</strong> <kbd>16px</kbd>، <kbd>2rem</kbd>، <kbd>100%</kbd><br>• <strong>ألوان:</strong> <kbd>steelblue</kbd>، <kbd>#ff0000</kbd>",
+			"task": "أكمل الإعلان بإضافة <kbd>color: coral;</kbd> لتغيير لون النص.",
+			"previewHTML": "<p class=\"text\">This text should turn coral.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .text { font-size: 1.25rem; }",
+			"sandboxCSS": "",
+			"codePrefix": ".text {\n  ",
 			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
-			"solution": "p { color: blue }",
+			"solution": "color: coral;",
 			"validations": [
 				{
-					"type": "regex",
-					"value": "^p\\s*{",
-					"message": "Start your rule with <kbd>p { … }</kbd> to select all paragraph elements",
-					"options": {
-						"caseSensitive": false
-					}
-				},
+					"type": "property_value",
+					"value": { "property": "color", "expected": "coral" },
+					"message": "أضف <kbd>color: coral;</kbd>"
+				}
+			]
+		},
+		{
+			"id": "multiple-properties",
+			"title": "خصائص متعددة",
+			"description": "يمكن أن تحتوي القاعدة على إعلانات متعددة. كل واحدة تذهب في سطرها الخاص، وكل واحدة تحتاج فاصلة منقوطة في النهاية:<br><br><pre>.box {<br>  background: gold;<br>  color: navy;<br>  padding: 1rem;<br>}</pre><br>الترتيب عادةً لا يهم - CSS تطبقها جميعًا. عند التعارض، الأخيرة تفوز.",
+			"task": "أضف إعلانين: <kbd>background: lavender;</kbd> و <kbd>padding: 1rem;</kbd>",
+			"previewHTML": "<div class=\"card\">A styled card with background and padding.</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .card { border-radius: 8px; }",
+			"sandboxCSS": "",
+			"codePrefix": ".card {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "background: lavender;\n  padding: 1rem;",
+			"validations": [
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color:</kbd> property in your CSS rule"
-				},
-				{
-					"type": "contains",
-					"value": "blue",
-					"message": "Set the color value to <kbd>blue</kbd>"
+					"type": "property_value",
+					"value": { "property": "background", "expected": "lavender" },
+					"message": "أضف <kbd>background: lavender;</kbd>"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "blue"
-					},
-					"message": "Use <kbd>color: blue</kbd> to set the text color"
-				},
-				{
-					"type": "regex",
-					"value": "p\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": false
-					}
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "أضف <kbd>padding: 1rem;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "type-selectors",
-			"title": "Type Selectors",
-			"description": "Type selectors (also called tag name selectors or element selectors) target HTML elements based on their tag name. For example, <kbd>p</kbd> selects all paragraph elements, <kbd>h1</kbd> selects all level-one headings, and <kbd>div</kbd> selects all division elements. Type selectors are the most fundamental way to select elements, applying styles consistently to all instances of a particular HTML element throughout your document. You can define a variety of CSS properties with type selectors, such as <kbd>color</kbd> for text color, <kbd>background-color</kbd> for the background, and <kbd>font-weight</kbd> for text emphasis. They provide a broad approach for styling your page and are often the starting point for more specific styling using other selector types.",
-			"task": "Write three separate CSS rules using type selectors to target specific HTML elements: make <kbd>h2</kbd> headings <kbd>purple</kbd>, give <kbd>span</kbd> elements a <kbd>yellow</kbd> background, and make <kbd>strong</kbd> elements <kbd>red</kbd>.",
-			"previewHTML": "<h2>Type Selectors Example</h2>\n<p>Regular paragraph text <span>with a highlighted span</span> that should have a yellow background.</p>\n<p>Another paragraph with <strong>strong important text</strong> that should be red.</p>\n<h2>Another Heading</h2>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, span, strong { padding: 3px; }",
-			"codePrefix": "/* Write three separate type selectors below */\n\n",
-			"initialCode": "/* 1. Make h2 headings purple */\n\n\n/* 2. Give span elements a yellow background */\n\n\n/* 3. Make strong elements red */\n",
+			"title": "محددات النوع",
+			"description": "<strong>المحدد</strong> يخبر المتصفح أي العناصر يجب تنسيقها. أبسط محدد هو <strong>محدد النوع</strong> — مجرد اسم وسم HTML.<br><br><pre>p {<br>  color: steelblue;<br>}</pre><br>هذه القاعدة تستهدف كل عنصر <kbd>&lt;p&gt;</kbd> في الصفحة. محددات النوع رائعة لتعيين الأنماط الأساسية.",
+			"task": "نسق جميع الفقرات. اكتب قاعدة مع <kbd>p</kbd> كمحدد واضبط <kbd>color: steelblue</kbd>.",
+			"previewHTML": "<article>\n  <h2>Fresh Roasted Coffee</h2>\n  <p>Our beans are sourced from small farms in Colombia and Ethiopia.</p>\n  <p>Each batch is roasted weekly to ensure peak freshness.</p>\n</article>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h2 { margin: 0 0 1rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": "/* 1. Make h2 headings purple */\nh2 {\n  color: purple;\n}\n\n/* 2. Give span elements a yellow background */\nspan {\n  background-color: yellow;\n}\n\n/* 3. Make strong elements red */\nstrong {\n  color: red;\n}",
+			"solution": "p {\n  color: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^h2\\s*{",
-					"message": "Include an <kbd>h2 { … }</kbd> selector"
+					"value": "p\\s*\\{",
+					"message": "ابدأ بـ <kbd>p {</kbd> لاختيار الفقرات"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Set the <kbd>color</kbd> property to <kbd>purple</kbd> for h2 elements"
-				},
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "اضبط <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "styling-links",
+			"title": "تنسيق الروابط",
+			"description": "محددات النوع تعمل مع أي عنصر HTML. المحدد <kbd>a</kbd> يستهدف جميع الروابط في الصفحة.<br><br>الروابط لها لون أزرق وخط تحتها افتراضيًا. يمكنك تغيير كليهما مع CSS — استخدم <kbd>color</kbd> للنص و <kbd>text-decoration: none</kbd> لإزالة الخط.",
+			"task": "نسق روابط التنقل. اكتب قاعدة مع <kbd>a</kbd> كمحدد واضبط <kbd>color: coral</kbd>.",
+			"previewHTML": "<nav>\n  <a href=\"#\">Home</a>\n  <a href=\"#\">Menu</a>\n  <a href=\"#\">About</a>\n  <a href=\"#\">Contact</a>\n</nav>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } nav { display: flex; gap: 1.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": "a {\n  color: coral;\n}",
+			"validations": [
 				{
 					"type": "regex",
-					"value": "h2\\s*{[^}]*}",
-					"message": "Make sure to close your h2 rule with a closing brace <kbd>}</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "^span\\s*{",
-					"message": "Include a <kbd>span { … }</kbd> selector"
+					"value": "a\\s*\\{",
+					"message": "ابدأ بـ <kbd>a {</kbd> لاختيار الروابط"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Set a <kbd>background-color: yellow</kbd> for span elements"
-				},
-				{
-					"type": "regex",
-					"value": "span\\s*{[^}]*}",
-					"message": "Make sure to close your span rule with a closing brace <kbd>}</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "^strong\\s*{",
-					"message": "Include a <kbd>strong { … }</kbd> selector"
-				},
-				{
-					"type": "regex",
-					"value": "strong\\s*{\\s*color:\\s*red;[^}]*}",
-					"message": "Set the <kbd>color: red</kbd> for strong elements"
+					"value": { "property": "color", "expected": "coral" },
+					"message": "اضبط <kbd>color: coral</kbd>"
 				}
 			]
 		},
 		{
 			"id": "class-selectors",
-			"title": "Class Selectors",
-			"description": "Class selectors target elements with a specific class attribute value. They begin with a dot (.) followed by the class name. Classes are powerful because they allow you to apply the same styles to multiple elements regardless of their type. An HTML element can have multiple classes (separated by spaces in the class attribute), and a class can be applied to any number of elements. When using class selectors, you can apply properties like <kbd>background-color</kbd> to set the background color of elements, and <kbd>font-weight</kbd> to control text thickness, making text bold or normal. This flexibility makes class selectors one of the most commonly used methods for applying styles in CSS, allowing for modular and reusable styling across your website.",
-			"task": "Create a CSS rule using a class selector that targets elements with the class <kbd>highlight</kbd>. Give these elements a <kbd>yellow</kbd> background and <kbd>bold</kbd> text.",
-			"previewHTML": "<h2>Using Class Selectors</h2>\n<p>This is a regular paragraph, but <span class=\"highlight\">this span has the highlight class</span> applied to it.</p>\n<p class=\"highlight\">This entire paragraph has the highlight class.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"highlight\">This list item is highlighted</li>\n</ul>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, li { padding: 5px; margin-bottom: 10px; }",
-			"codePrefix": "/* Create a class selector for elements with the 'highlight' class */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^\\.highlight\\s*{",
-					"message": "Start your rule with <kbd>.highlight { … }</kbd> to create a class selector",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color:</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Set the background color to <kbd>yellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "font-weight:",
-					"message": "Include the <kbd>font-weight:</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-weight",
-						"expected": "bold"
-					},
-					"message": "Set the font-weight to <kbd>bold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.highlight\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "multiple-classes",
-			"title": "Multiple Classes",
-			"description": "HTML elements can have multiple classes applied simultaneously, allowing for composable and modular CSS designs. When an element has multiple classes, it will receive styles from all matching class selectors. This approach enables you to build a library of reusable CSS classes that can be combined in different ways. You can also target elements that have a specific combination of classes by chaining class selectors together without spaces (e.g., <kbd>.class1.class2</kbd>). When styling these elements, you might use properties like <kbd>border-color</kbd> to change the color of element borders, and <kbd>background-color</kbd> to set the background color of elements. This technique lets you create conditional styles that only apply when certain classes appear together.",
-			"task": "Complete the CSS rule that targets elements with both <kbd>card</kbd> and <kbd>featured</kbd> classes by chaining the selectors. Set the border-color to gold and the background-color to lemonchiffon to make featured cards stand out.",
-			"previewHTML": "<h2>Multiple Class Combinations</h2>\n<div class=\"card\">Regular Card</div>\n<div class=\"card featured\">Featured Card</div>\n<div class=\"featured\">Just Featured (not a card)</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .card { border: 2px solid gray; padding: 15px; margin-bottom: 10px; border-radius: 5px; }",
+			"title": "محددات الفئة",
+			"description": "محددات النوع تنسق <em>جميع</em> العناصر من ذلك النوع. لكن ماذا لو أردت تنسيق بعضها فقط؟<br><br><strong>محددات الفئة</strong> تستهدف العناصر ذات سمة <kbd>class</kbd> محددة. تبدأ بنقطة:<br><br><pre>.badge {<br>  background: coral;<br>}</pre><br>هذا ينسق فقط العناصر ذات <kbd>class=\"badge\"</kbd>.",
+			"task": "نسق شارة الإشعارات. اكتب قاعدة مع <kbd>.badge</kbd> كمحدد واضبط <kbd>background: tomato</kbd>.",
+			"previewHTML": "<header>\n  <h1>Dashboard</h1>\n  <span class=\"badge\">3</span>\n</header>\n<p>You have new notifications waiting.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } h1 { margin: 0; font-size: 1.5rem; } .badge { color: white; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.875rem; } p { color: #555; margin: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* The .card class already has basic styling */\n/* Now target elements with BOTH classes: 'card' AND 'featured' */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": ".card.featured { border-color: gold; background-color: lemonchiffon }",
+			"solution": ".badge {\n  background: tomato;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.card\\.featured\\s*{",
-					"message": "Chain the selectors as <kbd>.card.featured</kbd> (no space between them)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "border-color:",
-					"message": "Include the <kbd>border-color</kbd> property"
+					"value": "\\.badge\\s*\\{",
+					"message": "ابدأ بـ <kbd>.badge {</kbd> (لا تنسَ النقطة!)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "border-color",
-						"expected": "gold"
-					},
-					"message": "Set the border color to <kbd>gold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*;",
-					"message": "Make sure to end your CSS rule with a semicolon <kbd>;</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lemonchiffon"
-					},
-					"message": "Set the background color to <kbd>lemonchiffon</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "tomato" },
+					"message": "اضبط <kbd>background: tomato</kbd>"
 				}
 			]
 		},
 		{
-			"id": "class-with-type",
-			"title": "Combining Types",
-			"description": "You can combine type selectors with class selectors to target specific HTML elements that have a certain class. This creates a more specific selector that only matches when both conditions are true: the element is of the specified type AND it has the specified class. For example, <kbd>p.note</kbd> would select paragraph elements with the class <kbd>note</kbd>, but would not select divs or spans with that same class. You can style these combined selections using properties like <kbd>background-color</kbd> to set a colored background for your elements. This approach allows you to apply different styles to the same class when it appears on different element types.",
-			"task": "Create a CSS rule that specifically targets <kbd>&lt;span&gt;</kbd> elements with the class <kbd>highlight</kbd>. Make those elements have an orange background, while other elements with the highlight class remain untouched.",
-			"previewHTML": "<h2>Type and Class Combinations</h2>\n<p>This paragraph has a <span class=\"highlight\">highlighted span</span> that should have an orange background.</p>\n<p class=\"highlight\">This paragraph has the highlight class but should NOT have an orange background.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .highlight { font-weight: bold; }",
-			"sandboxCSS": "h2, p, span { padding: 5px; }",
-			"codePrefix": "/* The .highlight class already sets font-weight to bold */\n/* Now target ONLY span elements with the highlight class */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^span\\.highlight\\s*{",
-					"message": "Use <kbd>span.highlight</kbd> selector (no space between element and class)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "orange"
-					},
-					"message": "Set the background color to <kbd>orange</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "span\\.highlight\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-selectors",
-			"title": "ID Selectors",
-			"description": "ID selectors target elements with a specific id attribute. They begin with a hash/pound sign (#) followed by the ID name. Unlike classes, IDs must be unique within a document—each ID value should be used only once per page. ID selectors have higher specificity than class or element selectors, meaning they override those selectors when conflicts arise. When styling with ID selectors, you can use properties like <kbd>color</kbd> to define text color, and <kbd>text-decoration</kbd> to control the appearance of text, such as adding underlines to elements. Because of their uniqueness requirement, IDs are best used for one-of-a-kind elements like page headers, main navigation, or specific unique components that appear only once on a page.",
-			"task": "Create a CSS rule with an ID selector that targets the element with the ID <kbd>main-title</kbd>. Set its color to purple and add an underline with <kbd>text-decoration: underline</kbd>.",
-			"previewHTML": "<h1 id=\"main-title\">Main Page Title</h1>\n<p>Regular paragraph content.</p>\n<h2>Secondary Heading</h2>\n<p id=\"intro\">Introduction paragraph (different ID).</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Create an ID selector to target the element with id=\"main-title\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^#main-title\\s*{",
-					"message": "Start your rule with <kbd>#main-title</kbd> to create an ID selector",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Set the color to <kbd>purple</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "text-decoration:",
-					"message": "Include the <kbd>text-decoration</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "text-decoration",
-						"expected": "underline"
-					},
-					"message": "Set the text-decoration to <kbd>underline</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "#main-title\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-with-type",
-			"title": "Type + ID",
-			"description": "Similar to how you can combine type and class selectors, you can also combine type selectors with ID selectors. For example, <kbd>h1#title</kbd> targets an h1 element with the ID 'title'. When using this combined approach, you can apply CSS properties like <kbd>font-style</kbd> to control the slant of the text, making it italic or normal. While this selector combination is more specific than using just the ID selector, it's often unnecessary since IDs should already be unique in a document. However, this technique can be useful for improving code readability or when you want to emphasize that a particular ID should only appear on a specific element type.",
-			"task": "Create a CSS rule that combines a type selector with an ID selector to target specifically a paragraph element with the ID <kbd>special</kbd>. Set its font style to italic.",
-			"previewHTML": "<h2 id=\"special\">Heading with ID \"special\" (should NOT be affected)</h2>\n<p id=\"special\">Paragraph with ID \"special\" (should become italic)</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Create a combined type+ID selector for a paragraph with id=\"special\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^p#special\\s*{",
-					"message": "Use <kbd>p#special</kbd> to target paragraphs with ID <kbd>special</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "font-style:",
-					"message": "Include the <kbd>font-style</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-style",
-						"expected": "italic"
-					},
-					"message": "Set the font-style to <kbd>italic</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "p#special\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "selector-lists",
-			"title": "Selector Lists",
-			"description": "When multiple elements need the same styling, you can group them together using a selector list (also known as grouping selectors). Selector lists are created by separating individual selectors with commas. This approach reduces repetition in your CSS, making it more maintainable and efficient. For example, <kbd>h1, h2, h3 { color: blue; }</kbd> applies the same blue color to all three heading levels. When styling multiple selectors at once, you can apply properties like <kbd>background-color</kbd> to set the background, <kbd>border-left</kbd> to create a left border with a specific thickness, style, and color, and <kbd>padding-left</kbd> to create space between the content and the left border. Whitespace around commas is optional, and each selector in the list can be any valid selector type-elements, classes, IDs, or even more complex selectors.",
-			"task": "Create a selector list that applies the same styles to three different elements: paragraphs with class <kbd>note</kbd>, list items with class <kbd>important</kbd>, and the element with ID <kbd>summary</kbd>. Give them a <kbd>lightyellow</kbd> background, a <kbd>gold</kbd> left border, and some left <kbd>padding</kbd>.",
-			"previewHTML": "<p class=\"note\">This is a note paragraph.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"important\">Important list item</li>\n</ul>\n<div id=\"summary\">Summary section</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p, li, div { padding: 8px; margin-bottom: 8px; border: 1px dashed gray; }",
-			"codePrefix": "/* Create a selector list to apply the same styles to multiple different elements */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"solution": "p.note,\nli.important,\n#summary {\n  background-color: lightyellow;\n  border-left: 3px solid gold;\n  padding-left: 10px\n}",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "p.note",
-					"message": "Include <kbd>p.note</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "li.important",
-					"message": "Include <kbd>li.important</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "#summary",
-					"message": "Include <kbd>#summary</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "regex",
-					"value": "(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)",
-					"message": "Create a comma-separated list with all three selectors",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lightyellow"
-					},
-					"message": "Set the background color to <kbd>lightyellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "border-left:",
-					"message": "Include the <kbd>border-left</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "border-left",
-						"expected": "3px solid gold"
-					},
-					"message": "Use <kbd>border-left: 3px solid gold</kbd> to create a left border"
-				},
-				{
-					"type": "contains",
-					"value": "padding-left:",
-					"message": "Include the <kbd>padding-left</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "padding-left",
-						"expected": "10px"
-					},
-					"message": "Use <kbd>padding-left: 10px</kbd> to add left padding"
-				}
-			]
-		},
-		{
-			"id": "universal-selector",
-			"title": "Universal (*)",
-			"description": "The universal selector is denoted by an asterisk (*) and matches any element of any type. It selects everything in the document or, when combined with other selectors, everything within a specific context. For example, <kbd>* { margin: 0; }</kbd> removes margins from all elements, while <kbd>article *</kbd> selects all elements inside article elements. When using the universal selector in combination with other selectors, you can apply properties like <kbd>margin</kbd> to control the spacing around elements. The universal selector is powerful but should be used carefully due to its broad impact. It's commonly used in CSS resets, to override default browser styling, or to target all children of a particular element.",
-			"task": "Use the universal selector to remove margins from all elements inside the container div. Create a rule using <kbd>div.container *</kbd> as the selector and set <kbd>margin: 0</kbd>.",
-			"previewHTML": "<div class=\"container\">\n  <h2>Inside Container</h2>\n  <p>This paragraph is inside the container.</p>\n  <ul>\n    <li>List item inside container</li>\n  </ul>\n</div>\n<p>This paragraph is outside the container and should not be affected.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } div.container { border: 2px solid navy; padding: 15px; background-color: lavender; } h2, p, ul, li { margin: 15px 0; }",
+			"id": "button-variants",
+			"title": "متغيرات الأزرار",
+			"description": "يمكن أن تحتوي العناصر على فئات متعددة. عندما تسلسل محددات الفئة بدون مسافات، تستهدف العناصر التي لديها <em>جميع</em> تلك الفئات:<br><br><pre>.btn.primary {<br>  background: steelblue;<br>}</pre><br>هذا يستهدف العناصر ذات <kbd>class=\"btn primary\"</kbd>، وليس فقط <kbd>.btn</kbd> أو فقط <kbd>.primary</kbd>.",
+			"task": "نسق الزر الأساسي. اكتب قاعدة مع <kbd>.btn.primary</kbd> كمحدد واضبط <kbd>background: steelblue</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Cancel</button>\n  <button class=\"btn primary\">Save Changes</button>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #e0e0e0; color: #333; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use the universal selector to target all elements inside the container */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": ".btn.primary {\n  background: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^div\\.container\\s+\\*\\s*{",
-					"message": "Use <kbd>div.container *</kbd> selector (with a space between container and *)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "margin:",
-					"message": "Include the <kbd>margin</kbd> property"
+					"value": "\\.btn\\.primary\\s*\\{",
+					"message": "استخدم <kbd>.btn.primary {</kbd> (بدون مسافة بين الفئات)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "margin",
-						"expected": "0"
-					},
-					"message": "Set margin to <kbd>0</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "div\\.container\\s+\\*\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "steelblue" },
+					"message": "اضبط <kbd>background: steelblue</kbd>"
 				}
 			]
 		},
 		{
-			"id": "specificity-basics",
-			"title": "Specificity",
-			"description": "CSS specificity determines which styles take precedence when multiple conflicting rules target the same element. Specificity follows a hierarchical system: inline styles have the highest specificity, followed by ID selectors, then class/attribute/pseudo-class selectors, and finally element/pseudo-element selectors. This can be conceptualized as a four-part score (inline, ID, class, element). When creating multiple rules that may target the same elements, you can use the <kbd>color</kbd> property to set text colors, and specificity will determine which color is actually applied. Understanding specificity is crucial for predictable styling and debugging CSS conflicts. When two selectors have equal specificity, the one that comes last in the stylesheet wins.",
-			"task": "Examine the existing CSS rules and add a new rule with higher specificity to override the text color of the paragraph. Create a rule using '.content p' as the selector and set color: green.",
-			"previewHTML": "<div class=\"content\">\n  <p>What color will this paragraph be? Look at the CSS rules and their specificity.</p>\n</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p { border: 1px dashed gray; padding: 10px; }",
-			"codePrefix": "/* These CSS rules target the same paragraph but have different specificity */\n\n/* Rule 1: Element selector (lowest specificity) */\np {\n  color: red;\n}\n\n/* Rule 2: Descendant selector (higher specificity than just 'p') */\n",
+			"id": "specific-elements",
+			"title": "استهداف عناصر محددة",
+			"description": "أحيانًا تريد أن تبدو الفئة مختلفة على عناصر مختلفة. اجمع محدد النوع مع محدد الفئة (بدون مسافة) لتكون أكثر تحديدًا:<br><br><pre>a.btn {<br>  text-decoration: none;<br>}</pre><br>هذا ينسق فقط عناصر <kbd>&lt;a&gt;</kbd> ذات الفئة <kbd>btn</kbd>، وليس عناصر <kbd>&lt;button&gt;</kbd> ذات تلك الفئة.",
+			"task": "أزل الخط من أزرار الروابط. اكتب قاعدة مع <kbd>a.btn</kbd> كمحدد واضبط <kbd>text-decoration: none</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Regular Button</button>\n  <a href=\"#\" class=\"btn\">Link Button</a>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; align-items: center; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: steelblue; color: white; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": "a.btn {\n  text-decoration: none;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.content\\s+p\\s*{",
-					"message": "Use <kbd>.content p</kbd> as your selector (note the space between)",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": "a\\.btn\\s*\\{",
+					"message": "استخدم <kbd>a.btn {</kbd> (نوع + فئة، بدون مسافة)"
 				},
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color</kbd> property"
+					"type": "property_value",
+					"value": { "property": "text-decoration", "expected": "none" },
+					"message": "اضبط <kbd>text-decoration: none</kbd>"
+				}
+			]
+		},
+		{
+			"id": "grouping-selectors",
+			"title": "تجميع المحددات",
+			"description": "عندما تحتاج عناصر متعددة لنفس الأنماط، اذكرها مفصولة بفواصل. هذا يحافظ على CSS نظيفًا وقابلاً للصيانة.<br><br><pre>h1, h2, h3 {<br>  color: steelblue;<br>}</pre><br>هذا يطبق نفس اللون على مستويات العناوين الثلاثة في قاعدة واحدة.",
+			"task": "نسق جميع العناوين بشكل متسق. أضف <kbd>color: steelblue</kbd> إلى المحدد المجمع <kbd>h1, h2, h3</kbd>.",
+			"previewHTML": "<article><h1>Main Title</h1><p>Introduction paragraph with some text.</p><h2>Section Heading</h2><p>More content here.</p><h3>Subsection</h3><p>Final paragraph.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } p { color: #555; line-height: 1.6; }",
+			"sandboxCSS": "",
+			"codePrefix": "h1, h2, h3 {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "color: steelblue;",
+			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "اضبط <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "descendant-selectors",
+			"title": "محددات الأحفاد",
+			"description": "استهدف العناصر داخل عناصر أخرى باستخدام مسافة بين المحددات. هذا أحد أكثر الأنماط فائدة في CSS.<br><br><pre>.nav a {<br>  color: white;<br>}</pre><br>هذا ينسق فقط الروابط داخل <kbd>.nav</kbd>، تاركًا الروابط الأخرى دون تغيير.",
+			"task": "نسق روابط التنقل بشكل مختلف. اكتب قاعدة مع <kbd>.nav a</kbd> كمحدد واضبط <kbd>color: white</kbd>.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav><p>Read more in our <a href=\"#\">documentation</a>.</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; margin: 0; } .nav { background: steelblue; padding: 1rem; display: flex; gap: 1rem; border-radius: 8px; margin-bottom: 1rem; } .nav a { text-decoration: none; } p a { color: steelblue; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".nav a {\n  color: white;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.nav\\s+a\\s*\\{",
+					"message": "استخدم <kbd>.nav a {</kbd> (مسافة بين .nav و a)"
 				},
 				{
-					"type": "contains",
-					"value": "green",
-					"message": ""
+					"type": "property_value",
+					"value": { "property": "color", "expected": "white" },
+					"message": "اضبط <kbd>color: white</kbd>"
+				}
+			]
+		},
+		{
+			"id": "nested-styling",
+			"title": "الأنماط المتداخلة",
+			"description": "محددات الأحفاد تتيح لك إنشاء أنماط سياقية. نفس العنصر يمكن أن يبدو مختلفًا حسب مكان ظهوره.<br><br>على سبيل المثال، الفقرات في <kbd>.card</kbd> قد تكون أصغر من الفقرات في <kbd>article</kbd>.",
+			"task": "اجعل الفقرات داخل البطاقة أصغر. اكتب قاعدة مع <kbd>.card p</kbd> كمحدد واضبط <kbd>font-size: 0.9rem</kbd>.",
+			"previewHTML": "<article><h2>Article Title</h2><p>This is a regular article paragraph with normal-sized text for comfortable reading.</p><div class=\"card\"><strong>Quick Tip</strong><p>Card paragraphs should be slightly smaller to fit the compact design.</p></div><p>Back to regular article text here.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } h2 { color: steelblue; margin-top: 0; } p { line-height: 1.6; color: #444; } .card { background: #f0f4f8; padding: 1rem; border-radius: 8px; border-left: 4px solid steelblue; } .card strong { color: steelblue; display: block; margin-bottom: 0.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".card p {\n  font-size: 0.9rem;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.card\\s+p\\s*\\{",
+					"message": "استخدم <kbd>.card p {</kbd> (مسافة بين .card و p)"
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "font-size", "expected": "0.9rem" },
+					"message": "اضبط <kbd>font-size: 0.9rem</kbd>"
 				}
 			]
 		}

lessons/ar/00-welcome.json

@@ -1,16 +1,17 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "welcome",
-	"title": "Code Crispies",
-	"description": "Welcome to Code Crispies - your interactive web development learning platform",
+	"title": "مرحباً",
+	"description": "ابدأ مع Code Crispies",
 	"mode": "html",
 	"difficulty": "beginner",
+	"excludeFromProgress": true,
 	"lessons": [
 		{
-			"id": "get-started",
-			"title": "Get Started",
-			"description": "<strong>Code Crispies</strong> is a free, open-source platform for learning web development through hands-on exercises. No account required!<br><br><strong>What you'll learn:</strong><br>• <strong>HTML</strong> - Semantic elements, forms, tables, SVG (<em>HTML Block & Inline</em>, <em>HTML Forms</em>, <em>HTML Tables</em>)<br>• <strong>CSS</strong> - Selectors, box model, flexbox, animations (<em>CSS Selectors</em>, <em>CSS Box Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media queries and mobile-first layouts<br><br><strong>How it works:</strong><br>1. Read the task in the left panel<br>2. Write code in the editor<br>3. See live results in the preview<br>4. Get instant feedback with hints<br><br><strong>Keyboard shortcuts:</strong> <kbd>Ctrl+Z</kbd> to undo, <kbd>Ctrl+Shift+Z</kbd> to redo<br><br><strong>More resources:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript solutions<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript technology roadmap",
-			"task": "Write <code>Hello World</code>",
+			"id": "hello",
+			"title": "أهلاً!",
+			"description": "<strong>مرحباً بك في Code Crispies!</strong> تعلم CSS و HTML من خلال تمارين عملية.<br><br><strong>كيف يعمل:</strong><br>1. اقرأ المهمة على اليسار<br>2. اكتب الكود في المحرر<br>3. شاهد النتائج مباشرة في المعاينة<br><br><strong>نصائح:</strong> استخدم <kbd>Ctrl+Z</kbd> للتراجع. افتح القائمة (☰) لاستكشاف جميع الوحدات.",
+			"task": "اكتب <code>Hello World</code> للبدء",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }",
 			"sandboxCSS": "",
@@ -21,42 +22,9 @@
 				{
 					"type": "contains",
 					"value": "Hello World",
-					"message": "Write <code>Hello World</code>"
+					"message": "اكتب <code>Hello World</code>"
 				}
 			]
-		},
-		{
-			"id": "overview",
-			"title": "Overview",
-			"description": "<strong>You're ready!</strong> Open the menu (☰) to explore all modules.<br><br><strong>Recommended learning path:</strong><br>1. <em>HTML Block & Inline</em> - Understand container vs inline elements<br>2. <em>HTML Forms</em> - Build interactive forms with validation<br>3. <em>CSS Selectors</em> - Target elements precisely<br>4. <em>CSS Box Model</em> - Master padding, margin, borders<br>5. <em>CSS Flexbox</em> - Create flexible layouts<br>6. <em>CSS Animations</em> - Add motion and transitions<br><br><strong>Tips:</strong><br>• Use <em>Show Expected</em> to see the target result<br>• Your progress is saved automatically<br>• Try Emmet in HTML mode: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Made by <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
-			"task": "Click Next to continue",
-			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }",
-			"sandboxCSS": "",
-			"initialCode": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "Hello World",
-					"message": "Click Next to continue"
-				}
-			]
-		},
-		{
-			"id": "playground",
-			"title": "Playground",
-			"mode": "playground",
-			"description": "",
-			"task": "",
-			"previewHTML": "",
-			"previewBaseCSS": "",
-			"sandboxCSS": "",
-			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
-			"solution": "",
-			"previewContainer": "preview-area",
-			"validations": []
 		}
 	]
 }

lessons/ar/01-box-model.json

@@ -2,18 +2,18 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "box-model",
 	"title": "CSS Box Model",
-	"description": "Master the fundamental principles of space management in web design through the CSS box model. This module explores how content, padding, borders, and margins combine to create layout structures that are both visually appealing and structurally sound.",
+	"description": "أتقن المبادئ الأساسية لإدارة المساحة في تصميم الويب من خلال نموذج الصندوق CSS. يستكشف هذا الوحدة كيف يتحد المحتوى والحشو والحدود والهوامش لإنشاء هياكل التخطيط.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "box-model-1",
-			"title": "Box Model Components",
-			"description": "The CSS box model consists of four concentric layers: content area (innermost), padding, border, and margin (outermost). Understanding how these components interact is essential for precise layout control.",
-			"task": "Set <kbd>padding</kbd> to <kbd>1rem</kbd> to create space between the content and border.",
-			"previewHTML": "<div class=\"box\">Box Model Components</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }",
+			"title": "Padding",
+			"description": "كل عنصر في CSS هو صندوق بأربع طبقات: المحتوى، الحشو (padding)، الحدود، والهامش. <strong>Padding</strong> يخلق مساحة تنفس بين محتواك وحافة الصندوق.<br><br>بدون padding، يضغط النص بشكل محرج على الحدود. Padding يجعل المحتوى قابلاً للقراءة ومتوازناً بصرياً.<br><br><pre>.card {\n  padding: 1rem;\n}</pre>",
+			"task": "بطاقة الملف الشخصي هذه تبدو ضيقة. أضف <kbd>padding: 1rem</kbd> ليكون للنص مجال للتنفس.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "padding: 1rem;",
@@ -22,62 +22,62 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Set <kbd>padding: 1rem</kbd>"
+					"message": "اضبط <kbd>padding: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-2",
-			"title": "Adding Borders",
-			"description": "Borders outline an element, creating visual separation from surrounding content. The border shorthand accepts three values: width, style, and color.",
-			"task": "Set <kbd>border</kbd> to <kbd>2px solid darkslategray</kbd>.",
-			"previewHTML": "<div class=\"box\">This box needs a border</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }",
+			"title": "Borders",
+			"description": "الحدود تنشئ حدوداً مرئية حول العناصر. اختصار <kbd>border</kbd> يقبل ثلاث قيم: العرض، النمط، واللون.<br><br>الأنماط الشائعة: <kbd>solid</kbd>، <kbd>dashed</kbd>، <kbd>dotted</kbd>، <kbd>none</kbd>",
+			"task": "أضف لمسة يسارية خفيفة للبطاقة باستخدام <kbd>border-left: 4px solid steelblue</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border: 2px solid darkslategray;",
+			"solution": "border-left: 4px solid steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "border:\\s*2px\\s+solid\\s+darkslategray",
-					"message": "Set <kbd>border: 2px solid darkslategray</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
+					"message": "اضبط <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-3",
-			"title": "Adding Margins",
-			"description": "Margins create space between elements, controlling how they relate to one another within a layout. Unlike padding (which affects internal spacing), margins exist outside the element's border.",
-			"task": "Set <kbd>margin</kbd> to <kbd>1rem</kbd> to create space between this element and its neighbors.",
-			"previewHTML": "<div class=\"container\"><div class=\"outer\">This box needs margins</div><div class=\"neighbor\">Adjacent element</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .outer { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }",
+			"title": "Margins",
+			"description": "الهوامش تنشئ مساحة <em>خارج</em> العنصر، تفصله عن جيرانه. بينما يدفع padding المحتوى للداخل، الهوامش تدفع العناصر الأخرى بعيداً.",
+			"task": "أضف مساحة بين بطاقتي الملف الشخصي هاتين باستخدام <kbd>margin-bottom: 1rem</kbd> على <kbd>.card</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article><article class=\"card\"><h3>Alex Rivera</h3><p>UX Designer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".outer {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem;",
+			"solution": "margin-bottom: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "margin", "expected": "1rem" },
-					"message": "Set <kbd>margin: 1rem</kbd>"
+					"value": { "property": "margin-bottom", "expected": "1rem" },
+					"message": "اضبط <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-4",
-			"title": "Box Sizing: Border-Box",
-			"description": "The <kbd>box-sizing</kbd> property determines how element dimensions are calculated. The default <kbd>content-box</kbd> excludes padding and border from width/height, while <kbd>border-box</kbd> includes them, making layout calculations more intuitive.",
-			"task": "Set <kbd>box-sizing</kbd> to <kbd>border-box</kbd> so padding and border are included in the width.",
-			"previewHTML": "<div class=\"sizing-demo\"><div class=\"box default\">Content-box (default)</div><div class=\"box sized\">Border-box</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .default { box-sizing: content-box; }",
+			"title": "Box Sizing",
+			"description": "افتراضياً، <kbd>width</kbd> يحدد فقط عرض المحتوى. Padding والحدود تُضاف للمجموع. هذا يسبب مشاكل في التخطيط.<br><br><kbd>box-sizing: border-box</kbd> يشمل padding والحدود في العرض، مما يجعل التحجيم متوقعاً. معظم المطورين يطبقون هذا على جميع العناصر.",
+			"task": "كلا البطاقتين لهما <kbd>width: 200px</kbd>. اليسرى تستخدم التحجيم الافتراضي (content-box)، مما يجعلها أعرض من المتوقع. أصلح البطاقة اليمنى باستخدام <kbd>box-sizing: border-box</kbd>.",
+			"previewHTML": "<div class=\"demo\"><article class=\"card\">Content-box</article><article class=\"card fix\">Border-box</article></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .demo { display: flex; gap: 1rem; } .card { width: 200px; padding: 1rem; border: 4px solid steelblue; background: white; border-radius: 8px; }",
 			"sandboxCSS": "",
-			"codePrefix": ".sized {\n  ",
+			"codePrefix": ".fix {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "box-sizing: border-box;",
@@ -86,93 +86,104 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Set <kbd>box-sizing: border-box</kbd>"
+					"message": "اضبط <kbd>box-sizing: border-box</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-5",
-			"title": "Margin Collapse",
-			"description": "When two vertical margins meet, they collapse to the larger value instead of adding up. Understanding this behavior is crucial for consistent vertical spacing.",
-			"task": "Set <kbd>margin-bottom</kbd> to <kbd>2rem</kbd>. Notice the space between paragraphs equals 2rem (not 3rem) due to margin collapse.",
-			"previewHTML": "<div class=\"collapse-demo\"><p class=\"first\">This paragraph has a bottom margin.</p><p class=\"second\">This paragraph has a top margin of 1rem.</p></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }",
+			"title": "Padding Shorthand",
+			"description": "Padding يقبل 1-4 قيم:<br>• قيمة واحدة: جميع الجوانب<br>• قيمتان: عمودي | أفقي<br>• 4 قيم: أعلى | يمين | أسفل | يسار",
+			"task": "هذا الزر يحتاج مساحة أفقية أكثر من العمودية. اضبط <kbd>padding: 8px 1rem</kbd> (8px أعلى/أسفل، 1rem يسار/يمين).",
+			"previewHTML": "<button class=\"btn\">Follow</button>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .btn { background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }",
 			"sandboxCSS": "",
-			"codePrefix": ".first {\n  ",
+			"codePrefix": ".btn {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin-bottom: 2rem;",
+			"solution": "padding: 8px 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "property_value",
-					"value": { "property": "margin-bottom", "expected": "2rem" },
-					"message": "Set <kbd>margin-bottom: 2rem</kbd>"
+					"type": "regex",
+					"value": "padding:\\s*8px\\s+1rem",
+					"message": "اضبط <kbd>padding: 8px 1rem</kbd>",
+					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-6",
-			"title": "Margin Shorthand Notation",
-			"description": "The margin shorthand can set all four sides at once. Two values set vertical (top/bottom) and horizontal (left/right) margins respectively.",
-			"task": "Set <kbd>margin</kbd> to <kbd>1rem 2rem</kbd> for 1rem top/bottom and 2rem left/right.",
-			"previewHTML": "<div class=\"container\"><div class=\"spaced\">This box needs margins: 1rem top/bottom, 2rem left/right</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .spaced { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }",
+			"title": "Margin Shorthand",
+			"description": "Margin يستخدم نفس نمط الاختصار مثل padding. نمط شائع هو توسيط عناصر الكتلة أفقياً باستخدام <kbd>margin: 0 auto</kbd>.",
+			"task": "وسّط هذه البطاقة أفقياً. اضبط <kbd>margin: 0 auto</kbd> لحساب هوامش يسار/يمين متساوية تلقائياً.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { width: 250px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".spaced {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem 2rem;",
+			"solution": "margin: 0 auto;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "margin:\\s*1rem\\s+2rem",
-					"message": "Set <kbd>margin: 1rem 2rem</kbd>",
+					"value": "margin:\\s*0\\s+auto",
+					"message": "اضبط <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-7",
-			"title": "Padding Shorthand Notation",
-			"description": "Like margin, padding shorthand allows setting all sides at once. A single value applies to all four sides equally.",
-			"task": "Set <kbd>padding</kbd> to <kbd>2rem</kbd> to add equal padding on all sides.",
-			"previewHTML": "<div class=\"padded\">This box needs equal padding on all sides</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }",
+			"title": "Border Radius",
+			"description": "على الرغم من أنه ليس جزءاً من نموذج الصندوق الكلاسيكي، <kbd>border-radius</kbd> يُدوّر زوايا صندوق حدود العنصر. استخدم <kbd>50%</kbd> على عنصر مربع لإنشاء دائرة.",
+			"task": "اجعل صورة الأفاتار دائرية باستخدام <kbd>border-radius: 50%</kbd>.",
+			"previewHTML": "<article class=\"card\"><img class=\"avatar\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='25' fill='%23666'/%3E%3Ccircle cx='50' cy='90' r='40' fill='%23666'/%3E%3C/svg%3E\" alt=\"Avatar\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; text-align: center; } .avatar { width: 80px; height: 80px; background: #ddd; margin-bottom: 8px; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".padded {\n  ",
+			"codePrefix": ".avatar {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "padding: 2rem;",
+			"solution": "border-radius: 50%;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "padding", "expected": "2rem" },
-					"message": "Set <kbd>padding: 2rem</kbd>"
+					"value": { "property": "border-radius", "expected": "50%" },
+					"message": "اضبط <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-8",
-			"title": "Border on Specific Sides",
-			"description": "For granular control, you can target specific sides with <kbd>border-top</kbd>, <kbd>border-right</kbd>, <kbd>border-bottom</kbd>, or <kbd>border-left</kbd>.",
-			"task": "Set <kbd>border-bottom</kbd> to <kbd>4px solid dodgerblue</kbd>.",
-			"previewHTML": "<div class=\"line\">This element needs only a bottom border</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }",
+			"title": "Complete Card",
+			"description": "لنجمع كل شيء معاً. بطاقة الإشعار هذه تحتاج تنسيقاً لتبدو احترافية.",
+			"task": "نسّق الإشعار: أضف <kbd>padding: 1rem</kbd>، <kbd>border-left: 4px solid coral</kbd>، و<kbd>border-radius: 4px</kbd>.",
+			"previewHTML": "<div class=\"alert\"><strong>New message</strong><p>You have 3 unread notifications</p></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { background: seashell; } .alert strong { color: coral; } .alert p { margin: 4px 0 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".line {\n  ",
+			"codePrefix": ".alert {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border-bottom: 4px solid dodgerblue;",
+			"solution": "padding: 1rem;\n  border-left: 4px solid coral;\n  border-radius: 4px;",
 			"previewContainer": "preview-area",
 			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "اضبط <kbd>padding: 1rem</kbd>"
+				},
 				{
 					"type": "regex",
-					"value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue",
-					"message": "Set <kbd>border-bottom: 4px solid dodgerblue</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+coral",
+					"message": "اضبط <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "border-radius", "expected": "4px" },
+					"message": "اضبط <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}

lessons/ar/05-units-variables.json

@@ -1,115 +1,100 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "units-variables",
-	"title": "CSS Units & Variables",
-	"description": "Understand the variety of CSS measurement units and how to define and use custom properties for maintainable styles.",
+	"title": "وحدات CSS والمتغيرات",
+	"description": "افهم تنوع وحدات القياس في CSS وكيفية تعريف واستخدام الخصائص المخصصة لأنماط قابلة للصيانة.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "units-1",
-			"title": "Absolute vs. Relative Units",
-			"description": "Learn the difference between px, rem, em, %, and vw/vh for flexible, responsive layouts.",
-			"task": "Set the <kbd>width</kbd> of <kbd>.box</kbd> to <kbd>80%</kbd> and <kbd>max-width</kbd> to <kbd>37.5rem</kbd>.",
-			"previewHTML": "<div class=\"box\">Resize me!</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background: #f5f5f5; padding: 1rem; }",
+			"title": "Relative Units",
+			"description": "يقدم CSS نوعين من الوحدات: <em>مطلقة</em> (مثل <kbd>px</kbd>) و<em>نسبية</em> (مثل <kbd>%</kbd> و <kbd>rem</kbd>). الوحدات النسبية تتكيف مع سياقها، مما يجعل التخطيطات مرنة وسهلة الوصول.<br><br><strong>الوحدات النسبية الشائعة:</strong><br>• <kbd>%</kbd> – نسبة للعنصر الأب<br>• <kbd>rem</kbd> – نسبة لحجم خط الجذر (عادة 16px)<br>• <kbd>em</kbd> – نسبة لحجم خط العنصر<br><br>نمط شائع للمحتوى القابل للقراءة: اضبط <kbd>width: 100%</kbd> لملء المساحة المتاحة، ثم <kbd>max-width: 40rem</kbd> لتحديد طول السطر للقراءة.",
+			"task": "نص هذه المقالة عريض جداً على الشاشات الكبيرة. أضف <kbd>max-width: 40rem</kbd> للحصول على عرض قراءة مثالي.",
+			"previewHTML": "<article class=\"article\"><h2>The Art of Typography</h2><p>Good typography is invisible. When text is set well, readers absorb information without noticing the design decisions that make it comfortable to read. Line length is crucial—too wide and eyes get lost, too narrow and reading becomes choppy.</p><p>The ideal line length is 45-75 characters per line. At typical font sizes, this works out to roughly 40rem maximum width.</p></article>",
+			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 1rem; background: #f9f9f9; } .article { background: white; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .article h2 { margin: 0 0 1rem; color: #333; } .article p { margin: 0 0 1rem; line-height: 1.6; color: #444; } .article p:last-child { margin-bottom: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Set flexible sizing */\n.box {",
+			"codePrefix": ".article {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 80%;\n  max-width: 37.5rem;",
+			"codeSuffix": "\n}",
+			"solution": "max-width: 40rem;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "width", "message": "Use <kbd>width</kbd> property", "options": { "caseSensitive": false } },
-				{ "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Set width to <kbd>80%</kbd>" },
-				{ "type": "contains", "value": "max-width", "message": "Use <kbd>max-width</kbd> property", "options": { "caseSensitive": false } },
 				{
 					"type": "property_value",
-					"value": { "property": "max-width", "expected": "37.5rem" },
-					"message": "Set max-width to <kbd>37.5rem</kbd>"
+					"value": { "property": "max-width", "expected": "40rem" },
+					"message": "اضبط <kbd>max-width: 40rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "units-2",
-			"title": "CSS Custom Properties",
-			"description": "Define and reuse variables (--custom properties) to centralize your theme values.",
-			"task": "Create a <kbd>--main-color</kbd> variable in <kbd>:root</kbd> with <kbd>#6200ee</kbd> and apply it as the border color on <kbd>.themed</kbd>.",
-			"previewHTML": "<div class=\"themed\">Variable Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }",
+			"title": "CSS Variables",
+			"description": "الخصائص المخصصة في CSS (المتغيرات) تتيح لك تعريف قيم قابلة لإعادة الاستخدام. عرّفها بـ <kbd>--اسم</kbd> واستخدمها بـ <kbd>var(--اسم)</kbd>. المتغيرات المعرّفة على <kbd>:root</kbd> متاحة في كل مكان.",
+			"task": "عرّف <kbd>--brand: steelblue</kbd> في <kbd>:root</kbd>، ثم استخدمها كلون <kbd>background</kbd> لـ <kbd>.btn</kbd>.",
+			"previewHTML": "<div class=\"actions\"><button class=\"btn\">Subscribe</button><button class=\"btn\">Learn More</button></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .actions { display: flex; gap: 1rem; } .btn { color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #ccc; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Define and use a CSS variable */\n:root {",
+			"codePrefix": ":root {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}\n.themed { }",
-			"solution": "  --main-color: #6200ee;\n}\n.themed {\n  border-color: var(--main-color);",
+			"codeSuffix": "\n}\n\n.btn {\n  background: var(--brand);\n}",
+			"solution": "--brand: steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "contains",
-					"value": "--main-color",
-					"message": "Define <kbd>--main-color</kbd> in :root",
+					"value": "--brand",
+					"message": "عرّف المتغير <kbd>--brand</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
-					"value": "var(--main-color)",
-					"message": "Use <kbd>var(--main-color)</kbd>",
+					"value": "steelblue",
+					"message": "اضبط القيمة على <kbd>steelblue</kbd>",
 					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "property_value",
-					"value": { "property": "border", "expected": "var(--main-color)" },
-					"message": "Apply variable to border color",
-					"options": { "exact": false }
 				}
 			]
 		},
 		{
 			"id": "units-3",
-			"title": "Unit Calculations (calc)",
-			"description": "Use the <kbd>calc()</kbd> function to combine different units in one expression.",
-			"task": "Set the <kbd>width</kbd> of <kbd>.sized</kbd> to <kbd>calc(100% - 2rem)</kbd> and <kbd>min-height</kbd> to <kbd>calc(10vh + 1rem)</kbd>.",
-			"previewHTML": "<div class=\"sized\">Calc Demo</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }",
+			"title": "calc() Function",
+			"description": "دالة <kbd>calc()</kbd> تتيح لك خلط وحدات مختلفة في الحسابات. هذا ضروري للتخطيطات التي تجمع بين الأحجام الثابتة والمرنة، مثل تخطيط الشريط الجانبي.",
+			"task": "المحتوى الرئيسي يجب أن يملأ المساحة المتبقية بعد الشريط الجانبي 200px. اضبط <kbd>width: calc(100% - 200px)</kbd> على <kbd>.main</kbd>.",
+			"previewHTML": "<div class=\"layout\"><aside class=\"sidebar\">Sidebar<br>Navigation</aside><main class=\"main\"><h2>Main Content</h2><p>This area should fill the remaining width after accounting for the fixed-width sidebar.</p></main></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .layout { display: flex; gap: 1rem; } .sidebar { width: 200px; background: #1a1a2e; color: white; padding: 1rem; border-radius: 8px; flex-shrink: 0; } .main { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .main h2 { margin: 0 0 8px; } .main p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use calc for dynamic sizing */\n.sized {",
+			"codePrefix": ".main {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: calc(100% - 2rem);\n  min-height: calc(10vh + 1rem);",
+			"codeSuffix": "\n}",
+			"solution": "width: calc(100% - 200px);",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "calc", "message": "Use <kbd>calc()</kbd> function", "options": { "caseSensitive": false } },
 				{
 					"type": "regex",
-					"value": "width:\\s*calc\\(100% - 2rem\\)",
-					"message": "Width should be <kbd>calc(100% - 2rem)</kbd>",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "regex",
-					"value": "min-height:\\s*calc\\(10vh \\+ 1rem\\)",
-					"message": "Min-height should be <kbd>calc(10vh + 1rem)</kbd>",
+					"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
+					"message": "اضبط <kbd>width: calc(100% - 200px)</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "units-4",
-			"title": "Viewport & Responsive Units",
-			"description": "Control layouts relative to viewport size with vw, vh, and vmin/vmax units.",
-			"task": "Give <kbd>.view</kbd> a <kbd>width</kbd> of <kbd>50vw</kbd> and <kbd>height</kbd> of <kbd>20vh</kbd>.",
-			"previewHTML": "<div class=\"view\">Viewport Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .view { background: #ffe0b2; }",
+			"title": "Viewport Units",
+			"description": "وحدات العرض تحدد حجم العناصر نسبة لنافذة المتصفح:<br>• <kbd>vw</kbd> – 1% من عرض العرض<br>• <kbd>vh</kbd> – 1% من ارتفاع العرض<br><br>هذه مثالية للأقسام بملء الشاشة مثل لافتات hero.",
+			"task": "اجعل قسم hero هذا يملأ ارتفاع العرض بضبط <kbd>min-height: 100vh</kbd>.",
+			"previewHTML": "<section class=\"hero\"><h1>Welcome</h1><p>Scroll down to explore</p></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .hero { background: linear-gradient(135deg, #1a1a2e 0%, steelblue 100%); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .hero h1 { margin: 0 0 1rem; font-size: 2.5rem; } .hero p { margin: 0; opacity: 0.8; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use viewport units */\n.view {",
+			"codePrefix": ".hero {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 50vw;\n  height: 20vh;",
+			"codeSuffix": "\n}",
+			"solution": "min-height: 100vh;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "vw", "message": "Use <kbd>vw</kbd> unit", "options": { "caseSensitive": false } },
-				{ "type": "contains", "value": "vh", "message": "Use <kbd>vh</kbd> unit", "options": { "caseSensitive": false } },
-				{ "type": "property_value", "value": { "property": "width", "expected": "50vw" }, "message": "Set width to <kbd>50vw</kbd>" },
-				{ "type": "property_value", "value": { "property": "height", "expected": "20vh" }, "message": "Set height to <kbd>20vh</kbd>" }
+				{
+					"type": "property_value",
+					"value": { "property": "min-height", "expected": "100vh" },
+					"message": "اضبط <kbd>min-height: 100vh</kbd>"
+				}
 			]
 		}
 	]

lessons/ar/06-transitions-animations.json

@@ -1,15 +1,15 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "transitions-animations",
-	"title": "CSS Animations",
-	"description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.",
+	"title": "حركات CSS",
+	"description": "أضف التفاعل لواجهتك من خلال انتقالات الخصائص السلسة والحركات المبنية على keyframes.",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "transitions-1",
 			"title": "Transitions",
-			"description": "Learn how to apply <kbd>transition</kbd> to properties for smooth changes on state changes.<br><br><pre>transition: property duration;\n/* e.g. transition: background-color 0.3s; */</pre>",
-			"task": "Add <kbd>transition: background-color 0.3s</kbd> to <kbd>.btn</kbd> so the color fades smoothly on hover.",
+			"description": "تعلم كيفية تطبيق <kbd>transition</kbd> على الخصائص للتغييرات السلسة عند تغيير الحالة.<br><br><pre>transition: property duration;\n/* مثال: transition: background-color 0.3s; */</pre>",
+			"task": "أضف <kbd>transition: background-color 0.3s</kbd> ليتغير اللون بسلاسة عند التمرير.",
 			"previewHTML": "<button class=\"btn\">Hover Me</button>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: black; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; } .btn:hover { background: white; color: black; }",
 			"sandboxCSS": "",
@@ -22,13 +22,13 @@
 				{
 					"type": "contains",
 					"value": "transition",
-					"message": "Use the <kbd>transition</kbd> property",
+					"message": "استخدم خاصية <kbd>transition</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
 					"value": "transition:\\s*background-color\\s*0\\.3s",
-					"message": "Set <kbd>transition: background-color 0.3s</kbd>",
+					"message": "اضبط <kbd>transition: background-color 0.3s</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -36,8 +36,8 @@
 		{
 			"id": "transitions-2",
 			"title": "Timing Funcs",
-			"description": "Explore easing functions like <kbd>ease</kbd>, <kbd>linear</kbd>, <kbd>ease-in</kbd>, <kbd>ease-out</kbd> to control animation pacing.",
-			"task": "Set <kbd>transition-timing-function</kbd> to <kbd>ease-in-out</kbd> on <kbd>.btn</kbd>.",
+			"description": "استكشف دوال التسهيل مثل <kbd>ease</kbd>، <kbd>linear</kbd>، <kbd>ease-in</kbd>، <kbd>ease-out</kbd> للتحكم في إيقاع الحركة.",
+			"task": "اضبط <kbd>transition-timing-function</kbd> على <kbd>ease-in-out</kbd>.",
 			"previewHTML": "<button class=\"btn\">Timing</button>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: navy; color: gold; padding: 0.5rem 1rem; border: none; cursor: pointer; transition: all 0.5s; } .btn:hover { background: gold; color: navy; transform: scale(1.1); }",
 			"sandboxCSS": "",
@@ -50,21 +50,21 @@
 				{
 					"type": "contains",
 					"value": "transition-timing-function",
-					"message": "Use <kbd>transition-timing-function</kbd>",
+					"message": "استخدم <kbd>transition-timing-function</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
-					"message": "Set timing to <kbd>ease-in-out</kbd>"
+					"message": "اضبط التوقيت على <kbd>ease-in-out</kbd>"
 				}
 			]
 		},
 		{
 			"id": "transitions-3",
 			"title": "Keyframes",
-			"description": "Create named animations using <kbd>@keyframes</kbd> and apply them via the <kbd>animation</kbd> shorthand.<br><br><pre>@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}</pre>",
-			"task": "Define a keyframe at <kbd>50%</kbd> with <kbd>transform: translateY(-20px)</kbd> and apply <kbd>animation: bounce 1s infinite</kbd> to <kbd>.ball</kbd>.",
+			"description": "أنشئ حركات مسماة باستخدام <kbd>@keyframes</kbd> وطبّقها عبر اختصار <kbd>animation</kbd>.<br><br><pre>@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}</pre>",
+			"task": "عرّف keyframe عند <kbd>50%</kbd> مع <kbd>transform: translateY(-20px)</kbd> وطبّق <kbd>animation: bounce 1s infinite</kbd> على <kbd>.ball</kbd>.",
 			"previewHTML": "<div class=\"ball\"></div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; margin: 2rem auto; }",
 			"sandboxCSS": "",
@@ -77,25 +77,25 @@
 				{
 					"type": "contains",
 					"value": "@keyframes bounce",
-					"message": "Define <kbd>@keyframes bounce</kbd>",
+					"message": "عرّف <kbd>@keyframes bounce</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
 					"value": "50%.*transform: translateY\\(-20px\\)",
-					"message": "At <kbd>50%</kbd>, use <kbd>transform: translateY(-20px)</kbd>",
+					"message": "عند <kbd>50%</kbd>، استخدم <kbd>transform: translateY(-20px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": "animation",
-					"message": "Use <kbd>animation</kbd> property on <kbd>.ball</kbd>",
+					"message": "استخدم خاصية <kbd>animation</kbd> على <kbd>.ball</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
 					"value": "animation:.*bounce.*1s.*infinite",
-					"message": "Apply <kbd>animation: bounce 1s infinite</kbd>",
+					"message": "طبّق <kbd>animation: bounce 1s infinite</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -103,8 +103,8 @@
 		{
 			"id": "transitions-4",
 			"title": "Animation Properties",
-			"description": "Fine-tune animations with <kbd>animation-delay</kbd>, <kbd>animation-iteration-count</kbd>, <kbd>animation-direction</kbd>, and <kbd>animation-fill-mode</kbd>.",
-			"task": "Apply the <kbd>pulse</kbd> animation to <kbd>.box</kbd> with <kbd>animation-name: pulse</kbd>, <kbd>animation-duration: 2s</kbd>, <kbd>animation-delay: 1s</kbd>, <kbd>animation-iteration-count: 2</kbd>, and <kbd>animation-fill-mode: forwards</kbd>.",
+			"description": "اضبط الحركات بـ <kbd>animation-delay</kbd>، <kbd>animation-iteration-count</kbd>، <kbd>animation-direction</kbd>، و <kbd>animation-fill-mode</kbd>.",
+			"task": "طبّق حركة <kbd>pulse</kbd> على <kbd>.box</kbd> مع <kbd>animation-name: pulse</kbd>، <kbd>animation-duration: 2s</kbd>، <kbd>animation-delay: 1s</kbd>، <kbd>animation-iteration-count: 2</kbd>، و <kbd>animation-fill-mode: forwards</kbd>.",
 			"previewHTML": "<div class=\"box\">Pulse</div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { width: 100px; height: 100px; background: black; color: white; display: flex; align-items: center; justify-content: center; margin: 2rem auto; } @keyframes pulse { 0% { background: black; color: white; transform: scale(1); } 50% { background: white; color: black; transform: scale(1.2); } 100% { background: limegreen; color: black; transform: scale(1); } }",
 			"sandboxCSS": "",
@@ -117,27 +117,27 @@
 				{
 					"type": "property_value",
 					"value": { "property": "animation-name", "expected": "pulse" },
-					"message": "Set <kbd>animation-name: pulse</kbd>"
+					"message": "اضبط <kbd>animation-name: pulse</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-duration", "expected": "2s" },
-					"message": "Set <kbd>animation-duration: 2s</kbd>"
+					"message": "اضبط <kbd>animation-duration: 2s</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-delay", "expected": "1s" },
-					"message": "Set <kbd>animation-delay: 1s</kbd>"
+					"message": "اضبط <kbd>animation-delay: 1s</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-iteration-count", "expected": "2" },
-					"message": "Set <kbd>animation-iteration-count: 2</kbd>"
+					"message": "اضبط <kbd>animation-iteration-count: 2</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-fill-mode", "expected": "forwards" },
-					"message": "Set <kbd>animation-fill-mode: forwards</kbd>"
+					"message": "اضبط <kbd>animation-fill-mode: forwards</kbd>"
 				}
 			]
 		}

lessons/ar/08-responsive.json

@@ -2,14 +2,14 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "responsive-design",
 	"title": "CSS Responsive Design",
-	"description": "Make your layouts adapt to different screen sizes using media queries and fluid design techniques.",
+	"description": "اجعل تخطيطاتك تتكيف مع أحجام الشاشات المختلفة باستخدام media queries وتقنيات التصميم المرن.",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "responsive-1",
 			"title": "Media Queries",
-			"description": "Understand the syntax and use cases for CSS media queries to apply styles conditionally based on viewport characteristics.",
-			"task": "Write a media query with <kbd>@media (max-width: 600px)</kbd> that changes <kbd>.panel</kbd> background to <kbd>lightcoral</kbd>.",
+			"description": "افهم صياغة واستخدامات CSS media queries لتطبيق الأنماط شرطياً بناءً على خصائص viewport.<br><br><pre>@media (max-width: 600px) {\n  .panel {\n    background: lightcoral;\n  }\n}</pre>",
+			"task": "اكتب media query باستخدام <kbd>@media (max-width: 600px)</kbd> لتغيير خلفية <kbd>.panel</kbd> إلى <kbd>lightcoral</kbd>.",
 			"previewHTML": "<div class=\"panel\">Resize the window</div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }",
 			"sandboxCSS": "",
@@ -22,19 +22,19 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(max-width:\\s*600px\\)",
-					"message": "Use <kbd>@media (max-width: 600px)</kbd>",
+					"message": "استخدم <kbd>@media (max-width: 600px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": ".panel",
-					"message": "Target <kbd>.panel</kbd> inside the media query",
+					"message": "استهدف <kbd>.panel</kbd> داخل media query",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "background", "expected": "lightcoral" },
-					"message": "Set <kbd>background: lightcoral</kbd>",
+					"message": "اضبط <kbd>background: lightcoral</kbd>",
 					"options": { "exact": false }
 				}
 			]
@@ -42,8 +42,8 @@
 		{
 			"id": "responsive-2",
 			"title": "Fluid Type",
-			"description": "Use relative units like <kbd>vw</kbd> to make font sizes scale with the viewport width.",
-			"task": "Set <kbd>font-size: 5vw</kbd> on <kbd>.text</kbd> so it scales as the viewport changes.",
+			"description": "استخدم وحدات نسبية مثل <kbd>vw</kbd> لجعل أحجام الخطوط تتناسب مع عرض viewport.",
+			"task": "اضبط <kbd>font-size: 5vw</kbd> لتتغير مع viewport.",
 			"previewHTML": "<p class=\"text\">Fluid Typography</p>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
 			"sandboxCSS": "",
@@ -53,46 +53,46 @@
 			"solution": "  font-size: 5vw;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Set <kbd>font-size: 5vw</kbd>" }
+				{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "اضبط <kbd>font-size: 5vw</kbd>" }
 			]
 		},
 		{
 			"id": "responsive-3",
-			"title": "Flex Grids",
-			"description": "Combine CSS Grid with <kbd>auto-fit</kbd> or <kbd>auto-fill</kbd> for responsive column layouts.",
-			"task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.cards</kbd>.",
-			"previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
+			"title": "Responsive Grid",
+			"description": "ادمج CSS Grid مع <kbd>auto-fit</kbd> أو <kbd>auto-fill</kbd> لتخطيطات أعمدة متجاوبة تضبط عدد الأعمدة تلقائياً بناءً على المساحة المتاحة.",
+			"task": "أضف <kbd>display: grid</kbd> و <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> و <kbd>gap: 1rem</kbd>.",
+			"previewHTML": "<section class=\"features\"><article class=\"feature\"><h3>Fast</h3><p>Lightning quick load times</p></article><article class=\"feature\"><h3>Secure</h3><p>Enterprise-grade security</p></article><article class=\"feature\"><h3>Reliable</h3><p>99.9% uptime guaranteed</p></article><article class=\"feature\"><h3>Support</h3><p>24/7 customer service</p></article></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .feature { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .feature h3 { margin: 0 0 8px; color: steelblue; } .feature p { margin: 0; color: #666; font-size: 0.9rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Create a responsive grid */\n.cards {",
+			"codePrefix": ".features {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
+			"codeSuffix": "\n}",
+			"solution": "display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
 					"value": { "property": "display", "expected": "grid" },
-					"message": "Set <kbd>display: grid</kbd>"
+					"message": "اضبط <kbd>display: grid</kbd>"
 				},
 				{
 					"type": "regex",
 					"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
-					"message": "Use <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
+					"message": "استخدم <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "gap", "expected": "1rem" },
-					"message": "Set <kbd>gap: 1rem</kbd>"
+					"message": "اضبط <kbd>gap: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "responsive-4",
 			"title": "Mobile-First",
-			"description": "Adopt a mobile-first approach by writing base styles for small screens and enhancing for larger viewports.",
-			"task": "Write a media query with <kbd>@media (min-width: 768px)</kbd> that sets <kbd>.sidebar</kbd> width to <kbd>250px</kbd>.",
+			"description": "اتبع نهج mobile-first بكتابة أنماط أساسية للشاشات الصغيرة وتحسينها لـ viewports أكبر.",
+			"task": "اكتب media query باستخدام <kbd>@media (min-width: 768px)</kbd> لضبط عرض <kbd>.sidebar</kbd> إلى <kbd>250px</kbd>.",
 			"previewHTML": "<aside class=\"sidebar\">Sidebar</aside>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sidebar { background: #c8e6c9; padding: 1rem; }",
 			"sandboxCSS": "",
@@ -105,19 +105,19 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(min-width:\\s*768px\\)",
-					"message": "Use <kbd>@media (min-width: 768px)</kbd>",
+					"message": "استخدم <kbd>@media (min-width: 768px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": ".sidebar",
-					"message": "Target <kbd>.sidebar</kbd> inside media query",
+					"message": "استهدف <kbd>.sidebar</kbd> في media query",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "width", "expected": "250px" },
-					"message": "Set <kbd>width: 250px</kbd>",
+					"message": "اضبط <kbd>width: 250px</kbd>",
 					"options": { "exact": false }
 				}
 			]

lessons/ar/20-html-elements.json

@@ -2,94 +2,65 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-elements",
 	"title": "HTML Block & Inline",
-	"description": "Understanding the fundamental difference between container (block) and inline elements",
+	"description": "فهم الفرق الأساسي بين عناصر الحاويات (الكتلية) والعناصر السطرية",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "block-vs-inline-intro",
-			"title": "Block vs Inline Elements",
-			"description": "HTML elements fall into two main categories:<br><br><strong>Block elements</strong> (containers) start on a new line and take full width. Examples: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>Inline elements</strong> flow within text and only take needed width. Examples: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
-			"task": "Wrap the word <kbd>important</kbd> with <kbd>&lt;strong&gt;</kbd> tags to make it bold. Notice how the paragraph (block) takes full width while strong (inline) flows with text.",
+			"title": "العناصر الكتلية vs السطرية",
+			"description": "تنقسم عناصر HTML إلى فئتين رئيسيتين:<br><br><strong>العناصر الكتلية</strong> (الحاويات) تبدأ في سطر جديد وتأخذ العرض الكامل. أمثلة: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>العناصر السطرية</strong> تتدفق داخل النص وتأخذ العرض المطلوب فقط. أمثلة: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
+			"task": "أحط الكلمة <kbd>مهمة</kbd> بوسوم <kbd>&lt;strong&gt;</kbd> لجعلها عريضة. لاحظ كيف يأخذ الفقرة (كتلي) العرض الكامل بينما strong (سطري) يتدفق مع النص.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
 			"sandboxCSS": "",
-			"initialCode": "<p>This is a paragraph with an important word.</p>",
-			"solution": "<p>This is a paragraph with an <strong>important</strong> word.</p>",
+			"initialCode": "<p>هذه فقرة تحتوي على كلمة مهمة.</p>",
+			"solution": "<p>هذه فقرة تحتوي على كلمة <strong>مهمة</strong>.</p>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Add a <kbd>&lt;p&gt;</kbd> paragraph element"
+					"message": "أضف عنصر فقرة <kbd>&lt;p&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "p", "child": "strong" },
-					"message": "Wrap the word <kbd>important</kbd> with <kbd>&lt;strong&gt;</kbd> tags"
+					"message": "أحط الكلمة <kbd>مهمة</kbd> بوسوم <kbd>&lt;strong&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "semantic-containers",
-			"title": "Semantic Tags",
-			"description": "Modern HTML uses semantic containers that describe their content:<br><br><kbd>&lt;header&gt;</kbd> - Page or section header<br><kbd>&lt;nav&gt;</kbd> - Navigation links<br><kbd>&lt;main&gt;</kbd> - Main content area<br><kbd>&lt;section&gt;</kbd> - Thematic grouping<br><kbd>&lt;article&gt;</kbd> - Self-contained content<br><kbd>&lt;footer&gt;</kbd> - Page or section footer",
-			"task": "Create a basic page structure:<br>1. Add a <kbd>&lt;header&gt;</kbd> with an <kbd>&lt;h1&gt;</kbd> containing the text <code>My Website</code><br>2. Add a <kbd>&lt;main&gt;</kbd> element with a paragraph saying <code>Welcome to my site!</code><br>3. Add a <kbd>&lt;footer&gt;</kbd> with a paragraph saying <code>Copyright 2026</code>",
+			"title": "الوسوم الدلالية",
+			"description": "يستخدم HTML الحديث حاويات دلالية تصف محتواها:<br><br><kbd>&lt;header&gt;</kbd> - رأس الصفحة أو القسم<br><kbd>&lt;nav&gt;</kbd> - روابط التنقل<br><kbd>&lt;main&gt;</kbd> - منطقة المحتوى الرئيسي<br><kbd>&lt;section&gt;</kbd> - تجميع موضوعي<br><kbd>&lt;article&gt;</kbd> - محتوى مستقل<br><kbd>&lt;footer&gt;</kbd> - تذييل الصفحة أو القسم",
+			"task": "أنشئ هيكل صفحة أساسي:<br>1. أضف <kbd>&lt;header&gt;</kbd> مع <kbd>&lt;h1&gt;</kbd> يحتوي على النص <code>موقعي</code><br>2. أضف عنصر <kbd>&lt;main&gt;</kbd> مع فقرة تقول <code>مرحباً بك في موقعي!</code><br>3. أضف <kbd>&lt;footer&gt;</kbd> مع فقرة تقول <code>Copyright 2026</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<header>\n  <h1>My Website</h1>\n</header>\n<main>\n  <p>Welcome to my site!</p>\n</main>\n<footer>\n  <p>Copyright 2026</p>\n</footer>",
+			"solution": "<header>\n  <h1>موقعي</h1>\n</header>\n<main>\n  <p>مرحباً بك في موقعي!</p>\n</main>\n<footer>\n  <p>Copyright 2026</p>\n</footer>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "header",
-					"message": "Add a <kbd>&lt;header&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;header&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "main",
-					"message": "Add a <kbd>&lt;main&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;main&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "footer",
-					"message": "Add a <kbd>&lt;footer&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;footer&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "header", "child": "h1" },
-					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
-				}
-			]
-		},
-		{
-			"id": "div-vs-span",
-			"title": "div & span",
-			"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
-			"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
-			"sandboxCSS": "",
-			"initialCode": "The most highlighted moment was unforgettable.",
-			"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "div",
-					"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "span",
-					"message": "Add a <kbd>&lt;span&gt;</kbd> around the word <kbd>highlighted</kbd>"
-				},
-				{
-					"type": "element_text",
-					"value": { "selector": "span", "text": "highlighted" },
-					"message": "The <kbd>&lt;span&gt;</kbd> should contain the word <kbd>highlighted</kbd>"
+					"message": "أضف عنوان <kbd>&lt;h1&gt;</kbd> داخل header"
 				}
 			]
 		}

lessons/ar/21-html-forms-basic.json

@@ -1,100 +1,100 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-basic",
-	"title": "HTML Forms",
-	"description": "Learn to create forms with various input types",
+	"title": "نماذج HTML",
+	"description": "تعلم إنشاء النماذج بأنواع حقول مختلفة",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "form-structure",
-			"title": "Form Structure",
-			"description": "Every form needs a <kbd>&lt;form&gt;</kbd> wrapper. Inside, use <kbd>&lt;label&gt;</kbd> to describe inputs and <kbd>&lt;input&gt;</kbd> for user data entry.<br><br>The <kbd>for</kbd> attribute on labels should match the <kbd>id</kbd> on inputs for accessibility.",
-			"task": "Create a form with:<br>1. A <kbd>&lt;label&gt;</kbd> with the text <code>Name:</code> and <kbd>for=\"name\"</kbd> attribute<br>2. A text <kbd>&lt;input&gt;</kbd> with <kbd>id=\"name\"</kbd> and <kbd>name=\"name\"</kbd> attributes",
+			"title": "هيكل النموذج",
+			"description": "كل نموذج يحتاج غلاف <kbd>&lt;form&gt;</kbd>. بداخله، استخدم <kbd>&lt;label&gt;</kbd> لوصف الحقول و <kbd>&lt;input&gt;</kbd> لإدخال البيانات.<br><br>سمة <kbd>for</kbd> في التسميات يجب أن تطابق <kbd>id</kbd> في الحقول للوصولية.",
+			"task": "أنشئ نموذجاً مع:<br>1. <kbd>&lt;label&gt;</kbd> بالنص <code>الاسم:</code> وسمة <kbd>for=\"name\"</kbd><br>2. <kbd>&lt;input&gt;</kbd> نصي بسمات <kbd>id=\"name\"</kbd> و <kbd>name=\"name\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<form>\n  <label for=\"name\">Name:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
+			"solution": "<form>\n  <label for=\"name\">الاسم:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Wrap everything in a <kbd>&lt;form&gt;</kbd> element"
+					"message": "أحط كل شيء بعنصر <kbd>&lt;form&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for your input"
+					"message": "أضف <kbd>&lt;label&gt;</kbd> لحقلك"
 				},
 				{
 					"type": "element_exists",
 					"value": "input",
-					"message": "Add an <kbd>&lt;input&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;input&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "label", "attr": "for", "value": null },
-					"message": "Add a <kbd>for</kbd> attribute to your label"
+					"message": "أضف سمة <kbd>for</kbd> للتسمية"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "id", "value": null },
-					"message": "Add an <kbd>id</kbd> attribute to your input"
+					"message": "أضف سمة <kbd>id</kbd> لحقلك"
 				}
 			]
 		},
 		{
 			"id": "input-types",
-			"title": "Input Types",
-			"description": "Different input types provide appropriate keyboards and validation:<br><br><kbd>type=\"text\"</kbd> - General text<br><kbd>type=\"email\"</kbd> - Email with @ validation<br><kbd>type=\"password\"</kbd> - Hidden characters<br><kbd>type=\"number\"</kbd> - Numeric keyboard<br><kbd>type=\"tel\"</kbd> - Phone keyboard",
-			"task": "Create a login form with two fields:<br>1. An email field: <kbd>&lt;label for=\"email\"&gt;Email:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. A password field: <kbd>&lt;label for=\"password\"&gt;Password:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
+			"title": "أنواع الحقول",
+			"description": "أنواع الحقول المختلفة توفر لوحات مفاتيح وتحقق مناسب:<br><br><kbd>type=\"text\"</kbd> - نص عام<br><kbd>type=\"email\"</kbd> - بريد إلكتروني مع تحقق @<br><kbd>type=\"password\"</kbd> - أحرف مخفية<br><kbd>type=\"number\"</kbd> - لوحة مفاتيح رقمية<br><kbd>type=\"tel\"</kbd> - لوحة مفاتيح هاتف",
+			"task": "أنشئ نموذج تسجيل دخول بحقلين:<br>1. حقل بريد: <kbd>&lt;label for=\"email\"&gt;البريد:&lt;/label&gt;</kbd> و <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. حقل كلمة مرور: <kbd>&lt;label for=\"password\"&gt;كلمة المرور:&lt;/label&gt;</kbd> و <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  \n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
+			"solution": "<form>\n  <label for=\"email\">البريد:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">كلمة المرور:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "input[type='email']",
-					"message": "Add an input with type=\"email\""
+					"message": "أضف حقل بـ type=\"email\""
 				},
 				{
 					"type": "element_exists",
 					"value": "input[type='password']",
-					"message": "Add an input with type=\"password\""
+					"message": "أضف حقل بـ type=\"password\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "label", "min": 2 },
-					"message": "Add labels for both inputs"
+					"message": "أضف تسميات لكلا الحقلين"
 				}
 			]
 		},
 		{
 			"id": "submit-button",
-			"title": "Submit Button",
-			"description": "Forms need a way to submit data. Use:<br><br><kbd>&lt;button type=\"submit\"&gt;</kbd> - Preferred, flexible content<br><kbd>&lt;input type=\"submit\"&gt;</kbd> - Simple text-only button<br><br>The button text should be action-oriented (e.g., <code>Sign In</code>, 'Register', 'Send').",
-			"task": "Add a submit button to the form with the text <code>Sign In</code>.",
+			"title": "زر الإرسال",
+			"description": "النماذج تحتاج طريقة لإرسال البيانات. استخدم:<br><br><kbd>&lt;button type=\"submit\"&gt;</kbd> - مفضل، محتوى مرن<br><kbd>&lt;input type=\"submit\"&gt;</kbd> - زر نص بسيط<br><br>نص الزر يجب أن يكون موجه للعمل (مثل <code>تسجيل الدخول</code>، 'التسجيل'، 'إرسال').",
+			"task": "أضف زر إرسال للنموذج بالنص <code>تسجيل الدخول</code>.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">Sign In</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"email\">البريد:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">كلمة المرور:</label>\n  <input type=\"password\" id=\"password\">\n  \n</form>",
+			"solution": "<form>\n  <label for=\"email\">البريد:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">كلمة المرور:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">تسجيل الدخول</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "button[type='submit'], input[type='submit']",
-					"message": "Add a submit button to your form"
+					"message": "أضف زر إرسال لنموذجك"
 				},
 				{
 					"type": "element_text",
-					"value": { "selector": "button", "text": "Sign In" },
-					"message": "The button should say <kbd>Sign In</kbd>"
+					"value": { "selector": "button", "text": "تسجيل الدخول" },
+					"message": "يجب أن يعرض الزر <kbd>تسجيل الدخول</kbd>"
 				}
 			]
 		}

lessons/ar/22-html-forms-validation.json

@@ -1,110 +1,32 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-validation",
-	"title": "HTML Validation",
-	"description": "Learn HTML5 built-in form validation attributes",
+	"title": "تحقق النماذج",
+	"description": "استخدم تحقق HTML5 المدمج لتجربة مستخدم أفضل",
 	"mode": "html",
-	"difficulty": "intermediate",
+	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "required-fields",
-			"title": "Required Fields",
-			"description": "The <kbd>required</kbd> attribute prevents form submission if the field is empty.<br><br>Add it to any input that must be filled:<br><kbd>&lt;input type=\"text\" required&gt;</kbd><br><br>The browser shows a validation message automatically.",
-			"task": "Make both the name and email fields required by adding the <kbd>required</kbd> attribute.",
+			"title": "الحقول المطلوبة",
+			"description": "سمة <kbd>required</kbd> تمنع إرسال النموذج إذا كان الحقل فارغاً. يعرض المتصفح رسالة تحقق تلقائياً - بدون JavaScript!<br><br>أضفها لأي حقل يجب ملؤه:<br><kbd>&lt;input type=\"text\" required&gt;</kbd>",
+			"task": "اجعل كلا الحقلين (الاسم والبريد) مطلوبين بإضافة سمة <kbd>required</kbd> لكل حقل.",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 320px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } input:focus { outline: 2px solid steelblue; border-color: transparent; } button { margin-top: 20px; padding: 10px 20px; background: steelblue; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Submit</button>\n</form>",
-			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Submit</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"name\">الاسم *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">البريد *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">إرسال</button>\n</form>",
+			"solution": "<form>\n  <label for=\"name\">الاسم *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">البريد *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">إرسال</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='name']", "attr": "required", "value": true },
-					"message": "Add the <kbd>required</kbd> attribute to the name input"
+					"message": "أضف <kbd>required</kbd> لحقل الاسم"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='email']", "attr": "required", "value": true },
-					"message": "Add the <kbd>required</kbd> attribute to the email input"
-				}
-			]
-		},
-		{
-			"id": "input-constraints",
-			"title": "Constraints",
-			"description": "Control what users can enter:<br><br><kbd>minlength</kbd> / <kbd>maxlength</kbd> - Text length limits<br><kbd>min</kbd> / <kbd>max</kbd> - Number range<br><kbd>pattern</kbd> - Regex pattern matching<br><kbd>placeholder</kbd> - Hint text (not a label!)",
-			"task": "Add validation to the password input:<br>1. Add <kbd>minlength=\"8\"</kbd> for minimum length<br>2. Add <kbd>maxlength=\"20\"</kbd> for maximum length<br>3. Add <kbd>placeholder=\"Enter password\"</kbd> as a hint",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } small { display: block; font-size: 12px; color: #666; margin-top: 4px; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"solution": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
-					"message": "Add <kbd>minlength</kbd>=\"8\" to the password input"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
-					"message": "Add <kbd>maxlength</kbd>=\"20\" to the password input"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "placeholder", "value": null },
-					"message": "Add a <kbd>placeholder</kbd> to hint what to enter"
-				}
-			]
-		},
-		{
-			"id": "complete-registration",
-			"title": "Full Form",
-			"description": "Build a complete registration form with all validation concepts:<br><br>- Required fields marked with *<br>- Email validation (use type=\"email\")<br>- Password with length constraints<br>- Terms checkbox (required)<br>- Submit button",
-			"task": "Complete the registration form. Add required attributes, proper input types, and validation constraints.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } input[type='checkbox'] { width: auto; margin-right: 8px; vertical-align: middle; } label:has(input[type='checkbox']) { display: flex; align-items: center; font-weight: normal; } button { width: 100%; margin-top: 20px; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\">\n  \n  <label for=\"email\">Email *</label>\n  <input id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password *</label>\n  <input id=\"password\" name=\"password\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"solution": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Password *</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#fullname", "attr": "required", "value": true },
-					"message": "Make the full name field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "type", "value": "email" },
-					"message": "Set the email input <kbd>type=\"email\"</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "required", "value": true },
-					"message": "Make the email field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "type", "value": "password" },
-					"message": "Set the password input <kbd>type=\"password\"</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "required", "value": true },
-					"message": "Make the password field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "minlength", "value": "8" },
-					"message": "Add <kbd>minlength</kbd>=\"8\" to password"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#terms", "attr": "required", "value": true },
-					"message": "Make the terms checkbox <kbd>required</kbd>"
+					"message": "أضف <kbd>required</kbd> لحقل البريد"
 				}
 			]
 		}

lessons/ar/23-html-details-summary.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-details-summary",
 	"title": "HTML Details & Summary",
-	"description": "Create expandable content sections without JavaScript",
+	"description": "أنشئ أقسام قابلة للتوسيع بدون JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "details-summary-basic",
-			"title": "First Widget",
-			"description": "The <kbd>&lt;details&gt;</kbd> element creates a collapsible section. The <kbd>&lt;summary&gt;</kbd> provides the clickable label.<br><br>Click the summary to toggle the hidden content - no JavaScript needed!",
-			"task": "Create a <kbd>&lt;details&gt;</kbd> element with:<br>1. A <kbd>&lt;summary&gt;</kbd> saying <code>Click to reveal</code><br>2. A <kbd>&lt;p&gt;</kbd> with the text <code>This content was hidden!</code>",
+			"title": "أول عنصر تفاعلي",
+			"description": "عنصر <kbd>&lt;details&gt;</kbd> ينشئ قسماً قابلاً للطي. عنصر <kbd>&lt;summary&gt;</kbd> يوفر التسمية القابلة للنقر.<br><br>انقر على الملخص لإظهار المحتوى المخفي - بدون JavaScript!",
+			"task": "أنشئ عنصر <kbd>&lt;details&gt;</kbd> مع:<br>1. عنصر <kbd>&lt;summary&gt;</kbd> يقول <code>Click to reveal</code><br>2. عنصر <kbd>&lt;p&gt;</kbd> بالنص <code>This content was hidden!</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "details",
-					"message": "Add a <kbd>&lt;details&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;details&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "summary",
-					"message": "Add a <kbd>&lt;summary&gt;</kbd> inside the details"
+					"message": "أضف <kbd>&lt;summary&gt;</kbd> داخل details"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "summary" },
-					"message": "The <kbd>&lt;summary&gt;</kbd> must be inside <kbd>&lt;details&gt;</kbd>"
+					"message": "يجب أن يكون <kbd>&lt;summary&gt;</kbd> داخل <kbd>&lt;details&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "p" },
-					"message": "Add a <kbd>&lt;p&gt;</kbd> inside <kbd>&lt;details&gt;</kbd> for the hidden content"
+					"message": "أضف <kbd>&lt;p&gt;</kbd> داخل <kbd>&lt;details&gt;</kbd> للمحتوى المخفي"
 				}
 			]
 		},
 		{
 			"id": "details-open-attribute",
-			"title": "Pre-expanded Details",
-			"description": "By default, <kbd>&lt;details&gt;</kbd> is closed. Add the <kbd>open</kbd> attribute to show the content initially.<br><br>This is a boolean attribute - just add <kbd>open</kbd> without a value.",
-			"task": "Add the <kbd>open</kbd> attribute to the <kbd>&lt;details&gt;</kbd> element to show the content by default.",
+			"title": "موسع افتراضياً",
+			"description": "افتراضياً، <kbd>&lt;details&gt;</kbd> مغلق. أضف سمة <kbd>open</kbd> لإظهار المحتوى في البداية.<br><br>هذه سمة منطقية - فقط أضف <kbd>open</kbd> بدون قيمة.",
+			"task": "أضف سمة <kbd>open</kbd> لعنصر <kbd>&lt;details&gt;</kbd> لإظهار المحتوى افتراضياً.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; background: #f9f9f9; } summary { font-weight: 600; cursor: pointer; } details p { margin-top: 15px; color: #666; }",
 			"sandboxCSS": "",
@@ -55,15 +55,15 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "details", "attr": "open", "value": true },
-					"message": "Add the <kbd>open</kbd> attribute to <kbd>&lt;details&gt;</kbd>"
+					"message": "أضف سمة <kbd>open</kbd> إلى <kbd>&lt;details&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "faq-accordion",
-			"title": "FAQ Accordion",
-			"description": "Multiple <kbd>&lt;details&gt;</kbd> elements create an accordion-style FAQ. Each question can be expanded independently.<br><br><b>Pro tip:</b> Type <kbd>details*3&gt;summary+p</kbd> and press Tab for Emmet expansion. <kbd>*3</kbd> creates 3 elements, <kbd>&gt;</kbd> nests inside, <kbd>+</kbd> adds siblings.",
-			"task": "Create an FAQ section with:<br>1. An <kbd>&lt;h1&gt;</kbd> saying <code>Frequently Asked Questions</code><br>2. Three <kbd>&lt;details&gt;</kbd> elements, each with a question in <kbd>&lt;summary&gt;</kbd> and an answer in <kbd>&lt;p&gt;</kbd>",
+			"title": "أكورديون FAQ",
+			"description": "عناصر <kbd>&lt;details&gt;</kbd> المتعددة تنشئ FAQ بأسلوب الأكورديون. كل سؤال يمكن توسيعه بشكل مستقل.<br><br><b>نصيحة:</b> اكتب <kbd>details*3&gt;summary+p</kbd> واضغط Tab لتوسيع Emmet. <kbd>*3</kbd> ينشئ 3 عناصر، <kbd>&gt;</kbd> يضع بالداخل، <kbd>+</kbd> يضيف أشقاء.",
+			"task": "أنشئ قسم FAQ مع:<br>1. عنصر <kbd>&lt;h1&gt;</kbd> يقول <code>Frequently Asked Questions</code><br>2. ثلاثة عناصر <kbd>&lt;details&gt;</kbd>، كل واحد بسؤال في <kbd>&lt;summary&gt;</kbd> وإجابة في <kbd>&lt;p&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
 			"sandboxCSS": "",
@@ -74,22 +74,22 @@
 				{
 					"type": "element_exists",
 					"value": "h1",
-					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading for the FAQ title"
+					"message": "أضف عنوان <kbd>&lt;h1&gt;</kbd> لعنوان FAQ"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "details", "min": 3 },
-					"message": "Create at least 3 <kbd>&lt;details&gt;</kbd> elements for the FAQ"
+					"message": "أنشئ على الأقل 3 عناصر <kbd>&lt;details&gt;</kbd> للـ FAQ"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "summary", "min": 3 },
-					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <kbd>&lt;summary&gt;</kbd> for the question"
+					"message": "كل <kbd>&lt;details&gt;</kbd> يحتاج <kbd>&lt;summary&gt;</kbd> للسؤال"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "details p", "min": 3 },
-					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <kbd>&lt;p&gt;</kbd> for the answer"
+					"message": "كل <kbd>&lt;details&gt;</kbd> يحتاج <kbd>&lt;p&gt;</kbd> للإجابة"
 				}
 			]
 		}

lessons/ar/24-html-progress-meter.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-progress-meter",
 	"title": "HTML Progress & Meter",
-	"description": "Display completion status and scalar measurements natively",
+	"description": "اعرض حالة الإكمال والقياسات بشكل أصلي",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "progress-basic",
-			"title": "Progress Bars",
-			"description": "The <kbd>&lt;progress&gt;</kbd> element shows task completion. Use <kbd>value</kbd> for current progress and <kbd>max</kbd> for the total.<br><br><b>Note:</b> This is not a self-closing tag! Write <kbd>&lt;progress&gt;...&lt;/progress&gt;</kbd> with fallback text inside for older browsers.",
-			"task": "Create a progress bar showing 70% completion:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Download:</code><br>2. Add a <kbd>&lt;progress&gt;</kbd> with <kbd>value=\"70\"</kbd> and <kbd>max=\"100\"</kbd>",
+			"title": "أشرطة التقدم",
+			"description": "عنصر <kbd>&lt;progress&gt;</kbd> يُظهر إكمال المهمة. استخدم <kbd>value</kbd> للتقدم الحالي و <kbd>max</kbd> للإجمالي.<br><br><b>ملاحظة:</b> هذا ليس وسماً ذاتي الإغلاق! اكتب <kbd>&lt;progress&gt;...&lt;/progress&gt;</kbd> مع نص بديل بالداخل للمتصفحات القديمة.",
+			"task": "أنشئ شريط تقدم يُظهر 70% إكمال:<br>1. أضف <kbd>&lt;label&gt;</kbd> يقول <code>Download:</code><br>2. أضف <kbd>&lt;progress&gt;</kbd> مع <kbd>value=\"70\"</kbd> و <kbd>max=\"100\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;progress&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "value", "value": "70" },
-					"message": "Set <kbd>value=</kbd>\"70\" on the progress element"
+					"message": "عيّن <kbd>value=</kbd>\"70\" في عنصر progress"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "max", "value": "100" },
-					"message": "Set <kbd>max=</kbd>\"100\" on the progress element"
+					"message": "عيّن <kbd>max=</kbd>\"100\" في عنصر progress"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the progress bar"
+					"message": "أضف <kbd>&lt;label&gt;</kbd> لشريط التقدم"
 				}
 			]
 		},
 		{
 			"id": "progress-indeterminate",
-			"title": "Indeterminate Progress",
-			"description": "When progress is unknown (like loading), omit the <kbd>value</kbd> attribute. This creates an animated indeterminate state.<br><br>Useful for network requests or processes with unknown duration.",
-			"task": "Create a loading indicator:<br>1. Add a <kbd>&lt;p&gt;</kbd> saying <code>Loading...</code><br>2. Add a <kbd>&lt;progress&gt;</kbd> without a value attribute",
+			"title": "تقدم غير محدد",
+			"description": "عندما يكون التقدم غير معروف (مثل التحميل)، احذف سمة <kbd>value</kbd>. هذا ينشئ حالة متحركة غير محددة.<br><br>مفيد لطلبات الشبكة أو العمليات ذات المدة غير المعروفة.",
+			"task": "أنشئ مؤشر تحميل:<br>1. أضف <kbd>&lt;p&gt;</kbd> يقول <code>Loading...</code><br>2. أضف <kbd>&lt;progress&gt;</kbd> بدون سمة value",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
 			"sandboxCSS": "",
@@ -55,20 +55,20 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;progress&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Add a <kbd>&lt;p&gt;</kbd> with loading text"
+					"message": "أضف <kbd>&lt;p&gt;</kbd> مع نص التحميل"
 				}
 			]
 		},
 		{
 			"id": "meter-gauge",
-			"title": "Meter Gauges",
-			"description": "The <kbd>&lt;meter&gt;</kbd> element displays a scalar value within a range. Use it for measurements like disk space, battery, or ratings.<br><br>Set <kbd>low</kbd>, <kbd>high</kbd>, and <kbd>optimum</kbd> to define good/bad ranges - the browser colors it accordingly!",
-			"task": "Create a battery level meter:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Battery:</code><br>2. Add a <kbd>&lt;meter&gt;</kbd> with:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> and <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> and <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
+			"title": "مقاييس meter",
+			"description": "عنصر <kbd>&lt;meter&gt;</kbd> يعرض قيمة قياسية ضمن نطاق. استخدمه للقياسات مثل مساحة القرص، البطارية، أو التقييمات.<br><br>عيّن <kbd>low</kbd> و <kbd>high</kbd> و <kbd>optimum</kbd> لتحديد النطاقات الجيدة/السيئة - المتصفح يلونها وفقاً لذلك!",
+			"task": "أنشئ مقياس مستوى البطارية:<br>1. أضف <kbd>&lt;label&gt;</kbd> يقول <code>Battery:</code><br>2. أضف <kbd>&lt;meter&gt;</kbd> مع:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> و <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> و <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
 			"sandboxCSS": "",
@@ -79,22 +79,42 @@
 				{
 					"type": "element_exists",
 					"value": "meter",
-					"message": "Add a <kbd>&lt;meter&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;meter&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "value", "value": "0.8" },
-					"message": "Set <kbd>value=</kbd>\"0.8\" on the meter"
+					"message": "عيّن <kbd>value=</kbd>\"0.8\" في meter"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "min", "value": "0" },
+					"message": "عيّن <kbd>min=</kbd>\"0\" في meter"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "max", "value": "1" },
+					"message": "عيّن <kbd>max=</kbd>\"1\" في meter"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "low", "value": "0.2" },
-					"message": "Set <kbd>low=</kbd>\"0.2\" to define the low threshold"
+					"message": "عيّن <kbd>low=</kbd>\"0.2\" لتحديد العتبة المنخفضة"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "high", "value": "0.8" },
+					"message": "عيّن <kbd>high=</kbd>\"0.8\" لتحديد العتبة العالية"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "optimum", "value": "1" },
+					"message": "عيّن <kbd>optimum=</kbd>\"1\" للإشارة إلى القيمة المثلى"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the meter"
+					"message": "أضف <kbd>&lt;label&gt;</kbd> للـ meter"
 				}
 			]
 		}

lessons/ar/25-html-datalist.json

@@ -1,16 +1,16 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-datalist",
-	"title": "Datalist",
-	"description": "Provide suggestions for text inputs without JavaScript",
+	"title": "قائمة البيانات",
+	"description": "قدم اقتراحات لحقول النص بدون JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "datalist-basic",
-			"title": "Input with Suggestions",
-			"description": "The <kbd>&lt;datalist&gt;</kbd> element provides autocomplete suggestions for inputs. Connect it using the <kbd>list</kbd> attribute on the input matching the datalist's <kbd>id</kbd>.<br><br>Users can still type freely - suggestions are just helpers!",
-			"task": "Create a browser selector:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Browser:</code><br>2. Add an <kbd>&lt;input&gt;</kbd> with <kbd>list=\"browsers\"</kbd><br>3. Add a <kbd>&lt;datalist id=\"browsers\"&gt;</kbd> with options for Chrome, Firefox, and Safari",
+			"title": "حقل مع اقتراحات",
+			"description": "عنصر <kbd>&lt;datalist&gt;</kbd> يوفر اقتراحات الإكمال التلقائي للحقول. اربطه باستخدام سمة <kbd>list</kbd> في الحقل بما يتطابق مع <kbd>id</kbd> قائمة البيانات.<br><br>يمكن للمستخدمين الكتابة بحرية - الاقتراحات مجرد مساعدات!",
+			"task": "أنشئ محدد متصفح:<br>1. أضف <kbd>&lt;label&gt;</kbd> يقول <code>المتصفح:</code><br>2. أضف <kbd>&lt;input&gt;</kbd> مع <kbd>list=\"browsers\"</kbd><br>3. أضف <kbd>&lt;datalist id=\"browsers\"&gt;</kbd> مع خيارات Chrome و Firefox و Safari",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Add a <kbd>&lt;datalist&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "browsers" },
-					"message": "Connect the input to datalist using <kbd>list=</kbd>\"browsers\""
+					"message": "اربط الحقل بقائمة البيانات باستخدام <kbd>list=</kbd>\"browsers\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "option", "min": 3 },
-					"message": "Add at least 3 <kbd>&lt;option&gt;</kbd> elements inside <kbd>&lt;datalist&gt;</kbd>"
+					"message": "أضف على الأقل 3 عناصر <kbd>&lt;option&gt;</kbd> داخل <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the input"
+					"message": "أضف <kbd>&lt;label&gt;</kbd> للحقل"
 				}
 			]
 		},
 		{
 			"id": "datalist-countries",
-			"title": "Country Selector",
-			"description": "Datalists work great for long lists like countries. Users can type to filter suggestions instantly.<br><br>The <kbd>value</kbd> attribute is what gets entered, and you can add display text after it.",
-			"task": "Create a country input:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Country:</code><br>2. Add an <kbd>&lt;input&gt;</kbd> with <kbd>list=\"countries\"</kbd><br>3. Add a <kbd>&lt;datalist id=\"countries\"&gt;</kbd> with at least 4 country options",
+			"title": "محدد الدول",
+			"description": "قوائم البيانات تعمل بشكل رائع للقوائم الطويلة مثل الدول. يمكن للمستخدمين الكتابة لتصفية الاقتراحات فوراً.<br><br>سمة <kbd>value</kbd> هي ما يتم إدخاله، ويمكنك إضافة نص عرض بعدها.",
+			"task": "أنشئ حقل دولة:<br>1. أضف <kbd>&lt;label&gt;</kbd> يقول <code>الدولة:</code><br>2. أضف <kbd>&lt;input&gt;</kbd> مع <kbd>list=\"countries\"</kbd><br>3. أضف <kbd>&lt;datalist id=\"countries\"&gt;</kbd> مع 4 خيارات دول على الأقل",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 30px; background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } label { display: block; margin-bottom: 10px; font-weight: 600; color: #00695c; } input { width: 100%; padding: 12px 15px; border: 2px solid #26a69a; border-radius: 8px; font-size: 16px; background: white; } input:focus { outline: none; border-color: #00695c; box-shadow: 0 0 0 3px rgba(38,166,154,0.2); }",
 			"sandboxCSS": "",
@@ -55,22 +55,22 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Add a <kbd>&lt;datalist&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "datalist", "attr": "id", "value": "countries" },
-					"message": "Set <kbd>id=</kbd>\"countries\" on the datalist"
+					"message": "عيّن <kbd>id=</kbd>\"countries\" في قائمة البيانات"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "countries" },
-					"message": "Connect the input using <kbd>list=</kbd>\"countries\""
+					"message": "اربط الحقل باستخدام <kbd>list=</kbd>\"countries\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "option", "min": 4 },
-					"message": "Add at least 4 country options"
+					"message": "أضف على الأقل 4 خيارات دول"
 				}
 			]
 		}

lessons/ar/27-html-dialog.json

@@ -1,16 +1,16 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-dialog",
-	"title": "Dialogs",
-	"description": "Create modal dialogs without JavaScript libraries",
+	"title": "مربعات الحوار",
+	"description": "أنشئ مربعات حوار نموذجية بدون مكتبات JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "dialog-basic",
-			"title": "Open Dialog",
-			"description": "The <kbd>&lt;dialog&gt;</kbd> element creates a native modal. Add the <kbd>open</kbd> attribute to show it.<br><br>Use <kbd>&lt;form method=\"dialog\"&gt;</kbd> inside to close it when the form submits - no JavaScript needed!",
-			"task": "Create a dialog with:<br>1. The <kbd>open</kbd> attribute to show it<br>2. An <kbd>&lt;h2&gt;</kbd> saying <code>Welcome!</code><br>3. A <kbd>&lt;p&gt;</kbd> with a greeting message<br>4. A <kbd>&lt;form method=\"dialog\"&gt;</kbd> with a close button",
+			"title": "فتح مربع الحوار",
+			"description": "عنصر <kbd>&lt;dialog&gt;</kbd> ينشئ نافذة نموذجية أصلية. أضف سمة <kbd>open</kbd> لعرضها.<br><br>استخدم <kbd>&lt;form method=\"dialog\"&gt;</kbd> بداخلها لإغلاقها عند إرسال النموذج - بدون JavaScript!",
+			"task": "أنشئ مربع حوار مع:<br>1. سمة <kbd>open</kbd> لعرضه<br>2. عنصر <kbd>&lt;h2&gt;</kbd> يقول <code>أهلاً!</code><br>3. عنصر <kbd>&lt;p&gt;</kbd> مع رسالة ترحيب<br>4. عنصر <kbd>&lt;form method=\"dialog\"&gt;</kbd> مع زر إغلاق",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: #f5f5f5; } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 400px; } dialog::backdrop { background: rgba(0,0,0,0.5); } dialog h2 { margin: 0 0 15px 0; color: #1976d2; } dialog p { color: #666; margin: 0 0 20px 0; } dialog button { background: #1976d2; color: white; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-size: 16px; } dialog button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
@@ -21,35 +21,35 @@
 				{
 					"type": "element_exists",
 					"value": "dialog",
-					"message": "Add a <kbd>&lt;dialog&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;dialog&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "dialog", "attr": "open", "value": true },
-					"message": "Add the <kbd>open</kbd> attribute to show the dialog"
+					"message": "أضف سمة <kbd>open</kbd> لعرض مربع الحوار"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog h2",
-					"message": "Add an <kbd>&lt;h2&gt;</kbd> heading inside the dialog"
+					"message": "أضف عنوان <kbd>&lt;h2&gt;</kbd> داخل مربع الحوار"
 				},
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Add a <kbd>&lt;form method=\"dialog\"&gt;</kbd> for closing"
+					"message": "أضف <kbd>&lt;form method=\"dialog\"&gt;</kbd> للإغلاق"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog button",
-					"message": "Add a close button inside the form"
+					"message": "أضف زر إغلاق داخل النموذج"
 				}
 			]
 		},
 		{
 			"id": "dialog-form",
-			"title": "Dialog + Form",
-			"description": "Dialogs can contain full forms. The <kbd>method=\"dialog\"</kbd> makes the form close the dialog on submit instead of sending data.<br><br>This pattern is perfect for confirmation dialogs, quick inputs, or settings panels.",
-			"task": "Create a confirmation dialog:<br>1. Add <kbd>open</kbd> to show it<br>2. An <kbd>&lt;h2&gt;</kbd> saying <code>Confirm Delete</code><br>3. A <kbd>&lt;p&gt;</kbd> asking <code>Are you sure?</code><br>4. A <kbd>&lt;form method=\"dialog\"&gt;</kbd> with Cancel and Delete buttons",
+			"title": "حوار + نموذج",
+			"description": "مربعات الحوار يمكن أن تحتوي على نماذج كاملة. <kbd>method=\"dialog\"</kbd> يجعل النموذج يغلق مربع الحوار عند الإرسال بدلاً من إرسال البيانات.<br><br>هذا النمط مثالي لحوارات التأكيد، المدخلات السريعة، أو لوحات الإعدادات.",
+			"task": "أنشئ مربع حوار تأكيد:<br>1. أضف <kbd>open</kbd> لعرضه<br>2. عنصر <kbd>&lt;h2&gt;</kbd> يقول <code>تأكيد الحذف</code><br>3. عنصر <kbd>&lt;p&gt;</kbd> يسأل <code>هل أنت متأكد؟</code><br>4. عنصر <kbd>&lt;form method=\"dialog\"&gt;</kbd> مع أزرار إلغاء وحذف",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 350px; text-align: center; } dialog h2 { margin: 0 0 10px 0; color: #c62828; } dialog p { color: #666; margin: 0 0 20px 0; } dialog form { display: flex; gap: 10px; justify-content: center; } dialog button { padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; border: none; } dialog button:first-child { background: #e0e0e0; color: #333; } dialog button:last-child { background: #c62828; color: white; } dialog button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
@@ -60,22 +60,22 @@
 				{
 					"type": "element_exists",
 					"value": "dialog[open]",
-					"message": "Add a <kbd>&lt;dialog&gt;</kbd> with the open attribute"
+					"message": "أضف <kbd>&lt;dialog&gt;</kbd> مع سمة open"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog h2",
-					"message": "Add a heading to the dialog"
+					"message": "أضف عنواناً لمربع الحوار"
 				},
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Add a <kbd>&lt;form method=\"dialog\"&gt;</kbd> for the buttons"
+					"message": "أضف <kbd>&lt;form method=\"dialog\"&gt;</kbd> للأزرار"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "dialog button", "min": 2 },
-					"message": "Add at least 2 buttons (Cancel and Confirm)"
+					"message": "أضف على الأقل زرين (إلغاء وتأكيد)"
 				}
 			]
 		}

lessons/ar/28-html-forms-fieldset.json

@@ -1,16 +1,16 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-fieldset",
-	"title": "Fieldsets",
-	"description": "Group form controls with fieldset and legend elements",
+	"title": "مجموعة الحقول",
+	"description": "جمّع عناصر التحكم في النموذج باستخدام fieldset و legend",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "fieldset-basic",
-			"title": "Grouping with Fieldset",
-			"description": "The <kbd>&lt;fieldset&gt;</kbd> element groups related form controls together. Add a <kbd>&lt;legend&gt;</kbd> as the first child to give the group a title.<br><br>This helps with accessibility and visual organization of complex forms.",
-			"task": "Create a form with a fieldset:<br>1. A <kbd>&lt;form&gt;</kbd> element<br>2. A <kbd>&lt;fieldset&gt;</kbd> inside<br>3. A <kbd>&lt;legend&gt;</kbd> saying <code>Personal Info</code><br>4. Two labeled inputs for name and email",
+			"title": "التجميع مع Fieldset",
+			"description": "عنصر <kbd>&lt;fieldset&gt;</kbd> يجمع عناصر التحكم المرتبطة في النموذج معاً. أضف <kbd>&lt;legend&gt;</kbd> كأول عنصر فرعي لإعطاء المجموعة عنواناً.<br><br>هذا يساعد في إمكانية الوصول والتنظيم البصري للنماذج المعقدة.",
+			"task": "أنشئ نموذجاً مع fieldset:<br>1. عنصر <kbd>&lt;form&gt;</kbd><br>2. عنصر <kbd>&lt;fieldset&gt;</kbd> بداخله<br>3. عنصر <kbd>&lt;legend&gt;</kbd> يقول <code>المعلومات الشخصية</code><br>4. حقلين مُعنونين للاسم والبريد الإلكتروني",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
 			"sandboxCSS": "",
@@ -21,35 +21,35 @@
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Add a <kbd>&lt;form&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;form&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Add a <kbd>&lt;fieldset&gt;</kbd> inside the form"
+					"message": "أضف <kbd>&lt;fieldset&gt;</kbd> داخل النموذج"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Add a <kbd>&lt;legend&gt;</kbd> to title your fieldset"
+					"message": "أضف <kbd>&lt;legend&gt;</kbd> لعنونة مجموعة الحقول"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "label", "min": 2 },
-					"message": "Add at least 2 labels"
+					"message": "أضف على الأقل عنوانين"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "input", "min": 2 },
-					"message": "Add at least 2 input fields"
+					"message": "أضف على الأقل حقلي إدخال"
 				}
 			]
 		},
 		{
 			"id": "fieldset-textarea",
-			"title": "Adding Textarea",
-			"description": "The <kbd>&lt;textarea&gt;</kbd> element creates a multi-line text input, perfect for longer content like messages or descriptions.<br><br>Use <kbd>rows</kbd> and <kbd>cols</kbd> attributes to set default size.",
-			"task": "Create a contact form:<br>1. A <kbd>&lt;fieldset&gt;</kbd> with <kbd>&lt;legend&gt;</kbd> <code>Contact Us</code><br>2. A labeled <kbd>&lt;input&gt;</kbd> for email<br>3. A labeled <kbd>&lt;textarea&gt;</kbd> for the message<br>4. A submit <kbd>&lt;button&gt;</kbd>",
+			"title": "إضافة Textarea",
+			"description": "عنصر <kbd>&lt;textarea&gt;</kbd> ينشئ حقل إدخال نص متعدد الأسطر، مثالي للمحتوى الطويل مثل الرسائل أو الأوصاف.<br><br>استخدم سمات <kbd>rows</kbd> و <kbd>cols</kbd> لتعيين الحجم الافتراضي.",
+			"task": "أنشئ نموذج اتصال:<br>1. عنصر <kbd>&lt;fieldset&gt;</kbd> مع <kbd>&lt;legend&gt;</kbd> <code>تواصل معنا</code><br>2. حقل <kbd>&lt;input&gt;</kbd> مُعنون للبريد الإلكتروني<br>3. حقل <kbd>&lt;textarea&gt;</kbd> مُعنون للرسالة<br>4. زر <kbd>&lt;button&gt;</kbd> للإرسال",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
@@ -60,35 +60,35 @@
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Add a <kbd>&lt;fieldset&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;fieldset&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Add a <kbd>&lt;legend&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;legend&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "textarea",
-					"message": "Add a <kbd>&lt;textarea&gt;</kbd> for the message"
+					"message": "أضف <kbd>&lt;textarea&gt;</kbd> للرسالة"
 				},
 				{
 					"type": "element_exists",
 					"value": "button",
-					"message": "Add a submit button"
+					"message": "أضف زر إرسال"
 				},
 				{
 					"type": "element_exists",
 					"value": "input",
-					"message": "Add an input field for email"
+					"message": "أضف حقل للبريد الإلكتروني"
 				}
 			]
 		},
 		{
 			"id": "fieldset-multiple",
-			"title": "Multiple Fieldsets",
-			"description": "Complex forms can use multiple <kbd>&lt;fieldset&gt;</kbd> elements to organize different sections.<br><br>This improves usability for long forms like registration or checkout pages.",
-			"task": "Create a registration form with 2 fieldsets:<br>1. <code>Account Info</code> with username and password inputs<br>2. <code>Preferences</code> with a textarea for bio<br>3. A submit button outside the fieldsets",
+			"title": "مجموعات حقول متعددة",
+			"description": "النماذج المعقدة يمكنها استخدام عناصر <kbd>&lt;fieldset&gt;</kbd> متعددة لتنظيم أقسام مختلفة.<br><br>هذا يحسن قابلية الاستخدام للنماذج الطويلة مثل التسجيل أو الدفع.",
+			"task": "أنشئ نموذج تسجيل مع 2 مجموعات حقول:<br>1. <code>معلومات الحساب</code> مع حقول اسم المستخدم وكلمة المرور<br>2. <code>التفضيلات</code> مع textarea للسيرة الذاتية<br>3. زر إرسال خارج مجموعات الحقول",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
 			"sandboxCSS": "",
@@ -99,27 +99,27 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "fieldset", "min": 2 },
-					"message": "Create at least 2 fieldsets"
+					"message": "أنشئ على الأقل 2 مجموعات حقول"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "legend", "min": 2 },
-					"message": "Add a legend to each fieldset"
+					"message": "أضف legend لكل مجموعة حقول"
 				},
 				{
 					"type": "element_exists",
 					"value": "textarea",
-					"message": "Add a textarea for the bio"
+					"message": "أضف textarea للسيرة الذاتية"
 				},
 				{
 					"type": "element_exists",
 					"value": "button",
-					"message": "Add a submit button"
+					"message": "أضف زر إرسال"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "input", "min": 2 },
-					"message": "Add at least 2 input fields"
+					"message": "أضف على الأقل حقلي إدخال"
 				}
 			]
 		}

lessons/ar/30-html-tables.json

@@ -1,125 +1,42 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-tables",
-	"title": "HTML Tables",
-	"description": "Create structured data tables with headers and captions",
+	"title": "جداول HTML",
+	"description": "أنشئ جداول بيانات منظمة بترميز دلالي",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "table-basic",
-			"title": "Basic Table Structure",
-			"description": "Tables use <kbd>&lt;table&gt;</kbd> with <kbd>&lt;tr&gt;</kbd> for rows. Inside rows, use <kbd>&lt;th&gt;</kbd> for headers and <kbd>&lt;td&gt;</kbd> for data cells.<br><br>The <kbd>&lt;caption&gt;</kbd> element provides an accessible title for the table.",
-			"task": "Create a simple table with:<br>1. A <kbd>&lt;caption&gt;</kbd> saying <code>Fruit Prices</code><br>2. A header row with <code>Fruit</code> and <code>Price</code> columns<br>3. At least 2 data rows",
+			"title": "جداول البيانات",
+			"description": "الجداول تعرض البيانات المنظمة في صفوف وأعمدة. استخدم <kbd>&lt;table&gt;</kbd> كحاوية، <kbd>&lt;tr&gt;</kbd> للصفوف، <kbd>&lt;th&gt;</kbd> لخلايا الرأس و <kbd>&lt;td&gt;</kbd> لخلايا البيانات.<br><br>أضف <kbd>&lt;caption&gt;</kbd> لعنوان قابل للوصول يصف محتوى الجدول.",
+			"task": "أنشئ جدول أسعار:<br>1. عنصر <kbd>&lt;caption&gt;</kbd> يقول <code>Pricing</code><br>2. صف رأس مع <code>Plan</code> و <code>Price</code><br>3. صفين بيانات لـ Basic ($9) و Pro ($29)",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px; font-weight: 600; font-size: 1.2rem; color: #333; background: #f8f9fa; } th, td { padding: 12px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 500; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 350px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 16px; font-weight: 600; font-size: 1.1rem; color: #333; background: #f8f9fa; } th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: steelblue; color: white; font-weight: 500; } tr:last-child td { border-bottom: none; } tr:hover td { background: #f8f9fa; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<table>\n  <caption>Fruit Prices</caption>\n  <tr>\n    <th>Fruit</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Apple</td>\n    <td>$1.50</td>\n  </tr>\n  <tr>\n    <td>Banana</td>\n    <td>$0.75</td>\n  </tr>\n</table>",
+			"solution": "<table>\n  <caption>Pricing</caption>\n  <tr>\n    <th>Plan</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Basic</td>\n    <td>$9</td>\n  </tr>\n  <tr>\n    <td>Pro</td>\n    <td>$29</td>\n  </tr>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;table&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> for the table title"
+					"message": "أضف <kbd>&lt;caption&gt;</kbd> لعنوان الجدول"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "th", "min": 2 },
-					"message": "Add at least 2 header cells (th)"
+					"message": "أضف خلايا رأس (<kbd>&lt;th&gt;</kbd>) لـ Plan و Price"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "tr", "min": 3 },
-					"message": "Add at least 3 rows (1 header + 2 data rows)"
-				}
-			]
-		},
-		{
-			"id": "table-thead-tbody",
-			"title": "Table Head & Body",
-			"description": "Use <kbd>&lt;thead&gt;</kbd> to group header rows and <kbd>&lt;tbody&gt;</kbd> to group data rows. This helps browsers and assistive technology understand the table structure.<br><br>You can also use <kbd>&lt;tfoot&gt;</kbd> for footer rows like totals.",
-			"task": "Create a structured table:<br>1. A <kbd>&lt;caption&gt;</kbd> with <code>Monthly Sales</code><br>2. A <kbd>&lt;thead&gt;</kbd> with Month and Revenue headers<br>3. A <kbd>&lt;tbody&gt;</kbd> with at least 2 data rows",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } table { border-collapse: collapse; width: 100%; max-width: 450px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } caption { padding: 20px; font-weight: 700; font-size: 1.3rem; color: white; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); caption-side: top; } thead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } th { padding: 15px 20px; text-align: left; color: white; font-weight: 500; } tbody tr { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } td { padding: 15px 20px; color: #333; } tbody tr:last-child { border-bottom: none; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Monthly Sales</caption>\n  <thead>\n    <tr>\n      <th>Month</th>\n      <th>Revenue</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>January</td>\n      <td>$12,500</td>\n    </tr>\n    <tr>\n      <td>February</td>\n      <td>$14,200</td>\n    </tr>\n  </tbody>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Add a <kbd>&lt;thead&gt;</kbd> for the header section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Add a <kbd>&lt;tbody&gt;</kbd> for the data rows"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Add at least 2 data rows in tbody"
-				}
-			]
-		},
-		{
-			"id": "table-complete",
-			"title": "Complete Table with Footer",
-			"description": "Add <kbd>&lt;tfoot&gt;</kbd> to create a footer section for totals or summary data. The footer stays at the bottom even if tbody has many rows.<br><br>Combine all sections for a fully structured, accessible table.",
-			"task": "Create a complete table:<br>1. A <kbd>&lt;caption&gt;</kbd> with <code>Order Summary</code><br>2. A <kbd>&lt;thead&gt;</kbd> with Item and Price headers<br>3. A <kbd>&lt;tbody&gt;</kbd> with 2 items<br>4. A <kbd>&lt;tfoot&gt;</kbd> with a Total row",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px 20px; font-weight: 600; font-size: 1.1rem; color: #333; text-align: left; background: #f8f9fa; border-bottom: 2px solid #eee; } th, td { padding: 12px 20px; text-align: left; } thead th { background: #2c3e50; color: white; } tbody td { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } tfoot { background: #ecf0f1; font-weight: 600; } tfoot td { border-top: 2px solid #2c3e50; color: #2c3e50; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Order Summary</caption>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Price</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Widget</td>\n      <td>$25.00</td>\n    </tr>\n    <tr>\n      <td>Gadget</td>\n      <td>$35.00</td>\n    </tr>\n  </tbody>\n  <tfoot>\n    <tr>\n      <td>Total</td>\n      <td>$60.00</td>\n    </tr>\n  </tfoot>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Add a <kbd>&lt;thead&gt;</kbd> section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Add a <kbd>&lt;tbody&gt;</kbd> section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tfoot",
-					"message": "Add a <kbd>&lt;tfoot&gt;</kbd> section for the total"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Add at least 2 item rows in tbody"
+					"message": "أضف 3 صفوف (1 رأس + 2 صفوف بيانات)"
 				}
 			]
 		}

lessons/ar/31-html-marquee.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-marquee",
 	"title": "HTML Marquee",
-	"description": "Create scrolling text with the classic (deprecated but fun!) marquee element",
+	"description": "أنشئ نصاً متحركاً باستخدام عنصر marquee الكلاسيكي (قديم لكنه ممتع!)",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "marquee-basic",
-			"title": "Scrolling Text",
-			"description": "The <kbd>&lt;marquee&gt;</kbd> element creates scrolling text - a classic from the early web! While deprecated, it still works in most browsers.<br><br>Note: For production, use CSS animations instead. But for learning and fun, marquee is great!",
-			"task": "Create a simple marquee:<br>1. Add a <kbd>&lt;marquee&gt;</kbd> element<br>2. Put some text inside like <code>Welcome to my website!</code>",
+			"title": "النص المتحرك",
+			"description": "عنصر <kbd>&lt;marquee&gt;</kbd> ينشئ نصاً متحركاً - كلاسيكي من الويب القديم! رغم أنه قديم، لا يزال يعمل في معظم المتصفحات.<br><br>ملاحظة: للإنتاج، استخدم حركات CSS بدلاً منه. لكن للتعلم والمرح، marquee رائع!",
+			"task": "أنشئ marquee بسيط:<br>1. أضف عنصر <kbd>&lt;marquee&gt;</kbd><br>2. ضع نصاً بداخله مثل <code>مرحباً بك في موقعي!</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
 			"sandboxCSS": "",
@@ -21,15 +21,15 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;marquee&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "marquee-direction",
-			"title": "Direction & Behavior",
-			"description": "Control the marquee with attributes:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (default), slide (stops at edge), alternate (bounces)<br>• <kbd>scrollamount</kbd>: speed (default is 6)",
-			"task": "Create a bouncing marquee:<br>1. Add a <kbd>&lt;marquee&gt;</kbd> element<br>2. Set <kbd>behavior=\"alternate\"</kbd> to make it bounce<br>3. Add some fun text",
+			"title": "الاتجاه والسلوك",
+			"description": "تحكم في marquee باستخدام السمات:<br>• <kbd>direction</kbd>: left، right، up، down<br>• <kbd>behavior</kbd>: scroll (افتراضي)، slide (يتوقف عند الحافة)، alternate (يرتد)<br>• <kbd>scrollamount</kbd>: السرعة (الافتراضي 6)",
+			"task": "أنشئ marquee مرتداً:<br>1. أضف عنصر <kbd>&lt;marquee&gt;</kbd><br>2. اضبط <kbd>behavior=\"alternate\"</kbd> ليرتد<br>3. أضف نصاً ممتعاً",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
 			"sandboxCSS": "",
@@ -40,20 +40,20 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;marquee&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
-					"message": "Add <kbd>behavior=</kbd>\"alternate\" to make it bounce"
+					"message": "أضف <kbd>behavior=</kbd>\"alternate\" ليرتد"
 				}
 			]
 		},
 		{
 			"id": "marquee-retro",
-			"title": "Retro News Ticker",
-			"description": "Combine multiple marquee attributes for a classic news ticker effect. You can even put multiple elements inside!<br><br>Remember: This is deprecated HTML. Modern sites use CSS animations, but marquee is great for understanding web history.",
-			"task": "Create a news ticker:<br>1. A <kbd>&lt;marquee&gt;</kbd> with <kbd>direction=\"left\"</kbd><br>2. Set <kbd>scrollamount=\"5\"</kbd> for smooth scrolling<br>3. Add a breaking news headline inside",
+			"title": "شريط أخبار كلاسيكي",
+			"description": "اجمع عدة سمات marquee لتأثير شريط أخبار كلاسيكي. يمكنك حتى وضع عناصر متعددة بداخله!<br><br>تذكر: هذا HTML قديم. المواقع الحديثة تستخدم حركات CSS، لكن marquee رائع لفهم تاريخ الويب.",
+			"task": "أنشئ شريط أخبار:<br>1. عنصر <kbd>&lt;marquee&gt;</kbd> مع <kbd>direction=\"left\"</kbd><br>2. اضبط <kbd>scrollamount=\"5\"</kbd> للتمرير السلس<br>3. أضف عنواناً إخبارياً عاجلاً بداخله",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
 			"sandboxCSS": "",
@@ -64,17 +64,17 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;marquee&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "direction", "value": "left" },
-					"message": "Add <kbd>direction=</kbd>\"left\" for horizontal scrolling"
+					"message": "أضف <kbd>direction=</kbd>\"left\" للتمرير الأفقي"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
-					"message": "Add <kbd>scrollamount=</kbd>\"5\" for smooth speed"
+					"message": "أضف <kbd>scrollamount=</kbd>\"5\" لسرعة سلسة"
 				}
 			]
 		}

lessons/ar/32-html-svg.json

@@ -2,99 +2,169 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-svg",
 	"title": "HTML SVG",
-	"description": "Draw scalable vector graphics directly in HTML",
+	"description": "ارسم رسومات متجهة قابلة للتحجيم مباشرة في HTML",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "svg-circle",
-			"title": "Drawing Circles",
-			"description": "SVG (Scalable Vector Graphics) lets you draw shapes directly in HTML. The <kbd>&lt;svg&gt;</kbd> element is the container, with <kbd>width</kbd> and <kbd>height</kbd> attributes.<br><br>Use <kbd>&lt;circle&gt;</kbd> with <kbd>cx</kbd>, <kbd>cy</kbd> (center) and <kbd>r</kbd> (radius) to draw circles.",
-			"task": "Create an SVG with a circle:<br>1. An <kbd>&lt;svg&gt;</kbd> with width=\"200\" and height=\"200\"<br>2. A <kbd>&lt;circle&gt;</kbd> centered at (100,100) with radius 50<br>3. Add a <kbd>fill</kbd> color",
+			"title": "رسم الدوائر",
+			"description": "SVG (Scalable Vector Graphics) يتيح لك رسم الأشكال مباشرة في HTML. عنصر <kbd>&lt;svg&gt;</kbd> هو الحاوية بسمات <kbd>width</kbd> و <kbd>height</kbd>.<br><br>استخدم <kbd>&lt;circle&gt;</kbd> مع <kbd>cx</kbd> و <kbd>cy</kbd> (المركز) و <kbd>r</kbd> (نصف القطر) لرسم الدوائر.",
+			"task": "أنشئ SVG مع دائرة:<br>1. عنصر <kbd>&lt;svg&gt;</kbd> بـ width=\"200\" و height=\"200\"<br>2. عنصر <kbd>&lt;circle&gt;</kbd> متمركز عند (100,100) بنصف قطر 50<br>3. أضف لون <kbd>fill</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; display: flex; justify-content: center; } svg { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"#3498db\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"steelblue\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;svg&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "circle",
-					"message": "Add a <kbd>&lt;circle&gt;</kbd> element inside the SVG"
+					"message": "أضف عنصر <kbd>&lt;circle&gt;</kbd> داخل SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "width", "value": "200" },
+					"message": "عيّن <kbd>width=</kbd>\"200\" في SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "height", "value": "200" },
+					"message": "عيّن <kbd>height=</kbd>\"200\" في SVG"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cx", "value": "100" },
-					"message": "Set <kbd>cx=</kbd>\"100\" for the circle's horizontal center"
+					"message": "عيّن <kbd>cx=</kbd>\"100\" للمركز الأفقي للدائرة"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cy", "value": "100" },
-					"message": "Set <kbd>cy=</kbd>\"100\" for the circle's vertical center"
+					"message": "عيّن <kbd>cy=</kbd>\"100\" للمركز العمودي للدائرة"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "circle", "attr": "r", "value": "50" },
+					"message": "عيّن <kbd>r=</kbd>\"50\" لنصف قطر الدائرة"
 				}
 			]
 		},
 		{
 			"id": "svg-rect-line",
-			"title": "Rectangles & Lines",
-			"description": "Draw rectangles with <kbd>&lt;rect&gt;</kbd> using <kbd>x</kbd>, <kbd>y</kbd>, <kbd>width</kbd>, <kbd>height</kbd>.<br><br>Draw lines with <kbd>&lt;line&gt;</kbd> using <kbd>x1</kbd>, <kbd>y1</kbd> (start) and <kbd>x2</kbd>, <kbd>y2</kbd> (end). Lines need a <kbd>stroke</kbd> color!",
-			"task": "Create an SVG with:<br>1. An <kbd>&lt;svg&gt;</kbd> (200x150)<br>2. A <kbd>&lt;rect&gt;</kbd> at position (20,20) with size 80x60<br>3. A <kbd>&lt;line&gt;</kbd> from (120,30) to (180,90) with a stroke color",
+			"title": "المستطيلات والخطوط",
+			"description": "ارسم المستطيلات باستخدام <kbd>&lt;rect&gt;</kbd> مع <kbd>x</kbd> و <kbd>y</kbd> و <kbd>width</kbd> و <kbd>height</kbd>.<br><br>ارسم الخطوط باستخدام <kbd>&lt;line&gt;</kbd> مع <kbd>x1</kbd> و <kbd>y1</kbd> (البداية) و <kbd>x2</kbd> و <kbd>y2</kbd> (النهاية). الخطوط تحتاج لون <kbd>stroke</kbd>!",
+			"task": "أنشئ SVG مع:<br>1. عنصر <kbd>&lt;svg&gt;</kbd> (200x150)<br>2. عنصر <kbd>&lt;rect&gt;</kbd> في الموضع (20,20) بحجم 80x60<br>3. عنصر <kbd>&lt;line&gt;</kbd> من (120,30) إلى (180,90) مع لون stroke",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 200px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"#e74c3c\" />\n  <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"#2c3e50\" stroke-width=\"3\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"tomato\" />\n  <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"slategray\" stroke-width=\"3\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;svg&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "rect",
-					"message": "Add a <kbd>&lt;rect&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;rect&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "line",
-					"message": "Add a <kbd>&lt;line&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;line&gt;</kbd>"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "width", "value": "200" },
+					"message": "عيّن <kbd>width=</kbd>\"200\" في SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "height", "value": "150" },
+					"message": "عيّن <kbd>height=</kbd>\"150\" في SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "x", "value": "20" },
+					"message": "عيّن <kbd>x=</kbd>\"20\" في rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "y", "value": "20" },
+					"message": "عيّن <kbd>y=</kbd>\"20\" في rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "width", "value": "80" },
+					"message": "عيّن <kbd>width=</kbd>\"80\" في rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "height", "value": "60" },
+					"message": "عيّن <kbd>height=</kbd>\"60\" في rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "x1", "value": "120" },
+					"message": "عيّن <kbd>x1=</kbd>\"120\" في line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "y1", "value": "30" },
+					"message": "عيّن <kbd>y1=</kbd>\"30\" في line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "x2", "value": "180" },
+					"message": "عيّن <kbd>x2=</kbd>\"180\" في line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "y2", "value": "90" },
+					"message": "عيّن <kbd>y2=</kbd>\"90\" في line"
+				},
+				{
+					"type": "contains",
+					"value": "stroke",
+					"message": "أضف لون <kbd>stroke</kbd> إلى line"
 				}
 			]
 		},
 		{
 			"id": "svg-shapes",
-			"title": "Multiple Shapes",
-			"description": "Combine shapes to create simple graphics! Add <kbd>stroke</kbd> for outlines and <kbd>stroke-width</kbd> for thickness.<br><br>Use <kbd>fill=\"none\"</kbd> for hollow shapes. Shapes stack in order - later elements appear on top.",
-			"task": "Create a simple face:<br>1. An <kbd>&lt;svg&gt;</kbd> (200x200)<br>2. A large <kbd>&lt;circle&gt;</kbd> for the face<br>3. Two small <kbd>&lt;circle&gt;</kbd> elements for eyes<br>4. A <kbd>&lt;line&gt;</kbd> for the smile",
+			"title": "أشكال متعددة",
+			"description": "ادمج الأشكال لإنشاء رسومات بسيطة! أضف <kbd>stroke</kbd> للحدود و <kbd>stroke-width</kbd> للسمك.<br><br>استخدم <kbd>fill=\"none\"</kbd> للأشكال المجوفة. الأشكال تتراكم بالترتيب - العناصر اللاحقة تظهر في الأعلى.",
+			"task": "أنشئ وجهاً بسيطاً:<br>1. عنصر <kbd>&lt;svg&gt;</kbd> (200x200)<br>2. <kbd>&lt;circle&gt;</kbd> كبير للوجه<br>3. اثنين <kbd>&lt;circle&gt;</kbd> صغيرين للعيون<br>4. عنصر <kbd>&lt;line&gt;</kbd> للابتسامة",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 250px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#f1c40f\" stroke=\"#e67e22\" stroke-width=\"4\" />\n  <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"#2c3e50\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"gold\" stroke=\"orange\" stroke-width=\"4\" />\n  <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n  <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n  <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"darkslategray\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
+					"message": "أضف عنصر <kbd>&lt;svg&gt;</kbd>"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "circle", "min": 3 },
-					"message": "Add at least 3 circles (1 face + 2 eyes)"
+					"message": "أضف على الأقل 3 دوائر (1 للوجه + 2 للعيون)"
 				},
 				{
 					"type": "element_exists",
 					"value": "line",
-					"message": "Add a <kbd>&lt;line&gt;</kbd> for the smile"
+					"message": "أضف <kbd>&lt;line&gt;</kbd> للابتسامة"
 				}
 			]
 		}

lessons/ar/flexbox.json

@@ -2,18 +2,18 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "flexbox",
 	"title": "CSS Flexbox",
-	"description": "Master the flexible box layout model for modern responsive designs",
+	"description": "أتقن نموذج تخطيط الصندوق المرن للتصاميم المتجاوبة الحديثة",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "flexbox-1",
 			"title": "Container",
-			"description": "Learn how to create a flex container and understand the main and cross axes.",
-			"task": "Add <kbd>display: flex</kbd> to <kbd>.wrap</kbd> to create a flexbox layout.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "قبل flexbox، كانت حتى التخطيطات البسيطة تتطلب floats أو حيل التموضع أو تخطيطات الجداول. ثورة Flexbox (تخطيط الصندوق المرن) في CSS من خلال توفير نظام تخطيط أحادي البعد مصمم خصيصاً لتوزيع المساحة ومحاذاة المحتوى.<br><br><strong>كيف يعمل:</strong> عندما تضبط <kbd>display: flex</kbd> على عنصر، يصبح <em>حاوية flex</em>. أبناؤه المباشرون يصبحون تلقائياً <em>عناصر flex</em> تتدفق على طول المحور الرئيسي (أفقياً بشكل افتراضي). هذه الخاصية الواحدة تحول العناصر الكتلية المتراصة إلى صف أفقي.<br><br><strong>المحوران:</strong><br>• <em>المحور الرئيسي</em> – الاتجاه الأساسي لتدفق العناصر (row = يسار→يمين)<br>• <em>المحور المتقاطع</em> – عمودي على الرئيسي (row = أعلى→أسفل)<br><br><pre>.nav {\n  display: flex;\n}</pre>",
+			"task": "قائمة التنقل هذه تتراص عمودياً. أضف <kbd>display: flex</kbd> لترتيب الروابط أفقياً.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "display: flex;",
@@ -21,61 +21,41 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "display",
-						"expected": "flex"
-					},
-					"message": "Set <kbd>display: flex</kbd>"
+					"value": { "property": "display", "expected": "flex" },
+					"message": "اضبط <kbd>display: flex</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-2",
-			"title": "Direction & Wrap",
-			"description": "Control the direction and wrapping of flex items within a container.",
-			"task": "Add <kbd>flex-direction: column</kbd> and <kbd>flex-wrap: wrap</kbd> to <kbd>.wrap</kbd>.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
-			"codePrefix": ".wrap {\n  ",
+			"title": "Gap",
+			"description": "خاصية <kbd>gap</kbd> تضيف تباعداً متسقاً بين عناصر flex بدون الحاجة إلى الهوامش. تُنشئ مساحة فقط بين العناصر، وليس على الحواف.",
+			"task": "أضف <kbd>gap: 1rem</kbd> لتوزيع روابط التنقل بالتساوي.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; background: rgba(255,255,255,0.1); }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "flex-direction: column;\n  flex-wrap: wrap;",
+			"solution": "gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "flex-direction",
-						"expected": "column"
-					},
-					"message": "Set <kbd>flex-direction: column</kbd>",
-					"options": {
-						"exact": true
-					}
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "flex-wrap",
-						"expected": "wrap"
-					},
-					"message": "Set <kbd>flex-wrap: wrap</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "gap", "expected": "1rem" },
+					"message": "اضبط <kbd>gap: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-3",
 			"title": "Justify Content",
-			"description": "Learn how to align flex items along the main axis of the flex container.",
-			"task": "Add <kbd>justify-content: space-between</kbd> to <kbd>.wrap</kbd> to distribute the boxes evenly.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "<kbd>justify-content</kbd> يوزع العناصر على طول المحور الرئيسي. القيم الشائعة:<br>• <kbd>flex-start</kbd> – تجميع في البداية<br>• <kbd>flex-end</kbd> – تجميع في النهاية<br>• <kbd>center</kbd> – توسيط العناصر<br>• <kbd>space-between</kbd> – مسافة متساوية بين العناصر<br>• <kbd>space-around</kbd> – مسافة متساوية حول العناصر",
+			"task": "ادفع زر \"Login\" إلى اليمين بضبط <kbd>justify-content: space-between</kbd> على التنقل.",
+			"previewHTML": "<nav class=\"nav\"><div class=\"links\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a></div><a href=\"#\" class=\"login\">Login</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .links { display: flex; gap: 8px; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); } .login { background: steelblue; }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "justify-content: space-between;",
@@ -83,26 +63,20 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "justify-content",
-						"expected": "space-between"
-					},
-					"message": "Set <kbd>justify-content: space-between</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "justify-content", "expected": "space-between" },
+					"message": "اضبط <kbd>justify-content: space-between</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-4",
 			"title": "Align Items",
-			"description": "Control how flex items are aligned along the cross axis of the flex container.",
-			"task": "Add <kbd>align-items: center</kbd> to <kbd>.wrap</kbd> to vertically center the boxes.",
-			"previewHTML": "<div class='wrap'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "<kbd>align-items</kbd> يتحكم في المحاذاة على المحور المتقاطع (عمودياً عندما يكون flex-direction هو row). القيم تشمل:<br>• <kbd>stretch</kbd> – تمديد للملء (افتراضي)<br>• <kbd>flex-start</kbd> – محاذاة للأعلى<br>• <kbd>flex-end</kbd> – محاذاة للأسفل<br>• <kbd>center</kbd> – توسيط عمودي",
+			"task": "الشعار وروابط التنقل لها ارتفاعات مختلفة. وسّطها عمودياً باستخدام <kbd>align-items: center</kbd>.",
+			"previewHTML": "<header class=\"header\"><div class=\"logo\">ACME</div><nav><a href=\"#\">Products</a><a href=\"#\">Pricing</a><a href=\"#\">Docs</a></nav></header>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .header { background: white; padding: 1rem 2rem; display: flex; justify-content: space-between; border-bottom: 1px solid #eee; } .logo { font-size: 1.5rem; font-weight: bold; color: steelblue; } nav { display: flex; gap: 1rem; } nav a { color: #333; text-decoration: none; font-size: 0.9rem; }",
+			"sandboxCSS": "",
+			"codePrefix": ".header {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "align-items: center;",
@@ -110,62 +84,50 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "align-items",
-						"expected": "center"
-					},
-					"message": "Set <kbd>align-items: center</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "align-items", "expected": "center" },
+					"message": "اضبط <kbd>align-items: center</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-5",
-			"title": "Flex Grow",
-			"description": "The <kbd>flex</kbd> property controls how much an item grows relative to others.",
-			"task": "Add <kbd>flex: 2</kbd> to <kbd>.box2</kbd> to make it grow twice as wide.",
-			"previewHTML": "<div class='wrap'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": ".box2 {\n  ",
+			"title": "Flex Wrap",
+			"description": "بشكل افتراضي، تنضغط عناصر flex في سطر واحد. <kbd>flex-wrap: wrap</kbd> يسمح للعناصر بالتدفق إلى أسطر متعددة عندما تنفد المساحة.",
+			"task": "هذه البطاقات تتجاوز الحاوية. أضف <kbd>flex-wrap: wrap</kbd> للسماح لها بالانتقال إلى صفوف جديدة.",
+			"previewHTML": "<div class=\"cards\"><article class=\"card\">Card 1</article><article class=\"card\">Card 2</article><article class=\"card\">Card 3</article><article class=\"card\">Card 4</article><article class=\"card\">Card 5</article><article class=\"card\">Card 6</article></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .cards { display: flex; gap: 1rem; } .card { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); min-width: 120px; text-align: center; }",
+			"sandboxCSS": "",
+			"codePrefix": ".cards {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "flex: 2;",
+			"solution": "flex-wrap: wrap;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "flex",
-						"expected": "2"
-					},
-					"message": "Set <kbd>flex: 2</kbd>"
+					"value": { "property": "flex-wrap", "expected": "wrap" },
+					"message": "اضبط <kbd>flex-wrap: wrap</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-6",
-			"title": "Align Self",
-			"description": "Use <kbd>align-self</kbd> to override alignment for a single flex item.",
-			"task": "Add <kbd>align-self: flex-start</kbd> to <kbd>.middle</kbd> to move it to the top.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
-			"codePrefix": ".middle {\n  ",
+			"title": "Flex Grow",
+			"description": "خاصية <kbd>flex</kbd> على العناصر تتحكم في كيفية نموها وانكماشها. <kbd>flex: 1</kbd> يجعل العنصر ينمو لملء المساحة المتاحة. عناصر متعددة مع <kbd>flex: 1</kbd> تتشارك المساحة بالتساوي.",
+			"task": "اجعل حقل البحث يتوسع لملء المساحة المتاحة بضبط <kbd>flex: 1</kbd> على <kbd>.search</kbd>.",
+			"previewHTML": "<div class=\"toolbar\"><input class=\"search\" type=\"text\" placeholder=\"Search...\"><button class=\"btn\">Search</button><button class=\"btn\">Filters</button></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .toolbar { display: flex; gap: 8px; padding: 1rem; background: #f5f5f5; border-radius: 8px; } .search { padding: 8px 1rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } .btn { padding: 8px 1rem; background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; }",
+			"sandboxCSS": "",
+			"codePrefix": ".search {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "align-self: flex-start;",
+			"solution": "flex: 1;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "align-self",
-						"expected": "flex-start"
-					},
-					"message": "Set <kbd>align-self: flex-start</kbd>"
+					"value": { "property": "flex", "expected": "1" },
+					"message": "اضبط <kbd>flex: 1</kbd>"
 				}
 			]
 		}

lessons/de/00-basic-selectors.json

@@ -1,548 +1,257 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "css-basic-selectors",
-	"title": "CSS Selektoren",
-	"description": "CSS-Selektoren sind die Grundlage für das Stylen von Webseiten und ermöglichen es dir, bestimmte HTML-Elemente für die Gestaltung auszuwählen. Dieses Modul stellt grundlegende Selektortypen vor, einschließlich Element-Typ-Selektoren, Klassen-Selektoren, ID-Selektoren und des universellen Selektors.",
+	"title": "CSS Grundlagen",
+	"description": "Lerne die grundlegenden Bausteine von CSS: Eigenschaften, Werte und Selektoren. Dieses Modul vermittelt dir die Syntaxregeln, denen jede CSS-Deklaration folgt.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
-			"id": "introduction-to-selectors",
-			"title": "Was ist ein CSS-Selektor?",
-			"description": "Ein CSS-Selektor ist der erste Teil einer CSS-Regel, der dem Browser mitteilt, welche HTML-Elemente die im Deklarationsblock definierten Stile erhalten sollen. Selektoren sind im Wesentlichen Muster, die mit Elementen in deinem HTML-Dokument übereinstimmen. Das Verstehen von Selektoren ist grundlegend, da sie bestimmen, welche Elemente von deinen CSS-Regeln betroffen sind. Das Element oder die Elemente, die von einem Selektor anvisiert werden, werden als 'Subjekt des Selektors' bezeichnet. Beim Schreiben einer CSS-Regel gibst du zuerst den Selektor an, gefolgt von geschweiften Klammern, die die Stil-Deklarationen enthalten.<br/>Um beispielsweise die Textfarbe von Elementen zu ändern, kannst du die <kbd>color</kbd>-Eigenschaft in deinem Deklarationsblock verwenden.<br><br><pre>/* Element-Selektor */\np {\n  color: orangered;\n  /* │       └─── Gibt den Wert des Ausdrucks an\n     │                                                     \n     └─────────── Gibt die Eigenschaft des Ausdrucks an */\n}</pre>",
-			"task": "Schreibe eine CSS-Regel mit einem Typ-Selektor, die alle Absatz-Elemente <kbd>p</kbd> im Dokument anvisiert. Mache den Text blau, indem du die <kbd>color</kbd>-Eigenschaft auf <kbd>blue</kbd> setzt.",
-			"previewHTML": "<h1>Einführung in CSS-Selektoren</h1>\n<p>Dieser Absatz sollte blau werden.</p>\n<div>Dieses div-Element sollte unverändert bleiben.</div>\n<p>Dieser zweite Absatz sollte ebenfalls blau werden.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, p, div { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Schreibe einen Typ-Selektor, um alle Absatz-Elemente anzuvisieren */\n",
+			"id": "css-properties",
+			"title": "CSS-Eigenschaften",
+			"description": "CSS gestaltet Elemente mit <strong>Deklarationen</strong> - Paaren aus Eigenschaften und Werten. Jede Deklaration folgt dem gleichen Muster:<br><br><pre>property: value;</pre><br>Die <strong>Eigenschaft</strong> ist das, was du ändern möchtest (wie <kbd>color</kbd> oder <kbd>background</kbd>). Der <strong>Wert</strong> ist das, worauf du es setzt. Ein Doppelpunkt trennt sie, und ein Semikolon beendet die Zeile.<br><br>Werte gibt es in verschiedenen Typen:<br>• <strong>Schlüsselwörter:</strong> <kbd>red</kbd>, <kbd>bold</kbd>, <kbd>center</kbd><br>• <strong>Zahlen mit Einheiten:</strong> <kbd>16px</kbd>, <kbd>2rem</kbd>, <kbd>100%</kbd><br>• <strong>Farben:</strong> <kbd>steelblue</kbd>, <kbd>#ff0000</kbd>",
+			"task": "Vervollständige die Deklaration, indem du <kbd>color: coral;</kbd> hinzufügst, um die Textfarbe zu ändern.",
+			"previewHTML": "<p class=\"text\">This text should turn coral.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .text { font-size: 1.25rem; }",
+			"sandboxCSS": "",
+			"codePrefix": ".text {\n  ",
 			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
-			"solution": "p { color: blue }",
+			"solution": "color: coral;",
 			"validations": [
 				{
-					"type": "regex",
-					"value": "^p\\s*{",
-					"message": "Beginne deine Regel mit <kbd>p { … }</kbd>, um alle Absatz-Elemente auszuwählen",
-					"options": {
-						"caseSensitive": false
-					}
-				},
+					"type": "property_value",
+					"value": { "property": "color", "expected": "coral" },
+					"message": "Füge <kbd>color: coral;</kbd> hinzu"
+				}
+			]
+		},
+		{
+			"id": "multiple-properties",
+			"title": "Mehrere Eigenschaften",
+			"description": "Eine Regel kann mehrere Deklarationen enthalten. Jede steht in einer eigenen Zeile und jede benötigt ein Semikolon am Ende:<br><br><pre>.box {<br>  background: gold;<br>  color: navy;<br>  padding: 1rem;<br>}</pre><br>Die Reihenfolge spielt normalerweise keine Rolle - CSS wendet alle an. Bei Konflikten gewinnt die letzte.",
+			"task": "Füge zwei Deklarationen hinzu: <kbd>background: lavender;</kbd> und <kbd>padding: 1rem;</kbd>",
+			"previewHTML": "<div class=\"card\">A styled card with background and padding.</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .card { border-radius: 8px; }",
+			"sandboxCSS": "",
+			"codePrefix": ".card {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "background: lavender;\n  padding: 1rem;",
+			"validations": [
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Füge die <kbd>color:</kbd>-Eigenschaft in deine CSS-Regel ein"
-				},
-				{
-					"type": "contains",
-					"value": "blue",
-					"message": "Setze den Farbwert auf <kbd>blue</kbd>"
+					"type": "property_value",
+					"value": { "property": "background", "expected": "lavender" },
+					"message": "Füge <kbd>background: lavender;</kbd> hinzu"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "blue"
-					},
-					"message": "Verwende <kbd>color: blue</kbd>, um die Textfarbe zu setzen"
-				},
-				{
-					"type": "regex",
-					"value": "p\\s*{[^}]*}",
-					"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
-					"options": {
-						"caseSensitive": false
-					}
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "Füge <kbd>padding: 1rem;</kbd> hinzu"
 				}
 			]
 		},
 		{
 			"id": "type-selectors",
-			"title": "Typ-Selektoren: HTML-Elemente anvisieren",
-			"description": "Typ-Selektoren (auch Tag-Name-Selektoren oder Element-Selektoren genannt) visieren HTML-Elemente basierend auf ihrem Tag-Namen an. Zum Beispiel wählt <kbd>p</kbd> alle Absatz-Elemente, <kbd>h1</kbd> alle Überschriften der ersten Ebene und <kbd>div</kbd> alle Division-Elemente aus. Typ-Selektoren sind die grundlegendste Art, Elemente auszuwählen, und wenden Stile einheitlich auf alle Instanzen eines bestimmten HTML-Elements in deinem Dokument an. Du kannst verschiedene CSS-Eigenschaften mit Typ-Selektoren definieren, wie <kbd>color</kbd> für Textfarbe, <kbd>background-color</kbd> für den Hintergrund und <kbd>font-weight</kbd> für Textbetonung. Sie bieten einen breiten Ansatz für das Styling deiner Seite und sind oft der Ausgangspunkt für spezifischeres Styling mit anderen Selektortypen.",
-			"task": "Schreibe drei separate CSS-Regeln mit Typ-Selektoren, um bestimmte HTML-Elemente anzuvisieren: mache <kbd>h2</kbd>-Überschriften <kbd>purple</kbd>, gib <kbd>span</kbd>-Elementen einen <kbd>yellow</kbd>-Hintergrund und mache <kbd>strong</kbd>-Elemente <kbd>red</kbd>.",
-			"previewHTML": "<h2>Typ-Selektoren Beispiel</h2>\n<p>Normaler Absatztext <span>mit einem hervorgehobenen Span</span>, der einen gelben Hintergrund haben sollte.</p>\n<p>Ein weiterer Absatz mit <strong>wichtigem, fetten Text</strong>, der rot sein sollte.</p>\n<h2>Eine weitere Überschrift</h2>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, span, strong { padding: 3px; }",
-			"codePrefix": "/* Schreibe drei separate Typ-Selektoren unten */\n\n",
-			"initialCode": "/* 1. Mache h2-Überschriften lila */\n\n\n/* 2. Gib span-Elementen einen gelben Hintergrund */\n\n\n/* 3. Mache strong-Elemente rot */\n",
+			"title": "Typ-Selektoren",
+			"description": "Ein <strong>Selektor</strong> sagt dem Browser, welche Elemente gestylt werden sollen. Der einfachste Selektor ist ein <strong>Typ-Selektor</strong> — einfach der HTML-Tag-Name.<br><br><pre>p {<br>  color: steelblue;<br>}</pre><br>Diese Regel zielt auf jedes <kbd>&lt;p&gt;</kbd>-Element auf der Seite. Typ-Selektoren eignen sich hervorragend für Basis-Styles.",
+			"task": "Style alle Absätze. Schreibe eine Regel mit <kbd>p</kbd> als Selektor und setze <kbd>color: steelblue</kbd>.",
+			"previewHTML": "<article>\n  <h2>Fresh Roasted Coffee</h2>\n  <p>Our beans are sourced from small farms in Colombia and Ethiopia.</p>\n  <p>Each batch is roasted weekly to ensure peak freshness.</p>\n</article>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h2 { margin: 0 0 1rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": "/* 1. Mache h2-Überschriften lila */\nh2 {\n  color: purple;\n}\n\n/* 2. Gib span-Elementen einen gelben Hintergrund */\nspan {\n  background-color: yellow;\n}\n\n/* 3. Mache strong-Elemente rot */\nstrong {\n  color: red;\n}",
+			"solution": "p {\n  color: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^h2\\s*{",
-					"message": "Füge einen <kbd>h2 { … }</kbd>-Selektor hinzu"
+					"value": "p\\s*\\{",
+					"message": "Beginne mit <kbd>p {</kbd>, um Absätze auszuwählen"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Setze die <kbd>color</kbd>-Eigenschaft auf <kbd>purple</kbd> für h2-Elemente"
-				},
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "Setze <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "styling-links",
+			"title": "Links stylen",
+			"description": "Typ-Selektoren funktionieren für jedes HTML-Element. Der <kbd>a</kbd>-Selektor zielt auf alle Links einer Seite.<br><br>Links haben standardmäßig eine blaue Farbe und Unterstreichung. Du kannst beides mit CSS ändern — verwende <kbd>color</kbd> für den Text und <kbd>text-decoration: none</kbd>, um die Unterstreichung zu entfernen.",
+			"task": "Style die Navigationslinks. Schreibe eine Regel mit <kbd>a</kbd> als Selektor und setze <kbd>color: coral</kbd>.",
+			"previewHTML": "<nav>\n  <a href=\"#\">Home</a>\n  <a href=\"#\">Menu</a>\n  <a href=\"#\">About</a>\n  <a href=\"#\">Contact</a>\n</nav>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } nav { display: flex; gap: 1.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": "a {\n  color: coral;\n}",
+			"validations": [
 				{
 					"type": "regex",
-					"value": "h2\\s*{[^}]*}",
-					"message": "Vergiss nicht, deine h2-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden"
-				},
-				{
-					"type": "regex",
-					"value": "^span\\s*{",
-					"message": "Füge einen <kbd>span { … }</kbd>-Selektor hinzu"
+					"value": "a\\s*\\{",
+					"message": "Beginne mit <kbd>a {</kbd>, um Links auszuwählen"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Setze <kbd>background-color: yellow</kbd> für span-Elemente"
-				},
-				{
-					"type": "regex",
-					"value": "span\\s*{[^}]*}",
-					"message": "Vergiss nicht, deine span-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden"
-				},
-				{
-					"type": "regex",
-					"value": "^strong\\s*{",
-					"message": "Füge einen <kbd>strong { … }</kbd>-Selektor hinzu"
-				},
-				{
-					"type": "regex",
-					"value": "strong\\s*{\\s*color:\\s*red;[^}]*}",
-					"message": "Setze <kbd>color: red</kbd> für strong-Elemente"
+					"value": { "property": "color", "expected": "coral" },
+					"message": "Setze <kbd>color: coral</kbd>"
 				}
 			]
 		},
 		{
 			"id": "class-selectors",
-			"title": "Klassen-Selektoren: Elementgruppen stylen",
-			"description": "Klassen-Selektoren visieren Elemente mit einem bestimmten Klassen-Attributwert an. Sie beginnen mit einem Punkt (.) gefolgt vom Klassennamen. Klassen sind mächtig, weil sie es ermöglichen, die gleichen Stile auf mehrere Elemente anzuwenden, unabhängig von ihrem Typ. Ein HTML-Element kann mehrere Klassen haben (durch Leerzeichen im class-Attribut getrennt), und eine Klasse kann auf beliebig viele Elemente angewendet werden. Bei der Verwendung von Klassen-Selektoren kannst du Eigenschaften wie <kbd>background-color</kbd> zum Setzen der Hintergrundfarbe und <kbd>font-weight</kbd> zur Kontrolle der Textdicke anwenden. Diese Flexibilität macht Klassen-Selektoren zu einer der am häufigsten verwendeten Methoden zur Anwendung von Stilen in CSS und ermöglicht modulares und wiederverwendbares Styling auf deiner gesamten Website.",
-			"task": "Erstelle eine CSS-Regel mit einem Klassen-Selektor, die Elemente mit der Klasse <kbd>highlight</kbd> anvisiert. Gib diesen Elementen einen <kbd>yellow</kbd>-Hintergrund und <kbd>bold</kbd>-Text.",
-			"previewHTML": "<h2>Verwendung von Klassen-Selektoren</h2>\n<p>Dies ist ein normaler Absatz, aber <span class=\"highlight\">dieser Span hat die highlight-Klasse</span> angewendet.</p>\n<p class=\"highlight\">Dieser gesamte Absatz hat die highlight-Klasse.</p>\n<ul>\n  <li>Normales Listenelement</li>\n  <li class=\"highlight\">Dieses Listenelement ist hervorgehoben</li>\n</ul>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, li { padding: 5px; margin-bottom: 10px; }",
-			"codePrefix": "/* Erstelle einen Klassen-Selektor für Elemente mit der 'highlight'-Klasse */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^\\.highlight\\s*{",
-					"message": "Beginne deine Regel mit <kbd>.highlight { … }</kbd>, um einen Klassen-Selektor zu erstellen",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Füge die <kbd>background-color:</kbd>-Eigenschaft hinzu"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Setze die Hintergrundfarbe auf <kbd>yellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "font-weight:",
-					"message": "Füge die <kbd>font-weight:</kbd>-Eigenschaft hinzu"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-weight",
-						"expected": "bold"
-					},
-					"message": "Setze font-weight auf <kbd>bold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.highlight\\s*{[^}]*}",
-					"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "multiple-classes",
-			"title": "Mit mehreren Klassen arbeiten",
-			"description": "HTML-Elemente können mehrere Klassen gleichzeitig haben, was komponierbare und modulare CSS-Designs ermöglicht. Wenn ein Element mehrere Klassen hat, erhält es Stile von allen passenden Klassen-Selektoren. Dieser Ansatz ermöglicht es dir, eine Bibliothek wiederverwendbarer CSS-Klassen aufzubauen, die auf verschiedene Arten kombiniert werden können. Du kannst auch Elemente anvisieren, die eine bestimmte Kombination von Klassen haben, indem du Klassen-Selektoren ohne Leerzeichen verkettst (z.B. <kbd>.class1.class2</kbd>). Beim Stylen dieser Elemente könntest du Eigenschaften wie <kbd>border-color</kbd> verwenden, um die Farbe von Element-Rahmen zu ändern, und <kbd>background-color</kbd>, um die Hintergrundfarbe von Elementen zu setzen. Diese Technik ermöglicht bedingte Stile, die nur gelten, wenn bestimmte Klassen zusammen erscheinen.",
-			"task": "Vervollständige die CSS-Regel, die Elemente mit sowohl <kbd>card</kbd> als auch <kbd>featured</kbd>-Klassen anvisiert, indem du die Selektoren verkettest. Setze border-color auf gold und background-color auf lemonchiffon, um hervorgehobene Karten hervorzuheben.",
-			"previewHTML": "<h2>Mehrfach-Klassen-Kombinationen</h2>\n<div class=\"card\">Normale Karte</div>\n<div class=\"card featured\">Hervorgehobene Karte</div>\n<div class=\"featured\">Nur hervorgehoben (keine Karte)</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .card { border: 2px solid gray; padding: 15px; margin-bottom: 10px; border-radius: 5px; }",
+			"title": "Klassen-Selektoren",
+			"description": "Typ-Selektoren stylen <em>alle</em> Elemente dieses Typs. Aber was, wenn du nur einige davon stylen möchtest?<br><br><strong>Klassen-Selektoren</strong> zielen auf Elemente mit einem bestimmten <kbd>class</kbd>-Attribut. Sie beginnen mit einem Punkt:<br><br><pre>.badge {<br>  background: coral;<br>}</pre><br>Das stylt nur Elemente mit <kbd>class=\"badge\"</kbd>.",
+			"task": "Style das Benachrichtigungs-Badge. Schreibe eine Regel mit <kbd>.badge</kbd> als Selektor und setze <kbd>background: tomato</kbd>.",
+			"previewHTML": "<header>\n  <h1>Dashboard</h1>\n  <span class=\"badge\">3</span>\n</header>\n<p>You have new notifications waiting.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } h1 { margin: 0; font-size: 1.5rem; } .badge { color: white; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.875rem; } p { color: #555; margin: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Die .card-Klasse hat bereits grundlegendes Styling */\n/* Visiere jetzt Elemente mit BEIDEN Klassen an: 'card' UND 'featured' */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": ".card.featured { border-color: gold; background-color: lemonchiffon }",
+			"solution": ".badge {\n  background: tomato;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.card\\.featured\\s*{",
-					"message": "Verkette die Selektoren als <kbd>.card.featured</kbd> (kein Leerzeichen dazwischen)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "border-color:",
-					"message": "Füge die <kbd>border-color</kbd>-Eigenschaft hinzu"
+					"value": "\\.badge\\s*\\{",
+					"message": "Beginne mit <kbd>.badge {</kbd> (vergiss den Punkt nicht!)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "border-color",
-						"expected": "gold"
-					},
-					"message": "Setze die Rahmenfarbe auf <kbd>gold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*;",
-					"message": "Vergiss nicht, deine CSS-Regel mit einem Semikolon <kbd>;</kbd> zu beenden"
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Füge die <kbd>background-color</kbd>-Eigenschaft hinzu"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lemonchiffon"
-					},
-					"message": "Setze die Hintergrundfarbe auf <kbd>lemonchiffon</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*}",
-					"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "tomato" },
+					"message": "Setze <kbd>background: tomato</kbd>"
 				}
 			]
 		},
 		{
-			"id": "class-with-type",
-			"title": "Typ- und Klassen-Selektoren kombinieren",
-			"description": "Du kannst Typ-Selektoren mit Klassen-Selektoren kombinieren, um bestimmte HTML-Elemente anzuvisieren, die eine bestimmte Klasse haben. Dies erstellt einen spezifischeren Selektor, der nur passt, wenn beide Bedingungen wahr sind: das Element ist vom angegebenen Typ UND es hat die angegebene Klasse. Zum Beispiel würde <kbd>p.note</kbd> Absatz-Elemente mit der Klasse <kbd>note</kbd> auswählen, aber keine divs oder spans mit derselben Klasse. Du kannst diese kombinierten Selektionen mit Eigenschaften wie <kbd>background-color</kbd> stylen, um einen farbigen Hintergrund für deine Elemente zu setzen. Dieser Ansatz ermöglicht es dir, verschiedene Stile auf dieselbe Klasse anzuwenden, wenn sie auf verschiedenen Elementtypen erscheint.",
-			"task": "Erstelle eine CSS-Regel, die speziell <kbd>&lt;span&gt;</kbd>-Elemente mit der Klasse <kbd>highlight</kbd> anvisiert. Gib diesen Elementen einen orangen Hintergrund, während andere Elemente mit der highlight-Klasse unverändert bleiben.",
-			"previewHTML": "<h2>Typ- und Klassen-Kombinationen</h2>\n<p>Dieser Absatz hat einen <span class=\"highlight\">hervorgehobenen Span</span>, der einen orangen Hintergrund haben sollte.</p>\n<p class=\"highlight\">Dieser Absatz hat die highlight-Klasse, sollte aber KEINEN orangen Hintergrund haben.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .highlight { font-weight: bold; }",
-			"sandboxCSS": "h2, p, span { padding: 5px; }",
-			"codePrefix": "/* Die .highlight-Klasse setzt bereits font-weight auf bold */\n/* Visiere jetzt NUR span-Elemente mit der highlight-Klasse an */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^span\\.highlight\\s*{",
-					"message": "Verwende den <kbd>span.highlight</kbd>-Selektor (kein Leerzeichen zwischen Element und Klasse)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Füge die <kbd>background-color</kbd>-Eigenschaft hinzu"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "orange"
-					},
-					"message": "Setze die Hintergrundfarbe auf <kbd>orange</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "span\\.highlight\\s*{[^}]*}",
-					"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-selectors",
-			"title": "ID-Selektoren: Einzigartige Elemente anvisieren",
-			"description": "ID-Selektoren visieren Elemente mit einem bestimmten id-Attribut an. Sie beginnen mit einem Raute-/Hash-Zeichen (#) gefolgt vom ID-Namen. Im Gegensatz zu Klassen müssen IDs innerhalb eines Dokuments einzigartig sein – jeder ID-Wert sollte nur einmal pro Seite verwendet werden. ID-Selektoren haben eine höhere Spezifität als Klassen- oder Element-Selektoren, was bedeutet, dass sie diese Selektoren bei Konflikten überschreiben. Beim Stylen mit ID-Selektoren kannst du Eigenschaften wie <kbd>color</kbd> verwenden, um die Textfarbe zu definieren, und <kbd>text-decoration</kbd>, um das Erscheinungsbild von Text zu kontrollieren, wie das Hinzufügen von Unterstreichungen zu Elementen. Wegen ihrer Einzigartigkeitsanforderung werden IDs am besten für einmalige Elemente wie Seitenköpfe, Hauptnavigation oder spezifische einzigartige Komponenten verwendet, die nur einmal auf einer Seite erscheinen.",
-			"task": "Erstelle eine CSS-Regel mit einem ID-Selektor, die das Element mit der ID <kbd>main-title</kbd> anvisiert. Setze seine Farbe auf purple und füge eine Unterstreichung mit <kbd>text-decoration: underline</kbd> hinzu.",
-			"previewHTML": "<h1 id=\"main-title\">Haupt-Seitentitel</h1>\n<p>Normaler Absatzinhalt.</p>\n<h2>Sekundäre Überschrift</h2>\n<p id=\"intro\">Einführungsabsatz (andere ID).</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Erstelle einen ID-Selektor für das Element mit id=\"main-title\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^#main-title\\s*{",
-					"message": "Beginne deine Regel mit <kbd>#main-title</kbd>, um einen ID-Selektor zu erstellen",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Füge die <kbd>color</kbd>-Eigenschaft hinzu"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Setze die Farbe auf <kbd>purple</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "text-decoration:",
-					"message": "Füge die <kbd>text-decoration</kbd>-Eigenschaft hinzu"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "text-decoration",
-						"expected": "underline"
-					},
-					"message": "Setze text-decoration auf <kbd>underline</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "#main-title\\s*{[^}]*}",
-					"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-with-type",
-			"title": "Typ- und ID-Selektoren kombinieren",
-			"description": "Ähnlich wie du Typ- und Klassen-Selektoren kombinieren kannst, kannst du auch Typ-Selektoren mit ID-Selektoren kombinieren. Zum Beispiel visiert <kbd>h1#title</kbd> ein h1-Element mit der ID 'title' an. Bei diesem kombinierten Ansatz kannst du CSS-Eigenschaften wie <kbd>font-style</kbd> anwenden, um die Neigung des Textes zu kontrollieren und ihn kursiv oder normal zu machen. Obwohl diese Selektor-Kombination spezifischer ist als die Verwendung nur des ID-Selektors, ist sie oft unnötig, da IDs bereits einzigartig im Dokument sein sollten. Diese Technik kann jedoch nützlich sein, um die Lesbarkeit des Codes zu verbessern oder wenn du betonen möchtest, dass eine bestimmte ID nur auf einem bestimmten Elementtyp erscheinen sollte.",
-			"task": "Erstelle eine CSS-Regel, die einen Typ-Selektor mit einem ID-Selektor kombiniert, um speziell ein Absatz-Element mit der ID <kbd>special</kbd> anzuvisieren. Setze seinen Schriftstil auf kursiv.",
-			"previewHTML": "<h2 id=\"special\">Überschrift mit ID \"special\" (sollte NICHT betroffen sein)</h2>\n<p id=\"special\">Absatz mit ID \"special\" (sollte kursiv werden)</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Erstelle einen kombinierten Typ+ID-Selektor für einen Absatz mit id=\"special\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^p#special\\s*{",
-					"message": "Verwende <kbd>p#special</kbd>, um Absätze mit ID <kbd>special</kbd> anzuvisieren",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "font-style:",
-					"message": "Füge die <kbd>font-style</kbd>-Eigenschaft hinzu"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-style",
-						"expected": "italic"
-					},
-					"message": "Setze font-style auf <kbd>italic</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "p#special\\s*{[^}]*}",
-					"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "selector-lists",
-			"title": "Selektor-Listen: Gleiche Regeln auf mehrere Selektoren anwenden",
-			"description": "Wenn mehrere Elemente das gleiche Styling benötigen, kannst du sie mit einer Selektor-Liste (auch Gruppierungs-Selektoren genannt) zusammenfassen. Selektor-Listen werden erstellt, indem einzelne Selektoren durch Kommas getrennt werden. Dieser Ansatz reduziert Wiederholungen in deinem CSS und macht es wartbarer und effizienter. Zum Beispiel wendet <kbd>h1, h2, h3 { color: blue; }</kbd> die gleiche blaue Farbe auf alle drei Überschriftenebenen an. Beim Stylen mehrerer Selektoren gleichzeitig kannst du Eigenschaften wie <kbd>background-color</kbd> für den Hintergrund, <kbd>border-left</kbd> für einen linken Rahmen mit bestimmter Dicke, Stil und Farbe, und <kbd>padding-left</kbd> anwenden, um Abstand zwischen dem Inhalt und dem linken Rahmen zu schaffen. Leerzeichen um Kommas sind optional, und jeder Selektor in der Liste kann ein beliebiger gültiger Selektortyp sein – Elemente, Klassen, IDs oder sogar komplexere Selektoren.",
-			"task": "Erstelle eine Selektor-Liste, die die gleichen Stile auf drei verschiedene Elemente anwendet: Absätze mit der Klasse <kbd>note</kbd>, Listenelemente mit der Klasse <kbd>important</kbd> und das Element mit der ID <kbd>summary</kbd>. Gib ihnen einen <kbd>lightyellow</kbd>-Hintergrund, einen <kbd>gold</kbd>-linken Rahmen und etwas linkes <kbd>padding</kbd>.",
-			"previewHTML": "<p class=\"note\">Dies ist ein Notiz-Absatz.</p>\n<ul>\n  <li>Normales Listenelement</li>\n  <li class=\"important\">Wichtiges Listenelement</li>\n</ul>\n<div id=\"summary\">Zusammenfassungs-Abschnitt</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p, li, div { padding: 8px; margin-bottom: 8px; border: 1px dashed gray; }",
-			"codePrefix": "/* Erstelle eine Selektor-Liste, um die gleichen Stile auf mehrere verschiedene Elemente anzuwenden */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"solution": "p.note,\nli.important,\n#summary {\n  background-color: lightyellow;\n  border-left: 3px solid gold;\n  padding-left: 10px\n}",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "p.note",
-					"message": "Füge <kbd>p.note</kbd> in deine Selektor-Liste ein",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "li.important",
-					"message": "Füge <kbd>li.important</kbd> in deine Selektor-Liste ein",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "#summary",
-					"message": "Füge <kbd>#summary</kbd> in deine Selektor-Liste ein",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "regex",
-					"value": "(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)",
-					"message": "Erstelle eine kommagetrennte Liste mit allen drei Selektoren",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Füge die <kbd>background-color</kbd>-Eigenschaft hinzu"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lightyellow"
-					},
-					"message": "Setze die Hintergrundfarbe auf <kbd>lightyellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "border-left:",
-					"message": "Füge die <kbd>border-left</kbd>-Eigenschaft hinzu"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "border-left",
-						"expected": "3px solid gold"
-					},
-					"message": "Verwende <kbd>border-left: 3px solid gold</kbd>, um einen linken Rahmen zu erstellen"
-				},
-				{
-					"type": "contains",
-					"value": "padding-left:",
-					"message": "Füge die <kbd>padding-left</kbd>-Eigenschaft hinzu"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "padding-left",
-						"expected": "10px"
-					},
-					"message": "Verwende <kbd>padding-left: 10px</kbd>, um linkes Padding hinzuzufügen"
-				}
-			]
-		},
-		{
-			"id": "universal-selector",
-			"title": "Der universelle Selektor: Alles anvisieren",
-			"description": "Der universelle Selektor wird durch ein Sternchen (*) gekennzeichnet und passt auf jedes Element jedes Typs. Er wählt alles im Dokument aus oder, wenn er mit anderen Selektoren kombiniert wird, alles innerhalb eines bestimmten Kontexts. Zum Beispiel entfernt <kbd>* { margin: 0; }</kbd> Ränder von allen Elementen, während <kbd>article *</kbd> alle Elemente innerhalb von article-Elementen auswählt. Bei der Verwendung des universellen Selektors in Kombination mit anderen Selektoren kannst du Eigenschaften wie <kbd>margin</kbd> anwenden, um die Abstände um Elemente zu kontrollieren. Der universelle Selektor ist mächtig, sollte aber wegen seiner breiten Auswirkung vorsichtig verwendet werden. Er wird häufig in CSS-Resets verwendet, um Standard-Browser-Styling zu überschreiben, oder um alle Kinder eines bestimmten Elements anzuvisieren.",
-			"task": "Verwende den universellen Selektor, um Ränder von allen Elementen innerhalb des Container-divs zu entfernen. Erstelle eine Regel mit <kbd>div.container *</kbd> als Selektor und setze <kbd>margin: 0</kbd>.",
-			"previewHTML": "<div class=\"container\">\n  <h2>Innerhalb des Containers</h2>\n  <p>Dieser Absatz ist innerhalb des Containers.</p>\n  <ul>\n    <li>Listenelement innerhalb des Containers</li>\n  </ul>\n</div>\n<p>Dieser Absatz ist außerhalb des Containers und sollte nicht betroffen sein.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } div.container { border: 2px solid navy; padding: 15px; background-color: lavender; } h2, p, ul, li { margin: 15px 0; }",
+			"id": "button-variants",
+			"title": "Button-Varianten",
+			"description": "Elemente können mehrere Klassen haben. Wenn du Klassen-Selektoren ohne Leerzeichen verkettst, zielst du auf Elemente, die <em>alle</em> diese Klassen haben:<br><br><pre>.btn.primary {<br>  background: steelblue;<br>}</pre><br>Das zielt auf Elemente mit <kbd>class=\"btn primary\"</kbd>, nicht nur auf <kbd>.btn</kbd> oder nur <kbd>.primary</kbd>.",
+			"task": "Style den primären Button. Schreibe eine Regel mit <kbd>.btn.primary</kbd> als Selektor und setze <kbd>background: steelblue</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Cancel</button>\n  <button class=\"btn primary\">Save Changes</button>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #e0e0e0; color: #333; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Verwende den universellen Selektor, um alle Elemente innerhalb des Containers anzuvisieren */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": ".btn.primary {\n  background: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^div\\.container\\s+\\*\\s*{",
-					"message": "Verwende <kbd>div.container *</kbd>-Selektor (mit einem Leerzeichen zwischen container und *)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "margin:",
-					"message": "Füge die <kbd>margin</kbd>-Eigenschaft hinzu"
+					"value": "\\.btn\\.primary\\s*\\{",
+					"message": "Verwende <kbd>.btn.primary {</kbd> (kein Leerzeichen zwischen den Klassen)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "margin",
-						"expected": "0"
-					},
-					"message": "Setze margin auf <kbd>0</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "div\\.container\\s+\\*\\s*{[^}]*}",
-					"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "steelblue" },
+					"message": "Setze <kbd>background: steelblue</kbd>"
 				}
 			]
 		},
 		{
-			"id": "specificity-basics",
-			"title": "Selektor-Spezifität verstehen",
-			"description": "CSS-Spezifität bestimmt, welche Stile Vorrang haben, wenn mehrere widersprüchliche Regeln auf dasselbe Element abzielen. Spezifität folgt einem hierarchischen System: Inline-Stile haben die höchste Spezifität, gefolgt von ID-Selektoren, dann Klassen-/Attribut-/Pseudo-Klassen-Selektoren und schließlich Element-/Pseudo-Element-Selektoren. Dies kann als vierteilige Punktzahl (inline, ID, Klasse, Element) konzeptualisiert werden. Beim Erstellen mehrerer Regeln, die auf dieselben Elemente abzielen könnten, kannst du die <kbd>color</kbd>-Eigenschaft verwenden, um Textfarben zu setzen, und die Spezifität bestimmt, welche Farbe tatsächlich angewendet wird. Das Verstehen von Spezifität ist entscheidend für vorhersagbares Styling und das Debuggen von CSS-Konflikten. Wenn zwei Selektoren gleiche Spezifität haben, gewinnt derjenige, der zuletzt im Stylesheet kommt.",
-			"task": "Untersuche die vorhandenen CSS-Regeln und füge eine neue Regel mit höherer Spezifität hinzu, um die Textfarbe des Absatzes zu überschreiben. Erstelle eine Regel mit '.content p' als Selektor und setze color: green.",
-			"previewHTML": "<div class=\"content\">\n  <p>Welche Farbe wird dieser Absatz haben? Schau dir die CSS-Regeln und ihre Spezifität an.</p>\n</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p { border: 1px dashed gray; padding: 10px; }",
-			"codePrefix": "/* Diese CSS-Regeln visieren denselben Absatz an, haben aber unterschiedliche Spezifität */\n\n/* Regel 1: Element-Selektor (niedrigste Spezifität) */\np {\n  color: red;\n}\n\n/* Regel 2: Nachfahren-Selektor (höhere Spezifität als nur 'p') */\n",
+			"id": "specific-elements",
+			"title": "Spezifische Elemente ansprechen",
+			"description": "Manchmal soll eine Klasse auf verschiedenen Elementen unterschiedlich aussehen. Kombiniere einen Typ-Selektor mit einem Klassen-Selektor (ohne Leerzeichen), um spezifischer zu sein:<br><br><pre>a.btn {<br>  text-decoration: none;<br>}</pre><br>Das stylt nur <kbd>&lt;a&gt;</kbd>-Elemente mit der <kbd>btn</kbd>-Klasse, nicht <kbd>&lt;button&gt;</kbd>-Elemente mit dieser Klasse.",
+			"task": "Entferne die Unterstreichung von Link-Buttons. Schreibe eine Regel mit <kbd>a.btn</kbd> als Selektor und setze <kbd>text-decoration: none</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Regular Button</button>\n  <a href=\"#\" class=\"btn\">Link Button</a>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; align-items: center; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: steelblue; color: white; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": "a.btn {\n  text-decoration: none;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.content\\s+p\\s*{",
-					"message": "Verwende <kbd>.content p</kbd> als deinen Selektor (beachte das Leerzeichen dazwischen)",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": "a\\.btn\\s*\\{",
+					"message": "Verwende <kbd>a.btn {</kbd> (Typ + Klasse, kein Leerzeichen)"
 				},
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Füge die <kbd>color</kbd>-Eigenschaft hinzu"
+					"type": "property_value",
+					"value": { "property": "text-decoration", "expected": "none" },
+					"message": "Setze <kbd>text-decoration: none</kbd>"
+				}
+			]
+		},
+		{
+			"id": "grouping-selectors",
+			"title": "Selektoren gruppieren",
+			"description": "Wenn mehrere Elemente die gleichen Styles brauchen, liste sie durch Kommas getrennt auf. Das hält dein CSS sauber und wartbar.<br><br><pre>h1, h2, h3 {<br>  color: steelblue;<br>}</pre><br>Das wendet die gleiche Farbe auf alle drei Überschriftenebenen in einer Regel an.",
+			"task": "Style alle Überschriften einheitlich. Füge <kbd>color: steelblue</kbd> zum gruppierten <kbd>h1, h2, h3</kbd>-Selektor hinzu.",
+			"previewHTML": "<article><h1>Main Title</h1><p>Introduction paragraph with some text.</p><h2>Section Heading</h2><p>More content here.</p><h3>Subsection</h3><p>Final paragraph.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } p { color: #555; line-height: 1.6; }",
+			"sandboxCSS": "",
+			"codePrefix": "h1, h2, h3 {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "color: steelblue;",
+			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "Setze <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "descendant-selectors",
+			"title": "Nachfahren-Selektoren",
+			"description": "Ziele auf Elemente innerhalb anderer Elemente mit einem Leerzeichen zwischen den Selektoren. Das ist eines der nützlichsten Muster in CSS.<br><br><pre>.nav a {<br>  color: white;<br>}</pre><br>Das stylt nur Links innerhalb von <kbd>.nav</kbd> und lässt andere Links unverändert.",
+			"task": "Style Navigationslinks anders. Schreibe eine Regel mit <kbd>.nav a</kbd> als Selektor und setze <kbd>color: white</kbd>.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav><p>Read more in our <a href=\"#\">documentation</a>.</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; margin: 0; } .nav { background: steelblue; padding: 1rem; display: flex; gap: 1rem; border-radius: 8px; margin-bottom: 1rem; } .nav a { text-decoration: none; } p a { color: steelblue; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".nav a {\n  color: white;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.nav\\s+a\\s*\\{",
+					"message": "Verwende <kbd>.nav a {</kbd> (Leerzeichen zwischen .nav und a)"
 				},
 				{
-					"type": "contains",
-					"value": "green",
-					"message": ""
+					"type": "property_value",
+					"value": { "property": "color", "expected": "white" },
+					"message": "Setze <kbd>color: white</kbd>"
+				}
+			]
+		},
+		{
+			"id": "nested-styling",
+			"title": "Verschachtelte Styles",
+			"description": "Nachfahren-Selektoren ermöglichen kontextabhängige Styles. Das gleiche Element kann je nach Position unterschiedlich aussehen.<br><br>Zum Beispiel könnten Absätze in einer <kbd>.card</kbd> kleiner sein als Absätze in einem <kbd>article</kbd>.",
+			"task": "Mache Absätze innerhalb der Karte kleiner. Schreibe eine Regel mit <kbd>.card p</kbd> als Selektor und setze <kbd>font-size: 0.9rem</kbd>.",
+			"previewHTML": "<article><h2>Article Title</h2><p>This is a regular article paragraph with normal-sized text for comfortable reading.</p><div class=\"card\"><strong>Quick Tip</strong><p>Card paragraphs should be slightly smaller to fit the compact design.</p></div><p>Back to regular article text here.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } h2 { color: steelblue; margin-top: 0; } p { line-height: 1.6; color: #444; } .card { background: #f0f4f8; padding: 1rem; border-radius: 8px; border-left: 4px solid steelblue; } .card strong { color: steelblue; display: block; margin-bottom: 0.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".card p {\n  font-size: 0.9rem;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.card\\s+p\\s*\\{",
+					"message": "Verwende <kbd>.card p {</kbd> (Leerzeichen zwischen .card und p)"
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "font-size", "expected": "0.9rem" },
+					"message": "Setze <kbd>font-size: 0.9rem</kbd>"
 				}
 			]
 		}

lessons/de/00-welcome.json

@@ -1,16 +1,17 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "welcome",
-	"title": "Code Crispies",
-	"description": "Willkommen bei Code Crispies - deine interaktive Lernplattform für Webentwicklung",
+	"title": "Willkommen",
+	"description": "Erste Schritte mit Code Crispies",
 	"mode": "html",
 	"difficulty": "beginner",
+	"excludeFromProgress": true,
 	"lessons": [
 		{
-			"id": "get-started",
-			"title": "Los geht's",
-			"description": "<strong>Code Crispies</strong> ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich!<br><br><strong>Was du lernst:</strong><br>• <strong>HTML</strong> - Semantische Elemente, Formulare, Tabellen, SVG (<em>HTML Block & Inline</em>, <em>HTML Formulare</em>, <em>HTML Tabellen</em>)<br>• <strong>CSS</strong> - Selektoren, Box-Model, Flexbox, Animationen (<em>CSS Selektoren</em>, <em>CSS Box-Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media Queries und Mobile-First Layouts<br><br><strong>So funktioniert's:</strong><br>1. Lies die Aufgabe im linken Bereich<br>2. Schreibe Code im Editor<br>3. Sieh Live-Ergebnisse in der Vorschau<br>4. Bekomme sofortiges Feedback mit Hinweisen<br><br><strong>Tastenkürzel:</strong> <kbd>Strg+Z</kbd> rückgängig, <kbd>Strg+Umschalt+Z</kbd> wiederholen<br><br><strong>Weitere Ressourcen:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript-Lösungen<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript Technologie-Roadmap",
-			"task": "Schreibe <code>Hello World</code>",
+			"id": "hello",
+			"title": "Hallo!",
+			"description": "<strong>Willkommen bei Code Crispies!</strong> Lerne CSS und HTML durch praktische Übungen.<br><br><strong>So funktioniert's:</strong><br>1. Lies die Aufgabe links<br>2. Schreibe Code im Editor<br>3. Sieh Live-Ergebnisse in der Vorschau<br><br><strong>Tipps:</strong> Nutze <kbd>Strg+Z</kbd> zum Rückgängigmachen. Öffne das Menü (☰) um alle Module zu erkunden.",
+			"task": "Schreibe <code>Hello World</code> zum Starten",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }",
 			"sandboxCSS": "",
@@ -24,39 +25,6 @@
 					"message": "Schreibe <code>Hello World</code>"
 				}
 			]
-		},
-		{
-			"id": "overview",
-			"title": "Übersicht",
-			"description": "<strong>Du bist bereit!</strong> Öffne das Menü (☰) um alle Module zu erkunden.<br><br><strong>Empfohlener Lernpfad:</strong><br>1. <em>HTML Block & Inline</em> - Container vs Inline-Elemente verstehen<br>2. <em>HTML Formulare</em> - Interaktive Formulare mit Validierung erstellen<br>3. <em>CSS Selektoren</em> - Elemente präzise ansprechen<br>4. <em>CSS Box-Model</em> - Padding, Margin, Borders meistern<br>5. <em>CSS Flexbox</em> - Flexible Layouts erstellen<br>6. <em>CSS Animationen</em> - Bewegung und Übergänge hinzufügen<br><br><strong>Tipps:</strong><br>• Nutze <em>Lösung einblenden</em> um das Zielergebnis zu sehen<br>• Dein Fortschritt wird automatisch gespeichert<br>• Probiere Emmet im HTML-Modus: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Entwickelt von <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
-			"task": "Klicke auf Weiter",
-			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }",
-			"sandboxCSS": "",
-			"initialCode": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "Hello",
-					"message": "Klicke auf Weiter"
-				}
-			]
-		},
-		{
-			"id": "playground",
-			"title": "Playground",
-			"mode": "playground",
-			"description": "",
-			"task": "",
-			"previewHTML": "",
-			"previewBaseCSS": "",
-			"sandboxCSS": "",
-			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
-			"solution": "",
-			"previewContainer": "preview-area",
-			"validations": []
 		}
 	]
 }

lessons/de/01-box-model.json

@@ -2,18 +2,18 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "box-model",
 	"title": "CSS Box Model",
-	"description": "Beherrsche die Grundprinzipien der Raumverwaltung im Webdesign durch das CSS Box-Modell.",
+	"description": "Beherrsche die Grundprinzipien der Raumverwaltung im Webdesign durch das CSS Box-Modell. Dieses Modul erkundet, wie Inhalt, Padding, Rahmen und Margins zusammenwirken, um Layout-Strukturen zu erstellen.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "box-model-1",
-			"title": "Box-Modell Komponenten",
-			"description": "Das CSS Box-Modell besteht aus vier konzentrischen Schichten: Inhalt (innerste), Padding, Border und Margin (äußerste). Zu verstehen, wie diese Komponenten zusammenwirken, ist essentiell für präzise Layout-Kontrolle.",
-			"task": "Setze <kbd>padding</kbd> auf <kbd>1rem</kbd>, um Abstand zwischen Inhalt und Rahmen zu schaffen.",
-			"previewHTML": "<div class=\"box\">Box-Modell Komponenten</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }",
+			"title": "Padding",
+			"description": "Jedes Element in CSS ist eine Box mit vier Schichten: Inhalt, Padding, Rahmen und Margin. <strong>Padding</strong> schafft Freiraum zwischen deinem Inhalt und dem Rand der Box.<br><br>Ohne Padding drückt sich Text unangenehm gegen Rahmen. Padding macht Inhalte lesbar und visuell ausgewogen.<br><br><pre>.card {\n  padding: 1rem;\n}</pre>",
+			"task": "Diese Profilkarte sieht beengt aus. Füge <kbd>padding: 1rem</kbd> hinzu, damit der Text Platz zum Atmen hat.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "padding: 1rem;",
@@ -28,56 +28,56 @@
 		},
 		{
 			"id": "box-model-2",
-			"title": "Rahmen hinzufügen",
-			"description": "Rahmen umranden ein Element und schaffen visuelle Trennung. Die border-Kurzschreibweise akzeptiert drei Werte: Breite, Stil und Farbe.",
-			"task": "Setze <kbd>border</kbd> auf <kbd>2px solid darkslategray</kbd>.",
-			"previewHTML": "<div class=\"box\">Diese Box braucht einen Rahmen</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }",
+			"title": "Borders",
+			"description": "Rahmen erstellen visuelle Grenzen um Elemente. Die <kbd>border</kbd>-Kurzschreibweise akzeptiert drei Werte: Breite, Stil und Farbe.<br><br>Häufige Stile: <kbd>solid</kbd>, <kbd>dashed</kbd>, <kbd>dotted</kbd>, <kbd>none</kbd>",
+			"task": "Füge der Karte einen dezenten linken Akzent hinzu mit <kbd>border-left: 4px solid steelblue</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border: 2px solid darkslategray;",
+			"solution": "border-left: 4px solid steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "border:\\s*2px\\s+solid\\s+darkslategray",
-					"message": "Setze <kbd>border: 2px solid darkslategray</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
+					"message": "Setze <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-3",
-			"title": "Außenabstände hinzufügen",
-			"description": "Margins schaffen Abstand zwischen Elementen. Anders als Padding (das den inneren Abstand beeinflusst) existiert Margin außerhalb des Rahmens.",
-			"task": "Setze <kbd>margin</kbd> auf <kbd>1rem</kbd>, um Abstand zum benachbarten Element zu schaffen.",
-			"previewHTML": "<div class=\"container\"><div class=\"outer\">Diese Box braucht Margins</div><div class=\"neighbor\">Benachbartes Element</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .outer { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }",
+			"title": "Margins",
+			"description": "Margins schaffen Abstand <em>außerhalb</em> des Elements und trennen es von Nachbarn. Während Padding den Inhalt nach innen drückt, drücken Margins andere Elemente weg.",
+			"task": "Füge Abstand zwischen diesen beiden Profilkarten hinzu mit <kbd>margin-bottom: 1rem</kbd> auf <kbd>.card</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article><article class=\"card\"><h3>Alex Rivera</h3><p>UX Designer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".outer {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem;",
+			"solution": "margin-bottom: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "margin", "expected": "1rem" },
-					"message": "Setze <kbd>margin: 1rem</kbd>"
+					"value": { "property": "margin-bottom", "expected": "1rem" },
+					"message": "Setze <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-4",
-			"title": "Box-Sizing: Border-Box",
-			"description": "Die box-sizing Eigenschaft bestimmt, wie Elementdimensionen berechnet werden. 'content-box' (Standard) schließt Padding und Border aus, während 'border-box' sie einschließt.",
-			"task": "Setze <kbd>box-sizing</kbd> auf <kbd>border-box</kbd>, damit Padding und Border in die Breite einbezogen werden.",
-			"previewHTML": "<div class=\"sizing-demo\"><div class=\"box default\">Content-box (Standard)</div><div class=\"box sized\">Border-box</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .default { box-sizing: content-box; }",
+			"title": "Box Sizing",
+			"description": "Standardmäßig setzt <kbd>width</kbd> nur die Inhaltsbreite. Padding und Rahmen werden addiert. Das verursacht Layout-Probleme.<br><br><kbd>box-sizing: border-box</kbd> bezieht Padding und Rahmen in die Breite ein, was das Sizing vorhersehbar macht. Die meisten Entwickler wenden dies auf alle Elemente an.",
+			"task": "Beide Karten haben <kbd>width: 200px</kbd>. Die linke nutzt Standard-Sizing (content-box) und wird breiter als erwartet. Korrigiere die rechte Karte mit <kbd>box-sizing: border-box</kbd>.",
+			"previewHTML": "<div class=\"demo\"><article class=\"card\">Content-box</article><article class=\"card fix\">Border-box</article></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .demo { display: flex; gap: 1rem; } .card { width: 200px; padding: 1rem; border: 4px solid steelblue; background: white; border-radius: 8px; }",
 			"sandboxCSS": "",
-			"codePrefix": ".sized {\n  ",
+			"codePrefix": ".fix {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "box-sizing: border-box;",
@@ -92,87 +92,98 @@
 		},
 		{
 			"id": "box-model-5",
-			"title": "Margin-Kollaps",
-			"description": "Wenn zwei vertikale Margins aufeinandertreffen, kollabieren sie zum größeren der beiden Werte statt zu addieren.",
-			"task": "Setze <kbd>margin-bottom</kbd> auf <kbd>2rem</kbd>. Der Abstand zwischen den Absätzen beträgt 2rem (nicht 3rem) durch Margin-Kollaps.",
-			"previewHTML": "<div class=\"collapse-demo\"><p class=\"first\">Dieser Absatz hat einen Bottom-Margin.</p><p class=\"second\">Dieser Absatz hat einen Top-Margin von 1rem.</p></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }",
+			"title": "Padding Shorthand",
+			"description": "Padding akzeptiert 1-4 Werte:<br>• 1 Wert: alle Seiten<br>• 2 Werte: vertikal | horizontal<br>• 4 Werte: oben | rechts | unten | links",
+			"task": "Dieser Button braucht mehr horizontalen als vertikalen Platz. Setze <kbd>padding: 8px 1rem</kbd> (8px oben/unten, 1rem links/rechts).",
+			"previewHTML": "<button class=\"btn\">Follow</button>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .btn { background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }",
 			"sandboxCSS": "",
-			"codePrefix": ".first {\n  ",
+			"codePrefix": ".btn {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin-bottom: 2rem;",
+			"solution": "padding: 8px 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "property_value",
-					"value": { "property": "margin-bottom", "expected": "2rem" },
-					"message": "Setze <kbd>margin-bottom: 2rem</kbd>"
+					"type": "regex",
+					"value": "padding:\\s*8px\\s+1rem",
+					"message": "Setze <kbd>padding: 8px 1rem</kbd>",
+					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-6",
-			"title": "Margin-Kurzschreibweise",
-			"description": "Die Margin-Kurzschreibweise kann alle vier Seiten setzen. Zwei Werte setzen vertikale (oben/unten) und horizontale (links/rechts) Margins.",
-			"task": "Setze <kbd>margin</kbd> auf <kbd>1rem 2rem</kbd> für 1rem oben/unten und 2rem links/rechts.",
-			"previewHTML": "<div class=\"container\"><div class=\"spaced\">Diese Box braucht Margins: 1rem oben/unten, 2rem links/rechts</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .spaced { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }",
+			"title": "Margin Shorthand",
+			"description": "Margin nutzt das gleiche Kurzschreibweisen-Muster wie Padding. Ein häufiges Muster ist das horizontale Zentrieren von Block-Elementen mit <kbd>margin: 0 auto</kbd>.",
+			"task": "Zentriere diese Karte horizontal. Setze <kbd>margin: 0 auto</kbd>, um automatisch gleiche links/rechts-Margins zu berechnen.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { width: 250px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".spaced {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem 2rem;",
+			"solution": "margin: 0 auto;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "margin:\\s*1rem\\s+2rem",
-					"message": "Setze <kbd>margin: 1rem 2rem</kbd>",
+					"value": "margin:\\s*0\\s+auto",
+					"message": "Setze <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-7",
-			"title": "Padding-Kurzschreibweise",
-			"description": "Wie Margin erlaubt Padding-Kurzschreibweise das Setzen aller Seiten. Ein einzelner Wert gilt für alle vier Seiten.",
-			"task": "Setze <kbd>padding</kbd> auf <kbd>2rem</kbd> für gleichmäßiges Padding.",
-			"previewHTML": "<div class=\"padded\">Diese Box braucht gleichmäßiges Padding</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }",
+			"title": "Border Radius",
+			"description": "Obwohl nicht Teil des klassischen Box-Modells, rundet <kbd>border-radius</kbd> die Ecken der Rahmen-Box eines Elements. Verwende <kbd>50%</kbd> bei einem quadratischen Element, um einen Kreis zu erstellen.",
+			"task": "Mache das Avatar-Bild rund mit <kbd>border-radius: 50%</kbd>.",
+			"previewHTML": "<article class=\"card\"><img class=\"avatar\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='25' fill='%23666'/%3E%3Ccircle cx='50' cy='90' r='40' fill='%23666'/%3E%3C/svg%3E\" alt=\"Avatar\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; text-align: center; } .avatar { width: 80px; height: 80px; background: #ddd; margin-bottom: 8px; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".padded {\n  ",
+			"codePrefix": ".avatar {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "padding: 2rem;",
+			"solution": "border-radius: 50%;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "padding", "expected": "2rem" },
-					"message": "Setze <kbd>padding: 2rem</kbd>"
+					"value": { "property": "border-radius", "expected": "50%" },
+					"message": "Setze <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-8",
-			"title": "Rahmen auf einzelnen Seiten",
-			"description": "Für feinere Kontrolle können einzelne Seiten mit border-top, border-right, border-bottom oder border-left angesprochen werden.",
-			"task": "Setze <kbd>border-bottom</kbd> auf <kbd>4px solid dodgerblue</kbd>.",
-			"previewHTML": "<div class=\"line\">Dieses Element braucht nur einen unteren Rahmen</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }",
+			"title": "Complete Card",
+			"description": "Kombinieren wir alles. Diese Benachrichtigungskarte braucht Styling, um professionell auszusehen.",
+			"task": "Style die Benachrichtigung: füge <kbd>padding: 1rem</kbd>, <kbd>border-left: 4px solid coral</kbd> und <kbd>border-radius: 4px</kbd> hinzu.",
+			"previewHTML": "<div class=\"alert\"><strong>New message</strong><p>You have 3 unread notifications</p></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { background: seashell; } .alert strong { color: coral; } .alert p { margin: 4px 0 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".line {\n  ",
+			"codePrefix": ".alert {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border-bottom: 4px solid dodgerblue;",
+			"solution": "padding: 1rem;\n  border-left: 4px solid coral;\n  border-radius: 4px;",
 			"previewContainer": "preview-area",
 			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "Setze <kbd>padding: 1rem</kbd>"
+				},
 				{
 					"type": "regex",
-					"value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue",
-					"message": "Setze <kbd>border-bottom: 4px solid dodgerblue</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+coral",
+					"message": "Setze <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "border-radius", "expected": "4px" },
+					"message": "Setze <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}

lessons/de/05-units-variables.json

@@ -7,119 +7,94 @@
 	"lessons": [
 		{
 			"id": "units-1",
-			"title": "Absolute vs. Relative Einheiten",
-			"description": "Lerne den Unterschied zwischen px, rem, em, % und vw/vh für flexible, responsive Layouts.",
-			"task": "Setze die Breite von <kbd>.box</kbd> auf <kbd>80%</kbd> und max-width auf <kbd>37.5rem</kbd>.",
-			"previewHTML": "<div class=\"box\">Ändere meine Größe!</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background: #f5f5f5; padding: 1rem; }",
+			"title": "Relative Units",
+			"description": "CSS bietet zwei Arten von Einheiten: <em>absolute</em> (wie <kbd>px</kbd>) und <em>relative</em> (wie <kbd>%</kbd> und <kbd>rem</kbd>). Relative Einheiten passen sich ihrem Kontext an und machen Layouts flexibel und zugänglich.<br><br><strong>Häufige relative Einheiten:</strong><br>• <kbd>%</kbd> – Relativ zum Elternelement<br>• <kbd>rem</kbd> – Relativ zur Root-Schriftgröße (typisch 16px)<br>• <kbd>em</kbd> – Relativ zur Schriftgröße des Elements<br><br>Ein häufiges Muster für lesbaren Inhalt: setze <kbd>width: 100%</kbd>, damit es den verfügbaren Platz füllt, dann <kbd>max-width: 40rem</kbd> um die Zeilenlänge für Lesbarkeit zu begrenzen.",
+			"task": "Dieser Artikeltext läuft auf großen Bildschirmen zu breit. Füge <kbd>max-width: 40rem</kbd> hinzu für optimale Lesebreite.",
+			"previewHTML": "<article class=\"article\"><h2>The Art of Typography</h2><p>Good typography is invisible. When text is set well, readers absorb information without noticing the design decisions that make it comfortable to read. Line length is crucial—too wide and eyes get lost, too narrow and reading becomes choppy.</p><p>The ideal line length is 45-75 characters per line. At typical font sizes, this works out to roughly 40rem maximum width.</p></article>",
+			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 1rem; background: #f9f9f9; } .article { background: white; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .article h2 { margin: 0 0 1rem; color: #333; } .article p { margin: 0 0 1rem; line-height: 1.6; color: #444; } .article p:last-child { margin-bottom: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Setze flexible Größen */\n.box {",
+			"codePrefix": ".article {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 80%;\n  max-width: 37.5rem;",
+			"codeSuffix": "\n}",
+			"solution": "max-width: 40rem;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{
-					"type": "contains",
-					"value": "width",
-					"message": "Verwende die <kbd>width</kbd> Eigenschaft",
-					"options": { "caseSensitive": false }
-				},
-				{ "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Setze width auf <kbd>80%</kbd>" },
-				{
-					"type": "contains",
-					"value": "max-width",
-					"message": "Verwende die <kbd>max-width</kbd> Eigenschaft",
-					"options": { "caseSensitive": false }
-				},
 				{
 					"type": "property_value",
-					"value": { "property": "max-width", "expected": "37.5rem" },
-					"message": "Setze max-width auf <kbd>37.5rem</kbd>"
+					"value": { "property": "max-width", "expected": "40rem" },
+					"message": "Setze <kbd>max-width: 40rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "units-2",
-			"title": "CSS Custom Properties",
-			"description": "Definiere und verwende Variablen (--custom properties) wieder, um deine Theme-Werte zu zentralisieren.",
-			"task": "Erstelle eine <code>--main-color</code> Variable in :root mit <kbd>#6200ee</kbd> und wende sie als Rahmenfarbe auf <kbd>.themed</kbd> an.",
-			"previewHTML": "<div class=\"themed\">Variablen-Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }",
+			"title": "CSS Variables",
+			"description": "CSS Custom Properties (Variablen) erlauben dir, wiederverwendbare Werte zu definieren. Definiere sie mit <kbd>--name</kbd> und verwende sie mit <kbd>var(--name)</kbd>. Variablen auf <kbd>:root</kbd> sind überall verfügbar.",
+			"task": "Definiere <kbd>--brand: steelblue</kbd> in <kbd>:root</kbd>, dann verwende es als <kbd>background</kbd>-Farbe für <kbd>.btn</kbd>.",
+			"previewHTML": "<div class=\"actions\"><button class=\"btn\">Subscribe</button><button class=\"btn\">Learn More</button></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .actions { display: flex; gap: 1rem; } .btn { color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #ccc; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Definiere und verwende eine CSS-Variable */\n:root {",
+			"codePrefix": ":root {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}\n.themed { }",
-			"solution": "  --main-color: #6200ee;\n}\n.themed {\n  border-color: var(--main-color);",
+			"codeSuffix": "\n}\n\n.btn {\n  background: var(--brand);\n}",
+			"solution": "--brand: steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "contains",
-					"value": "--main-color",
-					"message": "Definiere <kbd>--main-color</kbd> in :root",
+					"value": "--brand",
+					"message": "Definiere die <kbd>--brand</kbd> Variable",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
-					"value": "var(--main-color)",
-					"message": "Verwende <kbd>var(--main-color)</kbd>",
+					"value": "steelblue",
+					"message": "Setze den Wert auf <kbd>steelblue</kbd>",
 					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "property_value",
-					"value": { "property": "border", "expected": "var(--main-color)" },
-					"message": "Wende die Variable auf die Rahmenfarbe an",
-					"options": { "exact": false }
 				}
 			]
 		},
 		{
 			"id": "units-3",
-			"title": "Einheiten-Berechnungen (calc)",
-			"description": "Verwende die <code>calc()</code> Funktion, um verschiedene Einheiten in einem Ausdruck zu kombinieren.",
-			"task": "Setze die Breite von <kbd>.sized</kbd> auf <kbd>calc(100% - 2rem)</kbd> und min-height auf <kbd>calc(10vh + 1rem)</kbd>.",
-			"previewHTML": "<div class=\"sized\">Calc Demo</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }",
+			"title": "calc() Function",
+			"description": "Die <kbd>calc()</kbd> Funktion ermöglicht das Mischen verschiedener Einheiten in Berechnungen. Das ist essenziell für Layouts, die feste und flexible Größen kombinieren, wie ein Sidebar-Layout.",
+			"task": "Der Hauptinhalt soll den verbleibenden Platz nach der 200px Sidebar füllen. Setze <kbd>width: calc(100% - 200px)</kbd> auf <kbd>.main</kbd>.",
+			"previewHTML": "<div class=\"layout\"><aside class=\"sidebar\">Sidebar<br>Navigation</aside><main class=\"main\"><h2>Main Content</h2><p>This area should fill the remaining width after accounting for the fixed-width sidebar.</p></main></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .layout { display: flex; gap: 1rem; } .sidebar { width: 200px; background: #1a1a2e; color: white; padding: 1rem; border-radius: 8px; flex-shrink: 0; } .main { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .main h2 { margin: 0 0 8px; } .main p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Verwende calc für dynamische Größen */\n.sized {",
+			"codePrefix": ".main {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: calc(100% - 2rem);\n  min-height: calc(10vh + 1rem);",
+			"codeSuffix": "\n}",
+			"solution": "width: calc(100% - 200px);",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "calc", "message": "Verwende die <kbd>calc()</kbd> Funktion", "options": { "caseSensitive": false } },
 				{
 					"type": "regex",
-					"value": "width:\\s*calc\\(100% - 2rem\\)",
-					"message": "Width sollte calc(100% - 2rem) sein",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "regex",
-					"value": "min-height:\\s*calc\\(10vh \\+ 1rem\\)",
-					"message": "Min-height sollte calc(10vh + 1rem) sein",
+					"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
+					"message": "Setze <kbd>width: calc(100% - 200px)</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "units-4",
-			"title": "Viewport & Responsive Einheiten",
-			"description": "Steuere Layouts relativ zur Viewport-Größe mit vw, vh und vmin/vmax Einheiten.",
-			"task": "Gib <kbd>.view</kbd> eine Breite von <kbd>50vw</kbd> und Höhe von <kbd>20vh</kbd>.",
-			"previewHTML": "<div class=\"view\">Viewport-Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .view { background: #ffe0b2; }",
+			"title": "Viewport Units",
+			"description": "Viewport-Einheiten dimensionieren Elemente relativ zum Browserfenster:<br>• <kbd>vw</kbd> – 1% der Viewport-Breite<br>• <kbd>vh</kbd> – 1% der Viewport-Höhe<br><br>Diese sind perfekt für Vollbild-Sektionen wie Hero-Banner.",
+			"task": "Mache diese Hero-Sektion so hoch wie das Viewport mit <kbd>min-height: 100vh</kbd>.",
+			"previewHTML": "<section class=\"hero\"><h1>Welcome</h1><p>Scroll down to explore</p></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .hero { background: linear-gradient(135deg, #1a1a2e 0%, steelblue 100%); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .hero h1 { margin: 0 0 1rem; font-size: 2.5rem; } .hero p { margin: 0; opacity: 0.8; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Verwende Viewport-Einheiten */\n.view {",
+			"codePrefix": ".hero {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 50vw;\n  height: 20vh;",
+			"codeSuffix": "\n}",
+			"solution": "min-height: 100vh;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "vw", "message": "Verwende <kbd>vw</kbd> Einheit", "options": { "caseSensitive": false } },
-				{ "type": "contains", "value": "vh", "message": "Verwende <kbd>vh</kbd> Einheit", "options": { "caseSensitive": false } },
-				{ "type": "property_value", "value": { "property": "width", "expected": "50vw" }, "message": "Setze width auf <kbd>50vw</kbd>" },
-				{ "type": "property_value", "value": { "property": "height", "expected": "20vh" }, "message": "Setze height auf <kbd>20vh</kbd>" }
+				{
+					"type": "property_value",
+					"value": { "property": "min-height", "expected": "100vh" },
+					"message": "Setze <kbd>min-height: 100vh</kbd>"
+				}
 			]
 		}
 	]

lessons/de/06-transitions-animations.json

@@ -7,13 +7,13 @@
 	"lessons": [
 		{
 			"id": "transitions-1",
-			"title": "Einfache Transitions",
+			"title": "Transitions",
 			"description": "Lerne, wie du <kbd>transition</kbd> auf Eigenschaften anwendest für sanfte Änderungen bei Zustandswechseln.<br><br><pre>transition: property duration;\n/* z.B. transition: background-color 0.3s; */</pre>",
-			"task": "Füge <kbd>transition: background-color 0.3s</kbd> zu <kbd>.btn</kbd> hinzu, damit die Farbe beim Hover sanft überblendet.",
-			"previewHTML": "<button class=\"btn\">Hover mich</button>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: #6200ee; color: white; padding: 0.5rem 1rem; border: none; } .btn:hover { background: #3700b3; }",
+			"task": "Füge <kbd>transition: background-color 0.3s</kbd> hinzu, damit die Farbe beim Hover sanft überblendet.",
+			"previewHTML": "<button class=\"btn\">Hover Me</button>",
+			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: black; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; } .btn:hover { background: white; color: black; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Füge Transition hinzu */\n.btn {",
+			"codePrefix": "/* Add transition */\n.btn {",
 			"initialCode": "",
 			"codeSuffix": "}",
 			"solution": "  transition: background-color 0.3s;",
@@ -35,13 +35,13 @@
 		},
 		{
 			"id": "transitions-2",
-			"title": "Transition Timing-Funktionen",
+			"title": "Timing Funcs",
 			"description": "Erkunde Easing-Funktionen wie <kbd>ease</kbd>, <kbd>linear</kbd>, <kbd>ease-in</kbd>, <kbd>ease-out</kbd>, um das Animationstempo zu steuern.",
-			"task": "Setze <kbd>transition-timing-function</kbd> auf <kbd>ease-in-out</kbd> bei <kbd>.btn</kbd>.",
+			"task": "Setze <kbd>transition-timing-function</kbd> auf <kbd>ease-in-out</kbd>.",
 			"previewHTML": "<button class=\"btn\">Timing</button>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: #6200ee; color: white; padding: 0.5rem 1rem; border: none; transition: background-color 0.3s; } .btn:hover { background: #03dac6; }",
+			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: navy; color: gold; padding: 0.5rem 1rem; border: none; cursor: pointer; transition: all 0.5s; } .btn:hover { background: gold; color: navy; transform: scale(1.1); }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Setze Timing-Funktion */\n.btn {",
+			"codePrefix": "/* Set timing function */\n.btn {",
 			"initialCode": "",
 			"codeSuffix": "}",
 			"solution": "  transition-timing-function: ease-in-out;",
@@ -56,19 +56,19 @@
 				{
 					"type": "property_value",
 					"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
-					"message": "Setze <kbd>transition-timing-function: ease-in-out</kbd>"
+					"message": "Setze timing auf <kbd>ease-in-out</kbd>"
 				}
 			]
 		},
 		{
 			"id": "transitions-3",
-			"title": "Keyframe-Animationen Grundlagen",
+			"title": "Keyframes",
 			"description": "Erstelle benannte Animationen mit <kbd>@keyframes</kbd> und wende sie mit der <kbd>animation</kbd> Kurzschreibweise an.<br><br><pre>@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}</pre>",
 			"task": "Definiere bei <kbd>50%</kbd> ein <kbd>transform: translateY(-20px)</kbd> und wende <kbd>animation: bounce 1s infinite</kbd> auf <kbd>.ball</kbd> an.",
 			"previewHTML": "<div class=\"ball\"></div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: #ff0266; border-radius: 50%; margin: 2rem auto; }",
+			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; margin: 2rem auto; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Definiere Keyframes und wende Animation an */\n@keyframes bounce {",
+			"codePrefix": "/* Define keyframes and apply animation */\n@keyframes bounce {",
 			"initialCode": "",
 			"codeSuffix": "}\n.ball { }",
 			"solution": "  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;",
@@ -102,35 +102,22 @@
 		},
 		{
 			"id": "transitions-4",
-			"title": "Animations-Eigenschaften im Detail",
+			"title": "Animation Properties",
 			"description": "Verfeinere Animationen mit <kbd>animation-delay</kbd>, <kbd>animation-iteration-count</kbd>, <kbd>animation-direction</kbd> und <kbd>animation-fill-mode</kbd>.",
-			"task": "Wende die <kbd>fade</kbd> Animation auf <kbd>.box</kbd> an mit <kbd>animation-name: fade</kbd>, <kbd>animation-duration: 2s</kbd>, <kbd>animation-delay: 1s</kbd>, <kbd>animation-iteration-count: 2</kbd> und <kbd>animation-fill-mode: forwards</kbd>.",
-			"previewHTML": "<div class=\"box\">Fade Demo</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { width: 100px; height: 100px; background: #4caf50; margin: 2rem auto; }",
+			"task": "Wende die <kbd>pulse</kbd> Animation auf <kbd>.box</kbd> an mit <kbd>animation-name: pulse</kbd>, <kbd>animation-duration: 2s</kbd>, <kbd>animation-delay: 1s</kbd>, <kbd>animation-iteration-count: 2</kbd> und <kbd>animation-fill-mode: forwards</kbd>.",
+			"previewHTML": "<div class=\"box\">Pulse</div>",
+			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { width: 100px; height: 100px; background: black; color: white; display: flex; align-items: center; justify-content: center; margin: 2rem auto; } @keyframes pulse { 0% { background: black; color: white; transform: scale(1); } 50% { background: white; color: black; transform: scale(1.2); } 100% { background: limegreen; color: black; transform: scale(1); } }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Definiere fade und setze Eigenschaften */\n@keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n.box {",
+			"codePrefix": "/* Apply animation properties */\n.box {",
 			"initialCode": "",
 			"codeSuffix": "}",
-			"solution": "  animation-name: fade;\n  animation-duration: 2s;\n  animation-delay: 1s;\n  animation-iteration-count: 2;\n  animation-fill-mode: forwards;",
+			"solution": "  animation-name: pulse;\n  animation-duration: 2s;\n  animation-delay: 1s;\n  animation-iteration-count: 2;\n  animation-fill-mode: forwards;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "contains",
-					"value": "animation-delay",
-					"message": "Verwende <kbd>animation-delay</kbd>",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "contains",
-					"value": "animation-iteration-count",
-					"message": "Verwende <kbd>animation-iteration-count</kbd>",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "contains",
-					"value": "animation-fill-mode",
-					"message": "Verwende <kbd>animation-fill-mode</kbd>",
-					"options": { "caseSensitive": false }
+					"type": "property_value",
+					"value": { "property": "animation-name", "expected": "pulse" },
+					"message": "Setze <kbd>animation-name: pulse</kbd>"
 				},
 				{
 					"type": "property_value",

lessons/de/08-responsive.json

@@ -7,13 +7,13 @@
 	"lessons": [
 		{
 			"id": "responsive-1",
-			"title": "Einführung in Media Queries",
-			"description": "Verstehe die Syntax und Anwendungsfälle für CSS Media Queries, um Stile bedingt basierend auf Viewport-Eigenschaften anzuwenden.",
-			"task": "Schreibe eine Media Query, die gilt, wenn der Viewport maximal 600px breit ist, und ändere den Hintergrund von <kbd>.panel</kbd> auf <kbd>lightcoral</kbd>.",
-			"previewHTML": "<div class=\"panel\">Ändere die Fenstergröße</div>",
+			"title": "Media Queries",
+			"description": "Verstehe die Syntax und Anwendungsfälle für CSS Media Queries, um Stile bedingt basierend auf Viewport-Eigenschaften anzuwenden.<br><br><pre>@media (max-width: 600px) {\n  .panel {\n    background: lightcoral;\n  }\n}</pre>",
+			"task": "Schreibe eine Media Query mit <kbd>@media (max-width: 600px)</kbd>, die den Hintergrund von <kbd>.panel</kbd> auf <kbd>lightcoral</kbd> ändert.",
+			"previewHTML": "<div class=\"panel\">Resize the window</div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Füge deine Media Query unten ein */\n",
+			"codePrefix": "/* Add your media query below */\n",
 			"initialCode": "",
 			"codeSuffix": "",
 			"solution": "@media (max-width: 600px) {\n  .panel {\n    background: lightcoral;\n  }\n}",
@@ -22,7 +22,7 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(max-width:\\s*600px\\)",
-					"message": "Verwende eine Media Query für max-width: 600px",
+					"message": "Verwende <kbd>@media (max-width: 600px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
@@ -31,68 +31,49 @@
 					"message": "Adressiere <kbd>.panel</kbd> innerhalb der Media Query",
 					"options": { "caseSensitive": false }
 				},
-				{
-					"type": "contains",
-					"value": "background",
-					"message": "Ändere die <kbd>background</kbd> Eigenschaft",
-					"options": { "caseSensitive": false }
-				},
 				{
 					"type": "property_value",
 					"value": { "property": "background", "expected": "lightcoral" },
-					"message": "Setze background auf <kbd>lightcoral</kbd>",
+					"message": "Setze <kbd>background: lightcoral</kbd>",
 					"options": { "exact": false }
 				}
 			]
 		},
 		{
 			"id": "responsive-2",
-			"title": "Flüssige Typografie",
-			"description": "Verwende relative Einheiten wie vw, damit Schriftgrößen mit der Viewport-Breite skalieren.",
-			"task": "Setze die font-size von <kbd>.text</kbd> auf <kbd>5vw</kbd>, damit sie sich mit dem Viewport ändert.",
-			"previewHTML": "<p class=\"text\">Flüssige Typografie</p>",
+			"title": "Fluid Type",
+			"description": "Verwende relative Einheiten wie <kbd>vw</kbd>, damit Schriftgrößen mit der Viewport-Breite skalieren.",
+			"task": "Setze <kbd>font-size: 5vw</kbd>, damit sie sich mit dem Viewport ändert.",
+			"previewHTML": "<p class=\"text\">Fluid Typography</p>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Wende flüssige Schriftgröße an */\n.text {",
+			"codePrefix": "/* Apply fluid font sizing */\n.text {",
 			"initialCode": "",
 			"codeSuffix": "}",
 			"solution": "  font-size: 5vw;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{
-					"type": "contains",
-					"value": "font-size",
-					"message": "Verwende die <kbd>font-size</kbd> Eigenschaft",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "contains",
-					"value": "vw",
-					"message": "Verwende <kbd>vw</kbd> Einheit für flüssige Größe",
-					"options": { "caseSensitive": false }
-				},
-				{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Setze font-size auf <kbd>5vw</kbd>" }
+				{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Setze <kbd>font-size: 5vw</kbd>" }
 			]
 		},
 		{
 			"id": "responsive-3",
-			"title": "Flexible Raster",
-			"description": "Kombiniere CSS Grid mit auto-fit oder auto-fill für responsive Spaltenlayouts.",
-			"task": "Definiere <kbd>.cards</kbd> mit <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> und einem gap von <kbd>1rem</kbd>.",
-			"previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
+			"title": "Responsive Grid",
+			"description": "Kombiniere CSS Grid mit <kbd>auto-fit</kbd> oder <kbd>auto-fill</kbd> für responsive Spaltenlayouts, die automatisch die Anzahl der Spalten basierend auf verfügbarem Platz anpassen.",
+			"task": "Füge <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> und <kbd>gap: 1rem</kbd> hinzu.",
+			"previewHTML": "<section class=\"features\"><article class=\"feature\"><h3>Fast</h3><p>Lightning quick load times</p></article><article class=\"feature\"><h3>Secure</h3><p>Enterprise-grade security</p></article><article class=\"feature\"><h3>Reliable</h3><p>99.9% uptime guaranteed</p></article><article class=\"feature\"><h3>Support</h3><p>24/7 customer service</p></article></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .feature { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .feature h3 { margin: 0 0 8px; color: steelblue; } .feature p { margin: 0; color: #666; font-size: 0.9rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Erstelle ein responsives Raster */\n.cards {",
+			"codePrefix": ".features {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
+			"codeSuffix": "\n}",
+			"solution": "display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "contains",
-					"value": "grid-template-columns",
-					"message": "Definiere <kbd>grid-template-columns</kbd>",
-					"options": { "caseSensitive": false }
+					"type": "property_value",
+					"value": { "property": "display", "expected": "grid" },
+					"message": "Setze <kbd>display: grid</kbd>"
 				},
 				{
 					"type": "regex",
@@ -100,18 +81,22 @@
 					"message": "Verwende <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
 					"options": { "caseSensitive": false }
 				},
-				{ "type": "contains", "value": "gap", "message": "Verwende die <kbd>gap</kbd> Eigenschaft", "options": { "caseSensitive": false } }
+				{
+					"type": "property_value",
+					"value": { "property": "gap", "expected": "1rem" },
+					"message": "Setze <kbd>gap: 1rem</kbd>"
+				}
 			]
 		},
 		{
 			"id": "responsive-4",
-			"title": "Mobile-First Media Queries",
+			"title": "Mobile-First",
 			"description": "Verfolge einen Mobile-First-Ansatz: Schreibe Basis-Stile für kleine Bildschirme und erweitere für größere Viewports.",
-			"task": "Schreibe eine Media Query für min-width 768px, die die Breite von <kbd>.sidebar</kbd> auf <kbd>250px</kbd> setzt.",
-			"previewHTML": "<aside class=\"sidebar\">Seitenleiste</aside>",
+			"task": "Schreibe eine Media Query mit <kbd>@media (min-width: 768px)</kbd>, die die Breite von <kbd>.sidebar</kbd> auf <kbd>250px</kbd> setzt.",
+			"previewHTML": "<aside class=\"sidebar\">Sidebar</aside>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sidebar { background: #c8e6c9; padding: 1rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Füge Mobile-First-Erweiterung hinzu */\n",
+			"codePrefix": "/* Add mobile-first enhancement */\n",
 			"initialCode": "",
 			"codeSuffix": "",
 			"solution": "@media (min-width: 768px) {\n  .sidebar {\n    width: 250px;\n  }\n}",
@@ -120,7 +105,7 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(min-width:\\s*768px\\)",
-					"message": "Verwende eine Media Query für min-width: 768px",
+					"message": "Verwende <kbd>@media (min-width: 768px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
@@ -132,7 +117,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "width", "expected": "250px" },
-					"message": "Setze width auf <kbd>250px</kbd>",
+					"message": "Setze <kbd>width: 250px</kbd>",
 					"options": { "exact": false }
 				}
 			]

lessons/de/20-html-elements.json

@@ -63,35 +63,6 @@
 					"message": "Füge eine <kbd>&lt;h1&gt;</kbd>-Überschrift in deinem Header hinzu"
 				}
 			]
-		},
-		{
-			"id": "div-vs-span",
-			"title": "Generische Container: div und span",
-			"description": "Wenn du einen Container ohne semantische Bedeutung benötigst:<br><br><kbd>&lt;div&gt;</kbd> - Generischer Block-Container (für Layout/Gruppierung)<br><kbd>&lt;span&gt;</kbd> - Generischer Inline-Container (zum Stylen von Textteilen)<br><br>Verwende semantische Elemente wenn möglich, div/span wenn kein semantisches Element passt.",
-			"task": "Umschließe das Wort 'hervorgehoben' mit einem <kbd>&lt;span&gt;</kbd>, um es anders zu gestalten. Umschließe das gesamte Zitat mit einem <kbd>&lt;div&gt;</kbd>.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
-			"sandboxCSS": "",
-			"initialCode": "Der hervorgehoben Moment war unvergesslich.",
-			"solution": "<div>Der <span>hervorgehoben</span> Moment war unvergesslich.</div>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "div",
-					"message": "Umschließe alles mit einem <kbd>&lt;div&gt;</kbd>-Element"
-				},
-				{
-					"type": "element_exists",
-					"value": "span",
-					"message": "Füge ein <kbd>&lt;span&gt;</kbd> um das Wort 'hervorgehoben' hinzu"
-				},
-				{
-					"type": "element_text",
-					"value": { "selector": "span", "text": "hervorgehoben" },
-					"message": "Das <kbd>&lt;span&gt;</kbd> sollte das Wort 'hervorgehoben' enthalten"
-				}
-			]
 		}
 	]
 }

lessons/de/22-html-forms-validation.json

@@ -1,21 +1,21 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-validation",
-	"title": "HTML Validierung",
-	"description": "Lerne die eingebauten HTML5-Formular-Validierungsattribute kennen",
+	"title": "Formularvalidierung",
+	"description": "Verwende die eingebaute HTML5-Validierung für bessere Benutzererfahrung",
 	"mode": "html",
-	"difficulty": "intermediate",
+	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "required-fields",
 			"title": "Pflichtfelder",
-			"description": "Das <kbd>required</kbd>-Attribut verhindert das Absenden des Formulars, wenn das Feld leer ist.<br><br>Füge es zu jeder Eingabe hinzu, die ausgefüllt werden muss:<br><kbd>&lt;input type=\"text\" required&gt;</kbd><br><br>Der Browser zeigt automatisch eine Validierungsmeldung an.",
-			"task": "Mache sowohl das Name- als auch das E-Mail-Feld zu Pflichtfeldern, indem du das <kbd>required</kbd>-Attribut hinzufügst.",
+			"description": "Das <kbd>required</kbd>-Attribut verhindert das Absenden des Formulars, wenn das Feld leer ist. Der Browser zeigt automatisch eine Validierungsmeldung an - kein JavaScript nötig!<br><br>Füge es zu jeder Eingabe hinzu, die ausgefüllt werden muss:<br><kbd>&lt;input type=\"text\" required&gt;</kbd>",
+			"task": "Mache sowohl das Name- als auch das E-Mail-Feld zu Pflichtfeldern, indem du das <kbd>required</kbd>-Attribut zu jeder Eingabe hinzufügst.",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 320px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } input:focus { outline: 2px solid steelblue; border-color: transparent; } button { margin-top: 20px; padding: 10px 20px; background: steelblue; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">E-Mail: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
-			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">E-Mail: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"name\">Name *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">E-Mail *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Name *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">E-Mail *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -29,84 +29,6 @@
 					"message": "Füge <kbd>required</kbd> zum E-Mail-Feld hinzu"
 				}
 			]
-		},
-		{
-			"id": "input-constraints",
-			"title": "Eingabebeschränkungen",
-			"description": "Kontrolliere, was Benutzer eingeben können:<br><br><kbd>minlength</kbd> / <kbd>maxlength</kbd> - Textlängenbegrenzung<br><kbd>min</kbd> / <kbd>max</kbd> - Zahlenbereich<br><kbd>pattern</kbd> - Regex-Musterabgleich<br><kbd>placeholder</kbd> - Hinweistext (kein Label!)",
-			"task": "Füge Validierung zur Passwort-Eingabe hinzu:<br>1. Füge <kbd>minlength=\"8\"</kbd> für die Mindestlänge hinzu<br>2. Füge <kbd>maxlength=\"20\"</kbd> für die Maximallänge hinzu<br>3. Füge <kbd>placeholder=\"Passwort eingeben\"</kbd> als Hinweis hinzu",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } small { display: block; font-size: 12px; color: #666; margin-top: 4px; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Muss 8-20 Zeichen lang sein</small>\n  \n  <button type=\"submit\">Konto erstellen</button>\n</form>",
-			"solution": "<form>\n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Passwort eingeben\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Muss 8-20 Zeichen lang sein</small>\n  \n  <button type=\"submit\">Konto erstellen</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
-					"message": "Füge <kbd>minlength</kbd>=\"8\" zum Passwort hinzu"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
-					"message": "Füge <kbd>maxlength</kbd>=\"20\" zum Passwort hinzu"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "placeholder", "value": null },
-					"message": "Füge einen <kbd>placeholder</kbd> hinzu, der andeutet, was einzugeben ist"
-				}
-			]
-		},
-		{
-			"id": "complete-registration",
-			"title": "Vollständiges Registrierungsformular",
-			"description": "Erstelle ein vollständiges Registrierungsformular mit allen Validierungskonzepten:<br><br>- Pflichtfelder mit * markiert<br>- E-Mail-Validierung (type=\"email\" verwenden)<br>- Passwort mit Längenbeschränkungen<br>- AGB-Checkbox (Pflichtfeld)<br>- Absende-Button",
-			"task": "Vervollständige das Registrierungsformular. Füge <kbd>required</kbd>-Attribute, passende Eingabetypen und Validierungsbeschränkungen hinzu.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } input[type='checkbox'] { width: auto; margin-right: 8px; vertical-align: middle; } label:has(input[type='checkbox']) { display: flex; align-items: center; font-weight: normal; } button { width: 100%; margin-top: 20px; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <h2>Konto erstellen</h2>\n  \n  <label for=\"fullname\">Vollständiger Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\">\n  \n  <label for=\"email\">E-Mail *</label>\n  <input id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Passwort *</label>\n  <input id=\"password\" name=\"password\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n    Ich stimme den Nutzungsbedingungen zu *\n  </label>\n  \n  <button type=\"submit\">Registrieren</button>\n</form>",
-			"solution": "<form>\n  <h2>Konto erstellen</h2>\n  \n  <label for=\"fullname\">Vollständiger Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">E-Mail *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Passwort *</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    Ich stimme den Nutzungsbedingungen zu *\n  </label>\n  \n  <button type=\"submit\">Registrieren</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#fullname", "attr": "required", "value": true },
-					"message": "Mache das Feld für den vollständigen Namen zum Pflichtfeld"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "type", "value": "email" },
-					"message": "Setze den Eingabetyp für E-Mail auf <kbd>email</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "required", "value": true },
-					"message": "Mache das E-Mail-Feld zum Pflichtfeld"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "type", "value": "password" },
-					"message": "Setze den Eingabetyp für Passwort auf <kbd>password</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "required", "value": true },
-					"message": "Mache das Passwort-Feld zum Pflichtfeld"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "minlength", "value": "8" },
-					"message": "Füge <kbd>minlength</kbd>=\"8\" zum Passwort hinzu"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#terms", "attr": "required", "value": true },
-					"message": "Mache die AGB-Checkbox zum Pflichtfeld"
-				}
-			]
 		}
 	]
 }

lessons/de/24-html-progress-meter.json

@@ -44,12 +44,12 @@
 			"id": "progress-indeterminate",
 			"title": "Unbestimmter Fortschritt",
 			"description": "Wenn der Fortschritt unbekannt ist (wie beim Laden), lasse das <kbd>value</kbd>-Attribut weg. Dies erstellt einen animierten unbestimmten Zustand.<br><br>Nützlich für Netzwerkanfragen oder Prozesse mit unbekannter Dauer.",
-			"task": "Erstelle eine Ladeanzeige:<br>1. Füge ein <kbd>&lt;p&gt;</kbd> mit <code>Lädt...</code> hinzu<br>2. Füge ein <kbd>&lt;progress&gt;</kbd> ohne value-Attribut hinzu",
+			"task": "Erstelle eine Ladeanzeige:<br>1. Füge ein <kbd>&lt;p&gt;</kbd> mit <code>Loading...</code> hinzu<br>2. Füge ein <kbd>&lt;progress&gt;</kbd> ohne value-Attribut hinzu",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<p>Lädt...</p>\n<progress></progress>",
+			"solution": "<p>Loading...</p>\n<progress></progress>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -68,12 +68,12 @@
 			"id": "meter-gauge",
 			"title": "Meter-Anzeigen",
 			"description": "Das <kbd>&lt;meter&gt;</kbd>-Element zeigt einen Skalarwert innerhalb eines Bereichs. Verwende es für Messungen wie Speicherplatz, Akku oder Bewertungen.<br><br>Setze <kbd>low</kbd>, <kbd>high</kbd> und <kbd>optimum</kbd>, um gute/schlechte Bereiche zu definieren - der Browser färbt es entsprechend ein!",
-			"task": "Erstelle eine Akku-Anzeige:<br>1. Füge ein <kbd>&lt;label&gt;</kbd> mit <code>Akku:</code> hinzu<br>2. Füge ein <kbd>&lt;meter&gt;</kbd> hinzu mit:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> und <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> und <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
+			"task": "Erstelle eine Akku-Anzeige:<br>1. Füge ein <kbd>&lt;label&gt;</kbd> mit <code>Battery:</code> hinzu<br>2. Füge ein <kbd>&lt;meter&gt;</kbd> hinzu mit:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> und <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> und <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<label for=\"battery\">Akku:</label>\n<meter id=\"battery\" value=\"0.8\" min=\"0\" max=\"1\" low=\"0.2\" high=\"0.8\" optimum=\"1\">80%</meter>",
+			"solution": "<label for=\"battery\">Battery:</label>\n<meter id=\"battery\" value=\"0.8\" min=\"0\" max=\"1\" low=\"0.2\" high=\"0.8\" optimum=\"1\">80%</meter>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -86,11 +86,31 @@
 					"value": { "selector": "meter", "attr": "value", "value": "0.8" },
 					"message": "Setze <kbd>value=</kbd>\"0.8\" beim Meter"
 				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "min", "value": "0" },
+					"message": "Setze <kbd>min=</kbd>\"0\" beim Meter"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "max", "value": "1" },
+					"message": "Setze <kbd>max=</kbd>\"1\" beim Meter"
+				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "low", "value": "0.2" },
 					"message": "Setze <kbd>low=</kbd>\"0.2\", um den niedrigen Schwellenwert zu definieren"
 				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "high", "value": "0.8" },
+					"message": "Setze <kbd>high=</kbd>\"0.8\", um den hohen Schwellenwert zu definieren"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "optimum", "value": "1" },
+					"message": "Setze <kbd>optimum=</kbd>\"1\", um den optimalen Wert anzugeben"
+				},
 				{
 					"type": "element_exists",
 					"value": "label",

lessons/de/30-html-tables.json

@@ -2,20 +2,20 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-tables",
 	"title": "HTML Tabellen",
-	"description": "Erstelle strukturierte Datentabellen mit Überschriften und Beschriftungen",
+	"description": "Erstelle strukturierte Datentabellen mit semantischem Markup",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "table-basic",
-			"title": "Grundlegende Tabellenstruktur",
-			"description": "Tabellen verwenden <kbd>&lt;table&gt;</kbd> mit <kbd>&lt;tr&gt;</kbd> für Zeilen. In Zeilen nutze <kbd>&lt;th&gt;</kbd> für Überschriften und <kbd>&lt;td&gt;</kbd> für Datenzellen.<br><br>Das <kbd>&lt;caption&gt;</kbd>-Element bietet einen zugänglichen Titel für die Tabelle.",
-			"task": "Erstelle eine einfache Tabelle mit:<br>1. Einer <kbd>&lt;caption&gt;</kbd> mit <code>Obstpreise</code><br>2. Einer Kopfzeile mit <code>Obst</code> und <code>Preis</code> Spalten<br>3. Mindestens 2 Datenzeilen",
+			"title": "Datentabellen",
+			"description": "Tabellen zeigen strukturierte Daten in Zeilen und Spalten. Verwende <kbd>&lt;table&gt;</kbd> als Container, <kbd>&lt;tr&gt;</kbd> für Zeilen, <kbd>&lt;th&gt;</kbd> für Kopfzellen und <kbd>&lt;td&gt;</kbd> für Datenzellen.<br><br>Füge <kbd>&lt;caption&gt;</kbd> hinzu für einen zugänglichen Titel, der den Tabelleninhalt beschreibt.",
+			"task": "Erstelle eine Preistabelle:<br>1. Eine <kbd>&lt;caption&gt;</kbd> mit <code>Pricing</code><br>2. Eine Kopfzeile mit <code>Plan</code> und <code>Price</code><br>3. Zwei Datenzeilen für Basic ($9) und Pro ($29)",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px; font-weight: 600; font-size: 1.2rem; color: #333; background: #f8f9fa; } th, td { padding: 12px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 500; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 350px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 16px; font-weight: 600; font-size: 1.1rem; color: #333; background: #f8f9fa; } th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: steelblue; color: white; font-weight: 500; } tr:last-child td { border-bottom: none; } tr:hover td { background: #f8f9fa; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<table>\n  <caption>Obstpreise</caption>\n  <tr>\n    <th>Obst</th>\n    <th>Preis</th>\n  </tr>\n  <tr>\n    <td>Apfel</td>\n    <td>1,50 €</td>\n  </tr>\n  <tr>\n    <td>Banane</td>\n    <td>0,75 €</td>\n  </tr>\n</table>",
+			"solution": "<table>\n  <caption>Pricing</caption>\n  <tr>\n    <th>Plan</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Basic</td>\n    <td>$9</td>\n  </tr>\n  <tr>\n    <td>Pro</td>\n    <td>$29</td>\n  </tr>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -26,100 +26,17 @@
 				{
 					"type": "element_exists",
 					"value": "caption",
-					"message": "Füge eine <kbd>&lt;caption&gt;</kbd> als Tabellentitel hinzu"
+					"message": "Füge eine <kbd>&lt;caption&gt;</kbd> für den Tabellentitel hinzu"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "th", "min": 2 },
-					"message": "Füge mindestens 2 Überschriftszellen (th) hinzu"
+					"message": "Füge Kopfzellen (<kbd>&lt;th&gt;</kbd>) für Plan und Price hinzu"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "tr", "min": 3 },
-					"message": "Füge mindestens 3 Zeilen hinzu (1 Kopf + 2 Daten)"
-				}
-			]
-		},
-		{
-			"id": "table-thead-tbody",
-			"title": "Tabellenkopf & -körper",
-			"description": "Verwende <kbd>&lt;thead&gt;</kbd> zum Gruppieren von Kopfzeilen und <kbd>&lt;tbody&gt;</kbd> zum Gruppieren von Datenzeilen. Das hilft Browsern und Hilfstechnologien, die Tabellenstruktur zu verstehen.<br><br>Du kannst auch <kbd>&lt;tfoot&gt;</kbd> für Fußzeilen wie Summen verwenden.",
-			"task": "Erstelle eine strukturierte Tabelle:<br>1. Eine <kbd>&lt;caption&gt;</kbd> mit <code>Monatliche Verkäufe</code><br>2. Ein <kbd>&lt;thead&gt;</kbd> mit Monat und Umsatz Überschriften<br>3. Ein <kbd>&lt;tbody&gt;</kbd> mit mindestens 2 Datenzeilen",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } table { border-collapse: collapse; width: 100%; max-width: 450px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } caption { padding: 20px; font-weight: 700; font-size: 1.3rem; color: white; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); caption-side: top; } thead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } th { padding: 15px 20px; text-align: left; color: white; font-weight: 500; } tbody tr { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } td { padding: 15px 20px; color: #333; } tbody tr:last-child { border-bottom: none; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Monatliche Verkäufe</caption>\n  <thead>\n    <tr>\n      <th>Monat</th>\n      <th>Umsatz</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Januar</td>\n      <td>12.500 €</td>\n    </tr>\n    <tr>\n      <td>Februar</td>\n      <td>14.200 €</td>\n    </tr>\n  </tbody>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Füge ein <kbd>&lt;table&gt;</kbd>-Element hinzu"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Füge ein <kbd>&lt;caption&gt;</kbd>-Element hinzu"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Füge ein <kbd>&lt;thead&gt;</kbd> für den Kopfbereich hinzu"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Füge ein <kbd>&lt;tbody&gt;</kbd> für die Datenzeilen hinzu"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Füge mindestens 2 Datenzeilen in tbody hinzu"
-				}
-			]
-		},
-		{
-			"id": "table-complete",
-			"title": "Vollständige Tabelle mit Fuß",
-			"description": "Füge <kbd>&lt;tfoot&gt;</kbd> hinzu, um einen Fußbereich für Summen oder Zusammenfassungen zu erstellen. Der Fuß bleibt unten, auch wenn tbody viele Zeilen hat.<br><br>Kombiniere alle Abschnitte für eine vollständig strukturierte, zugängliche Tabelle.",
-			"task": "Erstelle eine vollständige Tabelle:<br>1. Eine <kbd>&lt;caption&gt;</kbd> mit <code>Bestellübersicht</code><br>2. Ein <kbd>&lt;thead&gt;</kbd> mit Artikel und Preis Überschriften<br>3. Ein <kbd>&lt;tbody&gt;</kbd> mit 2 Artikeln<br>4. Ein <kbd>&lt;tfoot&gt;</kbd> mit einer Summenzeile",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px 20px; font-weight: 600; font-size: 1.1rem; color: #333; text-align: left; background: #f8f9fa; border-bottom: 2px solid #eee; } th, td { padding: 12px 20px; text-align: left; } thead th { background: #2c3e50; color: white; } tbody td { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } tfoot { background: #ecf0f1; font-weight: 600; } tfoot td { border-top: 2px solid #2c3e50; color: #2c3e50; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Bestellübersicht</caption>\n  <thead>\n    <tr>\n      <th>Artikel</th>\n      <th>Preis</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Widget</td>\n      <td>25,00 €</td>\n    </tr>\n    <tr>\n      <td>Gadget</td>\n      <td>35,00 €</td>\n    </tr>\n  </tbody>\n  <tfoot>\n    <tr>\n      <td>Gesamt</td>\n      <td>60,00 €</td>\n    </tr>\n  </tfoot>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Füge ein <kbd>&lt;table&gt;</kbd>-Element hinzu"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Füge ein <kbd>&lt;caption&gt;</kbd>-Element hinzu"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Füge einen <kbd>&lt;thead&gt;</kbd>-Abschnitt hinzu"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Füge einen <kbd>&lt;tbody&gt;</kbd>-Abschnitt hinzu"
-				},
-				{
-					"type": "element_exists",
-					"value": "tfoot",
-					"message": "Füge einen <kbd>&lt;tfoot&gt;</kbd>-Abschnitt für die Summe hinzu"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Füge mindestens 2 Artikelzeilen in tbody hinzu"
+					"message": "Füge 3 Zeilen hinzu (1 Kopf + 2 Datenzeilen)"
 				}
 			]
 		}

lessons/de/32-html-svg.json

@@ -15,7 +15,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; display: flex; justify-content: center; } svg { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"#3498db\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"steelblue\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -28,6 +28,16 @@
 					"value": "circle",
 					"message": "Füge ein <kbd>&lt;circle&gt;</kbd>-Element in das SVG ein"
 				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "width", "value": "200" },
+					"message": "Setze <kbd>width=</kbd>\"200\" beim SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "height", "value": "200" },
+					"message": "Setze <kbd>height=</kbd>\"200\" beim SVG"
+				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cx", "value": "100" },
@@ -37,6 +47,11 @@
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cy", "value": "100" },
 					"message": "Setze <kbd>cy=</kbd>\"100\" für das vertikale Zentrum"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "circle", "attr": "r", "value": "50" },
+					"message": "Setze <kbd>r=</kbd>\"50\" für den Radius"
 				}
 			]
 		},
@@ -49,7 +64,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 200px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"#e74c3c\" />\n  <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"#2c3e50\" stroke-width=\"3\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"tomato\" />\n  <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"slategray\" stroke-width=\"3\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -66,6 +81,61 @@
 					"type": "element_exists",
 					"value": "line",
 					"message": "Füge ein <kbd>&lt;line&gt;</kbd>-Element hinzu"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "width", "value": "200" },
+					"message": "Setze <kbd>width=</kbd>\"200\" beim SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "height", "value": "150" },
+					"message": "Setze <kbd>height=</kbd>\"150\" beim SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "x", "value": "20" },
+					"message": "Setze <kbd>x=</kbd>\"20\" beim rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "y", "value": "20" },
+					"message": "Setze <kbd>y=</kbd>\"20\" beim rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "width", "value": "80" },
+					"message": "Setze <kbd>width=</kbd>\"80\" beim rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "height", "value": "60" },
+					"message": "Setze <kbd>height=</kbd>\"60\" beim rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "x1", "value": "120" },
+					"message": "Setze <kbd>x1=</kbd>\"120\" bei der line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "y1", "value": "30" },
+					"message": "Setze <kbd>y1=</kbd>\"30\" bei der line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "x2", "value": "180" },
+					"message": "Setze <kbd>x2=</kbd>\"180\" bei der line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "y2", "value": "90" },
+					"message": "Setze <kbd>y2=</kbd>\"90\" bei der line"
+				},
+				{
+					"type": "contains",
+					"value": "stroke",
+					"message": "Füge eine <kbd>stroke</kbd>-Farbe zur line hinzu"
 				}
 			]
 		},
@@ -78,7 +148,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 250px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#f1c40f\" stroke=\"#e67e22\" stroke-width=\"4\" />\n  <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"#2c3e50\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"gold\" stroke=\"orange\" stroke-width=\"4\" />\n  <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n  <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n  <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"darkslategray\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{

lessons/de/flexbox.json

@@ -7,13 +7,13 @@
 	"lessons": [
 		{
 			"id": "flexbox-1",
-			"title": "Flex Container",
-			"description": "Flexbox ist ein eindimensionales Layout-System. Mit <kbd>display: flex</kbd> wird ein Element zum Flex-Container. Alle direkten Kinder werden automatisch zu Flex-Items und richten sich horizontal (Hauptachse) aus. Die Querachse verläuft senkrecht dazu.",
-			"task": "Füge <kbd>display: flex</kbd> zu <kbd>.wrap</kbd> hinzu.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
-			"codePrefix": ".wrap {\n  ",
+			"title": "Container",
+			"description": "Vor Flexbox erforderten selbst einfache Layouts Floats, Positionierungs-Hacks oder tabellenbasierte Layouts. Flexbox (Flexible Box Layout) revolutionierte CSS, indem es ein eindimensionales Layout-System speziell für Platzverteilung und Inhaltsausrichtung bereitstellte.<br><br><strong>So funktioniert es:</strong> Wenn du <kbd>display: flex</kbd> auf ein Element setzt, wird es zum <em>Flex-Container</em>. Seine direkten Kinder werden automatisch zu <em>Flex-Items</em>, die entlang einer Hauptachse fließen (standardmäßig horizontal). Diese eine Eigenschaft verwandelt gestapelte Block-Elemente in eine horizontale Reihe.<br><br><strong>Die zwei Achsen:</strong><br>• <em>Hauptachse</em> – Die primäre Richtung, in der Items fließen (row = links→rechts)<br>• <em>Querachse</em> – Senkrecht zur Hauptachse (row = oben→unten)<br><br><pre>.nav {\n  display: flex;\n}</pre>",
+			"task": "Dieses Navigationsmenü stapelt sich vertikal. Füge <kbd>display: flex</kbd> hinzu, um die Links horizontal anzuordnen.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "display: flex;",
@@ -28,41 +28,34 @@
 		},
 		{
 			"id": "flexbox-2",
-			"title": "Direction & Wrap",
-			"description": "<kbd>flex-direction</kbd> bestimmt die Hauptachse: <kbd>row</kbd> (horizontal, Standard) oder <kbd>column</kbd> (vertikal). Mit <kbd>flex-wrap: wrap</kbd> brechen Items in die nächste Zeile/Spalte um, wenn der Platz nicht reicht.",
-			"task": "Füge <kbd>flex-direction: column</kbd> und <kbd>flex-wrap: wrap</kbd> zu <kbd>.wrap</kbd> hinzu.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
-			"codePrefix": ".wrap {\n  ",
+			"title": "Gap",
+			"description": "Die <kbd>gap</kbd>-Eigenschaft fügt konsistenten Abstand zwischen Flex-Items hinzu, ohne dass Margins nötig sind. Sie erzeugt nur Platz zwischen Items, nicht an den Rändern.",
+			"task": "Füge <kbd>gap: 1rem</kbd> hinzu, um die Navigationslinks gleichmäßig zu verteilen.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; background: rgba(255,255,255,0.1); }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "flex-direction: column;\n  flex-wrap: wrap;",
+			"solution": "gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "flex-direction", "expected": "column" },
-					"message": "Setze <kbd>flex-direction: column</kbd>",
-					"options": { "exact": true }
-				},
-				{
-					"type": "property_value",
-					"value": { "property": "flex-wrap", "expected": "wrap" },
-					"message": "Setze <kbd>flex-wrap: wrap</kbd>",
-					"options": { "exact": true }
+					"value": { "property": "gap", "expected": "1rem" },
+					"message": "Setze <kbd>gap: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-3",
 			"title": "Justify Content",
-			"description": "<kbd>justify-content</kbd> verteilt Items entlang der Hauptachse. Werte: <kbd>flex-start</kbd> (Anfang), <kbd>flex-end</kbd> (Ende), <kbd>center</kbd> (Mitte), <kbd>space-between</kbd> (gleichmäßig mit Abstand), <kbd>space-around</kbd> (gleichmäßig mit Rand).",
-			"task": "Füge <kbd>justify-content: space-between</kbd> zu <kbd>.wrap</kbd> hinzu.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "<kbd>justify-content</kbd> verteilt Items entlang der Hauptachse. Häufige Werte:<br>• <kbd>flex-start</kbd> – Items am Anfang<br>• <kbd>flex-end</kbd> – Items am Ende<br>• <kbd>center</kbd> – Items zentrieren<br>• <kbd>space-between</kbd> – Gleicher Abstand zwischen Items<br>• <kbd>space-around</kbd> – Gleicher Abstand um Items",
+			"task": "Schiebe den \"Login\"-Button nach rechts, indem du <kbd>justify-content: space-between</kbd> auf die Navigation setzt.",
+			"previewHTML": "<nav class=\"nav\"><div class=\"links\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a></div><a href=\"#\" class=\"login\">Login</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .links { display: flex; gap: 8px; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); } .login { background: steelblue; }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "justify-content: space-between;",
@@ -71,20 +64,19 @@
 				{
 					"type": "property_value",
 					"value": { "property": "justify-content", "expected": "space-between" },
-					"message": "Setze <kbd>justify-content: space-between</kbd>",
-					"options": { "exact": true }
+					"message": "Setze <kbd>justify-content: space-between</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-4",
 			"title": "Align Items",
-			"description": "<kbd>align-items</kbd> richtet Items entlang der Querachse aus (bei <kbd>row</kbd>: vertikal). Werte: <kbd>stretch</kbd> (Standard, füllt Höhe), <kbd>flex-start</kbd> (oben), <kbd>flex-end</kbd> (unten), <kbd>center</kbd> (Mitte), <kbd>baseline</kbd> (Textlinie).",
-			"task": "Füge <kbd>align-items: center</kbd> zu <kbd>.wrap</kbd> hinzu.",
-			"previewHTML": "<div class='wrap'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "<kbd>align-items</kbd> steuert die Ausrichtung auf der Querachse (vertikal bei flex-direction: row). Werte sind:<br>• <kbd>stretch</kbd> – Ausdehnen zum Füllen (Standard)<br>• <kbd>flex-start</kbd> – Oben ausrichten<br>• <kbd>flex-end</kbd> – Unten ausrichten<br>• <kbd>center</kbd> – Vertikal zentrieren",
+			"task": "Das Logo und die Nav-Links haben unterschiedliche Höhen. Zentriere sie vertikal mit <kbd>align-items: center</kbd>.",
+			"previewHTML": "<header class=\"header\"><div class=\"logo\">ACME</div><nav><a href=\"#\">Products</a><a href=\"#\">Pricing</a><a href=\"#\">Docs</a></nav></header>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .header { background: white; padding: 1rem 2rem; display: flex; justify-content: space-between; border-bottom: 1px solid #eee; } .logo { font-size: 1.5rem; font-weight: bold; color: steelblue; } nav { display: flex; gap: 1rem; } nav a { color: #333; text-decoration: none; font-size: 0.9rem; }",
+			"sandboxCSS": "",
+			"codePrefix": ".header {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "align-items: center;",
@@ -93,50 +85,49 @@
 				{
 					"type": "property_value",
 					"value": { "property": "align-items", "expected": "center" },
-					"message": "Setze <kbd>align-items: center</kbd>",
-					"options": { "exact": true }
+					"message": "Setze <kbd>align-items: center</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-5",
-			"title": "Flex Grow",
-			"description": "Die <kbd>flex</kbd>-Eigenschaft ist eine Kurzform für <kbd>flex-grow</kbd>, <kbd>flex-shrink</kbd> und <kbd>flex-basis</kbd>. Ein höherer Wert bedeutet, dass das Element mehr vom verfügbaren Platz einnimmt. <kbd>flex: 2</kbd> wächst doppelt so schnell wie <kbd>flex: 1</kbd>.",
-			"task": "Füge <kbd>flex: 2</kbd> zu <kbd>.box2</kbd> hinzu.",
-			"previewHTML": "<div class='wrap'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": ".box2 {\n  ",
+			"title": "Flex Wrap",
+			"description": "Standardmäßig quetschen sich Flex-Items in eine Zeile. <kbd>flex-wrap: wrap</kbd> erlaubt Items, auf mehrere Zeilen umzubrechen, wenn der Platz nicht reicht.",
+			"task": "Diese Karten laufen über den Container hinaus. Füge <kbd>flex-wrap: wrap</kbd> hinzu, damit sie in neue Zeilen umbrechen können.",
+			"previewHTML": "<div class=\"cards\"><article class=\"card\">Card 1</article><article class=\"card\">Card 2</article><article class=\"card\">Card 3</article><article class=\"card\">Card 4</article><article class=\"card\">Card 5</article><article class=\"card\">Card 6</article></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .cards { display: flex; gap: 1rem; } .card { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); min-width: 120px; text-align: center; }",
+			"sandboxCSS": "",
+			"codePrefix": ".cards {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "flex: 2;",
+			"solution": "flex-wrap: wrap;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "flex", "expected": "2" },
-					"message": "Setze <kbd>flex: 2</kbd>"
+					"value": { "property": "flex-wrap", "expected": "wrap" },
+					"message": "Setze <kbd>flex-wrap: wrap</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-6",
-			"title": "Align Self",
-			"description": "<kbd>align-self</kbd> überschreibt <kbd>align-items</kbd> für ein einzelnes Element. So kannst du ein Item individuell auf der Querachse positionieren, während alle anderen Items ihrer Standard-Ausrichtung folgen.",
-			"task": "Füge <kbd>align-self: flex-start</kbd> zu <kbd>.middle</kbd> hinzu.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
-			"codePrefix": ".middle {\n  ",
+			"title": "Flex Grow",
+			"description": "Die <kbd>flex</kbd>-Eigenschaft auf Items steuert, wie sie wachsen und schrumpfen. <kbd>flex: 1</kbd> lässt ein Item wachsen, um verfügbaren Platz zu füllen. Mehrere Items mit <kbd>flex: 1</kbd> teilen sich den Platz gleichmäßig.",
+			"task": "Lass das Suchfeld den verfügbaren Platz ausfüllen, indem du <kbd>flex: 1</kbd> auf <kbd>.search</kbd> setzt.",
+			"previewHTML": "<div class=\"toolbar\"><input class=\"search\" type=\"text\" placeholder=\"Search...\"><button class=\"btn\">Search</button><button class=\"btn\">Filters</button></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .toolbar { display: flex; gap: 8px; padding: 1rem; background: #f5f5f5; border-radius: 8px; } .search { padding: 8px 1rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } .btn { padding: 8px 1rem; background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; }",
+			"sandboxCSS": "",
+			"codePrefix": ".search {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "align-self: flex-start;",
+			"solution": "flex: 1;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "align-self", "expected": "flex-start" },
-					"message": "Setze <kbd>align-self: flex-start</kbd>"
+					"value": { "property": "flex", "expected": "1" },
+					"message": "Setze <kbd>flex: 1</kbd>"
 				}
 			]
 		}

lessons/es/00-basic-selectors.json

@@ -1,548 +1,257 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "css-basic-selectors",
-	"title": "CSS Selectors",
-	"description": "CSS selectors are the foundation of styling web pages, allowing you to target specific HTML elements for styling. This module introduces fundamental selector types including element type selectors, class selectors, ID selectors, and the universal selector.",
+	"title": "Fundamentos de CSS",
+	"description": "Aprende los bloques fundamentales de CSS: propiedades, valores y selectores. Este módulo te enseña las reglas de sintaxis que sigue cada declaración CSS.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
-			"id": "introduction-to-selectors",
-			"title": "What's a Selector?",
-			"description": "A CSS selector is the first part of a CSS rule that tells the browser which HTML elements should receive the styles defined in the declaration block. Selectors are essentially patterns that match against elements in your HTML document. Understanding selectors is fundamental because they determine which elements your CSS rules will affect. The element or elements targeted by a selector are referred to as the 'subject of the selector.' When writing a CSS rule, you first specify the selector, followed by curly braces that contain the style declarations.<br/>For example, to change the text color of elements, you can use the <kbd>color</kbd> property within your declaration block.<br><br><pre>/* Element selector */\np {\n  color: orangered;\n  /* │       └─── Indicates the value of the expression\n     │                                                     \n     └─────────── Indicates the property of the expression */\n}</pre>",
-			"task": "Write a CSS rule using a type selector that targets all paragraph elements <kbd>p</kbd> in the document. Make the text blue by setting the <kbd>color</kbd> property to <kbd>blue</kbd>.",
-			"previewHTML": "<h1>Introduction to CSS Selectors</h1>\n<p>This paragraph should turn blue.</p>\n<div>This div element should remain unchanged.</div>\n<p>This second paragraph should also turn blue.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, p, div { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Write a type selector to target all paragraph elements */\n",
+			"id": "css-properties",
+			"title": "Propiedades CSS",
+			"description": "CSS estiliza elementos usando <strong>declaraciones</strong> - pares de propiedades y valores. Cada declaración sigue el mismo patrón:<br><br><pre>property: value;</pre><br>La <strong>propiedad</strong> es lo que quieres cambiar (como <kbd>color</kbd> o <kbd>background</kbd>). El <strong>valor</strong> es a lo que lo estableces. Dos puntos los separan, y un punto y coma termina la línea.<br><br>Los valores vienen en diferentes tipos:<br>• <strong>Palabras clave:</strong> <kbd>red</kbd>, <kbd>bold</kbd>, <kbd>center</kbd><br>• <strong>Números con unidades:</strong> <kbd>16px</kbd>, <kbd>2rem</kbd>, <kbd>100%</kbd><br>• <strong>Colores:</strong> <kbd>steelblue</kbd>, <kbd>#ff0000</kbd>",
+			"task": "Completa la declaración añadiendo <kbd>color: coral;</kbd> para cambiar el color del texto.",
+			"previewHTML": "<p class=\"text\">This text should turn coral.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .text { font-size: 1.25rem; }",
+			"sandboxCSS": "",
+			"codePrefix": ".text {\n  ",
 			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
-			"solution": "p { color: blue }",
+			"solution": "color: coral;",
 			"validations": [
 				{
-					"type": "regex",
-					"value": "^p\\s*{",
-					"message": "Start your rule with <kbd>p { … }</kbd> to select all paragraph elements",
-					"options": {
-						"caseSensitive": false
-					}
-				},
+					"type": "property_value",
+					"value": { "property": "color", "expected": "coral" },
+					"message": "Añade <kbd>color: coral;</kbd>"
+				}
+			]
+		},
+		{
+			"id": "multiple-properties",
+			"title": "Múltiples propiedades",
+			"description": "Una regla puede tener múltiples declaraciones. Cada una va en su propia línea, y cada una necesita un punto y coma al final:<br><br><pre>.box {<br>  background: gold;<br>  color: navy;<br>  padding: 1rem;<br>}</pre><br>El orden normalmente no importa - CSS las aplica todas. Cuando hay conflictos, la última gana.",
+			"task": "Añade dos declaraciones: <kbd>background: lavender;</kbd> y <kbd>padding: 1rem;</kbd>",
+			"previewHTML": "<div class=\"card\">A styled card with background and padding.</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .card { border-radius: 8px; }",
+			"sandboxCSS": "",
+			"codePrefix": ".card {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "background: lavender;\n  padding: 1rem;",
+			"validations": [
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color:</kbd> property in your CSS rule"
-				},
-				{
-					"type": "contains",
-					"value": "blue",
-					"message": "Set the color value to <kbd>blue</kbd>"
+					"type": "property_value",
+					"value": { "property": "background", "expected": "lavender" },
+					"message": "Añade <kbd>background: lavender;</kbd>"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "blue"
-					},
-					"message": "Use <kbd>color: blue</kbd> to set the text color"
-				},
-				{
-					"type": "regex",
-					"value": "p\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": false
-					}
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "Añade <kbd>padding: 1rem;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "type-selectors",
-			"title": "Type Selectors",
-			"description": "Type selectors (also called tag name selectors or element selectors) target HTML elements based on their tag name. For example, <kbd>p</kbd> selects all paragraph elements, <kbd>h1</kbd> selects all level-one headings, and <kbd>div</kbd> selects all division elements. Type selectors are the most fundamental way to select elements, applying styles consistently to all instances of a particular HTML element throughout your document. You can define a variety of CSS properties with type selectors, such as <kbd>color</kbd> for text color, <kbd>background-color</kbd> for the background, and <kbd>font-weight</kbd> for text emphasis. They provide a broad approach for styling your page and are often the starting point for more specific styling using other selector types.",
-			"task": "Write three separate CSS rules using type selectors to target specific HTML elements: make <kbd>h2</kbd> headings <kbd>purple</kbd>, give <kbd>span</kbd> elements a <kbd>yellow</kbd> background, and make <kbd>strong</kbd> elements <kbd>red</kbd>.",
-			"previewHTML": "<h2>Type Selectors Example</h2>\n<p>Regular paragraph text <span>with a highlighted span</span> that should have a yellow background.</p>\n<p>Another paragraph with <strong>strong important text</strong> that should be red.</p>\n<h2>Another Heading</h2>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, span, strong { padding: 3px; }",
-			"codePrefix": "/* Write three separate type selectors below */\n\n",
-			"initialCode": "/* 1. Make h2 headings purple */\n\n\n/* 2. Give span elements a yellow background */\n\n\n/* 3. Make strong elements red */\n",
+			"title": "Selectores de tipo",
+			"description": "Un <strong>selector</strong> le dice al navegador qué elementos estilizar. El selector más simple es un <strong>selector de tipo</strong> — simplemente el nombre de la etiqueta HTML.<br><br><pre>p {<br>  color: steelblue;<br>}</pre><br>Esta regla apunta a cada elemento <kbd>&lt;p&gt;</kbd> en la página. Los selectores de tipo son geniales para establecer estilos base.",
+			"task": "Estiliza todos los párrafos. Escribe una regla con <kbd>p</kbd> como selector y establece <kbd>color: steelblue</kbd>.",
+			"previewHTML": "<article>\n  <h2>Fresh Roasted Coffee</h2>\n  <p>Our beans are sourced from small farms in Colombia and Ethiopia.</p>\n  <p>Each batch is roasted weekly to ensure peak freshness.</p>\n</article>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h2 { margin: 0 0 1rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": "/* 1. Make h2 headings purple */\nh2 {\n  color: purple;\n}\n\n/* 2. Give span elements a yellow background */\nspan {\n  background-color: yellow;\n}\n\n/* 3. Make strong elements red */\nstrong {\n  color: red;\n}",
+			"solution": "p {\n  color: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^h2\\s*{",
-					"message": "Include an <kbd>h2 { … }</kbd> selector"
+					"value": "p\\s*\\{",
+					"message": "Empieza con <kbd>p {</kbd> para seleccionar párrafos"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Set the <kbd>color</kbd> property to <kbd>purple</kbd> for h2 elements"
-				},
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "Establece <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "styling-links",
+			"title": "Estilizando enlaces",
+			"description": "Los selectores de tipo funcionan para cualquier elemento HTML. El selector <kbd>a</kbd> apunta a todos los enlaces de una página.<br><br>Los enlaces tienen un color azul y subrayado por defecto. Puedes cambiar ambos con CSS — usa <kbd>color</kbd> para el texto y <kbd>text-decoration: none</kbd> para quitar el subrayado.",
+			"task": "Estiliza los enlaces de navegación. Escribe una regla con <kbd>a</kbd> como selector y establece <kbd>color: coral</kbd>.",
+			"previewHTML": "<nav>\n  <a href=\"#\">Home</a>\n  <a href=\"#\">Menu</a>\n  <a href=\"#\">About</a>\n  <a href=\"#\">Contact</a>\n</nav>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } nav { display: flex; gap: 1.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": "a {\n  color: coral;\n}",
+			"validations": [
 				{
 					"type": "regex",
-					"value": "h2\\s*{[^}]*}",
-					"message": "Make sure to close your h2 rule with a closing brace <kbd>}</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "^span\\s*{",
-					"message": "Include a <kbd>span { … }</kbd> selector"
+					"value": "a\\s*\\{",
+					"message": "Empieza con <kbd>a {</kbd> para seleccionar enlaces"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Set a <kbd>background-color: yellow</kbd> for span elements"
-				},
-				{
-					"type": "regex",
-					"value": "span\\s*{[^}]*}",
-					"message": "Make sure to close your span rule with a closing brace <kbd>}</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "^strong\\s*{",
-					"message": "Include a <kbd>strong { … }</kbd> selector"
-				},
-				{
-					"type": "regex",
-					"value": "strong\\s*{\\s*color:\\s*red;[^}]*}",
-					"message": "Set the <kbd>color: red</kbd> for strong elements"
+					"value": { "property": "color", "expected": "coral" },
+					"message": "Establece <kbd>color: coral</kbd>"
 				}
 			]
 		},
 		{
 			"id": "class-selectors",
-			"title": "Class Selectors",
-			"description": "Class selectors target elements with a specific class attribute value. They begin with a dot (.) followed by the class name. Classes are powerful because they allow you to apply the same styles to multiple elements regardless of their type. An HTML element can have multiple classes (separated by spaces in the class attribute), and a class can be applied to any number of elements. When using class selectors, you can apply properties like <kbd>background-color</kbd> to set the background color of elements, and <kbd>font-weight</kbd> to control text thickness, making text bold or normal. This flexibility makes class selectors one of the most commonly used methods for applying styles in CSS, allowing for modular and reusable styling across your website.",
-			"task": "Create a CSS rule using a class selector that targets elements with the class <kbd>highlight</kbd>. Give these elements a <kbd>yellow</kbd> background and <kbd>bold</kbd> text.",
-			"previewHTML": "<h2>Using Class Selectors</h2>\n<p>This is a regular paragraph, but <span class=\"highlight\">this span has the highlight class</span> applied to it.</p>\n<p class=\"highlight\">This entire paragraph has the highlight class.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"highlight\">This list item is highlighted</li>\n</ul>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, li { padding: 5px; margin-bottom: 10px; }",
-			"codePrefix": "/* Create a class selector for elements with the 'highlight' class */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^\\.highlight\\s*{",
-					"message": "Start your rule with <kbd>.highlight { … }</kbd> to create a class selector",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color:</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Set the background color to <kbd>yellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "font-weight:",
-					"message": "Include the <kbd>font-weight:</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-weight",
-						"expected": "bold"
-					},
-					"message": "Set the font-weight to <kbd>bold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.highlight\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "multiple-classes",
-			"title": "Multiple Classes",
-			"description": "HTML elements can have multiple classes applied simultaneously, allowing for composable and modular CSS designs. When an element has multiple classes, it will receive styles from all matching class selectors. This approach enables you to build a library of reusable CSS classes that can be combined in different ways. You can also target elements that have a specific combination of classes by chaining class selectors together without spaces (e.g., <kbd>.class1.class2</kbd>). When styling these elements, you might use properties like <kbd>border-color</kbd> to change the color of element borders, and <kbd>background-color</kbd> to set the background color of elements. This technique lets you create conditional styles that only apply when certain classes appear together.",
-			"task": "Complete the CSS rule that targets elements with both <kbd>card</kbd> and <kbd>featured</kbd> classes by chaining the selectors. Set the border-color to gold and the background-color to lemonchiffon to make featured cards stand out.",
-			"previewHTML": "<h2>Multiple Class Combinations</h2>\n<div class=\"card\">Regular Card</div>\n<div class=\"card featured\">Featured Card</div>\n<div class=\"featured\">Just Featured (not a card)</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .card { border: 2px solid gray; padding: 15px; margin-bottom: 10px; border-radius: 5px; }",
+			"title": "Selectores de clase",
+			"description": "Los selectores de tipo estilizan <em>todos</em> los elementos de ese tipo. ¿Pero qué si quieres estilizar solo algunos de ellos?<br><br>Los <strong>selectores de clase</strong> apuntan a elementos con un atributo <kbd>class</kbd> específico. Empiezan con un punto:<br><br><pre>.badge {<br>  background: coral;<br>}</pre><br>Esto estiliza solo elementos con <kbd>class=\"badge\"</kbd>.",
+			"task": "Estiliza el badge de notificación. Escribe una regla con <kbd>.badge</kbd> como selector y establece <kbd>background: tomato</kbd>.",
+			"previewHTML": "<header>\n  <h1>Dashboard</h1>\n  <span class=\"badge\">3</span>\n</header>\n<p>You have new notifications waiting.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } h1 { margin: 0; font-size: 1.5rem; } .badge { color: white; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.875rem; } p { color: #555; margin: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* The .card class already has basic styling */\n/* Now target elements with BOTH classes: 'card' AND 'featured' */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": ".card.featured { border-color: gold; background-color: lemonchiffon }",
+			"solution": ".badge {\n  background: tomato;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.card\\.featured\\s*{",
-					"message": "Chain the selectors as <kbd>.card.featured</kbd> (no space between them)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "border-color:",
-					"message": "Include the <kbd>border-color</kbd> property"
+					"value": "\\.badge\\s*\\{",
+					"message": "Empieza con <kbd>.badge {</kbd> (¡no olvides el punto!)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "border-color",
-						"expected": "gold"
-					},
-					"message": "Set the border color to <kbd>gold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*;",
-					"message": "Make sure to end your CSS rule with a semicolon <kbd>;</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lemonchiffon"
-					},
-					"message": "Set the background color to <kbd>lemonchiffon</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "tomato" },
+					"message": "Establece <kbd>background: tomato</kbd>"
 				}
 			]
 		},
 		{
-			"id": "class-with-type",
-			"title": "Combining Types",
-			"description": "You can combine type selectors with class selectors to target specific HTML elements that have a certain class. This creates a more specific selector that only matches when both conditions are true: the element is of the specified type AND it has the specified class. For example, <kbd>p.note</kbd> would select paragraph elements with the class <kbd>note</kbd>, but would not select divs or spans with that same class. You can style these combined selections using properties like <kbd>background-color</kbd> to set a colored background for your elements. This approach allows you to apply different styles to the same class when it appears on different element types.",
-			"task": "Create a CSS rule that specifically targets <kbd>&lt;span&gt;</kbd> elements with the class <kbd>highlight</kbd>. Make those elements have an orange background, while other elements with the highlight class remain untouched.",
-			"previewHTML": "<h2>Type and Class Combinations</h2>\n<p>This paragraph has a <span class=\"highlight\">highlighted span</span> that should have an orange background.</p>\n<p class=\"highlight\">This paragraph has the highlight class but should NOT have an orange background.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .highlight { font-weight: bold; }",
-			"sandboxCSS": "h2, p, span { padding: 5px; }",
-			"codePrefix": "/* The .highlight class already sets font-weight to bold */\n/* Now target ONLY span elements with the highlight class */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^span\\.highlight\\s*{",
-					"message": "Use <kbd>span.highlight</kbd> selector (no space between element and class)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "orange"
-					},
-					"message": "Set the background color to <kbd>orange</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "span\\.highlight\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-selectors",
-			"title": "ID Selectors",
-			"description": "ID selectors target elements with a specific id attribute. They begin with a hash/pound sign (#) followed by the ID name. Unlike classes, IDs must be unique within a document—each ID value should be used only once per page. ID selectors have higher specificity than class or element selectors, meaning they override those selectors when conflicts arise. When styling with ID selectors, you can use properties like <kbd>color</kbd> to define text color, and <kbd>text-decoration</kbd> to control the appearance of text, such as adding underlines to elements. Because of their uniqueness requirement, IDs are best used for one-of-a-kind elements like page headers, main navigation, or specific unique components that appear only once on a page.",
-			"task": "Create a CSS rule with an ID selector that targets the element with the ID <kbd>main-title</kbd>. Set its color to purple and add an underline with <kbd>text-decoration: underline</kbd>.",
-			"previewHTML": "<h1 id=\"main-title\">Main Page Title</h1>\n<p>Regular paragraph content.</p>\n<h2>Secondary Heading</h2>\n<p id=\"intro\">Introduction paragraph (different ID).</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Create an ID selector to target the element with id=\"main-title\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^#main-title\\s*{",
-					"message": "Start your rule with <kbd>#main-title</kbd> to create an ID selector",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Set the color to <kbd>purple</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "text-decoration:",
-					"message": "Include the <kbd>text-decoration</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "text-decoration",
-						"expected": "underline"
-					},
-					"message": "Set the text-decoration to <kbd>underline</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "#main-title\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-with-type",
-			"title": "Type + ID",
-			"description": "Similar to how you can combine type and class selectors, you can also combine type selectors with ID selectors. For example, <kbd>h1#title</kbd> targets an h1 element with the ID 'title'. When using this combined approach, you can apply CSS properties like <kbd>font-style</kbd> to control the slant of the text, making it italic or normal. While this selector combination is more specific than using just the ID selector, it's often unnecessary since IDs should already be unique in a document. However, this technique can be useful for improving code readability or when you want to emphasize that a particular ID should only appear on a specific element type.",
-			"task": "Create a CSS rule that combines a type selector with an ID selector to target specifically a paragraph element with the ID <kbd>special</kbd>. Set its font style to italic.",
-			"previewHTML": "<h2 id=\"special\">Heading with ID \"special\" (should NOT be affected)</h2>\n<p id=\"special\">Paragraph with ID \"special\" (should become italic)</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Create a combined type+ID selector for a paragraph with id=\"special\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^p#special\\s*{",
-					"message": "Use <kbd>p#special</kbd> to target paragraphs with ID <kbd>special</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "font-style:",
-					"message": "Include the <kbd>font-style</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-style",
-						"expected": "italic"
-					},
-					"message": "Set the font-style to <kbd>italic</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "p#special\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "selector-lists",
-			"title": "Selector Lists",
-			"description": "When multiple elements need the same styling, you can group them together using a selector list (also known as grouping selectors). Selector lists are created by separating individual selectors with commas. This approach reduces repetition in your CSS, making it more maintainable and efficient. For example, <kbd>h1, h2, h3 { color: blue; }</kbd> applies the same blue color to all three heading levels. When styling multiple selectors at once, you can apply properties like <kbd>background-color</kbd> to set the background, <kbd>border-left</kbd> to create a left border with a specific thickness, style, and color, and <kbd>padding-left</kbd> to create space between the content and the left border. Whitespace around commas is optional, and each selector in the list can be any valid selector type-elements, classes, IDs, or even more complex selectors.",
-			"task": "Create a selector list that applies the same styles to three different elements: paragraphs with class <kbd>note</kbd>, list items with class <kbd>important</kbd>, and the element with ID <kbd>summary</kbd>. Give them a <kbd>lightyellow</kbd> background, a <kbd>gold</kbd> left border, and some left <kbd>padding</kbd>.",
-			"previewHTML": "<p class=\"note\">This is a note paragraph.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"important\">Important list item</li>\n</ul>\n<div id=\"summary\">Summary section</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p, li, div { padding: 8px; margin-bottom: 8px; border: 1px dashed gray; }",
-			"codePrefix": "/* Create a selector list to apply the same styles to multiple different elements */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"solution": "p.note,\nli.important,\n#summary {\n  background-color: lightyellow;\n  border-left: 3px solid gold;\n  padding-left: 10px\n}",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "p.note",
-					"message": "Include <kbd>p.note</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "li.important",
-					"message": "Include <kbd>li.important</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "#summary",
-					"message": "Include <kbd>#summary</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "regex",
-					"value": "(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)",
-					"message": "Create a comma-separated list with all three selectors",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lightyellow"
-					},
-					"message": "Set the background color to <kbd>lightyellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "border-left:",
-					"message": "Include the <kbd>border-left</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "border-left",
-						"expected": "3px solid gold"
-					},
-					"message": "Use <kbd>border-left: 3px solid gold</kbd> to create a left border"
-				},
-				{
-					"type": "contains",
-					"value": "padding-left:",
-					"message": "Include the <kbd>padding-left</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "padding-left",
-						"expected": "10px"
-					},
-					"message": "Use <kbd>padding-left: 10px</kbd> to add left padding"
-				}
-			]
-		},
-		{
-			"id": "universal-selector",
-			"title": "Universal (*)",
-			"description": "The universal selector is denoted by an asterisk (*) and matches any element of any type. It selects everything in the document or, when combined with other selectors, everything within a specific context. For example, <kbd>* { margin: 0; }</kbd> removes margins from all elements, while <kbd>article *</kbd> selects all elements inside article elements. When using the universal selector in combination with other selectors, you can apply properties like <kbd>margin</kbd> to control the spacing around elements. The universal selector is powerful but should be used carefully due to its broad impact. It's commonly used in CSS resets, to override default browser styling, or to target all children of a particular element.",
-			"task": "Use the universal selector to remove margins from all elements inside the container div. Create a rule using <kbd>div.container *</kbd> as the selector and set <kbd>margin: 0</kbd>.",
-			"previewHTML": "<div class=\"container\">\n  <h2>Inside Container</h2>\n  <p>This paragraph is inside the container.</p>\n  <ul>\n    <li>List item inside container</li>\n  </ul>\n</div>\n<p>This paragraph is outside the container and should not be affected.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } div.container { border: 2px solid navy; padding: 15px; background-color: lavender; } h2, p, ul, li { margin: 15px 0; }",
+			"id": "button-variants",
+			"title": "Variantes de botón",
+			"description": "Los elementos pueden tener múltiples clases. Cuando encadenas selectores de clase sin espacios, apuntas a elementos que tienen <em>todas</em> esas clases:<br><br><pre>.btn.primary {<br>  background: steelblue;<br>}</pre><br>Esto apunta a elementos con <kbd>class=\"btn primary\"</kbd>, no solo <kbd>.btn</kbd> o solo <kbd>.primary</kbd>.",
+			"task": "Estiliza el botón primario. Escribe una regla con <kbd>.btn.primary</kbd> como selector y establece <kbd>background: steelblue</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Cancel</button>\n  <button class=\"btn primary\">Save Changes</button>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #e0e0e0; color: #333; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use the universal selector to target all elements inside the container */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": ".btn.primary {\n  background: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^div\\.container\\s+\\*\\s*{",
-					"message": "Use <kbd>div.container *</kbd> selector (with a space between container and *)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "margin:",
-					"message": "Include the <kbd>margin</kbd> property"
+					"value": "\\.btn\\.primary\\s*\\{",
+					"message": "Usa <kbd>.btn.primary {</kbd> (sin espacio entre clases)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "margin",
-						"expected": "0"
-					},
-					"message": "Set margin to <kbd>0</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "div\\.container\\s+\\*\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "steelblue" },
+					"message": "Establece <kbd>background: steelblue</kbd>"
 				}
 			]
 		},
 		{
-			"id": "specificity-basics",
-			"title": "Specificity",
-			"description": "CSS specificity determines which styles take precedence when multiple conflicting rules target the same element. Specificity follows a hierarchical system: inline styles have the highest specificity, followed by ID selectors, then class/attribute/pseudo-class selectors, and finally element/pseudo-element selectors. This can be conceptualized as a four-part score (inline, ID, class, element). When creating multiple rules that may target the same elements, you can use the <kbd>color</kbd> property to set text colors, and specificity will determine which color is actually applied. Understanding specificity is crucial for predictable styling and debugging CSS conflicts. When two selectors have equal specificity, the one that comes last in the stylesheet wins.",
-			"task": "Examine the existing CSS rules and add a new rule with higher specificity to override the text color of the paragraph. Create a rule using '.content p' as the selector and set color: green.",
-			"previewHTML": "<div class=\"content\">\n  <p>What color will this paragraph be? Look at the CSS rules and their specificity.</p>\n</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p { border: 1px dashed gray; padding: 10px; }",
-			"codePrefix": "/* These CSS rules target the same paragraph but have different specificity */\n\n/* Rule 1: Element selector (lowest specificity) */\np {\n  color: red;\n}\n\n/* Rule 2: Descendant selector (higher specificity than just 'p') */\n",
+			"id": "specific-elements",
+			"title": "Apuntando a elementos específicos",
+			"description": "A veces quieres que una clase se vea diferente en diferentes elementos. Combina un selector de tipo con un selector de clase (sin espacio) para ser más específico:<br><br><pre>a.btn {<br>  text-decoration: none;<br>}</pre><br>Esto estiliza solo elementos <kbd>&lt;a&gt;</kbd> con la clase <kbd>btn</kbd>, no elementos <kbd>&lt;button&gt;</kbd> con esa clase.",
+			"task": "Quita el subrayado de los botones-enlace. Escribe una regla con <kbd>a.btn</kbd> como selector y establece <kbd>text-decoration: none</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Regular Button</button>\n  <a href=\"#\" class=\"btn\">Link Button</a>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; align-items: center; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: steelblue; color: white; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": "a.btn {\n  text-decoration: none;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.content\\s+p\\s*{",
-					"message": "Use <kbd>.content p</kbd> as your selector (note the space between)",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": "a\\.btn\\s*\\{",
+					"message": "Usa <kbd>a.btn {</kbd> (tipo + clase, sin espacio)"
 				},
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color</kbd> property"
+					"type": "property_value",
+					"value": { "property": "text-decoration", "expected": "none" },
+					"message": "Establece <kbd>text-decoration: none</kbd>"
+				}
+			]
+		},
+		{
+			"id": "grouping-selectors",
+			"title": "Agrupando selectores",
+			"description": "Cuando múltiples elementos necesitan los mismos estilos, lístalos separados por comas. Esto mantiene tu CSS limpio y mantenible.<br><br><pre>h1, h2, h3 {<br>  color: steelblue;<br>}</pre><br>Esto aplica el mismo color a los tres niveles de encabezado en una regla.",
+			"task": "Estiliza todos los encabezados consistentemente. Añade <kbd>color: steelblue</kbd> al selector agrupado <kbd>h1, h2, h3</kbd>.",
+			"previewHTML": "<article><h1>Main Title</h1><p>Introduction paragraph with some text.</p><h2>Section Heading</h2><p>More content here.</p><h3>Subsection</h3><p>Final paragraph.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } p { color: #555; line-height: 1.6; }",
+			"sandboxCSS": "",
+			"codePrefix": "h1, h2, h3 {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "color: steelblue;",
+			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "Establece <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "descendant-selectors",
+			"title": "Selectores descendientes",
+			"description": "Apunta a elementos dentro de otros elementos usando un espacio entre selectores. Este es uno de los patrones más útiles en CSS.<br><br><pre>.nav a {<br>  color: white;<br>}</pre><br>Esto estiliza solo enlaces dentro de <kbd>.nav</kbd>, dejando otros enlaces sin cambios.",
+			"task": "Estiliza los enlaces de navegación diferente. Escribe una regla con <kbd>.nav a</kbd> como selector y establece <kbd>color: white</kbd>.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav><p>Read more in our <a href=\"#\">documentation</a>.</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; margin: 0; } .nav { background: steelblue; padding: 1rem; display: flex; gap: 1rem; border-radius: 8px; margin-bottom: 1rem; } .nav a { text-decoration: none; } p a { color: steelblue; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".nav a {\n  color: white;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.nav\\s+a\\s*\\{",
+					"message": "Usa <kbd>.nav a {</kbd> (espacio entre .nav y a)"
 				},
 				{
-					"type": "contains",
-					"value": "green",
-					"message": ""
+					"type": "property_value",
+					"value": { "property": "color", "expected": "white" },
+					"message": "Establece <kbd>color: white</kbd>"
+				}
+			]
+		},
+		{
+			"id": "nested-styling",
+			"title": "Estilos anidados",
+			"description": "Los selectores descendientes te permiten crear estilos contextuales. El mismo elemento puede verse diferente dependiendo de dónde aparezca.<br><br>Por ejemplo, los párrafos en una <kbd>.card</kbd> podrían ser más pequeños que los párrafos en un <kbd>article</kbd>.",
+			"task": "Haz los párrafos dentro de la tarjeta más pequeños. Escribe una regla con <kbd>.card p</kbd> como selector y establece <kbd>font-size: 0.9rem</kbd>.",
+			"previewHTML": "<article><h2>Article Title</h2><p>This is a regular article paragraph with normal-sized text for comfortable reading.</p><div class=\"card\"><strong>Quick Tip</strong><p>Card paragraphs should be slightly smaller to fit the compact design.</p></div><p>Back to regular article text here.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } h2 { color: steelblue; margin-top: 0; } p { line-height: 1.6; color: #444; } .card { background: #f0f4f8; padding: 1rem; border-radius: 8px; border-left: 4px solid steelblue; } .card strong { color: steelblue; display: block; margin-bottom: 0.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".card p {\n  font-size: 0.9rem;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.card\\s+p\\s*\\{",
+					"message": "Usa <kbd>.card p {</kbd> (espacio entre .card y p)"
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "font-size", "expected": "0.9rem" },
+					"message": "Establece <kbd>font-size: 0.9rem</kbd>"
 				}
 			]
 		}

lessons/es/00-welcome.json

@@ -1,16 +1,17 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "welcome",
-	"title": "Code Crispies",
-	"description": "Welcome to Code Crispies - your interactive web development learning platform",
+	"title": "Bienvenido",
+	"description": "Comienza con Code Crispies",
 	"mode": "html",
 	"difficulty": "beginner",
+	"excludeFromProgress": true,
 	"lessons": [
 		{
-			"id": "get-started",
-			"title": "Get Started",
-			"description": "<strong>Code Crispies</strong> is a free, open-source platform for learning web development through hands-on exercises. No account required!<br><br><strong>What you'll learn:</strong><br>• <strong>HTML</strong> - Semantic elements, forms, tables, SVG (<em>HTML Block & Inline</em>, <em>HTML Forms</em>, <em>HTML Tables</em>)<br>• <strong>CSS</strong> - Selectors, box model, flexbox, animations (<em>CSS Selectors</em>, <em>CSS Box Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media queries and mobile-first layouts<br><br><strong>How it works:</strong><br>1. Read the task in the left panel<br>2. Write code in the editor<br>3. See live results in the preview<br>4. Get instant feedback with hints<br><br><strong>Keyboard shortcuts:</strong> <kbd>Ctrl+Z</kbd> to undo, <kbd>Ctrl+Shift+Z</kbd> to redo<br><br><strong>More resources:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript solutions<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript technology roadmap",
-			"task": "Write <code>Hello World</code>",
+			"id": "hello",
+			"title": "¡Hola!",
+			"description": "<strong>¡Bienvenido a Code Crispies!</strong> Aprende CSS y HTML con ejercicios prácticos.<br><br><strong>Cómo funciona:</strong><br>1. Lee la tarea a la izquierda<br>2. Escribe código en el editor<br>3. Ve los resultados en vivo en la vista previa<br><br><strong>Consejos:</strong> Usa <kbd>Ctrl+Z</kbd> para deshacer. Abre el menú (☰) para explorar todos los módulos.",
+			"task": "Escribe <code>Hello World</code> para comenzar",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }",
 			"sandboxCSS": "",
@@ -21,42 +22,9 @@
 				{
 					"type": "contains",
 					"value": "Hello World",
-					"message": "Write <code>Hello World</code>"
+					"message": "Escribe <code>Hello World</code>"
 				}
 			]
-		},
-		{
-			"id": "overview",
-			"title": "Overview",
-			"description": "<strong>You're ready!</strong> Open the menu (☰) to explore all modules.<br><br><strong>Recommended learning path:</strong><br>1. <em>HTML Block & Inline</em> - Understand container vs inline elements<br>2. <em>HTML Forms</em> - Build interactive forms with validation<br>3. <em>CSS Selectors</em> - Target elements precisely<br>4. <em>CSS Box Model</em> - Master padding, margin, borders<br>5. <em>CSS Flexbox</em> - Create flexible layouts<br>6. <em>CSS Animations</em> - Add motion and transitions<br><br><strong>Tips:</strong><br>• Use <em>Show Expected</em> to see the target result<br>• Your progress is saved automatically<br>• Try Emmet in HTML mode: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Made by <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
-			"task": "Click Next to continue",
-			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }",
-			"sandboxCSS": "",
-			"initialCode": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "Hello World",
-					"message": "Click Next to continue"
-				}
-			]
-		},
-		{
-			"id": "playground",
-			"title": "Playground",
-			"mode": "playground",
-			"description": "",
-			"task": "",
-			"previewHTML": "",
-			"previewBaseCSS": "",
-			"sandboxCSS": "",
-			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
-			"solution": "",
-			"previewContainer": "preview-area",
-			"validations": []
 		}
 	]
 }

lessons/es/01-box-model.json

@@ -2,18 +2,18 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "box-model",
 	"title": "CSS Box Model",
-	"description": "Master the fundamental principles of space management in web design through the CSS box model. This module explores how content, padding, borders, and margins combine to create layout structures that are both visually appealing and structurally sound.",
+	"description": "Domina los principios fundamentales de gestión del espacio en diseño web a través del modelo de caja CSS. Este módulo explora cómo el contenido, padding, bordes y márgenes se combinan para crear estructuras de diseño.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "box-model-1",
-			"title": "Box Model Components",
-			"description": "The CSS box model consists of four concentric layers: content area (innermost), padding, border, and margin (outermost). Understanding how these components interact is essential for precise layout control.",
-			"task": "Set <kbd>padding</kbd> to <kbd>1rem</kbd> to create space between the content and border.",
-			"previewHTML": "<div class=\"box\">Box Model Components</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }",
+			"title": "Padding",
+			"description": "Cada elemento en CSS es una caja con cuatro capas: contenido, padding, borde y margen. <strong>Padding</strong> crea espacio entre tu contenido y el borde de la caja.<br><br>Sin padding, el texto se aprieta incómodamente contra los bordes. El padding hace que el contenido sea legible y visualmente equilibrado.<br><br><pre>.card {\n  padding: 1rem;\n}</pre>",
+			"task": "Esta tarjeta de perfil se ve apretada. Añade <kbd>padding: 1rem</kbd> para que el texto tenga espacio para respirar.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "padding: 1rem;",
@@ -22,62 +22,62 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Set <kbd>padding: 1rem</kbd>"
+					"message": "Establece <kbd>padding: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-2",
-			"title": "Adding Borders",
-			"description": "Borders outline an element, creating visual separation from surrounding content. The border shorthand accepts three values: width, style, and color.",
-			"task": "Set <kbd>border</kbd> to <kbd>2px solid darkslategray</kbd>.",
-			"previewHTML": "<div class=\"box\">This box needs a border</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }",
+			"title": "Borders",
+			"description": "Los bordes crean límites visuales alrededor de los elementos. El atajo <kbd>border</kbd> acepta tres valores: ancho, estilo y color.<br><br>Estilos comunes: <kbd>solid</kbd>, <kbd>dashed</kbd>, <kbd>dotted</kbd>, <kbd>none</kbd>",
+			"task": "Añade un acento sutil a la izquierda de la tarjeta con <kbd>border-left: 4px solid steelblue</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border: 2px solid darkslategray;",
+			"solution": "border-left: 4px solid steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "border:\\s*2px\\s+solid\\s+darkslategray",
-					"message": "Set <kbd>border: 2px solid darkslategray</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
+					"message": "Establece <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-3",
-			"title": "Adding Margins",
-			"description": "Margins create space between elements, controlling how they relate to one another within a layout. Unlike padding (which affects internal spacing), margins exist outside the element's border.",
-			"task": "Set <kbd>margin</kbd> to <kbd>1rem</kbd> to create space between this element and its neighbors.",
-			"previewHTML": "<div class=\"container\"><div class=\"outer\">This box needs margins</div><div class=\"neighbor\">Adjacent element</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .outer { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }",
+			"title": "Margins",
+			"description": "Los márgenes crean espacio <em>fuera</em> del elemento, separándolo de sus vecinos. Mientras que el padding empuja el contenido hacia adentro, los márgenes empujan otros elementos hacia afuera.",
+			"task": "Añade espacio entre estas dos tarjetas de perfil con <kbd>margin-bottom: 1rem</kbd> en <kbd>.card</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article><article class=\"card\"><h3>Alex Rivera</h3><p>UX Designer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".outer {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem;",
+			"solution": "margin-bottom: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "margin", "expected": "1rem" },
-					"message": "Set <kbd>margin: 1rem</kbd>"
+					"value": { "property": "margin-bottom", "expected": "1rem" },
+					"message": "Establece <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-4",
-			"title": "Box Sizing: Border-Box",
-			"description": "The <kbd>box-sizing</kbd> property determines how element dimensions are calculated. The default <kbd>content-box</kbd> excludes padding and border from width/height, while <kbd>border-box</kbd> includes them, making layout calculations more intuitive.",
-			"task": "Set <kbd>box-sizing</kbd> to <kbd>border-box</kbd> so padding and border are included in the width.",
-			"previewHTML": "<div class=\"sizing-demo\"><div class=\"box default\">Content-box (default)</div><div class=\"box sized\">Border-box</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .default { box-sizing: content-box; }",
+			"title": "Box Sizing",
+			"description": "Por defecto, <kbd>width</kbd> solo establece el ancho del contenido. Padding y bordes se suman al total. Esto causa problemas de diseño.<br><br><kbd>box-sizing: border-box</kbd> incluye padding y borde en el ancho, haciendo el dimensionamiento predecible. La mayoría de desarrolladores aplican esto a todos los elementos.",
+			"task": "Ambas tarjetas tienen <kbd>width: 200px</kbd>. La izquierda usa el tamaño predeterminado (content-box), haciéndola más ancha de lo esperado. Corrige la tarjeta derecha con <kbd>box-sizing: border-box</kbd>.",
+			"previewHTML": "<div class=\"demo\"><article class=\"card\">Content-box</article><article class=\"card fix\">Border-box</article></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .demo { display: flex; gap: 1rem; } .card { width: 200px; padding: 1rem; border: 4px solid steelblue; background: white; border-radius: 8px; }",
 			"sandboxCSS": "",
-			"codePrefix": ".sized {\n  ",
+			"codePrefix": ".fix {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "box-sizing: border-box;",
@@ -86,93 +86,104 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Set <kbd>box-sizing: border-box</kbd>"
+					"message": "Establece <kbd>box-sizing: border-box</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-5",
-			"title": "Margin Collapse",
-			"description": "When two vertical margins meet, they collapse to the larger value instead of adding up. Understanding this behavior is crucial for consistent vertical spacing.",
-			"task": "Set <kbd>margin-bottom</kbd> to <kbd>2rem</kbd>. Notice the space between paragraphs equals 2rem (not 3rem) due to margin collapse.",
-			"previewHTML": "<div class=\"collapse-demo\"><p class=\"first\">This paragraph has a bottom margin.</p><p class=\"second\">This paragraph has a top margin of 1rem.</p></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }",
+			"title": "Padding Shorthand",
+			"description": "Padding acepta 1-4 valores:<br>• 1 valor: todos los lados<br>• 2 valores: vertical | horizontal<br>• 4 valores: arriba | derecha | abajo | izquierda",
+			"task": "Este botón necesita más espacio horizontal que vertical. Establece <kbd>padding: 8px 1rem</kbd> (8px arriba/abajo, 1rem izquierda/derecha).",
+			"previewHTML": "<button class=\"btn\">Follow</button>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .btn { background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }",
 			"sandboxCSS": "",
-			"codePrefix": ".first {\n  ",
+			"codePrefix": ".btn {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin-bottom: 2rem;",
+			"solution": "padding: 8px 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "property_value",
-					"value": { "property": "margin-bottom", "expected": "2rem" },
-					"message": "Set <kbd>margin-bottom: 2rem</kbd>"
+					"type": "regex",
+					"value": "padding:\\s*8px\\s+1rem",
+					"message": "Establece <kbd>padding: 8px 1rem</kbd>",
+					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-6",
-			"title": "Margin Shorthand Notation",
-			"description": "The margin shorthand can set all four sides at once. Two values set vertical (top/bottom) and horizontal (left/right) margins respectively.",
-			"task": "Set <kbd>margin</kbd> to <kbd>1rem 2rem</kbd> for 1rem top/bottom and 2rem left/right.",
-			"previewHTML": "<div class=\"container\"><div class=\"spaced\">This box needs margins: 1rem top/bottom, 2rem left/right</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .spaced { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }",
+			"title": "Margin Shorthand",
+			"description": "Margin usa el mismo patrón de atajo que padding. Un patrón común es centrar elementos de bloque horizontalmente con <kbd>margin: 0 auto</kbd>.",
+			"task": "Centra esta tarjeta horizontalmente. Establece <kbd>margin: 0 auto</kbd> para calcular automáticamente márgenes iguales izquierda/derecha.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { width: 250px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".spaced {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem 2rem;",
+			"solution": "margin: 0 auto;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "margin:\\s*1rem\\s+2rem",
-					"message": "Set <kbd>margin: 1rem 2rem</kbd>",
+					"value": "margin:\\s*0\\s+auto",
+					"message": "Establece <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-7",
-			"title": "Padding Shorthand Notation",
-			"description": "Like margin, padding shorthand allows setting all sides at once. A single value applies to all four sides equally.",
-			"task": "Set <kbd>padding</kbd> to <kbd>2rem</kbd> to add equal padding on all sides.",
-			"previewHTML": "<div class=\"padded\">This box needs equal padding on all sides</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }",
+			"title": "Border Radius",
+			"description": "Aunque no es parte del modelo de caja clásico, <kbd>border-radius</kbd> redondea las esquinas de la caja de borde de un elemento. Usa <kbd>50%</kbd> en un elemento cuadrado para crear un círculo.",
+			"task": "Haz la imagen del avatar circular con <kbd>border-radius: 50%</kbd>.",
+			"previewHTML": "<article class=\"card\"><img class=\"avatar\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='25' fill='%23666'/%3E%3Ccircle cx='50' cy='90' r='40' fill='%23666'/%3E%3C/svg%3E\" alt=\"Avatar\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; text-align: center; } .avatar { width: 80px; height: 80px; background: #ddd; margin-bottom: 8px; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".padded {\n  ",
+			"codePrefix": ".avatar {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "padding: 2rem;",
+			"solution": "border-radius: 50%;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "padding", "expected": "2rem" },
-					"message": "Set <kbd>padding: 2rem</kbd>"
+					"value": { "property": "border-radius", "expected": "50%" },
+					"message": "Establece <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-8",
-			"title": "Border on Specific Sides",
-			"description": "For granular control, you can target specific sides with <kbd>border-top</kbd>, <kbd>border-right</kbd>, <kbd>border-bottom</kbd>, or <kbd>border-left</kbd>.",
-			"task": "Set <kbd>border-bottom</kbd> to <kbd>4px solid dodgerblue</kbd>.",
-			"previewHTML": "<div class=\"line\">This element needs only a bottom border</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }",
+			"title": "Complete Card",
+			"description": "Combinemos todo. Esta tarjeta de notificación necesita estilo para verse profesional.",
+			"task": "Estiliza la notificación: añade <kbd>padding: 1rem</kbd>, <kbd>border-left: 4px solid coral</kbd> y <kbd>border-radius: 4px</kbd>.",
+			"previewHTML": "<div class=\"alert\"><strong>New message</strong><p>You have 3 unread notifications</p></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { background: seashell; } .alert strong { color: coral; } .alert p { margin: 4px 0 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".line {\n  ",
+			"codePrefix": ".alert {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border-bottom: 4px solid dodgerblue;",
+			"solution": "padding: 1rem;\n  border-left: 4px solid coral;\n  border-radius: 4px;",
 			"previewContainer": "preview-area",
 			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "Establece <kbd>padding: 1rem</kbd>"
+				},
 				{
 					"type": "regex",
-					"value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue",
-					"message": "Set <kbd>border-bottom: 4px solid dodgerblue</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+coral",
+					"message": "Establece <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "border-radius", "expected": "4px" },
+					"message": "Establece <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}

lessons/es/05-units-variables.json

@@ -1,115 +1,100 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "units-variables",
-	"title": "CSS Units & Variables",
-	"description": "Understand the variety of CSS measurement units and how to define and use custom properties for maintainable styles.",
+	"title": "Unidades y Variables CSS",
+	"description": "Comprende la variedad de unidades de medida CSS y cómo definir y usar propiedades personalizadas para estilos mantenibles.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "units-1",
-			"title": "Absolute vs. Relative Units",
-			"description": "Learn the difference between px, rem, em, %, and vw/vh for flexible, responsive layouts.",
-			"task": "Set the <kbd>width</kbd> of <kbd>.box</kbd> to <kbd>80%</kbd> and <kbd>max-width</kbd> to <kbd>37.5rem</kbd>.",
-			"previewHTML": "<div class=\"box\">Resize me!</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background: #f5f5f5; padding: 1rem; }",
+			"title": "Relative Units",
+			"description": "CSS ofrece dos tipos de unidades: <em>absolutas</em> (como <kbd>px</kbd>) y <em>relativas</em> (como <kbd>%</kbd> y <kbd>rem</kbd>). Las unidades relativas se adaptan a su contexto, haciendo los layouts flexibles y accesibles.<br><br><strong>Unidades relativas comunes:</strong><br>• <kbd>%</kbd> – Relativo al elemento padre<br>• <kbd>rem</kbd> – Relativo al tamaño de fuente raíz (típicamente 16px)<br>• <kbd>em</kbd> – Relativo al tamaño de fuente del elemento<br><br>Un patrón común para contenido legible: establece <kbd>width: 100%</kbd> para llenar el espacio disponible, luego <kbd>max-width: 40rem</kbd> para limitar la longitud de línea para legibilidad.",
+			"task": "Este texto de artículo es demasiado ancho en pantallas grandes. Añade <kbd>max-width: 40rem</kbd> para un ancho de lectura óptimo.",
+			"previewHTML": "<article class=\"article\"><h2>The Art of Typography</h2><p>Good typography is invisible. When text is set well, readers absorb information without noticing the design decisions that make it comfortable to read. Line length is crucial—too wide and eyes get lost, too narrow and reading becomes choppy.</p><p>The ideal line length is 45-75 characters per line. At typical font sizes, this works out to roughly 40rem maximum width.</p></article>",
+			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 1rem; background: #f9f9f9; } .article { background: white; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .article h2 { margin: 0 0 1rem; color: #333; } .article p { margin: 0 0 1rem; line-height: 1.6; color: #444; } .article p:last-child { margin-bottom: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Set flexible sizing */\n.box {",
+			"codePrefix": ".article {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 80%;\n  max-width: 37.5rem;",
+			"codeSuffix": "\n}",
+			"solution": "max-width: 40rem;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "width", "message": "Use <kbd>width</kbd> property", "options": { "caseSensitive": false } },
-				{ "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Set width to <kbd>80%</kbd>" },
-				{ "type": "contains", "value": "max-width", "message": "Use <kbd>max-width</kbd> property", "options": { "caseSensitive": false } },
 				{
 					"type": "property_value",
-					"value": { "property": "max-width", "expected": "37.5rem" },
-					"message": "Set max-width to <kbd>37.5rem</kbd>"
+					"value": { "property": "max-width", "expected": "40rem" },
+					"message": "Establece <kbd>max-width: 40rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "units-2",
-			"title": "CSS Custom Properties",
-			"description": "Define and reuse variables (--custom properties) to centralize your theme values.",
-			"task": "Create a <kbd>--main-color</kbd> variable in <kbd>:root</kbd> with <kbd>#6200ee</kbd> and apply it as the border color on <kbd>.themed</kbd>.",
-			"previewHTML": "<div class=\"themed\">Variable Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }",
+			"title": "CSS Variables",
+			"description": "Las propiedades personalizadas CSS (variables) te permiten definir valores reutilizables. Defínelas con <kbd>--nombre</kbd> y úsalas con <kbd>var(--nombre)</kbd>. Las variables definidas en <kbd>:root</kbd> están disponibles en todas partes.",
+			"task": "Define <kbd>--brand: steelblue</kbd> en <kbd>:root</kbd>, luego úsala como color de <kbd>background</kbd> para <kbd>.btn</kbd>.",
+			"previewHTML": "<div class=\"actions\"><button class=\"btn\">Subscribe</button><button class=\"btn\">Learn More</button></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .actions { display: flex; gap: 1rem; } .btn { color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #ccc; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Define and use a CSS variable */\n:root {",
+			"codePrefix": ":root {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}\n.themed { }",
-			"solution": "  --main-color: #6200ee;\n}\n.themed {\n  border-color: var(--main-color);",
+			"codeSuffix": "\n}\n\n.btn {\n  background: var(--brand);\n}",
+			"solution": "--brand: steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "contains",
-					"value": "--main-color",
-					"message": "Define <kbd>--main-color</kbd> in :root",
+					"value": "--brand",
+					"message": "Define la variable <kbd>--brand</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
-					"value": "var(--main-color)",
-					"message": "Use <kbd>var(--main-color)</kbd>",
+					"value": "steelblue",
+					"message": "Establece el valor a <kbd>steelblue</kbd>",
 					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "property_value",
-					"value": { "property": "border", "expected": "var(--main-color)" },
-					"message": "Apply variable to border color",
-					"options": { "exact": false }
 				}
 			]
 		},
 		{
 			"id": "units-3",
-			"title": "Unit Calculations (calc)",
-			"description": "Use the <kbd>calc()</kbd> function to combine different units in one expression.",
-			"task": "Set the <kbd>width</kbd> of <kbd>.sized</kbd> to <kbd>calc(100% - 2rem)</kbd> and <kbd>min-height</kbd> to <kbd>calc(10vh + 1rem)</kbd>.",
-			"previewHTML": "<div class=\"sized\">Calc Demo</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }",
+			"title": "calc() Function",
+			"description": "La función <kbd>calc()</kbd> te permite mezclar diferentes unidades en cálculos. Esto es esencial para layouts que combinan tamaños fijos y flexibles, como un layout con barra lateral.",
+			"task": "El contenido principal debe llenar el espacio restante después de la barra lateral de 200px. Establece <kbd>width: calc(100% - 200px)</kbd> en <kbd>.main</kbd>.",
+			"previewHTML": "<div class=\"layout\"><aside class=\"sidebar\">Sidebar<br>Navigation</aside><main class=\"main\"><h2>Main Content</h2><p>This area should fill the remaining width after accounting for the fixed-width sidebar.</p></main></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .layout { display: flex; gap: 1rem; } .sidebar { width: 200px; background: #1a1a2e; color: white; padding: 1rem; border-radius: 8px; flex-shrink: 0; } .main { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .main h2 { margin: 0 0 8px; } .main p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use calc for dynamic sizing */\n.sized {",
+			"codePrefix": ".main {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: calc(100% - 2rem);\n  min-height: calc(10vh + 1rem);",
+			"codeSuffix": "\n}",
+			"solution": "width: calc(100% - 200px);",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "calc", "message": "Use <kbd>calc()</kbd> function", "options": { "caseSensitive": false } },
 				{
 					"type": "regex",
-					"value": "width:\\s*calc\\(100% - 2rem\\)",
-					"message": "Width should be <kbd>calc(100% - 2rem)</kbd>",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "regex",
-					"value": "min-height:\\s*calc\\(10vh \\+ 1rem\\)",
-					"message": "Min-height should be <kbd>calc(10vh + 1rem)</kbd>",
+					"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
+					"message": "Establece <kbd>width: calc(100% - 200px)</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "units-4",
-			"title": "Viewport & Responsive Units",
-			"description": "Control layouts relative to viewport size with vw, vh, and vmin/vmax units.",
-			"task": "Give <kbd>.view</kbd> a <kbd>width</kbd> of <kbd>50vw</kbd> and <kbd>height</kbd> of <kbd>20vh</kbd>.",
-			"previewHTML": "<div class=\"view\">Viewport Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .view { background: #ffe0b2; }",
+			"title": "Viewport Units",
+			"description": "Las unidades de viewport dimensionan elementos relativos a la ventana del navegador:<br>• <kbd>vw</kbd> – 1% del ancho del viewport<br>• <kbd>vh</kbd> – 1% de la altura del viewport<br><br>Son perfectas para secciones de pantalla completa como banners hero.",
+			"task": "Haz que esta sección hero llene la altura del viewport estableciendo <kbd>min-height: 100vh</kbd>.",
+			"previewHTML": "<section class=\"hero\"><h1>Welcome</h1><p>Scroll down to explore</p></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .hero { background: linear-gradient(135deg, #1a1a2e 0%, steelblue 100%); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .hero h1 { margin: 0 0 1rem; font-size: 2.5rem; } .hero p { margin: 0; opacity: 0.8; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use viewport units */\n.view {",
+			"codePrefix": ".hero {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 50vw;\n  height: 20vh;",
+			"codeSuffix": "\n}",
+			"solution": "min-height: 100vh;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "vw", "message": "Use <kbd>vw</kbd> unit", "options": { "caseSensitive": false } },
-				{ "type": "contains", "value": "vh", "message": "Use <kbd>vh</kbd> unit", "options": { "caseSensitive": false } },
-				{ "type": "property_value", "value": { "property": "width", "expected": "50vw" }, "message": "Set width to <kbd>50vw</kbd>" },
-				{ "type": "property_value", "value": { "property": "height", "expected": "20vh" }, "message": "Set height to <kbd>20vh</kbd>" }
+				{
+					"type": "property_value",
+					"value": { "property": "min-height", "expected": "100vh" },
+					"message": "Establece <kbd>min-height: 100vh</kbd>"
+				}
 			]
 		}
 	]

lessons/es/06-transitions-animations.json

@@ -1,15 +1,15 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "transitions-animations",
-	"title": "CSS Animations",
-	"description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.",
+	"title": "Animaciones CSS",
+	"description": "Añade interactividad a tu UI mediante transiciones suaves de propiedades y animaciones basadas en keyframes.",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "transitions-1",
 			"title": "Transitions",
-			"description": "Learn how to apply <kbd>transition</kbd> to properties for smooth changes on state changes.<br><br><pre>transition: property duration;\n/* e.g. transition: background-color 0.3s; */</pre>",
-			"task": "Add <kbd>transition: background-color 0.3s</kbd> to <kbd>.btn</kbd> so the color fades smoothly on hover.",
+			"description": "Aprende a aplicar <kbd>transition</kbd> a propiedades para cambios suaves en estados.<br><br><pre>transition: property duration;\n/* ej. transition: background-color 0.3s; */</pre>",
+			"task": "Añade <kbd>transition: background-color 0.3s</kbd> para que el color cambie suavemente al hacer hover.",
 			"previewHTML": "<button class=\"btn\">Hover Me</button>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: black; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; } .btn:hover { background: white; color: black; }",
 			"sandboxCSS": "",
@@ -22,13 +22,13 @@
 				{
 					"type": "contains",
 					"value": "transition",
-					"message": "Use the <kbd>transition</kbd> property",
+					"message": "Usa la propiedad <kbd>transition</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
 					"value": "transition:\\s*background-color\\s*0\\.3s",
-					"message": "Set <kbd>transition: background-color 0.3s</kbd>",
+					"message": "Establece <kbd>transition: background-color 0.3s</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -36,8 +36,8 @@
 		{
 			"id": "transitions-2",
 			"title": "Timing Funcs",
-			"description": "Explore easing functions like <kbd>ease</kbd>, <kbd>linear</kbd>, <kbd>ease-in</kbd>, <kbd>ease-out</kbd> to control animation pacing.",
-			"task": "Set <kbd>transition-timing-function</kbd> to <kbd>ease-in-out</kbd> on <kbd>.btn</kbd>.",
+			"description": "Explora funciones de easing como <kbd>ease</kbd>, <kbd>linear</kbd>, <kbd>ease-in</kbd>, <kbd>ease-out</kbd> para controlar el ritmo de la animación.",
+			"task": "Establece <kbd>transition-timing-function</kbd> a <kbd>ease-in-out</kbd>.",
 			"previewHTML": "<button class=\"btn\">Timing</button>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: navy; color: gold; padding: 0.5rem 1rem; border: none; cursor: pointer; transition: all 0.5s; } .btn:hover { background: gold; color: navy; transform: scale(1.1); }",
 			"sandboxCSS": "",
@@ -50,21 +50,21 @@
 				{
 					"type": "contains",
 					"value": "transition-timing-function",
-					"message": "Use <kbd>transition-timing-function</kbd>",
+					"message": "Usa <kbd>transition-timing-function</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
-					"message": "Set timing to <kbd>ease-in-out</kbd>"
+					"message": "Establece timing a <kbd>ease-in-out</kbd>"
 				}
 			]
 		},
 		{
 			"id": "transitions-3",
 			"title": "Keyframes",
-			"description": "Create named animations using <kbd>@keyframes</kbd> and apply them via the <kbd>animation</kbd> shorthand.<br><br><pre>@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}</pre>",
-			"task": "Define a keyframe at <kbd>50%</kbd> with <kbd>transform: translateY(-20px)</kbd> and apply <kbd>animation: bounce 1s infinite</kbd> to <kbd>.ball</kbd>.",
+			"description": "Crea animaciones nombradas usando <kbd>@keyframes</kbd> y aplícalas con el atajo <kbd>animation</kbd>.<br><br><pre>@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}</pre>",
+			"task": "Define un keyframe en <kbd>50%</kbd> con <kbd>transform: translateY(-20px)</kbd> y aplica <kbd>animation: bounce 1s infinite</kbd> a <kbd>.ball</kbd>.",
 			"previewHTML": "<div class=\"ball\"></div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; margin: 2rem auto; }",
 			"sandboxCSS": "",
@@ -83,19 +83,19 @@
 				{
 					"type": "regex",
 					"value": "50%.*transform: translateY\\(-20px\\)",
-					"message": "At <kbd>50%</kbd>, use <kbd>transform: translateY(-20px)</kbd>",
+					"message": "En <kbd>50%</kbd>, usa <kbd>transform: translateY(-20px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": "animation",
-					"message": "Use <kbd>animation</kbd> property on <kbd>.ball</kbd>",
+					"message": "Usa la propiedad <kbd>animation</kbd> en <kbd>.ball</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
 					"value": "animation:.*bounce.*1s.*infinite",
-					"message": "Apply <kbd>animation: bounce 1s infinite</kbd>",
+					"message": "Aplica <kbd>animation: bounce 1s infinite</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -103,8 +103,8 @@
 		{
 			"id": "transitions-4",
 			"title": "Animation Properties",
-			"description": "Fine-tune animations with <kbd>animation-delay</kbd>, <kbd>animation-iteration-count</kbd>, <kbd>animation-direction</kbd>, and <kbd>animation-fill-mode</kbd>.",
-			"task": "Apply the <kbd>pulse</kbd> animation to <kbd>.box</kbd> with <kbd>animation-name: pulse</kbd>, <kbd>animation-duration: 2s</kbd>, <kbd>animation-delay: 1s</kbd>, <kbd>animation-iteration-count: 2</kbd>, and <kbd>animation-fill-mode: forwards</kbd>.",
+			"description": "Ajusta las animaciones con <kbd>animation-delay</kbd>, <kbd>animation-iteration-count</kbd>, <kbd>animation-direction</kbd> y <kbd>animation-fill-mode</kbd>.",
+			"task": "Aplica la animación <kbd>pulse</kbd> a <kbd>.box</kbd> con <kbd>animation-name: pulse</kbd>, <kbd>animation-duration: 2s</kbd>, <kbd>animation-delay: 1s</kbd>, <kbd>animation-iteration-count: 2</kbd> y <kbd>animation-fill-mode: forwards</kbd>.",
 			"previewHTML": "<div class=\"box\">Pulse</div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { width: 100px; height: 100px; background: black; color: white; display: flex; align-items: center; justify-content: center; margin: 2rem auto; } @keyframes pulse { 0% { background: black; color: white; transform: scale(1); } 50% { background: white; color: black; transform: scale(1.2); } 100% { background: limegreen; color: black; transform: scale(1); } }",
 			"sandboxCSS": "",
@@ -117,27 +117,27 @@
 				{
 					"type": "property_value",
 					"value": { "property": "animation-name", "expected": "pulse" },
-					"message": "Set <kbd>animation-name: pulse</kbd>"
+					"message": "Establece <kbd>animation-name: pulse</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-duration", "expected": "2s" },
-					"message": "Set <kbd>animation-duration: 2s</kbd>"
+					"message": "Establece <kbd>animation-duration: 2s</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-delay", "expected": "1s" },
-					"message": "Set <kbd>animation-delay: 1s</kbd>"
+					"message": "Establece <kbd>animation-delay: 1s</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-iteration-count", "expected": "2" },
-					"message": "Set <kbd>animation-iteration-count: 2</kbd>"
+					"message": "Establece <kbd>animation-iteration-count: 2</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-fill-mode", "expected": "forwards" },
-					"message": "Set <kbd>animation-fill-mode: forwards</kbd>"
+					"message": "Establece <kbd>animation-fill-mode: forwards</kbd>"
 				}
 			]
 		}

lessons/es/08-responsive.json

@@ -2,14 +2,14 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "responsive-design",
 	"title": "CSS Responsive Design",
-	"description": "Make your layouts adapt to different screen sizes using media queries and fluid design techniques.",
+	"description": "Adapta tus layouts a diferentes tamaños de pantalla usando media queries y técnicas de diseño fluido.",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "responsive-1",
 			"title": "Media Queries",
-			"description": "Understand the syntax and use cases for CSS media queries to apply styles conditionally based on viewport characteristics.",
-			"task": "Write a media query with <kbd>@media (max-width: 600px)</kbd> that changes <kbd>.panel</kbd> background to <kbd>lightcoral</kbd>.",
+			"description": "Comprende la sintaxis y casos de uso de las media queries de CSS para aplicar estilos condicionalmente basándose en características del viewport.<br><br><pre>@media (max-width: 600px) {\n  .panel {\n    background: lightcoral;\n  }\n}</pre>",
+			"task": "Escribe una media query con <kbd>@media (max-width: 600px)</kbd> que cambie el fondo de <kbd>.panel</kbd> a <kbd>lightcoral</kbd>.",
 			"previewHTML": "<div class=\"panel\">Resize the window</div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }",
 			"sandboxCSS": "",
@@ -22,19 +22,19 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(max-width:\\s*600px\\)",
-					"message": "Use <kbd>@media (max-width: 600px)</kbd>",
+					"message": "Usa <kbd>@media (max-width: 600px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": ".panel",
-					"message": "Target <kbd>.panel</kbd> inside the media query",
+					"message": "Selecciona <kbd>.panel</kbd> dentro de la media query",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "background", "expected": "lightcoral" },
-					"message": "Set <kbd>background: lightcoral</kbd>",
+					"message": "Establece <kbd>background: lightcoral</kbd>",
 					"options": { "exact": false }
 				}
 			]
@@ -42,8 +42,8 @@
 		{
 			"id": "responsive-2",
 			"title": "Fluid Type",
-			"description": "Use relative units like <kbd>vw</kbd> to make font sizes scale with the viewport width.",
-			"task": "Set <kbd>font-size: 5vw</kbd> on <kbd>.text</kbd> so it scales as the viewport changes.",
+			"description": "Usa unidades relativas como <kbd>vw</kbd> para que los tamaños de fuente escalen con el ancho del viewport.",
+			"task": "Establece <kbd>font-size: 5vw</kbd> para que escale con el viewport.",
 			"previewHTML": "<p class=\"text\">Fluid Typography</p>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
 			"sandboxCSS": "",
@@ -53,46 +53,50 @@
 			"solution": "  font-size: 5vw;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Set <kbd>font-size: 5vw</kbd>" }
+				{
+					"type": "property_value",
+					"value": { "property": "font-size", "expected": "5vw" },
+					"message": "Establece <kbd>font-size: 5vw</kbd>"
+				}
 			]
 		},
 		{
 			"id": "responsive-3",
-			"title": "Flex Grids",
-			"description": "Combine CSS Grid with <kbd>auto-fit</kbd> or <kbd>auto-fill</kbd> for responsive column layouts.",
-			"task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.cards</kbd>.",
-			"previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
+			"title": "Responsive Grid",
+			"description": "Combina CSS Grid con <kbd>auto-fit</kbd> o <kbd>auto-fill</kbd> para layouts de columnas responsivos que ajustan automáticamente el número de columnas según el espacio disponible.",
+			"task": "Añade <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> y <kbd>gap: 1rem</kbd>.",
+			"previewHTML": "<section class=\"features\"><article class=\"feature\"><h3>Fast</h3><p>Lightning quick load times</p></article><article class=\"feature\"><h3>Secure</h3><p>Enterprise-grade security</p></article><article class=\"feature\"><h3>Reliable</h3><p>99.9% uptime guaranteed</p></article><article class=\"feature\"><h3>Support</h3><p>24/7 customer service</p></article></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .feature { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .feature h3 { margin: 0 0 8px; color: steelblue; } .feature p { margin: 0; color: #666; font-size: 0.9rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Create a responsive grid */\n.cards {",
+			"codePrefix": ".features {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
+			"codeSuffix": "\n}",
+			"solution": "display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
 					"value": { "property": "display", "expected": "grid" },
-					"message": "Set <kbd>display: grid</kbd>"
+					"message": "Establece <kbd>display: grid</kbd>"
 				},
 				{
 					"type": "regex",
 					"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
-					"message": "Use <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
+					"message": "Usa <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "gap", "expected": "1rem" },
-					"message": "Set <kbd>gap: 1rem</kbd>"
+					"message": "Establece <kbd>gap: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "responsive-4",
 			"title": "Mobile-First",
-			"description": "Adopt a mobile-first approach by writing base styles for small screens and enhancing for larger viewports.",
-			"task": "Write a media query with <kbd>@media (min-width: 768px)</kbd> that sets <kbd>.sidebar</kbd> width to <kbd>250px</kbd>.",
+			"description": "Adopta un enfoque mobile-first escribiendo estilos base para pantallas pequeñas y mejorándolos para viewports más grandes.",
+			"task": "Escribe una media query con <kbd>@media (min-width: 768px)</kbd> que establezca el ancho de <kbd>.sidebar</kbd> a <kbd>250px</kbd>.",
 			"previewHTML": "<aside class=\"sidebar\">Sidebar</aside>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sidebar { background: #c8e6c9; padding: 1rem; }",
 			"sandboxCSS": "",
@@ -105,19 +109,19 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(min-width:\\s*768px\\)",
-					"message": "Use <kbd>@media (min-width: 768px)</kbd>",
+					"message": "Usa <kbd>@media (min-width: 768px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": ".sidebar",
-					"message": "Target <kbd>.sidebar</kbd> inside media query",
+					"message": "Selecciona <kbd>.sidebar</kbd> en la media query",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "width", "expected": "250px" },
-					"message": "Set <kbd>width: 250px</kbd>",
+					"message": "Establece <kbd>width: 250px</kbd>",
 					"options": { "exact": false }
 				}
 			]

lessons/es/20-html-elements.json

@@ -2,94 +2,65 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-elements",
 	"title": "HTML Block & Inline",
-	"description": "Understanding the fundamental difference between container (block) and inline elements",
+	"description": "Comprende la diferencia fundamental entre elementos contenedores (bloque) y elementos en línea",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "block-vs-inline-intro",
-			"title": "Block vs Inline Elements",
-			"description": "HTML elements fall into two main categories:<br><br><strong>Block elements</strong> (containers) start on a new line and take full width. Examples: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>Inline elements</strong> flow within text and only take needed width. Examples: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
-			"task": "Wrap the word <kbd>important</kbd> with <kbd>&lt;strong&gt;</kbd> tags to make it bold. Notice how the paragraph (block) takes full width while strong (inline) flows with text.",
+			"title": "Elementos de bloque vs en línea",
+			"description": "Los elementos HTML se dividen en dos categorías principales:<br><br><strong>Elementos de bloque</strong> (contenedores) comienzan en una nueva línea y ocupan todo el ancho. Ejemplos: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>Elementos en línea</strong> fluyen dentro del texto y solo ocupan el ancho necesario. Ejemplos: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
+			"task": "Envuelve la palabra <kbd>importante</kbd> con etiquetas <kbd>&lt;strong&gt;</kbd> para ponerla en negrita. Observa cómo el párrafo (bloque) ocupa todo el ancho mientras que strong (en línea) fluye con el texto.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
 			"sandboxCSS": "",
-			"initialCode": "<p>This is a paragraph with an important word.</p>",
-			"solution": "<p>This is a paragraph with an <strong>important</strong> word.</p>",
+			"initialCode": "<p>Este es un párrafo con una palabra importante.</p>",
+			"solution": "<p>Este es un párrafo con una palabra <strong>importante</strong>.</p>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Add a <kbd>&lt;p&gt;</kbd> paragraph element"
+					"message": "Añade un elemento de párrafo <kbd>&lt;p&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "p", "child": "strong" },
-					"message": "Wrap the word <kbd>important</kbd> with <kbd>&lt;strong&gt;</kbd> tags"
+					"message": "Envuelve la palabra <kbd>importante</kbd> con etiquetas <kbd>&lt;strong&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "semantic-containers",
-			"title": "Semantic Tags",
-			"description": "Modern HTML uses semantic containers that describe their content:<br><br><kbd>&lt;header&gt;</kbd> - Page or section header<br><kbd>&lt;nav&gt;</kbd> - Navigation links<br><kbd>&lt;main&gt;</kbd> - Main content area<br><kbd>&lt;section&gt;</kbd> - Thematic grouping<br><kbd>&lt;article&gt;</kbd> - Self-contained content<br><kbd>&lt;footer&gt;</kbd> - Page or section footer",
-			"task": "Create a basic page structure:<br>1. Add a <kbd>&lt;header&gt;</kbd> with an <kbd>&lt;h1&gt;</kbd> containing the text <code>My Website</code><br>2. Add a <kbd>&lt;main&gt;</kbd> element with a paragraph saying <code>Welcome to my site!</code><br>3. Add a <kbd>&lt;footer&gt;</kbd> with a paragraph saying <code>Copyright 2026</code>",
+			"title": "Etiquetas semánticas",
+			"description": "El HTML moderno usa contenedores semánticos que describen su contenido:<br><br><kbd>&lt;header&gt;</kbd> - Encabezado de página o sección<br><kbd>&lt;nav&gt;</kbd> - Enlaces de navegación<br><kbd>&lt;main&gt;</kbd> - Área de contenido principal<br><kbd>&lt;section&gt;</kbd> - Agrupación temática<br><kbd>&lt;article&gt;</kbd> - Contenido independiente<br><kbd>&lt;footer&gt;</kbd> - Pie de página o sección",
+			"task": "Crea una estructura básica de página:<br>1. Añade un <kbd>&lt;header&gt;</kbd> con un <kbd>&lt;h1&gt;</kbd> que contenga el texto <code>Mi Sitio Web</code><br>2. Añade un elemento <kbd>&lt;main&gt;</kbd> con un párrafo que diga <code>¡Bienvenido a mi sitio!</code><br>3. Añade un <kbd>&lt;footer&gt;</kbd> con un párrafo que diga <code>Copyright 2026</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<header>\n  <h1>My Website</h1>\n</header>\n<main>\n  <p>Welcome to my site!</p>\n</main>\n<footer>\n  <p>Copyright 2026</p>\n</footer>",
+			"solution": "<header>\n  <h1>Mi Sitio Web</h1>\n</header>\n<main>\n  <p>¡Bienvenido a mi sitio!</p>\n</main>\n<footer>\n  <p>Copyright 2026</p>\n</footer>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "header",
-					"message": "Add a <kbd>&lt;header&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;header&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "main",
-					"message": "Add a <kbd>&lt;main&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;main&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "footer",
-					"message": "Add a <kbd>&lt;footer&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;footer&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "header", "child": "h1" },
-					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
-				}
-			]
-		},
-		{
-			"id": "div-vs-span",
-			"title": "div & span",
-			"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
-			"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
-			"sandboxCSS": "",
-			"initialCode": "The most highlighted moment was unforgettable.",
-			"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "div",
-					"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "span",
-					"message": "Add a <kbd>&lt;span&gt;</kbd> around the word <kbd>highlighted</kbd>"
-				},
-				{
-					"type": "element_text",
-					"value": { "selector": "span", "text": "highlighted" },
-					"message": "The <kbd>&lt;span&gt;</kbd> should contain the word <kbd>highlighted</kbd>"
+					"message": "Añade un encabezado <kbd>&lt;h1&gt;</kbd> dentro de tu header"
 				}
 			]
 		}

lessons/es/21-html-forms-basic.json

@@ -1,100 +1,100 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-basic",
-	"title": "HTML Forms",
-	"description": "Learn to create forms with various input types",
+	"title": "Formularios HTML",
+	"description": "Aprende a crear formularios con varios tipos de campos",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "form-structure",
-			"title": "Form Structure",
-			"description": "Every form needs a <kbd>&lt;form&gt;</kbd> wrapper. Inside, use <kbd>&lt;label&gt;</kbd> to describe inputs and <kbd>&lt;input&gt;</kbd> for user data entry.<br><br>The <kbd>for</kbd> attribute on labels should match the <kbd>id</kbd> on inputs for accessibility.",
-			"task": "Create a form with:<br>1. A <kbd>&lt;label&gt;</kbd> with the text <code>Name:</code> and <kbd>for=\"name\"</kbd> attribute<br>2. A text <kbd>&lt;input&gt;</kbd> with <kbd>id=\"name\"</kbd> and <kbd>name=\"name\"</kbd> attributes",
+			"title": "Estructura del formulario",
+			"description": "Todo formulario necesita un contenedor <kbd>&lt;form&gt;</kbd>. Dentro, usa <kbd>&lt;label&gt;</kbd> para describir campos y <kbd>&lt;input&gt;</kbd> para la entrada de datos.<br><br>El atributo <kbd>for</kbd> en los labels debe coincidir con el <kbd>id</kbd> de los inputs para accesibilidad.",
+			"task": "Crea un formulario con:<br>1. Un <kbd>&lt;label&gt;</kbd> con el texto <code>Nombre:</code> y el atributo <kbd>for=\"name\"</kbd><br>2. Un <kbd>&lt;input&gt;</kbd> de texto con los atributos <kbd>id=\"name\"</kbd> y <kbd>name=\"name\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<form>\n  <label for=\"name\">Name:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Nombre:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Wrap everything in a <kbd>&lt;form&gt;</kbd> element"
+					"message": "Envuelve todo en un elemento <kbd>&lt;form&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for your input"
+					"message": "Añade un <kbd>&lt;label&gt;</kbd> para tu campo"
 				},
 				{
 					"type": "element_exists",
 					"value": "input",
-					"message": "Add an <kbd>&lt;input&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;input&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "label", "attr": "for", "value": null },
-					"message": "Add a <kbd>for</kbd> attribute to your label"
+					"message": "Añade un atributo <kbd>for</kbd> a tu label"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "id", "value": null },
-					"message": "Add an <kbd>id</kbd> attribute to your input"
+					"message": "Añade un atributo <kbd>id</kbd> a tu campo"
 				}
 			]
 		},
 		{
 			"id": "input-types",
-			"title": "Input Types",
-			"description": "Different input types provide appropriate keyboards and validation:<br><br><kbd>type=\"text\"</kbd> - General text<br><kbd>type=\"email\"</kbd> - Email with @ validation<br><kbd>type=\"password\"</kbd> - Hidden characters<br><kbd>type=\"number\"</kbd> - Numeric keyboard<br><kbd>type=\"tel\"</kbd> - Phone keyboard",
-			"task": "Create a login form with two fields:<br>1. An email field: <kbd>&lt;label for=\"email\"&gt;Email:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. A password field: <kbd>&lt;label for=\"password\"&gt;Password:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
+			"title": "Tipos de campos",
+			"description": "Diferentes tipos de campos proporcionan teclados apropiados y validación:<br><br><kbd>type=\"text\"</kbd> - Texto general<br><kbd>type=\"email\"</kbd> - Email con validación @<br><kbd>type=\"password\"</kbd> - Caracteres ocultos<br><kbd>type=\"number\"</kbd> - Teclado numérico<br><kbd>type=\"tel\"</kbd> - Teclado telefónico",
+			"task": "Crea un formulario de inicio de sesión con dos campos:<br>1. Campo de email: <kbd>&lt;label for=\"email\"&gt;Email:&lt;/label&gt;</kbd> y <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. Campo de contraseña: <kbd>&lt;label for=\"password\"&gt;Contraseña:&lt;/label&gt;</kbd> y <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  \n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
+			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Contraseña:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "input[type='email']",
-					"message": "Add an input with type=\"email\""
+					"message": "Añade un campo con type=\"email\""
 				},
 				{
 					"type": "element_exists",
 					"value": "input[type='password']",
-					"message": "Add an input with type=\"password\""
+					"message": "Añade un campo con type=\"password\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "label", "min": 2 },
-					"message": "Add labels for both inputs"
+					"message": "Añade labels para ambos campos"
 				}
 			]
 		},
 		{
 			"id": "submit-button",
-			"title": "Submit Button",
-			"description": "Forms need a way to submit data. Use:<br><br><kbd>&lt;button type=\"submit\"&gt;</kbd> - Preferred, flexible content<br><kbd>&lt;input type=\"submit\"&gt;</kbd> - Simple text-only button<br><br>The button text should be action-oriented (e.g., <code>Sign In</code>, 'Register', 'Send').",
-			"task": "Add a submit button to the form with the text <code>Sign In</code>.",
+			"title": "Botón de envío",
+			"description": "Los formularios necesitan una forma de enviar datos. Usa:<br><br><kbd>&lt;button type=\"submit\"&gt;</kbd> - Preferido, contenido flexible<br><kbd>&lt;input type=\"submit\"&gt;</kbd> - Botón de solo texto<br><br>El texto del botón debe estar orientado a la acción (ej. <code>Iniciar Sesión</code>, 'Registrar', 'Enviar').",
+			"task": "Añade un botón de envío al formulario con el texto <code>Iniciar Sesión</code>.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">Sign In</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Contraseña:</label>\n  <input type=\"password\" id=\"password\">\n  \n</form>",
+			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Contraseña:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">Iniciar Sesión</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "button[type='submit'], input[type='submit']",
-					"message": "Add a submit button to your form"
+					"message": "Añade un botón de envío a tu formulario"
 				},
 				{
 					"type": "element_text",
-					"value": { "selector": "button", "text": "Sign In" },
-					"message": "The button should say <kbd>Sign In</kbd>"
+					"value": { "selector": "button", "text": "Iniciar Sesión" },
+					"message": "El botón debe decir <kbd>Iniciar Sesión</kbd>"
 				}
 			]
 		}

lessons/es/22-html-forms-validation.json

@@ -1,110 +1,32 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-validation",
-	"title": "HTML Validation",
-	"description": "Learn HTML5 built-in form validation attributes",
+	"title": "Validación de formularios",
+	"description": "Usa la validación integrada de HTML5 para mejor experiencia de usuario",
 	"mode": "html",
-	"difficulty": "intermediate",
+	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "required-fields",
-			"title": "Required Fields",
-			"description": "The <kbd>required</kbd> attribute prevents form submission if the field is empty.<br><br>Add it to any input that must be filled:<br><kbd>&lt;input type=\"text\" required&gt;</kbd><br><br>The browser shows a validation message automatically.",
-			"task": "Make both the name and email fields required by adding the <kbd>required</kbd> attribute.",
+			"title": "Campos requeridos",
+			"description": "El atributo <kbd>required</kbd> evita el envío del formulario si el campo está vacío. ¡El navegador muestra un mensaje de validación automáticamente - sin JavaScript!<br><br>Añádelo a cualquier campo que deba rellenarse:<br><kbd>&lt;input type=\"text\" required&gt;</kbd>",
+			"task": "Haz que ambos campos (nombre y email) sean requeridos añadiendo el atributo <kbd>required</kbd> a cada campo.",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 320px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } input:focus { outline: 2px solid steelblue; border-color: transparent; } button { margin-top: 20px; padding: 10px 20px; background: steelblue; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Submit</button>\n</form>",
-			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Submit</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"name\">Nombre *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Enviar</button>\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Nombre *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Enviar</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='name']", "attr": "required", "value": true },
-					"message": "Add the <kbd>required</kbd> attribute to the name input"
+					"message": "Añade <kbd>required</kbd> al campo de nombre"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='email']", "attr": "required", "value": true },
-					"message": "Add the <kbd>required</kbd> attribute to the email input"
-				}
-			]
-		},
-		{
-			"id": "input-constraints",
-			"title": "Constraints",
-			"description": "Control what users can enter:<br><br><kbd>minlength</kbd> / <kbd>maxlength</kbd> - Text length limits<br><kbd>min</kbd> / <kbd>max</kbd> - Number range<br><kbd>pattern</kbd> - Regex pattern matching<br><kbd>placeholder</kbd> - Hint text (not a label!)",
-			"task": "Add validation to the password input:<br>1. Add <kbd>minlength=\"8\"</kbd> for minimum length<br>2. Add <kbd>maxlength=\"20\"</kbd> for maximum length<br>3. Add <kbd>placeholder=\"Enter password\"</kbd> as a hint",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } small { display: block; font-size: 12px; color: #666; margin-top: 4px; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"solution": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
-					"message": "Add <kbd>minlength</kbd>=\"8\" to the password input"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
-					"message": "Add <kbd>maxlength</kbd>=\"20\" to the password input"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "placeholder", "value": null },
-					"message": "Add a <kbd>placeholder</kbd> to hint what to enter"
-				}
-			]
-		},
-		{
-			"id": "complete-registration",
-			"title": "Full Form",
-			"description": "Build a complete registration form with all validation concepts:<br><br>- Required fields marked with *<br>- Email validation (use type=\"email\")<br>- Password with length constraints<br>- Terms checkbox (required)<br>- Submit button",
-			"task": "Complete the registration form. Add required attributes, proper input types, and validation constraints.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } input[type='checkbox'] { width: auto; margin-right: 8px; vertical-align: middle; } label:has(input[type='checkbox']) { display: flex; align-items: center; font-weight: normal; } button { width: 100%; margin-top: 20px; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\">\n  \n  <label for=\"email\">Email *</label>\n  <input id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password *</label>\n  <input id=\"password\" name=\"password\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"solution": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Password *</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#fullname", "attr": "required", "value": true },
-					"message": "Make the full name field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "type", "value": "email" },
-					"message": "Set the email input <kbd>type=\"email\"</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "required", "value": true },
-					"message": "Make the email field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "type", "value": "password" },
-					"message": "Set the password input <kbd>type=\"password\"</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "required", "value": true },
-					"message": "Make the password field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "minlength", "value": "8" },
-					"message": "Add <kbd>minlength</kbd>=\"8\" to password"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#terms", "attr": "required", "value": true },
-					"message": "Make the terms checkbox <kbd>required</kbd>"
+					"message": "Añade <kbd>required</kbd> al campo de email"
 				}
 			]
 		}

lessons/es/23-html-details-summary.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-details-summary",
 	"title": "HTML Details & Summary",
-	"description": "Create expandable content sections without JavaScript",
+	"description": "Crea secciones expandibles sin JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "details-summary-basic",
-			"title": "First Widget",
-			"description": "The <kbd>&lt;details&gt;</kbd> element creates a collapsible section. The <kbd>&lt;summary&gt;</kbd> provides the clickable label.<br><br>Click the summary to toggle the hidden content - no JavaScript needed!",
-			"task": "Create a <kbd>&lt;details&gt;</kbd> element with:<br>1. A <kbd>&lt;summary&gt;</kbd> saying <code>Click to reveal</code><br>2. A <kbd>&lt;p&gt;</kbd> with the text <code>This content was hidden!</code>",
+			"title": "Primer widget",
+			"description": "El elemento <kbd>&lt;details&gt;</kbd> crea una sección plegable. El <kbd>&lt;summary&gt;</kbd> proporciona la etiqueta clickeable.<br><br>¡Haz clic en el resumen para mostrar el contenido oculto - sin JavaScript!",
+			"task": "Crea un elemento <kbd>&lt;details&gt;</kbd> con:<br>1. Un <kbd>&lt;summary&gt;</kbd> que diga <code>Click to reveal</code><br>2. Un <kbd>&lt;p&gt;</kbd> con el texto <code>This content was hidden!</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "details",
-					"message": "Add a <kbd>&lt;details&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;details&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "summary",
-					"message": "Add a <kbd>&lt;summary&gt;</kbd> inside the details"
+					"message": "Añade un <kbd>&lt;summary&gt;</kbd> dentro del details"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "summary" },
-					"message": "The <kbd>&lt;summary&gt;</kbd> must be inside <kbd>&lt;details&gt;</kbd>"
+					"message": "El <kbd>&lt;summary&gt;</kbd> debe estar dentro de <kbd>&lt;details&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "p" },
-					"message": "Add a <kbd>&lt;p&gt;</kbd> inside <kbd>&lt;details&gt;</kbd> for the hidden content"
+					"message": "Añade un <kbd>&lt;p&gt;</kbd> dentro de <kbd>&lt;details&gt;</kbd> para el contenido oculto"
 				}
 			]
 		},
 		{
 			"id": "details-open-attribute",
-			"title": "Pre-expanded Details",
-			"description": "By default, <kbd>&lt;details&gt;</kbd> is closed. Add the <kbd>open</kbd> attribute to show the content initially.<br><br>This is a boolean attribute - just add <kbd>open</kbd> without a value.",
-			"task": "Add the <kbd>open</kbd> attribute to the <kbd>&lt;details&gt;</kbd> element to show the content by default.",
+			"title": "Expandido por defecto",
+			"description": "Por defecto, <kbd>&lt;details&gt;</kbd> está cerrado. Añade el atributo <kbd>open</kbd> para mostrar el contenido inicialmente.<br><br>Este es un atributo booleano - solo añade <kbd>open</kbd> sin valor.",
+			"task": "Añade el atributo <kbd>open</kbd> al elemento <kbd>&lt;details&gt;</kbd> para mostrar el contenido por defecto.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; background: #f9f9f9; } summary { font-weight: 600; cursor: pointer; } details p { margin-top: 15px; color: #666; }",
 			"sandboxCSS": "",
@@ -55,15 +55,15 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "details", "attr": "open", "value": true },
-					"message": "Add the <kbd>open</kbd> attribute to <kbd>&lt;details&gt;</kbd>"
+					"message": "Añade el atributo <kbd>open</kbd> a <kbd>&lt;details&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "faq-accordion",
-			"title": "FAQ Accordion",
-			"description": "Multiple <kbd>&lt;details&gt;</kbd> elements create an accordion-style FAQ. Each question can be expanded independently.<br><br><b>Pro tip:</b> Type <kbd>details*3&gt;summary+p</kbd> and press Tab for Emmet expansion. <kbd>*3</kbd> creates 3 elements, <kbd>&gt;</kbd> nests inside, <kbd>+</kbd> adds siblings.",
-			"task": "Create an FAQ section with:<br>1. An <kbd>&lt;h1&gt;</kbd> saying <code>Frequently Asked Questions</code><br>2. Three <kbd>&lt;details&gt;</kbd> elements, each with a question in <kbd>&lt;summary&gt;</kbd> and an answer in <kbd>&lt;p&gt;</kbd>",
+			"title": "Acordeón FAQ",
+			"description": "Múltiples elementos <kbd>&lt;details&gt;</kbd> crean un FAQ estilo acordeón. Cada pregunta puede expandirse independientemente.<br><br><b>Pro tip:</b> Escribe <kbd>details*3&gt;summary+p</kbd> y presiona Tab para expansión Emmet. <kbd>*3</kbd> crea 3 elementos, <kbd>&gt;</kbd> anida dentro, <kbd>+</kbd> añade hermanos.",
+			"task": "Crea una sección FAQ con:<br>1. Un <kbd>&lt;h1&gt;</kbd> que diga <code>Frequently Asked Questions</code><br>2. Tres elementos <kbd>&lt;details&gt;</kbd>, cada uno con una pregunta en <kbd>&lt;summary&gt;</kbd> y una respuesta en <kbd>&lt;p&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
 			"sandboxCSS": "",
@@ -74,22 +74,22 @@
 				{
 					"type": "element_exists",
 					"value": "h1",
-					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading for the FAQ title"
+					"message": "Añade un encabezado <kbd>&lt;h1&gt;</kbd> para el título del FAQ"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "details", "min": 3 },
-					"message": "Create at least 3 <kbd>&lt;details&gt;</kbd> elements for the FAQ"
+					"message": "Crea al menos 3 elementos <kbd>&lt;details&gt;</kbd> para el FAQ"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "summary", "min": 3 },
-					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <kbd>&lt;summary&gt;</kbd> for the question"
+					"message": "Cada <kbd>&lt;details&gt;</kbd> necesita un <kbd>&lt;summary&gt;</kbd> para la pregunta"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "details p", "min": 3 },
-					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <kbd>&lt;p&gt;</kbd> for the answer"
+					"message": "Cada <kbd>&lt;details&gt;</kbd> necesita un <kbd>&lt;p&gt;</kbd> para la respuesta"
 				}
 			]
 		}

lessons/es/24-html-progress-meter.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-progress-meter",
 	"title": "HTML Progress & Meter",
-	"description": "Display completion status and scalar measurements natively",
+	"description": "Muestra el estado de completado y mediciones escalares nativamente",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "progress-basic",
-			"title": "Progress Bars",
-			"description": "The <kbd>&lt;progress&gt;</kbd> element shows task completion. Use <kbd>value</kbd> for current progress and <kbd>max</kbd> for the total.<br><br><b>Note:</b> This is not a self-closing tag! Write <kbd>&lt;progress&gt;...&lt;/progress&gt;</kbd> with fallback text inside for older browsers.",
-			"task": "Create a progress bar showing 70% completion:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Download:</code><br>2. Add a <kbd>&lt;progress&gt;</kbd> with <kbd>value=\"70\"</kbd> and <kbd>max=\"100\"</kbd>",
+			"title": "Barras de progreso",
+			"description": "El elemento <kbd>&lt;progress&gt;</kbd> muestra el progreso de una tarea. Usa <kbd>value</kbd> para el progreso actual y <kbd>max</kbd> para el total.<br><br><b>Nota:</b> ¡Esto no es una etiqueta de cierre automático! Escribe <kbd>&lt;progress&gt;...&lt;/progress&gt;</kbd> con texto alternativo dentro para navegadores antiguos.",
+			"task": "Crea una barra de progreso mostrando 70% de completado:<br>1. Añade un <kbd>&lt;label&gt;</kbd> que diga <code>Download:</code><br>2. Añade un <kbd>&lt;progress&gt;</kbd> con <kbd>value=\"70\"</kbd> y <kbd>max=\"100\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;progress&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "value", "value": "70" },
-					"message": "Set <kbd>value=</kbd>\"70\" on the progress element"
+					"message": "Establece <kbd>value=</kbd>\"70\" en el elemento progress"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "max", "value": "100" },
-					"message": "Set <kbd>max=</kbd>\"100\" on the progress element"
+					"message": "Establece <kbd>max=</kbd>\"100\" en el elemento progress"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the progress bar"
+					"message": "Añade un <kbd>&lt;label&gt;</kbd> para la barra de progreso"
 				}
 			]
 		},
 		{
 			"id": "progress-indeterminate",
-			"title": "Indeterminate Progress",
-			"description": "When progress is unknown (like loading), omit the <kbd>value</kbd> attribute. This creates an animated indeterminate state.<br><br>Useful for network requests or processes with unknown duration.",
-			"task": "Create a loading indicator:<br>1. Add a <kbd>&lt;p&gt;</kbd> saying <code>Loading...</code><br>2. Add a <kbd>&lt;progress&gt;</kbd> without a value attribute",
+			"title": "Progreso indeterminado",
+			"description": "Cuando el progreso es desconocido (como al cargar), omite el atributo <kbd>value</kbd>. Esto crea un estado animado indeterminado.<br><br>Útil para solicitudes de red o procesos con duración desconocida.",
+			"task": "Crea un indicador de carga:<br>1. Añade un <kbd>&lt;p&gt;</kbd> que diga <code>Loading...</code><br>2. Añade un <kbd>&lt;progress&gt;</kbd> sin atributo value",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
 			"sandboxCSS": "",
@@ -55,20 +55,20 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;progress&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Add a <kbd>&lt;p&gt;</kbd> with loading text"
+					"message": "Añade un <kbd>&lt;p&gt;</kbd> con texto de carga"
 				}
 			]
 		},
 		{
 			"id": "meter-gauge",
-			"title": "Meter Gauges",
-			"description": "The <kbd>&lt;meter&gt;</kbd> element displays a scalar value within a range. Use it for measurements like disk space, battery, or ratings.<br><br>Set <kbd>low</kbd>, <kbd>high</kbd>, and <kbd>optimum</kbd> to define good/bad ranges - the browser colors it accordingly!",
-			"task": "Create a battery level meter:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Battery:</code><br>2. Add a <kbd>&lt;meter&gt;</kbd> with:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> and <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> and <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
+			"title": "Indicadores meter",
+			"description": "El elemento <kbd>&lt;meter&gt;</kbd> muestra un valor escalar dentro de un rango. Úsalo para mediciones como espacio en disco, batería o calificaciones.<br><br>Establece <kbd>low</kbd>, <kbd>high</kbd> y <kbd>optimum</kbd> para definir rangos buenos/malos - ¡el navegador lo colorea correspondientemente!",
+			"task": "Crea un indicador de nivel de batería:<br>1. Añade un <kbd>&lt;label&gt;</kbd> que diga <code>Battery:</code><br>2. Añade un <kbd>&lt;meter&gt;</kbd> con:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> y <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> y <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
 			"sandboxCSS": "",
@@ -79,22 +79,42 @@
 				{
 					"type": "element_exists",
 					"value": "meter",
-					"message": "Add a <kbd>&lt;meter&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;meter&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "value", "value": "0.8" },
-					"message": "Set <kbd>value=</kbd>\"0.8\" on the meter"
+					"message": "Establece <kbd>value=</kbd>\"0.8\" en el meter"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "min", "value": "0" },
+					"message": "Establece <kbd>min=</kbd>\"0\" en el meter"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "max", "value": "1" },
+					"message": "Establece <kbd>max=</kbd>\"1\" en el meter"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "low", "value": "0.2" },
-					"message": "Set <kbd>low=</kbd>\"0.2\" to define the low threshold"
+					"message": "Establece <kbd>low=</kbd>\"0.2\" para definir el umbral bajo"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "high", "value": "0.8" },
+					"message": "Establece <kbd>high=</kbd>\"0.8\" para definir el umbral alto"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "optimum", "value": "1" },
+					"message": "Establece <kbd>optimum=</kbd>\"1\" para indicar el valor óptimo"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the meter"
+					"message": "Añade un <kbd>&lt;label&gt;</kbd> para el meter"
 				}
 			]
 		}

lessons/es/25-html-datalist.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-datalist",
 	"title": "Datalist",
-	"description": "Provide suggestions for text inputs without JavaScript",
+	"description": "Proporciona sugerencias para campos de texto sin JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "datalist-basic",
-			"title": "Input with Suggestions",
-			"description": "The <kbd>&lt;datalist&gt;</kbd> element provides autocomplete suggestions for inputs. Connect it using the <kbd>list</kbd> attribute on the input matching the datalist's <kbd>id</kbd>.<br><br>Users can still type freely - suggestions are just helpers!",
-			"task": "Create a browser selector:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Browser:</code><br>2. Add an <kbd>&lt;input&gt;</kbd> with <kbd>list=\"browsers\"</kbd><br>3. Add a <kbd>&lt;datalist id=\"browsers\"&gt;</kbd> with options for Chrome, Firefox, and Safari",
+			"title": "Campo con sugerencias",
+			"description": "El elemento <kbd>&lt;datalist&gt;</kbd> proporciona sugerencias de autocompletado para campos. Conéctalo usando el atributo <kbd>list</kbd> en el input que coincida con el <kbd>id</kbd> del datalist.<br><br>Los usuarios pueden escribir libremente - ¡las sugerencias son solo ayudas!",
+			"task": "Crea un selector de navegador:<br>1. Añade un <kbd>&lt;label&gt;</kbd> que diga <code>Navegador:</code><br>2. Añade un <kbd>&lt;input&gt;</kbd> con <kbd>list=\"browsers\"</kbd><br>3. Añade un <kbd>&lt;datalist id=\"browsers\"&gt;</kbd> con opciones para Chrome, Firefox y Safari",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Add a <kbd>&lt;datalist&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "browsers" },
-					"message": "Connect the input to datalist using <kbd>list=</kbd>\"browsers\""
+					"message": "Conecta el input al datalist usando <kbd>list=</kbd>\"browsers\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "option", "min": 3 },
-					"message": "Add at least 3 <kbd>&lt;option&gt;</kbd> elements inside <kbd>&lt;datalist&gt;</kbd>"
+					"message": "Añade al menos 3 elementos <kbd>&lt;option&gt;</kbd> dentro de <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the input"
+					"message": "Añade un <kbd>&lt;label&gt;</kbd> para el campo"
 				}
 			]
 		},
 		{
 			"id": "datalist-countries",
-			"title": "Country Selector",
-			"description": "Datalists work great for long lists like countries. Users can type to filter suggestions instantly.<br><br>The <kbd>value</kbd> attribute is what gets entered, and you can add display text after it.",
-			"task": "Create a country input:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Country:</code><br>2. Add an <kbd>&lt;input&gt;</kbd> with <kbd>list=\"countries\"</kbd><br>3. Add a <kbd>&lt;datalist id=\"countries\"&gt;</kbd> with at least 4 country options",
+			"title": "Selector de países",
+			"description": "Los datalist funcionan genial para listas largas como países. Los usuarios pueden escribir para filtrar sugerencias al instante.<br><br>El atributo <kbd>value</kbd> es lo que se ingresa, y puedes añadir texto de visualización después.",
+			"task": "Crea un campo de país:<br>1. Añade un <kbd>&lt;label&gt;</kbd> que diga <code>País:</code><br>2. Añade un <kbd>&lt;input&gt;</kbd> con <kbd>list=\"countries\"</kbd><br>3. Añade un <kbd>&lt;datalist id=\"countries\"&gt;</kbd> con al menos 4 opciones de países",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 30px; background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } label { display: block; margin-bottom: 10px; font-weight: 600; color: #00695c; } input { width: 100%; padding: 12px 15px; border: 2px solid #26a69a; border-radius: 8px; font-size: 16px; background: white; } input:focus { outline: none; border-color: #00695c; box-shadow: 0 0 0 3px rgba(38,166,154,0.2); }",
 			"sandboxCSS": "",
@@ -55,22 +55,22 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Add a <kbd>&lt;datalist&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "datalist", "attr": "id", "value": "countries" },
-					"message": "Set <kbd>id=</kbd>\"countries\" on the datalist"
+					"message": "Establece <kbd>id=</kbd>\"countries\" en el datalist"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "countries" },
-					"message": "Connect the input using <kbd>list=</kbd>\"countries\""
+					"message": "Conecta el input usando <kbd>list=</kbd>\"countries\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "option", "min": 4 },
-					"message": "Add at least 4 country options"
+					"message": "Añade al menos 4 opciones de países"
 				}
 			]
 		}

lessons/es/27-html-dialog.json

@@ -1,16 +1,16 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-dialog",
-	"title": "Dialogs",
-	"description": "Create modal dialogs without JavaScript libraries",
+	"title": "Diálogos",
+	"description": "Crea diálogos modales sin bibliotecas JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "dialog-basic",
-			"title": "Open Dialog",
-			"description": "The <kbd>&lt;dialog&gt;</kbd> element creates a native modal. Add the <kbd>open</kbd> attribute to show it.<br><br>Use <kbd>&lt;form method=\"dialog\"&gt;</kbd> inside to close it when the form submits - no JavaScript needed!",
-			"task": "Create a dialog with:<br>1. The <kbd>open</kbd> attribute to show it<br>2. An <kbd>&lt;h2&gt;</kbd> saying <code>Welcome!</code><br>3. A <kbd>&lt;p&gt;</kbd> with a greeting message<br>4. A <kbd>&lt;form method=\"dialog\"&gt;</kbd> with a close button",
+			"title": "Abrir diálogo",
+			"description": "El elemento <kbd>&lt;dialog&gt;</kbd> crea un modal nativo. Añade el atributo <kbd>open</kbd> para mostrarlo.<br><br>¡Usa <kbd>&lt;form method=\"dialog\"&gt;</kbd> dentro para cerrarlo al enviar el formulario - sin JavaScript!",
+			"task": "Crea un diálogo con:<br>1. El atributo <kbd>open</kbd> para mostrarlo<br>2. Un <kbd>&lt;h2&gt;</kbd> que diga <code>¡Bienvenido!</code><br>3. Un <kbd>&lt;p&gt;</kbd> con un mensaje de saludo<br>4. Un <kbd>&lt;form method=\"dialog\"&gt;</kbd> con un botón de cerrar",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: #f5f5f5; } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 400px; } dialog::backdrop { background: rgba(0,0,0,0.5); } dialog h2 { margin: 0 0 15px 0; color: #1976d2; } dialog p { color: #666; margin: 0 0 20px 0; } dialog button { background: #1976d2; color: white; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-size: 16px; } dialog button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
@@ -21,35 +21,35 @@
 				{
 					"type": "element_exists",
 					"value": "dialog",
-					"message": "Add a <kbd>&lt;dialog&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;dialog&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "dialog", "attr": "open", "value": true },
-					"message": "Add the <kbd>open</kbd> attribute to show the dialog"
+					"message": "Añade el atributo <kbd>open</kbd> para mostrar el diálogo"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog h2",
-					"message": "Add an <kbd>&lt;h2&gt;</kbd> heading inside the dialog"
+					"message": "Añade un encabezado <kbd>&lt;h2&gt;</kbd> dentro del diálogo"
 				},
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Add a <kbd>&lt;form method=\"dialog\"&gt;</kbd> for closing"
+					"message": "Añade un <kbd>&lt;form method=\"dialog\"&gt;</kbd> para cerrar"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog button",
-					"message": "Add a close button inside the form"
+					"message": "Añade un botón de cerrar dentro del formulario"
 				}
 			]
 		},
 		{
 			"id": "dialog-form",
-			"title": "Dialog + Form",
-			"description": "Dialogs can contain full forms. The <kbd>method=\"dialog\"</kbd> makes the form close the dialog on submit instead of sending data.<br><br>This pattern is perfect for confirmation dialogs, quick inputs, or settings panels.",
-			"task": "Create a confirmation dialog:<br>1. Add <kbd>open</kbd> to show it<br>2. An <kbd>&lt;h2&gt;</kbd> saying <code>Confirm Delete</code><br>3. A <kbd>&lt;p&gt;</kbd> asking <code>Are you sure?</code><br>4. A <kbd>&lt;form method=\"dialog\"&gt;</kbd> with Cancel and Delete buttons",
+			"title": "Diálogo + Formulario",
+			"description": "Los diálogos pueden contener formularios completos. El <kbd>method=\"dialog\"</kbd> hace que el formulario cierre el diálogo al enviar en lugar de enviar datos.<br><br>Este patrón es perfecto para diálogos de confirmación, entradas rápidas o paneles de configuración.",
+			"task": "Crea un diálogo de confirmación:<br>1. Añade <kbd>open</kbd> para mostrarlo<br>2. Un <kbd>&lt;h2&gt;</kbd> que diga <code>Confirmar eliminación</code><br>3. Un <kbd>&lt;p&gt;</kbd> preguntando <code>¿Estás seguro?</code><br>4. Un <kbd>&lt;form method=\"dialog\"&gt;</kbd> con botones Cancelar y Eliminar",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 350px; text-align: center; } dialog h2 { margin: 0 0 10px 0; color: #c62828; } dialog p { color: #666; margin: 0 0 20px 0; } dialog form { display: flex; gap: 10px; justify-content: center; } dialog button { padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; border: none; } dialog button:first-child { background: #e0e0e0; color: #333; } dialog button:last-child { background: #c62828; color: white; } dialog button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
@@ -60,22 +60,22 @@
 				{
 					"type": "element_exists",
 					"value": "dialog[open]",
-					"message": "Add a <kbd>&lt;dialog&gt;</kbd> with the open attribute"
+					"message": "Añade un <kbd>&lt;dialog&gt;</kbd> con el atributo open"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog h2",
-					"message": "Add a heading to the dialog"
+					"message": "Añade un encabezado al diálogo"
 				},
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Add a <kbd>&lt;form method=\"dialog\"&gt;</kbd> for the buttons"
+					"message": "Añade un <kbd>&lt;form method=\"dialog\"&gt;</kbd> para los botones"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "dialog button", "min": 2 },
-					"message": "Add at least 2 buttons (Cancel and Confirm)"
+					"message": "Añade al menos 2 botones (Cancelar y Confirmar)"
 				}
 			]
 		}

lessons/es/28-html-forms-fieldset.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-fieldset",
 	"title": "Fieldsets",
-	"description": "Group form controls with fieldset and legend elements",
+	"description": "Agrupa controles de formulario con elementos fieldset y legend",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "fieldset-basic",
-			"title": "Grouping with Fieldset",
-			"description": "The <kbd>&lt;fieldset&gt;</kbd> element groups related form controls together. Add a <kbd>&lt;legend&gt;</kbd> as the first child to give the group a title.<br><br>This helps with accessibility and visual organization of complex forms.",
-			"task": "Create a form with a fieldset:<br>1. A <kbd>&lt;form&gt;</kbd> element<br>2. A <kbd>&lt;fieldset&gt;</kbd> inside<br>3. A <kbd>&lt;legend&gt;</kbd> saying <code>Personal Info</code><br>4. Two labeled inputs for name and email",
+			"title": "Agrupar con Fieldset",
+			"description": "El elemento <kbd>&lt;fieldset&gt;</kbd> agrupa controles de formulario relacionados. Añade un <kbd>&lt;legend&gt;</kbd> como primer hijo para dar un título al grupo.<br><br>Esto ayuda con la accesibilidad y organización visual de formularios complejos.",
+			"task": "Crea un formulario con un fieldset:<br>1. Un elemento <kbd>&lt;form&gt;</kbd><br>2. Un <kbd>&lt;fieldset&gt;</kbd> dentro<br>3. Un <kbd>&lt;legend&gt;</kbd> que diga <code>Información Personal</code><br>4. Dos campos etiquetados para nombre y email",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
 			"sandboxCSS": "",
@@ -21,35 +21,35 @@
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Add a <kbd>&lt;form&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;form&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Add a <kbd>&lt;fieldset&gt;</kbd> inside the form"
+					"message": "Añade un <kbd>&lt;fieldset&gt;</kbd> dentro del formulario"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Add a <kbd>&lt;legend&gt;</kbd> to title your fieldset"
+					"message": "Añade un <kbd>&lt;legend&gt;</kbd> para titular tu fieldset"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "label", "min": 2 },
-					"message": "Add at least 2 labels"
+					"message": "Añade al menos 2 etiquetas"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "input", "min": 2 },
-					"message": "Add at least 2 input fields"
+					"message": "Añade al menos 2 campos de entrada"
 				}
 			]
 		},
 		{
 			"id": "fieldset-textarea",
-			"title": "Adding Textarea",
-			"description": "The <kbd>&lt;textarea&gt;</kbd> element creates a multi-line text input, perfect for longer content like messages or descriptions.<br><br>Use <kbd>rows</kbd> and <kbd>cols</kbd> attributes to set default size.",
-			"task": "Create a contact form:<br>1. A <kbd>&lt;fieldset&gt;</kbd> with <kbd>&lt;legend&gt;</kbd> <code>Contact Us</code><br>2. A labeled <kbd>&lt;input&gt;</kbd> for email<br>3. A labeled <kbd>&lt;textarea&gt;</kbd> for the message<br>4. A submit <kbd>&lt;button&gt;</kbd>",
+			"title": "Añadiendo Textarea",
+			"description": "El elemento <kbd>&lt;textarea&gt;</kbd> crea una entrada de texto multilínea, perfecta para contenido largo como mensajes o descripciones.<br><br>Usa los atributos <kbd>rows</kbd> y <kbd>cols</kbd> para establecer el tamaño predeterminado.",
+			"task": "Crea un formulario de contacto:<br>1. Un <kbd>&lt;fieldset&gt;</kbd> con <kbd>&lt;legend&gt;</kbd> <code>Contáctanos</code><br>2. Un <kbd>&lt;input&gt;</kbd> etiquetado para email<br>3. Un <kbd>&lt;textarea&gt;</kbd> etiquetado para el mensaje<br>4. Un <kbd>&lt;button&gt;</kbd> de envío",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
@@ -60,35 +60,35 @@
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Add a <kbd>&lt;fieldset&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;fieldset&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Add a <kbd>&lt;legend&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;legend&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "textarea",
-					"message": "Add a <kbd>&lt;textarea&gt;</kbd> for the message"
+					"message": "Añade un <kbd>&lt;textarea&gt;</kbd> para el mensaje"
 				},
 				{
 					"type": "element_exists",
 					"value": "button",
-					"message": "Add a submit button"
+					"message": "Añade un botón de envío"
 				},
 				{
 					"type": "element_exists",
 					"value": "input",
-					"message": "Add an input field for email"
+					"message": "Añade un campo de entrada para el email"
 				}
 			]
 		},
 		{
 			"id": "fieldset-multiple",
-			"title": "Multiple Fieldsets",
-			"description": "Complex forms can use multiple <kbd>&lt;fieldset&gt;</kbd> elements to organize different sections.<br><br>This improves usability for long forms like registration or checkout pages.",
-			"task": "Create a registration form with 2 fieldsets:<br>1. <code>Account Info</code> with username and password inputs<br>2. <code>Preferences</code> with a textarea for bio<br>3. A submit button outside the fieldsets",
+			"title": "Múltiples Fieldsets",
+			"description": "Los formularios complejos pueden usar múltiples elementos <kbd>&lt;fieldset&gt;</kbd> para organizar diferentes secciones.<br><br>Esto mejora la usabilidad en formularios largos como registro o checkout.",
+			"task": "Crea un formulario de registro con 2 fieldsets:<br>1. <code>Información de Cuenta</code> con campos de usuario y contraseña<br>2. <code>Preferencias</code> con un textarea para bio<br>3. Un botón de envío fuera de los fieldsets",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
 			"sandboxCSS": "",
@@ -99,27 +99,27 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "fieldset", "min": 2 },
-					"message": "Create at least 2 fieldsets"
+					"message": "Crea al menos 2 fieldsets"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "legend", "min": 2 },
-					"message": "Add a legend to each fieldset"
+					"message": "Añade un legend a cada fieldset"
 				},
 				{
 					"type": "element_exists",
 					"value": "textarea",
-					"message": "Add a textarea for the bio"
+					"message": "Añade un textarea para la bio"
 				},
 				{
 					"type": "element_exists",
 					"value": "button",
-					"message": "Add a submit button"
+					"message": "Añade un botón de envío"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "input", "min": 2 },
-					"message": "Add at least 2 input fields"
+					"message": "Añade al menos 2 campos de entrada"
 				}
 			]
 		}

lessons/es/30-html-tables.json

@@ -1,125 +1,42 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-tables",
-	"title": "HTML Tables",
-	"description": "Create structured data tables with headers and captions",
+	"title": "Tablas HTML",
+	"description": "Crea tablas de datos estructuradas con marcado semántico",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "table-basic",
-			"title": "Basic Table Structure",
-			"description": "Tables use <kbd>&lt;table&gt;</kbd> with <kbd>&lt;tr&gt;</kbd> for rows. Inside rows, use <kbd>&lt;th&gt;</kbd> for headers and <kbd>&lt;td&gt;</kbd> for data cells.<br><br>The <kbd>&lt;caption&gt;</kbd> element provides an accessible title for the table.",
-			"task": "Create a simple table with:<br>1. A <kbd>&lt;caption&gt;</kbd> saying <code>Fruit Prices</code><br>2. A header row with <code>Fruit</code> and <code>Price</code> columns<br>3. At least 2 data rows",
+			"title": "Tablas de datos",
+			"description": "Las tablas muestran datos estructurados en filas y columnas. Usa <kbd>&lt;table&gt;</kbd> como contenedor, <kbd>&lt;tr&gt;</kbd> para filas, <kbd>&lt;th&gt;</kbd> para celdas de encabezado y <kbd>&lt;td&gt;</kbd> para celdas de datos.<br><br>Añade <kbd>&lt;caption&gt;</kbd> para un título accesible que describa el contenido de la tabla.",
+			"task": "Crea una tabla de precios:<br>1. Un <kbd>&lt;caption&gt;</kbd> que diga <code>Pricing</code><br>2. Una fila de encabezado con <code>Plan</code> y <code>Price</code><br>3. Dos filas de datos para Basic ($9) y Pro ($29)",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px; font-weight: 600; font-size: 1.2rem; color: #333; background: #f8f9fa; } th, td { padding: 12px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 500; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 350px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 16px; font-weight: 600; font-size: 1.1rem; color: #333; background: #f8f9fa; } th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: steelblue; color: white; font-weight: 500; } tr:last-child td { border-bottom: none; } tr:hover td { background: #f8f9fa; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<table>\n  <caption>Fruit Prices</caption>\n  <tr>\n    <th>Fruit</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Apple</td>\n    <td>$1.50</td>\n  </tr>\n  <tr>\n    <td>Banana</td>\n    <td>$0.75</td>\n  </tr>\n</table>",
+			"solution": "<table>\n  <caption>Pricing</caption>\n  <tr>\n    <th>Plan</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Basic</td>\n    <td>$9</td>\n  </tr>\n  <tr>\n    <td>Pro</td>\n    <td>$29</td>\n  </tr>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;table&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> for the table title"
+					"message": "Añade un <kbd>&lt;caption&gt;</kbd> para el título de la tabla"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "th", "min": 2 },
-					"message": "Add at least 2 header cells (th)"
+					"message": "Añade celdas de encabezado (<kbd>&lt;th&gt;</kbd>) para Plan y Price"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "tr", "min": 3 },
-					"message": "Add at least 3 rows (1 header + 2 data rows)"
-				}
-			]
-		},
-		{
-			"id": "table-thead-tbody",
-			"title": "Table Head & Body",
-			"description": "Use <kbd>&lt;thead&gt;</kbd> to group header rows and <kbd>&lt;tbody&gt;</kbd> to group data rows. This helps browsers and assistive technology understand the table structure.<br><br>You can also use <kbd>&lt;tfoot&gt;</kbd> for footer rows like totals.",
-			"task": "Create a structured table:<br>1. A <kbd>&lt;caption&gt;</kbd> with <code>Monthly Sales</code><br>2. A <kbd>&lt;thead&gt;</kbd> with Month and Revenue headers<br>3. A <kbd>&lt;tbody&gt;</kbd> with at least 2 data rows",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } table { border-collapse: collapse; width: 100%; max-width: 450px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } caption { padding: 20px; font-weight: 700; font-size: 1.3rem; color: white; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); caption-side: top; } thead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } th { padding: 15px 20px; text-align: left; color: white; font-weight: 500; } tbody tr { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } td { padding: 15px 20px; color: #333; } tbody tr:last-child { border-bottom: none; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Monthly Sales</caption>\n  <thead>\n    <tr>\n      <th>Month</th>\n      <th>Revenue</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>January</td>\n      <td>$12,500</td>\n    </tr>\n    <tr>\n      <td>February</td>\n      <td>$14,200</td>\n    </tr>\n  </tbody>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Add a <kbd>&lt;thead&gt;</kbd> for the header section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Add a <kbd>&lt;tbody&gt;</kbd> for the data rows"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Add at least 2 data rows in tbody"
-				}
-			]
-		},
-		{
-			"id": "table-complete",
-			"title": "Complete Table with Footer",
-			"description": "Add <kbd>&lt;tfoot&gt;</kbd> to create a footer section for totals or summary data. The footer stays at the bottom even if tbody has many rows.<br><br>Combine all sections for a fully structured, accessible table.",
-			"task": "Create a complete table:<br>1. A <kbd>&lt;caption&gt;</kbd> with <code>Order Summary</code><br>2. A <kbd>&lt;thead&gt;</kbd> with Item and Price headers<br>3. A <kbd>&lt;tbody&gt;</kbd> with 2 items<br>4. A <kbd>&lt;tfoot&gt;</kbd> with a Total row",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px 20px; font-weight: 600; font-size: 1.1rem; color: #333; text-align: left; background: #f8f9fa; border-bottom: 2px solid #eee; } th, td { padding: 12px 20px; text-align: left; } thead th { background: #2c3e50; color: white; } tbody td { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } tfoot { background: #ecf0f1; font-weight: 600; } tfoot td { border-top: 2px solid #2c3e50; color: #2c3e50; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Order Summary</caption>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Price</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Widget</td>\n      <td>$25.00</td>\n    </tr>\n    <tr>\n      <td>Gadget</td>\n      <td>$35.00</td>\n    </tr>\n  </tbody>\n  <tfoot>\n    <tr>\n      <td>Total</td>\n      <td>$60.00</td>\n    </tr>\n  </tfoot>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Add a <kbd>&lt;thead&gt;</kbd> section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Add a <kbd>&lt;tbody&gt;</kbd> section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tfoot",
-					"message": "Add a <kbd>&lt;tfoot&gt;</kbd> section for the total"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Add at least 2 item rows in tbody"
+					"message": "Añade 3 filas (1 encabezado + 2 filas de datos)"
 				}
 			]
 		}

lessons/es/31-html-marquee.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-marquee",
 	"title": "HTML Marquee",
-	"description": "Create scrolling text with the classic (deprecated but fun!) marquee element",
+	"description": "Crea texto desplazable con el clásico (¡obsoleto pero divertido!) elemento marquee",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "marquee-basic",
-			"title": "Scrolling Text",
-			"description": "The <kbd>&lt;marquee&gt;</kbd> element creates scrolling text - a classic from the early web! While deprecated, it still works in most browsers.<br><br>Note: For production, use CSS animations instead. But for learning and fun, marquee is great!",
-			"task": "Create a simple marquee:<br>1. Add a <kbd>&lt;marquee&gt;</kbd> element<br>2. Put some text inside like <code>Welcome to my website!</code>",
+			"title": "Texto Desplazable",
+			"description": "El elemento <kbd>&lt;marquee&gt;</kbd> crea texto desplazable - ¡un clásico de la web temprana! Aunque está obsoleto, todavía funciona en la mayoría de navegadores.<br><br>Nota: Para producción, usa animaciones CSS. ¡Pero para aprender y divertirse, marquee es genial!",
+			"task": "Crea un marquee simple:<br>1. Añade un elemento <kbd>&lt;marquee&gt;</kbd><br>2. Pon texto dentro como <code>¡Bienvenido a mi sitio web!</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
 			"sandboxCSS": "",
@@ -21,15 +21,15 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;marquee&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "marquee-direction",
-			"title": "Direction & Behavior",
-			"description": "Control the marquee with attributes:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (default), slide (stops at edge), alternate (bounces)<br>• <kbd>scrollamount</kbd>: speed (default is 6)",
-			"task": "Create a bouncing marquee:<br>1. Add a <kbd>&lt;marquee&gt;</kbd> element<br>2. Set <kbd>behavior=\"alternate\"</kbd> to make it bounce<br>3. Add some fun text",
+			"title": "Dirección y Comportamiento",
+			"description": "Controla el marquee con atributos:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (predeterminado), slide (se detiene en el borde), alternate (rebota)<br>• <kbd>scrollamount</kbd>: velocidad (predeterminado es 6)",
+			"task": "Crea un marquee que rebota:<br>1. Añade un elemento <kbd>&lt;marquee&gt;</kbd><br>2. Pon <kbd>behavior=\"alternate\"</kbd> para hacerlo rebotar<br>3. Añade texto divertido",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
 			"sandboxCSS": "",
@@ -40,20 +40,20 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;marquee&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
-					"message": "Add <kbd>behavior=</kbd>\"alternate\" to make it bounce"
+					"message": "Añade <kbd>behavior=</kbd>\"alternate\" para hacerlo rebotar"
 				}
 			]
 		},
 		{
 			"id": "marquee-retro",
-			"title": "Retro News Ticker",
-			"description": "Combine multiple marquee attributes for a classic news ticker effect. You can even put multiple elements inside!<br><br>Remember: This is deprecated HTML. Modern sites use CSS animations, but marquee is great for understanding web history.",
-			"task": "Create a news ticker:<br>1. A <kbd>&lt;marquee&gt;</kbd> with <kbd>direction=\"left\"</kbd><br>2. Set <kbd>scrollamount=\"5\"</kbd> for smooth scrolling<br>3. Add a breaking news headline inside",
+			"title": "Ticker de Noticias Retro",
+			"description": "Combina múltiples atributos de marquee para un efecto clásico de ticker de noticias. ¡Puedes poner múltiples elementos dentro!<br><br>Recuerda: Esto es HTML obsoleto. Los sitios modernos usan animaciones CSS, pero marquee es genial para entender la historia de la web.",
+			"task": "Crea un ticker de noticias:<br>1. Un <kbd>&lt;marquee&gt;</kbd> con <kbd>direction=\"left\"</kbd><br>2. Pon <kbd>scrollamount=\"5\"</kbd> para desplazamiento suave<br>3. Añade un titular de última hora dentro",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
 			"sandboxCSS": "",
@@ -64,17 +64,17 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;marquee&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "direction", "value": "left" },
-					"message": "Add <kbd>direction=</kbd>\"left\" for horizontal scrolling"
+					"message": "Añade <kbd>direction=</kbd>\"left\" para desplazamiento horizontal"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
-					"message": "Add <kbd>scrollamount=</kbd>\"5\" for smooth speed"
+					"message": "Añade <kbd>scrollamount=</kbd>\"5\" para velocidad suave"
 				}
 			]
 		}

lessons/es/32-html-svg.json

@@ -2,99 +2,169 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-svg",
 	"title": "HTML SVG",
-	"description": "Draw scalable vector graphics directly in HTML",
+	"description": "Dibuja gráficos vectoriales escalables directamente en HTML",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "svg-circle",
-			"title": "Drawing Circles",
-			"description": "SVG (Scalable Vector Graphics) lets you draw shapes directly in HTML. The <kbd>&lt;svg&gt;</kbd> element is the container, with <kbd>width</kbd> and <kbd>height</kbd> attributes.<br><br>Use <kbd>&lt;circle&gt;</kbd> with <kbd>cx</kbd>, <kbd>cy</kbd> (center) and <kbd>r</kbd> (radius) to draw circles.",
-			"task": "Create an SVG with a circle:<br>1. An <kbd>&lt;svg&gt;</kbd> with width=\"200\" and height=\"200\"<br>2. A <kbd>&lt;circle&gt;</kbd> centered at (100,100) with radius 50<br>3. Add a <kbd>fill</kbd> color",
+			"title": "Dibujando círculos",
+			"description": "SVG (Scalable Vector Graphics) permite dibujar formas directamente en HTML. El elemento <kbd>&lt;svg&gt;</kbd> es el contenedor con atributos <kbd>width</kbd> y <kbd>height</kbd>.<br><br>Usa <kbd>&lt;circle&gt;</kbd> con <kbd>cx</kbd>, <kbd>cy</kbd> (centro) y <kbd>r</kbd> (radio) para dibujar círculos.",
+			"task": "Crea un SVG con un círculo:<br>1. Un <kbd>&lt;svg&gt;</kbd> con width=\"200\" y height=\"200\"<br>2. Un <kbd>&lt;circle&gt;</kbd> centrado en (100,100) con radio 50<br>3. Añade un color <kbd>fill</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; display: flex; justify-content: center; } svg { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"#3498db\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"steelblue\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;svg&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "circle",
-					"message": "Add a <kbd>&lt;circle&gt;</kbd> element inside the SVG"
+					"message": "Añade un elemento <kbd>&lt;circle&gt;</kbd> dentro del SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "width", "value": "200" },
+					"message": "Establece <kbd>width=</kbd>\"200\" en el SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "height", "value": "200" },
+					"message": "Establece <kbd>height=</kbd>\"200\" en el SVG"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cx", "value": "100" },
-					"message": "Set <kbd>cx=</kbd>\"100\" for the circle's horizontal center"
+					"message": "Establece <kbd>cx=</kbd>\"100\" para el centro horizontal del círculo"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cy", "value": "100" },
-					"message": "Set <kbd>cy=</kbd>\"100\" for the circle's vertical center"
+					"message": "Establece <kbd>cy=</kbd>\"100\" para el centro vertical del círculo"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "circle", "attr": "r", "value": "50" },
+					"message": "Establece <kbd>r=</kbd>\"50\" para el radio del círculo"
 				}
 			]
 		},
 		{
 			"id": "svg-rect-line",
-			"title": "Rectangles & Lines",
-			"description": "Draw rectangles with <kbd>&lt;rect&gt;</kbd> using <kbd>x</kbd>, <kbd>y</kbd>, <kbd>width</kbd>, <kbd>height</kbd>.<br><br>Draw lines with <kbd>&lt;line&gt;</kbd> using <kbd>x1</kbd>, <kbd>y1</kbd> (start) and <kbd>x2</kbd>, <kbd>y2</kbd> (end). Lines need a <kbd>stroke</kbd> color!",
-			"task": "Create an SVG with:<br>1. An <kbd>&lt;svg&gt;</kbd> (200x150)<br>2. A <kbd>&lt;rect&gt;</kbd> at position (20,20) with size 80x60<br>3. A <kbd>&lt;line&gt;</kbd> from (120,30) to (180,90) with a stroke color",
+			"title": "Rectángulos y líneas",
+			"description": "Dibuja rectángulos con <kbd>&lt;rect&gt;</kbd> usando <kbd>x</kbd>, <kbd>y</kbd>, <kbd>width</kbd>, <kbd>height</kbd>.<br><br>Dibuja líneas con <kbd>&lt;line&gt;</kbd> usando <kbd>x1</kbd>, <kbd>y1</kbd> (inicio) y <kbd>x2</kbd>, <kbd>y2</kbd> (fin). ¡Las líneas necesitan un color <kbd>stroke</kbd>!",
+			"task": "Crea un SVG con:<br>1. Un <kbd>&lt;svg&gt;</kbd> (200x150)<br>2. Un <kbd>&lt;rect&gt;</kbd> en posición (20,20) con tamaño 80x60<br>3. Una <kbd>&lt;line&gt;</kbd> de (120,30) a (180,90) con color stroke",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 200px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"#e74c3c\" />\n  <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"#2c3e50\" stroke-width=\"3\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"tomato\" />\n  <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"slategray\" stroke-width=\"3\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;svg&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "rect",
-					"message": "Add a <kbd>&lt;rect&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;rect&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "line",
-					"message": "Add a <kbd>&lt;line&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;line&gt;</kbd>"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "width", "value": "200" },
+					"message": "Establece <kbd>width=</kbd>\"200\" en el SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "height", "value": "150" },
+					"message": "Establece <kbd>height=</kbd>\"150\" en el SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "x", "value": "20" },
+					"message": "Establece <kbd>x=</kbd>\"20\" en el rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "y", "value": "20" },
+					"message": "Establece <kbd>y=</kbd>\"20\" en el rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "width", "value": "80" },
+					"message": "Establece <kbd>width=</kbd>\"80\" en el rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "height", "value": "60" },
+					"message": "Establece <kbd>height=</kbd>\"60\" en el rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "x1", "value": "120" },
+					"message": "Establece <kbd>x1=</kbd>\"120\" en la line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "y1", "value": "30" },
+					"message": "Establece <kbd>y1=</kbd>\"30\" en la line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "x2", "value": "180" },
+					"message": "Establece <kbd>x2=</kbd>\"180\" en la line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "y2", "value": "90" },
+					"message": "Establece <kbd>y2=</kbd>\"90\" en la line"
+				},
+				{
+					"type": "contains",
+					"value": "stroke",
+					"message": "Añade un color <kbd>stroke</kbd> a la line"
 				}
 			]
 		},
 		{
 			"id": "svg-shapes",
-			"title": "Multiple Shapes",
-			"description": "Combine shapes to create simple graphics! Add <kbd>stroke</kbd> for outlines and <kbd>stroke-width</kbd> for thickness.<br><br>Use <kbd>fill=\"none\"</kbd> for hollow shapes. Shapes stack in order - later elements appear on top.",
-			"task": "Create a simple face:<br>1. An <kbd>&lt;svg&gt;</kbd> (200x200)<br>2. A large <kbd>&lt;circle&gt;</kbd> for the face<br>3. Two small <kbd>&lt;circle&gt;</kbd> elements for eyes<br>4. A <kbd>&lt;line&gt;</kbd> for the smile",
+			"title": "Múltiples formas",
+			"description": "¡Combina formas para crear gráficos simples! Añade <kbd>stroke</kbd> para contornos y <kbd>stroke-width</kbd> para el grosor.<br><br>Usa <kbd>fill=\"none\"</kbd> para formas huecas. Las formas se apilan en orden - los elementos posteriores aparecen encima.",
+			"task": "Crea una cara simple:<br>1. Un <kbd>&lt;svg&gt;</kbd> (200x200)<br>2. Un <kbd>&lt;circle&gt;</kbd> grande para la cara<br>3. Dos <kbd>&lt;circle&gt;</kbd> pequeños para los ojos<br>4. Una <kbd>&lt;line&gt;</kbd> para la sonrisa",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 250px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#f1c40f\" stroke=\"#e67e22\" stroke-width=\"4\" />\n  <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"#2c3e50\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"gold\" stroke=\"orange\" stroke-width=\"4\" />\n  <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n  <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n  <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"darkslategray\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
+					"message": "Añade un elemento <kbd>&lt;svg&gt;</kbd>"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "circle", "min": 3 },
-					"message": "Add at least 3 circles (1 face + 2 eyes)"
+					"message": "Añade al menos 3 círculos (1 cara + 2 ojos)"
 				},
 				{
 					"type": "element_exists",
 					"value": "line",
-					"message": "Add a <kbd>&lt;line&gt;</kbd> for the smile"
+					"message": "Añade una <kbd>&lt;line&gt;</kbd> para la sonrisa"
 				}
 			]
 		}

lessons/es/flexbox.json

@@ -2,18 +2,18 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "flexbox",
 	"title": "CSS Flexbox",
-	"description": "Master the flexible box layout model for modern responsive designs",
+	"description": "Domina el modelo de caja flexible para diseños responsivos modernos",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "flexbox-1",
 			"title": "Container",
-			"description": "Learn how to create a flex container and understand the main and cross axes.",
-			"task": "Add <kbd>display: flex</kbd> to <kbd>.wrap</kbd> to create a flexbox layout.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "Antes de flexbox, incluso los diseños simples requerían floats, hacks de posicionamiento o diseños basados en tablas. Flexbox (Flexible Box Layout) revolucionó CSS al proporcionar un sistema de diseño unidimensional diseñado específicamente para distribuir espacio y alinear contenido.<br><br><strong>Cómo funciona:</strong> Cuando estableces <kbd>display: flex</kbd> en un elemento, se convierte en un <em>contenedor flex</em>. Sus hijos directos automáticamente se convierten en <em>elementos flex</em> que fluyen a lo largo de un eje principal (horizontal por defecto). Esta única propiedad transforma elementos de bloque apilados en una fila horizontal.<br><br><strong>Los dos ejes:</strong><br>• <em>Eje principal</em> – La dirección primaria del flujo de elementos (row = izquierda→derecha)<br>• <em>Eje transversal</em> – Perpendicular al principal (row = arriba→abajo)<br><br><pre>.nav {\n  display: flex;\n}</pre>",
+			"task": "Este menú de navegación se apila verticalmente. Añade <kbd>display: flex</kbd> para organizar los enlaces horizontalmente.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "display: flex;",
@@ -21,61 +21,41 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "display",
-						"expected": "flex"
-					},
-					"message": "Set <kbd>display: flex</kbd>"
+					"value": { "property": "display", "expected": "flex" },
+					"message": "Establece <kbd>display: flex</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-2",
-			"title": "Direction & Wrap",
-			"description": "Control the direction and wrapping of flex items within a container.",
-			"task": "Add <kbd>flex-direction: column</kbd> and <kbd>flex-wrap: wrap</kbd> to <kbd>.wrap</kbd>.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
-			"codePrefix": ".wrap {\n  ",
+			"title": "Gap",
+			"description": "La propiedad <kbd>gap</kbd> añade espaciado consistente entre elementos flex sin necesidad de márgenes. Solo crea espacio entre elementos, no en los bordes.",
+			"task": "Añade <kbd>gap: 1rem</kbd> para espaciar uniformemente los enlaces de navegación.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; background: rgba(255,255,255,0.1); }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "flex-direction: column;\n  flex-wrap: wrap;",
+			"solution": "gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "flex-direction",
-						"expected": "column"
-					},
-					"message": "Set <kbd>flex-direction: column</kbd>",
-					"options": {
-						"exact": true
-					}
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "flex-wrap",
-						"expected": "wrap"
-					},
-					"message": "Set <kbd>flex-wrap: wrap</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "gap", "expected": "1rem" },
+					"message": "Establece <kbd>gap: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-3",
 			"title": "Justify Content",
-			"description": "Learn how to align flex items along the main axis of the flex container.",
-			"task": "Add <kbd>justify-content: space-between</kbd> to <kbd>.wrap</kbd> to distribute the boxes evenly.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "<kbd>justify-content</kbd> distribuye elementos a lo largo del eje principal. Valores comunes:<br>• <kbd>flex-start</kbd> – agrupar al inicio<br>• <kbd>flex-end</kbd> – agrupar al final<br>• <kbd>center</kbd> – centrar elementos<br>• <kbd>space-between</kbd> – espacio igual entre elementos<br>• <kbd>space-around</kbd> – espacio igual alrededor de elementos",
+			"task": "Empuja el botón \"Login\" hacia la derecha estableciendo <kbd>justify-content: space-between</kbd> en la navegación.",
+			"previewHTML": "<nav class=\"nav\"><div class=\"links\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a></div><a href=\"#\" class=\"login\">Login</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .links { display: flex; gap: 8px; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); } .login { background: steelblue; }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "justify-content: space-between;",
@@ -83,26 +63,20 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "justify-content",
-						"expected": "space-between"
-					},
-					"message": "Set <kbd>justify-content: space-between</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "justify-content", "expected": "space-between" },
+					"message": "Establece <kbd>justify-content: space-between</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-4",
 			"title": "Align Items",
-			"description": "Control how flex items are aligned along the cross axis of the flex container.",
-			"task": "Add <kbd>align-items: center</kbd> to <kbd>.wrap</kbd> to vertically center the boxes.",
-			"previewHTML": "<div class='wrap'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "<kbd>align-items</kbd> controla la alineación en el eje transversal (vertical cuando flex-direction es row). Los valores incluyen:<br>• <kbd>stretch</kbd> – estirar para llenar (por defecto)<br>• <kbd>flex-start</kbd> – alinear arriba<br>• <kbd>flex-end</kbd> – alinear abajo<br>• <kbd>center</kbd> – centrar verticalmente",
+			"task": "El logo y los enlaces de navegación tienen diferentes alturas. Céntralos verticalmente con <kbd>align-items: center</kbd>.",
+			"previewHTML": "<header class=\"header\"><div class=\"logo\">ACME</div><nav><a href=\"#\">Products</a><a href=\"#\">Pricing</a><a href=\"#\">Docs</a></nav></header>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .header { background: white; padding: 1rem 2rem; display: flex; justify-content: space-between; border-bottom: 1px solid #eee; } .logo { font-size: 1.5rem; font-weight: bold; color: steelblue; } nav { display: flex; gap: 1rem; } nav a { color: #333; text-decoration: none; font-size: 0.9rem; }",
+			"sandboxCSS": "",
+			"codePrefix": ".header {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "align-items: center;",
@@ -110,62 +84,50 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "align-items",
-						"expected": "center"
-					},
-					"message": "Set <kbd>align-items: center</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "align-items", "expected": "center" },
+					"message": "Establece <kbd>align-items: center</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-5",
-			"title": "Flex Grow",
-			"description": "The <kbd>flex</kbd> property controls how much an item grows relative to others.",
-			"task": "Add <kbd>flex: 2</kbd> to <kbd>.box2</kbd> to make it grow twice as wide.",
-			"previewHTML": "<div class='wrap'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": ".box2 {\n  ",
+			"title": "Flex Wrap",
+			"description": "Por defecto, los elementos flex se comprimen en una línea. <kbd>flex-wrap: wrap</kbd> permite que los elementos fluyan a múltiples líneas cuando se quedan sin espacio.",
+			"task": "Estas tarjetas desbordan el contenedor. Añade <kbd>flex-wrap: wrap</kbd> para permitir que pasen a nuevas filas.",
+			"previewHTML": "<div class=\"cards\"><article class=\"card\">Card 1</article><article class=\"card\">Card 2</article><article class=\"card\">Card 3</article><article class=\"card\">Card 4</article><article class=\"card\">Card 5</article><article class=\"card\">Card 6</article></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .cards { display: flex; gap: 1rem; } .card { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); min-width: 120px; text-align: center; }",
+			"sandboxCSS": "",
+			"codePrefix": ".cards {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "flex: 2;",
+			"solution": "flex-wrap: wrap;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "flex",
-						"expected": "2"
-					},
-					"message": "Set <kbd>flex: 2</kbd>"
+					"value": { "property": "flex-wrap", "expected": "wrap" },
+					"message": "Establece <kbd>flex-wrap: wrap</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-6",
-			"title": "Align Self",
-			"description": "Use <kbd>align-self</kbd> to override alignment for a single flex item.",
-			"task": "Add <kbd>align-self: flex-start</kbd> to <kbd>.middle</kbd> to move it to the top.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
-			"codePrefix": ".middle {\n  ",
+			"title": "Flex Grow",
+			"description": "La propiedad <kbd>flex</kbd> en los elementos controla cómo crecen y se encogen. <kbd>flex: 1</kbd> hace que un elemento crezca para llenar el espacio disponible. Múltiples elementos con <kbd>flex: 1</kbd> comparten el espacio equitativamente.",
+			"task": "Haz que el campo de búsqueda se expanda para llenar el espacio disponible estableciendo <kbd>flex: 1</kbd> en <kbd>.search</kbd>.",
+			"previewHTML": "<div class=\"toolbar\"><input class=\"search\" type=\"text\" placeholder=\"Search...\"><button class=\"btn\">Search</button><button class=\"btn\">Filters</button></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .toolbar { display: flex; gap: 8px; padding: 1rem; background: #f5f5f5; border-radius: 8px; } .search { padding: 8px 1rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } .btn { padding: 8px 1rem; background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; }",
+			"sandboxCSS": "",
+			"codePrefix": ".search {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "align-self: flex-start;",
+			"solution": "flex: 1;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "align-self",
-						"expected": "flex-start"
-					},
-					"message": "Set <kbd>align-self: flex-start</kbd>"
+					"value": { "property": "flex", "expected": "1" },
+					"message": "Establece <kbd>flex: 1</kbd>"
 				}
 			]
 		}

lessons/flexbox.json

@@ -8,12 +8,12 @@
 		{
 			"id": "flexbox-1",
 			"title": "Container",
-			"description": "Learn how to create a flex container and understand the main and cross axes.<br><br><pre>.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}</pre>",
-			"task": "Add <kbd>display: flex</kbd> to <kbd>.wrap</kbd> to create a flexbox layout.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "Before flexbox, creating even simple layouts required floats, positioning hacks, or table-based layouts. Flexbox (Flexible Box Layout) revolutionized CSS by providing a one-dimensional layout system designed specifically for distributing space and aligning content.<br><br><strong>How it works:</strong> When you set <kbd>display: flex</kbd> on an element, it becomes a <em>flex container</em>. Its direct children automatically become <em>flex items</em> that flow along a main axis (horizontal by default). This single property transforms stacked block elements into a horizontal row.<br><br><strong>The two axes:</strong><br>• <em>Main axis</em> – The primary direction items flow (row = left→right)<br>• <em>Cross axis</em> – Perpendicular to main (row = top→bottom)<br><br><pre>.nav {\n  display: flex;\n}</pre>",
+			"task": "This navigation menu stacks vertically. Add <kbd>display: flex</kbd> to <kbd>.nav</kbd> to arrange the links horizontally.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "display: flex;",
@@ -21,61 +21,41 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "display",
-						"expected": "flex"
-					},
+					"value": { "property": "display", "expected": "flex" },
 					"message": "Set <kbd>display: flex</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-2",
-			"title": "Direction & Wrap",
-			"description": "Control the direction and wrapping of flex items within a container.",
-			"task": "Add <kbd>flex-direction: column</kbd> and <kbd>flex-wrap: wrap</kbd> to <kbd>.wrap</kbd>.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
-			"codePrefix": ".wrap {\n  ",
+			"title": "Gap",
+			"description": "The <kbd>gap</kbd> property adds consistent spacing between flex items without needing margins. It only creates space between items, not around the edges.",
+			"task": "Add <kbd>gap: 1rem</kbd> to space out the navigation links evenly.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; background: rgba(255,255,255,0.1); }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "flex-direction: column;\n  flex-wrap: wrap;",
+			"solution": "gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "flex-direction",
-						"expected": "column"
-					},
-					"message": "Set <kbd>flex-direction: column</kbd>",
-					"options": {
-						"exact": true
-					}
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "flex-wrap",
-						"expected": "wrap"
-					},
-					"message": "Set <kbd>flex-wrap: wrap</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "gap", "expected": "1rem" },
+					"message": "Set <kbd>gap: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-3",
 			"title": "Justify Content",
-			"description": "Learn how to align flex items along the main axis of the flex container.",
-			"task": "Add <kbd>justify-content: space-between</kbd> to <kbd>.wrap</kbd> to distribute the boxes evenly.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "<kbd>justify-content</kbd> distributes items along the main axis. Common values:<br>• <kbd>flex-start</kbd> – pack items at the start<br>• <kbd>flex-end</kbd> – pack at the end<br>• <kbd>center</kbd> – center items<br>• <kbd>space-between</kbd> – equal space between items<br>• <kbd>space-around</kbd> – equal space around items",
+			"task": "Push the \"Login\" button to the right by setting <kbd>justify-content: space-between</kbd> on the nav.",
+			"previewHTML": "<nav class=\"nav\"><div class=\"links\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a></div><a href=\"#\" class=\"login\">Login</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .links { display: flex; gap: 8px; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); } .login { background: steelblue; }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "justify-content: space-between;",
@@ -83,26 +63,20 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "justify-content",
-						"expected": "space-between"
-					},
-					"message": "Set <kbd>justify-content: space-between</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "justify-content", "expected": "space-between" },
+					"message": "Set <kbd>justify-content: space-between</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-4",
 			"title": "Align Items",
-			"description": "Control how flex items are aligned along the cross axis of the flex container.",
-			"task": "Add <kbd>align-items: center</kbd> to <kbd>.wrap</kbd> to vertically center the boxes.",
-			"previewHTML": "<div class='wrap'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "<kbd>align-items</kbd> controls alignment on the cross axis (vertical when flex-direction is row). Values include:<br>• <kbd>stretch</kbd> – stretch to fill (default)<br>• <kbd>flex-start</kbd> – align to top<br>• <kbd>flex-end</kbd> – align to bottom<br>• <kbd>center</kbd> – center vertically",
+			"task": "The logo and nav links have different heights. Center them vertically with <kbd>align-items: center</kbd>.",
+			"previewHTML": "<header class=\"header\"><div class=\"logo\">ACME</div><nav><a href=\"#\">Products</a><a href=\"#\">Pricing</a><a href=\"#\">Docs</a></nav></header>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .header { background: white; padding: 1rem 2rem; display: flex; justify-content: space-between; border-bottom: 1px solid #eee; } .logo { font-size: 1.5rem; font-weight: bold; color: steelblue; } nav { display: flex; gap: 1rem; } nav a { color: #333; text-decoration: none; font-size: 0.9rem; }",
+			"sandboxCSS": "",
+			"codePrefix": ".header {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "align-items: center;",
@@ -110,62 +84,50 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "align-items",
-						"expected": "center"
-					},
-					"message": "Set <kbd>align-items: center</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "align-items", "expected": "center" },
+					"message": "Set <kbd>align-items: center</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-5",
-			"title": "Flex Grow",
-			"description": "The <kbd>flex</kbd> property controls how much an item grows relative to others.",
-			"task": "Add <kbd>flex: 2</kbd> to <kbd>.box2</kbd> to make it grow twice as wide.",
-			"previewHTML": "<div class='wrap'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": ".box2 {\n  ",
+			"title": "Flex Wrap",
+			"description": "By default, flex items squeeze onto one line. <kbd>flex-wrap: wrap</kbd> allows items to flow onto multiple lines when they run out of space.",
+			"task": "These cards overflow the container. Add <kbd>flex-wrap: wrap</kbd> to allow them to wrap to new rows.",
+			"previewHTML": "<div class=\"cards\"><article class=\"card\">Card 1</article><article class=\"card\">Card 2</article><article class=\"card\">Card 3</article><article class=\"card\">Card 4</article><article class=\"card\">Card 5</article><article class=\"card\">Card 6</article></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .cards { display: flex; gap: 1rem; } .card { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); min-width: 120px; text-align: center; }",
+			"sandboxCSS": "",
+			"codePrefix": ".cards {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "flex: 2;",
+			"solution": "flex-wrap: wrap;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "flex",
-						"expected": "2"
-					},
-					"message": "Set <kbd>flex: 2</kbd>"
+					"value": { "property": "flex-wrap", "expected": "wrap" },
+					"message": "Set <kbd>flex-wrap: wrap</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-6",
-			"title": "Align Self",
-			"description": "Use <kbd>align-self</kbd> to override alignment for a single flex item.",
-			"task": "Add <kbd>align-self: flex-start</kbd> to <kbd>.middle</kbd> to move it to the top.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
-			"codePrefix": ".middle {\n  ",
+			"title": "Flex Grow",
+			"description": "The <kbd>flex</kbd> property on items controls how they grow and shrink. <kbd>flex: 1</kbd> makes an item grow to fill available space. Multiple items with <kbd>flex: 1</kbd> share space equally.",
+			"task": "Make the search input expand to fill available space by setting <kbd>flex: 1</kbd> on <kbd>.search</kbd>.",
+			"previewHTML": "<div class=\"toolbar\"><input class=\"search\" type=\"text\" placeholder=\"Search...\"><button class=\"btn\">Search</button><button class=\"btn\">Filters</button></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .toolbar { display: flex; gap: 8px; padding: 1rem; background: #f5f5f5; border-radius: 8px; } .search { padding: 8px 1rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } .btn { padding: 8px 1rem; background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; }",
+			"sandboxCSS": "",
+			"codePrefix": ".search {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "align-self: flex-start;",
+			"solution": "flex: 1;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "align-self",
-						"expected": "flex-start"
-					},
-					"message": "Set <kbd>align-self: flex-start</kbd>"
+					"value": { "property": "flex", "expected": "1" },
+					"message": "Set <kbd>flex: 1</kbd>"
 				}
 			]
 		}

lessons/grid.json

@@ -1,260 +1,155 @@
 {
 	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "grid",
-	"title": "Grid",
+	"title": "CSS Grid",
 	"description": "Master the grid layout system for complex two-dimensional layouts",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "grid-1",
-			"title": "Grid Container Basics",
-			"description": "Learn how to create a grid container and define basic grid structures.<br><br><pre>.container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1rem;\n}</pre>",
-			"task": "Create a <kbd>.grid</kbd> with <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(3, 1fr)</kbd>, and <kbd>gap: 1rem</kbd>.",
-			"previewHTML": "<div class='grid'><div class='item'>1</div><div class='item'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .item { background-color: #9b59b6; color: white; padding: 1.25rem; text-align: center; font-weight: bold; }",
-			"sandboxCSS": ".grid { border: 0.125rem dashed #ccc; padding: 1rem; }",
-			"codePrefix": "/* Create a grid with 3 equal columns and gap */\n",
+			"title": "Grid Container",
+			"description": "CSS Grid is a two-dimensional layout system, meaning it can handle both columns AND rows simultaneously. While Flexbox excels at one-dimensional layouts (a single row or column), Grid shines when you need precise control over both dimensions—like photo galleries, dashboards, or page layouts.<br><br><strong>How it works:</strong> Set <kbd>display: grid</kbd> on a container, then define columns with <kbd>grid-template-columns</kbd>. The <kbd>fr</kbd> unit represents a fraction of available space—<kbd>1fr 1fr 1fr</kbd> creates three equal columns.<br><br><strong>Key properties:</strong><br>• <kbd>grid-template-columns</kbd> – Defines column sizes<br>• <kbd>repeat(3, 1fr)</kbd> – Shorthand for 3 equal columns<br>• <kbd>gap</kbd> – Adds spacing between grid cells<br><br><pre>.gallery {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1rem;\n}</pre>",
+			"task": "This photo gallery displays images in a single column. Add <kbd>display: grid</kbd> to <kbd>.gallery</kbd> to enable grid layout.",
+			"previewHTML": "<section class=\"gallery\"><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%234a90a4' width='200' height='150'/%3E%3Cpath d='M60 100 L100 60 L140 100 L160 80 L200 120 L200 150 L0 150 L0 120 Z' fill='%232d5a4a'/%3E%3Ccircle cx='50' cy='40' r='15' fill='%23f4d03f'/%3E%3C/svg%3E\" alt=\"Mountains\"><figcaption>Mountain View</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%23e8c170' width='200' height='150'/%3E%3Crect fill='%2396ceb4' y='100' width='200' height='50'/%3E%3Ccircle cx='160' cy='35' r='20' fill='%23f4d03f'/%3E%3C/svg%3E\" alt=\"Beach\"><figcaption>Sunny Beach</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%232c3e50' width='200' height='150'/%3E%3Crect fill='%2334495e' x='20' y='60' width='40' height='90'/%3E%3Crect fill='%2334495e' x='80' y='40' width='50' height='110'/%3E%3Crect fill='%2334495e' x='150' y='70' width='35' height='80'/%3E%3C/svg%3E\" alt=\"City\"><figcaption>City Skyline</figcaption></figure></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .photo { margin: 0; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .photo img { width: 100%; display: block; } .photo figcaption { padding: 8px; text-align: center; font-size: 0.9rem; color: #666; }",
+			"sandboxCSS": "",
+			"codePrefix": ".gallery {\n  ",
 			"initialCode": "",
-			"codeSuffix": "",
-			"solution": ".grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1rem;\n}",
+			"codeSuffix": "\n}",
+			"solution": "display: grid;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{
-					"type": "contains",
-					"value": ".grid",
-					"message": "Use the <kbd>.grid</kbd> class selector",
-					"options": {
-						"caseSensitive": false
-					}
-				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "display",
-						"expected": "grid"
-					},
-					"message": "Set <kbd>display: grid</kbd>",
-					"options": {
-						"exact": true
-					}
-				},
-				{
-					"type": "regex",
-					"value": "grid-template-columns:\\s*repeat\\(\\s*3\\s*,\\s*1fr\\s*\\)",
-					"message": "Set <kbd>grid-template-columns: repeat(3, 1fr)</kbd>",
-					"options": {
-						"caseSensitive": false
-					}
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "gap",
-						"expected": "1rem"
-					},
-					"message": "Set <kbd>gap: 1rem</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "display", "expected": "grid" },
+					"message": "Set <kbd>display: grid</kbd>"
 				}
 			]
 		},
 		{
 			"id": "grid-2",
-			"title": "Grid Template Areas",
-			"description": "Use named grid areas to create visual layouts that are easy to understand.",
-			"task": "Add <kbd>grid-template-areas</kbd> to create a layout with <kbd>header</kbd> spanning full width, <kbd>sidebar</kbd> and <kbd>content</kbd> in middle, and <kbd>footer</kbd> spanning full width.",
-			"previewHTML": "<div class='page'><div class='header'>Header</div><div class='sidebar'>Sidebar</div><div class='content'>Main Content</div><div class='footer'>Footer</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .page > div { padding: 1.25rem; color: white; text-align: center; font-weight: bold; } .header { background-color: #e74c3c; } .sidebar { background-color: #3498db; } .content { background-color: #2ecc71; } .footer { background-color: #f39c12; }",
-			"sandboxCSS": ".page { border: 0.125rem dashed #ccc; padding: 1rem; height: 25rem; }",
-			"codePrefix": "/* Create a layout using grid-template-areas */\n.page {\n  display: grid;\n  grid-template-columns: 12rem 1fr;\n  grid-template-rows: auto 1fr auto;\n  gap: 1rem;\n  \n  /* Add your grid-template-areas code below */\n",
+			"title": "Grid Columns",
+			"description": "The <kbd>grid-template-columns</kbd> property defines how many columns your grid has and how wide each one should be. The <kbd>fr</kbd> unit divides available space into fractions—<kbd>1fr 1fr 1fr</kbd> creates three equal columns.",
+			"task": "Add <kbd>grid-template-columns: repeat(3, 1fr)</kbd> to display the photos in three equal columns.",
+			"previewHTML": "<section class=\"gallery\"><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%234a90a4' width='200' height='150'/%3E%3Cpath d='M60 100 L100 60 L140 100 L160 80 L200 120 L200 150 L0 150 L0 120 Z' fill='%232d5a4a'/%3E%3Ccircle cx='50' cy='40' r='15' fill='%23f4d03f'/%3E%3C/svg%3E\" alt=\"Mountains\"><figcaption>Mountain View</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%23e8c170' width='200' height='150'/%3E%3Crect fill='%2396ceb4' y='100' width='200' height='50'/%3E%3Ccircle cx='160' cy='35' r='20' fill='%23f4d03f'/%3E%3C/svg%3E\" alt=\"Beach\"><figcaption>Sunny Beach</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%232c3e50' width='200' height='150'/%3E%3Crect fill='%2334495e' x='20' y='60' width='40' height='90'/%3E%3Crect fill='%2334495e' x='80' y='40' width='50' height='110'/%3E%3Crect fill='%2334495e' x='150' y='70' width='35' height='80'/%3E%3C/svg%3E\" alt=\"City\"><figcaption>City Skyline</figcaption></figure></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .gallery { display: grid; } .photo { margin: 0; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .photo img { width: 100%; display: block; } .photo figcaption { padding: 8px; text-align: center; font-size: 0.9rem; color: #666; }",
+			"sandboxCSS": "",
+			"codePrefix": ".gallery {\n  ",
 			"initialCode": "",
-			"codeSuffix": "\n}\n\n/* Define which element goes in which grid area */\n.header {\n  grid-area: header;\n}\n\n.sidebar {\n  grid-area: sidebar;\n}\n\n.content {\n  grid-area: content;\n}\n\n.footer {\n  grid-area: footer;\n}",
-			"solution": "grid-template-areas:\n    \"header header\"\n    \"sidebar content\"\n    \"footer footer\";",
+			"codeSuffix": "\n}",
+			"solution": "grid-template-columns: repeat(3, 1fr);",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "grid-template-columns:\\s*repeat\\(\\s*3\\s*,\\s*1fr\\s*\\)",
+					"message": "Set <kbd>grid-template-columns: repeat(3, 1fr)</kbd>",
+					"options": { "caseSensitive": false }
+				}
+			]
+		},
+		{
+			"id": "grid-3",
+			"title": "Grid Gap",
+			"description": "Just like in Flexbox, the <kbd>gap</kbd> property adds consistent spacing between grid cells. It creates gutters between columns and rows without adding space around the edges.",
+			"task": "Add <kbd>gap: 1rem</kbd> to create breathing room between the photos.",
+			"previewHTML": "<section class=\"gallery\"><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%234a90a4' width='200' height='150'/%3E%3Cpath d='M60 100 L100 60 L140 100 L160 80 L200 120 L200 150 L0 150 L0 120 Z' fill='%232d5a4a'/%3E%3Ccircle cx='50' cy='40' r='15' fill='%23f4d03f'/%3E%3C/svg%3E\" alt=\"Mountains\"><figcaption>Mountain View</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%23e8c170' width='200' height='150'/%3E%3Crect fill='%2396ceb4' y='100' width='200' height='50'/%3E%3Ccircle cx='160' cy='35' r='20' fill='%23f4d03f'/%3E%3C/svg%3E\" alt=\"Beach\"><figcaption>Sunny Beach</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%232c3e50' width='200' height='150'/%3E%3Crect fill='%2334495e' x='20' y='60' width='40' height='90'/%3E%3Crect fill='%2334495e' x='80' y='40' width='50' height='110'/%3E%3Crect fill='%2334495e' x='150' y='70' width='35' height='80'/%3E%3C/svg%3E\" alt=\"City\"><figcaption>City Skyline</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%23a8d8ea' width='200' height='150'/%3E%3Cellipse cx='100' cy='130' rx='80' ry='30' fill='%2396ceb4'/%3E%3Crect fill='%238b4513' x='95' y='80' width='10' height='50'/%3E%3Ccircle cx='100' cy='70' r='30' fill='%232d5a4a'/%3E%3C/svg%3E\" alt=\"Tree\"><figcaption>Lone Tree</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%23ff6b6b' width='200' height='150'/%3E%3Ccircle cx='100' cy='75' r='40' fill='%23f4d03f'/%3E%3C/svg%3E\" alt=\"Sunset\"><figcaption>Golden Sunset</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%23dfe6e9' width='200' height='150'/%3E%3Cpath d='M0 100 Q50 60 100 100 T200 100 L200 150 L0 150 Z' fill='%23b2bec3'/%3E%3C/svg%3E\" alt=\"Clouds\"><figcaption>Cloudy Sky</figcaption></figure></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); } .photo { margin: 0; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .photo img { width: 100%; display: block; } .photo figcaption { padding: 8px; text-align: center; font-size: 0.9rem; color: #666; }",
+			"sandboxCSS": "",
+			"codePrefix": ".gallery {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"solution": "gap: 1rem;",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "gap", "expected": "1rem" },
+					"message": "Set <kbd>gap: 1rem</kbd>"
+				}
+			]
+		},
+		{
+			"id": "grid-4",
+			"title": "Spanning Columns",
+			"description": "Grid items can span multiple columns using <kbd>grid-column: span N</kbd>. This is perfect for featured content that needs more visual prominence, like a hero image in a gallery.",
+			"task": "Make the featured photo span two columns by adding <kbd>grid-column: span 2</kbd> to <kbd>.featured</kbd>.",
+			"previewHTML": "<section class=\"gallery\"><figure class=\"photo featured\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Crect fill='%234a90a4' width='400' height='200'/%3E%3Cpath d='M100 140 L200 80 L300 140 L350 100 L400 150 L400 200 L0 200 L0 160 Z' fill='%232d5a4a'/%3E%3Ccircle cx='80' cy='50' r='25' fill='%23f4d03f'/%3E%3Ctext x='200' y='180' text-anchor='middle' fill='white' font-size='16' font-weight='bold'>FEATURED</text>%3C/svg%3E\" alt=\"Featured\"><figcaption>Featured Landscape</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%23e8c170' width='200' height='150'/%3E%3Crect fill='%2396ceb4' y='100' width='200' height='50'/%3E%3Ccircle cx='160' cy='35' r='20' fill='%23f4d03f'/%3E%3C/svg%3E\" alt=\"Beach\"><figcaption>Beach</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%232c3e50' width='200' height='150'/%3E%3Crect fill='%2334495e' x='20' y='60' width='40' height='90'/%3E%3Crect fill='%2334495e' x='80' y='40' width='50' height='110'/%3E%3Crect fill='%2334495e' x='150' y='70' width='35' height='80'/%3E%3C/svg%3E\" alt=\"City\"><figcaption>City</figcaption></figure><figure class=\"photo\"><img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%23a8d8ea' width='200' height='150'/%3E%3Cellipse cx='100' cy='130' rx='80' ry='30' fill='%2396ceb4'/%3E%3Crect fill='%238b4513' x='95' y='80' width='10' height='50'/%3E%3Ccircle cx='100' cy='70' r='30' fill='%232d5a4a'/%3E%3C/svg%3E\" alt=\"Tree\"><figcaption>Tree</figcaption></figure></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .photo { margin: 0; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .photo img { width: 100%; display: block; } .photo figcaption { padding: 8px; text-align: center; font-size: 0.9rem; color: #666; }",
+			"sandboxCSS": "",
+			"codePrefix": ".featured {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"solution": "grid-column: span 2;",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "grid-column:\\s*span\\s+2",
+					"message": "Set <kbd>grid-column: span 2</kbd>",
+					"options": { "caseSensitive": false }
+				}
+			]
+		},
+		{
+			"id": "grid-5",
+			"title": "Auto-Fit Columns",
+			"description": "For truly responsive grids, use <kbd>auto-fit</kbd> with <kbd>minmax()</kbd>. This automatically creates as many columns as will fit, with each being at least a minimum width but growing to fill space.",
+			"task": "Add <kbd>grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))</kbd> to make the product grid responsive.",
+			"previewHTML": "<section class=\"products\"><article class=\"product\"><div class=\"img\" style=\"background: steelblue;\"></div><h3>Wireless Headphones</h3><p>$79</p></article><article class=\"product\"><div class=\"img\" style=\"background: coral;\"></div><h3>Smart Watch</h3><p>$199</p></article><article class=\"product\"><div class=\"img\" style=\"background: mediumseagreen;\"></div><h3>Portable Speaker</h3><p>$49</p></article><article class=\"product\"><div class=\"img\" style=\"background: gold;\"></div><h3>USB-C Hub</h3><p>$35</p></article><article class=\"product\"><div class=\"img\" style=\"background: orchid;\"></div><h3>Webcam HD</h3><p>$89</p></article><article class=\"product\"><div class=\"img\" style=\"background: tomato;\"></div><h3>Keyboard</h3><p>$129</p></article></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .products { display: grid; gap: 1rem; } .product { background: white; border-radius: 8px; padding: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; } .product .img { height: 80px; border-radius: 4px; margin-bottom: 8px; } .product h3 { margin: 0 0 4px; font-size: 0.95rem; } .product p { margin: 0; color: steelblue; font-weight: bold; }",
+			"sandboxCSS": "",
+			"codePrefix": ".products {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"solution": "grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "grid-template-columns:\\s*repeat\\(\\s*auto-fit\\s*,\\s*minmax\\(\\s*150px\\s*,\\s*1fr\\s*\\)\\s*\\)",
+					"message": "Set <kbd>grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))</kbd>",
+					"options": { "caseSensitive": false }
+				}
+			]
+		},
+		{
+			"id": "grid-6",
+			"title": "Grid Template Areas",
+			"description": "For complex page layouts, <kbd>grid-template-areas</kbd> lets you name regions and place items visually. It's like drawing your layout with ASCII art—incredibly readable and maintainable.",
+			"task": "Complete the dashboard layout by adding the grid-template-areas. The header should span full width, then nav and main side by side, then footer spanning full width.",
+			"previewHTML": "<div class=\"dashboard\"><header class=\"header\">Dashboard Header</header><nav class=\"nav\">Navigation</nav><main class=\"main\">Main Content Area</main><footer class=\"footer\">Footer</footer></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .dashboard { display: grid; grid-template-columns: 180px 1fr; grid-template-rows: auto 1fr auto; gap: 1rem; min-height: 300px; } .header { grid-area: header; background: #1a1a2e; color: white; padding: 1rem; border-radius: 8px; } .nav { grid-area: nav; background: steelblue; color: white; padding: 1rem; border-radius: 8px; } .main { grid-area: main; background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .footer { grid-area: footer; background: #333; color: white; padding: 1rem; border-radius: 8px; text-align: center; }",
+			"sandboxCSS": "",
+			"codePrefix": ".dashboard {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"solution": "grid-template-areas:\n    \"header header\"\n    \"nav main\"\n    \"footer footer\";",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "contains",
 					"value": "grid-template-areas",
 					"message": "Use the <kbd>grid-template-areas</kbd> property",
-					"options": {
-						"caseSensitive": false
-					}
+					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
-					"value": "grid-template-areas:\\s*['\"]header\\s+header['\"]\\s*['\"]sidebar\\s+content['\"]\\s*['\"]footer\\s+footer['\"]",
-					"message": "Create areas: <kbd>\"header header\" \"sidebar content\" \"footer footer\"</kbd>",
-					"options": {
-						"caseSensitive": false
-					}
-				}
-			]
-		},
-		{
-			"id": "grid-3",
-			"title": "Spanning Grid Cells",
-			"description": "Make grid items span multiple grid cells horizontally or vertically.",
-			"task": "Add <kbd>grid-column: span 2</kbd> and <kbd>grid-row: span 2</kbd> to <kbd>.featured</kbd> to span 2x2 cells.",
-			"previewHTML": "<div class='grid'><div class='item'>1</div><div class='item'>2</div><div class='item featured'>Featured</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div><div class='item'>7</div><div class='item'>8</div><div class='item'>9</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .item { background-color: #9b59b6; color: white; padding: 1.25rem; text-align: center; font-weight: bold; } .featured { background-color: #e74c3c; }",
-			"sandboxCSS": ".grid { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }",
-			"codePrefix": "/* Make the featured item span 2x2 cells */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"solution": ".featured {\n  grid-column: span 2;\n  grid-row: span 2;\n}",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": ".featured",
-					"message": "Use the <kbd>.featured</kbd> class selector",
-					"options": {
-						"caseSensitive": false
-					}
+					"value": "['\"]header\\s+header['\"]",
+					"message": "Header should span both columns: <kbd>\"header header\"</kbd>",
+					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
-					"value": "grid-column:\\s*span\\s+2",
-					"message": "Set <kbd>grid-column: span 2</kbd>",
-					"options": {
-						"caseSensitive": false
-					}
+					"value": "['\"]nav\\s+main['\"]",
+					"message": "Nav and main should be side by side: <kbd>\"nav main\"</kbd>",
+					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
-					"value": "grid-row:\\s*span\\s+2",
-					"message": "Set <kbd>grid-row: span 2</kbd>",
-					"options": {
-						"caseSensitive": false
-					}
-				}
-			]
-		},
-		{
-			"id": "grid-4",
-			"title": "Automatic Grid Placement",
-			"description": "Learn how to use auto-placement and <kbd>auto-fit</kbd>/<kbd>auto-fill</kbd> for responsive grid layouts.",
-			"task": "Add <kbd>display: grid</kbd> and <kbd>grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))</kbd> to <kbd>.cards</kbd>.",
-			"previewHTML": "<div class='cards'><div class='card'>Card 1</div><div class='card'>Card 2</div><div class='card'>Card 3</div><div class='card'>Card 4</div><div class='card'>Card 5</div><div class='card'>Card 6</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .card { background-color: #3498db; color: white; padding: 1.25rem; text-align: center; font-weight: bold; height: 6rem; display: flex; align-items: center; justify-content: center; }",
-			"sandboxCSS": ".cards { border: 0.125rem dashed #ccc; padding: 1rem; }",
-			"codePrefix": "/* Create a responsive grid with auto-fit columns */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"solution": ".cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n}",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": ".cards",
-					"message": "Use the <kbd>.cards</kbd> class selector",
-					"options": {
-						"caseSensitive": false
-					}
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "display",
-						"expected": "grid"
-					},
-					"message": "Set <kbd>display: grid</kbd>",
-					"options": {
-						"exact": true
-					}
-				},
-				{
-					"type": "regex",
-					"value": "grid-template-columns:\\s*repeat\\(\\s*auto-fit\\s*,\\s*minmax\\(\\s*10rem\\s*,\\s*1fr\\s*\\)\\s*\\)",
-					"message": "Set <kbd>grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))</kbd>",
-					"options": {
-						"caseSensitive": false
-					}
-				}
-			]
-		},
-		{
-			"id": "grid-5",
-			"title": "Grid Alignment",
-			"description": "Control the alignment of grid items within their cells on both axes.",
-			"task": "Add <kbd>justify-items: center</kbd> and <kbd>align-items: center</kbd> to center items within their cells.",
-			"previewHTML": "<div class='cells'><div class='item'>1</div><div class='item tall'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item wide'>6</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .item { background-color: #9b59b6; color: white; padding: 1.25rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; } .tall { height: 6rem; } .wide { width: 6rem; }",
-			"sandboxCSS": ".cells { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; height: 25rem; }",
-			"codePrefix": "/* Center grid items both horizontally and vertically */\n.cells {\n  /* Add alignment properties below */\n",
-			"initialCode": "",
-			"codeSuffix": "\n}",
-			"solution": "justify-items: center;\n  align-items: center;",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "property_value",
-					"value": {
-						"property": "justify-items",
-						"expected": "center"
-					},
-					"message": "Set <kbd>justify-items: center</kbd>",
-					"options": {
-						"exact": true
-					}
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "align-items",
-						"expected": "center"
-					},
-					"message": "Set <kbd>align-items: center</kbd>",
-					"options": {
-						"exact": true
-					}
-				}
-			]
-		},
-		{
-			"id": "grid-6",
-			"title": "Overlapping Grid Items",
-			"description": "Learn how to create overlapping layouts by using grid positioning and <kbd>z-index</kbd>.",
-			"task": "Add <kbd>grid-column: 1</kbd>, <kbd>grid-row: 1</kbd>, and <kbd>z-index: 1</kbd> to <kbd>.overlay</kbd> to position it above the base.",
-			"previewHTML": "<div class='stack'><div class='base'>Base Content</div><div class='overlay'>Overlay</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .stack { position: relative; height: 15rem; } .base { background-color: #3498db; color: white; padding: 1.25rem; display: flex; align-items: center; justify-content: center; font-weight: bold; } .overlay { background-color: rgba(231, 76, 60, 0.7); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.5rem; }",
-			"sandboxCSS": ".stack { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }",
-			"codePrefix": "/* Position the overlay to cover the entire grid */\n.base {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n.overlay {\n  /* Add your code below to position the overlay */\n",
-			"initialCode": "",
-			"codeSuffix": "\n}",
-			"solution": "grid-column: 1;\n  grid-row: 1;\n  z-index: 1;",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "property_value",
-					"value": {
-						"property": "grid-column",
-						"expected": "1"
-					},
-					"message": "Set <kbd>grid-column: 1</kbd>",
-					"options": {
-						"exact": true
-					}
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "grid-row",
-						"expected": "1"
-					},
-					"message": "Set <kbd>grid-row: 1</kbd>",
-					"options": {
-						"exact": true
-					}
-				},
-				{
-					"type": "regex",
-					"value": "z-index:\\s*[1-9]\\d*",
-					"message": "Set <kbd>z-index</kbd> to a positive number",
-					"options": {
-						"caseSensitive": false
-					}
+					"value": "['\"]footer\\s+footer['\"]",
+					"message": "Footer should span both columns: <kbd>\"footer footer\"</kbd>",
+					"options": { "caseSensitive": false }
 				}
 			]
 		}

lessons/pl/00-basic-selectors.json

@@ -1,548 +1,257 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "css-basic-selectors",
-	"title": "CSS Selectors",
-	"description": "CSS selectors are the foundation of styling web pages, allowing you to target specific HTML elements for styling. This module introduces fundamental selector types including element type selectors, class selectors, ID selectors, and the universal selector.",
+	"title": "Podstawy CSS",
+	"description": "Poznaj podstawowe elementy CSS: właściwości, wartości i selektory. Ten moduł uczy zasad składni, których przestrzega każda deklaracja CSS.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
-			"id": "introduction-to-selectors",
-			"title": "What's a Selector?",
-			"description": "A CSS selector is the first part of a CSS rule that tells the browser which HTML elements should receive the styles defined in the declaration block. Selectors are essentially patterns that match against elements in your HTML document. Understanding selectors is fundamental because they determine which elements your CSS rules will affect. The element or elements targeted by a selector are referred to as the 'subject of the selector.' When writing a CSS rule, you first specify the selector, followed by curly braces that contain the style declarations.<br/>For example, to change the text color of elements, you can use the <kbd>color</kbd> property within your declaration block.<br><br><pre>/* Element selector */\np {\n  color: orangered;\n  /* │       └─── Indicates the value of the expression\n     │                                                     \n     └─────────── Indicates the property of the expression */\n}</pre>",
-			"task": "Write a CSS rule using a type selector that targets all paragraph elements <kbd>p</kbd> in the document. Make the text blue by setting the <kbd>color</kbd> property to <kbd>blue</kbd>.",
-			"previewHTML": "<h1>Introduction to CSS Selectors</h1>\n<p>This paragraph should turn blue.</p>\n<div>This div element should remain unchanged.</div>\n<p>This second paragraph should also turn blue.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, p, div { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Write a type selector to target all paragraph elements */\n",
+			"id": "css-properties",
+			"title": "Właściwości CSS",
+			"description": "CSS stylizuje elementy za pomocą <strong>deklaracji</strong> - par właściwości i wartości. Każda deklaracja ma ten sam wzorzec:<br><br><pre>property: value;</pre><br><strong>Właściwość</strong> to co chcesz zmienić (jak <kbd>color</kbd> lub <kbd>background</kbd>). <strong>Wartość</strong> to na co to ustawiasz. Dwukropek je rozdziela, a średnik kończy linię.<br><br>Wartości występują w różnych typach:<br>• <strong>Słowa kluczowe:</strong> <kbd>red</kbd>, <kbd>bold</kbd>, <kbd>center</kbd><br>• <strong>Liczby z jednostkami:</strong> <kbd>16px</kbd>, <kbd>2rem</kbd>, <kbd>100%</kbd><br>• <strong>Kolory:</strong> <kbd>steelblue</kbd>, <kbd>#ff0000</kbd>",
+			"task": "Uzupełnij deklarację dodając <kbd>color: coral;</kbd> aby zmienić kolor tekstu.",
+			"previewHTML": "<p class=\"text\">This text should turn coral.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .text { font-size: 1.25rem; }",
+			"sandboxCSS": "",
+			"codePrefix": ".text {\n  ",
 			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
-			"solution": "p { color: blue }",
+			"solution": "color: coral;",
 			"validations": [
 				{
-					"type": "regex",
-					"value": "^p\\s*{",
-					"message": "Start your rule with <kbd>p { … }</kbd> to select all paragraph elements",
-					"options": {
-						"caseSensitive": false
-					}
-				},
+					"type": "property_value",
+					"value": { "property": "color", "expected": "coral" },
+					"message": "Dodaj <kbd>color: coral;</kbd>"
+				}
+			]
+		},
+		{
+			"id": "multiple-properties",
+			"title": "Wiele właściwości",
+			"description": "Reguła może mieć wiele deklaracji. Każda idzie w osobnej linii i każda potrzebuje średnika na końcu:<br><br><pre>.box {<br>  background: gold;<br>  color: navy;<br>  padding: 1rem;<br>}</pre><br>Kolejność zwykle nie ma znaczenia - CSS stosuje wszystkie. Przy konfliktach wygrywa ostatnia.",
+			"task": "Dodaj dwie deklaracje: <kbd>background: lavender;</kbd> i <kbd>padding: 1rem;</kbd>",
+			"previewHTML": "<div class=\"card\">A styled card with background and padding.</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .card { border-radius: 8px; }",
+			"sandboxCSS": "",
+			"codePrefix": ".card {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "background: lavender;\n  padding: 1rem;",
+			"validations": [
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color:</kbd> property in your CSS rule"
-				},
-				{
-					"type": "contains",
-					"value": "blue",
-					"message": "Set the color value to <kbd>blue</kbd>"
+					"type": "property_value",
+					"value": { "property": "background", "expected": "lavender" },
+					"message": "Dodaj <kbd>background: lavender;</kbd>"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "blue"
-					},
-					"message": "Use <kbd>color: blue</kbd> to set the text color"
-				},
-				{
-					"type": "regex",
-					"value": "p\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": false
-					}
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "Dodaj <kbd>padding: 1rem;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "type-selectors",
-			"title": "Type Selectors",
-			"description": "Type selectors (also called tag name selectors or element selectors) target HTML elements based on their tag name. For example, <kbd>p</kbd> selects all paragraph elements, <kbd>h1</kbd> selects all level-one headings, and <kbd>div</kbd> selects all division elements. Type selectors are the most fundamental way to select elements, applying styles consistently to all instances of a particular HTML element throughout your document. You can define a variety of CSS properties with type selectors, such as <kbd>color</kbd> for text color, <kbd>background-color</kbd> for the background, and <kbd>font-weight</kbd> for text emphasis. They provide a broad approach for styling your page and are often the starting point for more specific styling using other selector types.",
-			"task": "Write three separate CSS rules using type selectors to target specific HTML elements: make <kbd>h2</kbd> headings <kbd>purple</kbd>, give <kbd>span</kbd> elements a <kbd>yellow</kbd> background, and make <kbd>strong</kbd> elements <kbd>red</kbd>.",
-			"previewHTML": "<h2>Type Selectors Example</h2>\n<p>Regular paragraph text <span>with a highlighted span</span> that should have a yellow background.</p>\n<p>Another paragraph with <strong>strong important text</strong> that should be red.</p>\n<h2>Another Heading</h2>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, span, strong { padding: 3px; }",
-			"codePrefix": "/* Write three separate type selectors below */\n\n",
-			"initialCode": "/* 1. Make h2 headings purple */\n\n\n/* 2. Give span elements a yellow background */\n\n\n/* 3. Make strong elements red */\n",
+			"title": "Selektory typu",
+			"description": "<strong>Selektor</strong> mówi przeglądarce, które elementy stylizować. Najprostszym selektorem jest <strong>selektor typu</strong> — po prostu nazwa tagu HTML.<br><br><pre>p {<br>  color: steelblue;<br>}</pre><br>Ta reguła celuje w każdy element <kbd>&lt;p&gt;</kbd> na stronie. Selektory typu świetnie nadają się do ustawiania podstawowych stylów.",
+			"task": "Ostyluj wszystkie akapity. Napisz regułę z <kbd>p</kbd> jako selektorem i ustaw <kbd>color: steelblue</kbd>.",
+			"previewHTML": "<article>\n  <h2>Fresh Roasted Coffee</h2>\n  <p>Our beans are sourced from small farms in Colombia and Ethiopia.</p>\n  <p>Each batch is roasted weekly to ensure peak freshness.</p>\n</article>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h2 { margin: 0 0 1rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": "/* 1. Make h2 headings purple */\nh2 {\n  color: purple;\n}\n\n/* 2. Give span elements a yellow background */\nspan {\n  background-color: yellow;\n}\n\n/* 3. Make strong elements red */\nstrong {\n  color: red;\n}",
+			"solution": "p {\n  color: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^h2\\s*{",
-					"message": "Include an <kbd>h2 { … }</kbd> selector"
+					"value": "p\\s*\\{",
+					"message": "Zacznij od <kbd>p {</kbd> aby wybrać akapity"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Set the <kbd>color</kbd> property to <kbd>purple</kbd> for h2 elements"
-				},
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "Ustaw <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "styling-links",
+			"title": "Stylizowanie linków",
+			"description": "Selektory typu działają dla każdego elementu HTML. Selektor <kbd>a</kbd> celuje we wszystkie linki na stronie.<br><br>Linki domyślnie mają niebieski kolor i podkreślenie. Możesz zmienić oba z CSS — użyj <kbd>color</kbd> dla tekstu i <kbd>text-decoration: none</kbd> aby usunąć podkreślenie.",
+			"task": "Ostyluj linki nawigacji. Napisz regułę z <kbd>a</kbd> jako selektorem i ustaw <kbd>color: coral</kbd>.",
+			"previewHTML": "<nav>\n  <a href=\"#\">Home</a>\n  <a href=\"#\">Menu</a>\n  <a href=\"#\">About</a>\n  <a href=\"#\">Contact</a>\n</nav>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } nav { display: flex; gap: 1.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": "a {\n  color: coral;\n}",
+			"validations": [
 				{
 					"type": "regex",
-					"value": "h2\\s*{[^}]*}",
-					"message": "Make sure to close your h2 rule with a closing brace <kbd>}</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "^span\\s*{",
-					"message": "Include a <kbd>span { … }</kbd> selector"
+					"value": "a\\s*\\{",
+					"message": "Zacznij od <kbd>a {</kbd> aby wybrać linki"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Set a <kbd>background-color: yellow</kbd> for span elements"
-				},
-				{
-					"type": "regex",
-					"value": "span\\s*{[^}]*}",
-					"message": "Make sure to close your span rule with a closing brace <kbd>}</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "^strong\\s*{",
-					"message": "Include a <kbd>strong { … }</kbd> selector"
-				},
-				{
-					"type": "regex",
-					"value": "strong\\s*{\\s*color:\\s*red;[^}]*}",
-					"message": "Set the <kbd>color: red</kbd> for strong elements"
+					"value": { "property": "color", "expected": "coral" },
+					"message": "Ustaw <kbd>color: coral</kbd>"
 				}
 			]
 		},
 		{
 			"id": "class-selectors",
-			"title": "Class Selectors",
-			"description": "Class selectors target elements with a specific class attribute value. They begin with a dot (.) followed by the class name. Classes are powerful because they allow you to apply the same styles to multiple elements regardless of their type. An HTML element can have multiple classes (separated by spaces in the class attribute), and a class can be applied to any number of elements. When using class selectors, you can apply properties like <kbd>background-color</kbd> to set the background color of elements, and <kbd>font-weight</kbd> to control text thickness, making text bold or normal. This flexibility makes class selectors one of the most commonly used methods for applying styles in CSS, allowing for modular and reusable styling across your website.",
-			"task": "Create a CSS rule using a class selector that targets elements with the class <kbd>highlight</kbd>. Give these elements a <kbd>yellow</kbd> background and <kbd>bold</kbd> text.",
-			"previewHTML": "<h2>Using Class Selectors</h2>\n<p>This is a regular paragraph, but <span class=\"highlight\">this span has the highlight class</span> applied to it.</p>\n<p class=\"highlight\">This entire paragraph has the highlight class.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"highlight\">This list item is highlighted</li>\n</ul>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, li { padding: 5px; margin-bottom: 10px; }",
-			"codePrefix": "/* Create a class selector for elements with the 'highlight' class */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^\\.highlight\\s*{",
-					"message": "Start your rule with <kbd>.highlight { … }</kbd> to create a class selector",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color:</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Set the background color to <kbd>yellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "font-weight:",
-					"message": "Include the <kbd>font-weight:</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-weight",
-						"expected": "bold"
-					},
-					"message": "Set the font-weight to <kbd>bold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.highlight\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "multiple-classes",
-			"title": "Multiple Classes",
-			"description": "HTML elements can have multiple classes applied simultaneously, allowing for composable and modular CSS designs. When an element has multiple classes, it will receive styles from all matching class selectors. This approach enables you to build a library of reusable CSS classes that can be combined in different ways. You can also target elements that have a specific combination of classes by chaining class selectors together without spaces (e.g., <kbd>.class1.class2</kbd>). When styling these elements, you might use properties like <kbd>border-color</kbd> to change the color of element borders, and <kbd>background-color</kbd> to set the background color of elements. This technique lets you create conditional styles that only apply when certain classes appear together.",
-			"task": "Complete the CSS rule that targets elements with both <kbd>card</kbd> and <kbd>featured</kbd> classes by chaining the selectors. Set the border-color to gold and the background-color to lemonchiffon to make featured cards stand out.",
-			"previewHTML": "<h2>Multiple Class Combinations</h2>\n<div class=\"card\">Regular Card</div>\n<div class=\"card featured\">Featured Card</div>\n<div class=\"featured\">Just Featured (not a card)</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .card { border: 2px solid gray; padding: 15px; margin-bottom: 10px; border-radius: 5px; }",
+			"title": "Selektory klas",
+			"description": "Selektory typu stylizują <em>wszystkie</em> elementy danego typu. Ale co jeśli chcesz ostylować tylko niektóre z nich?<br><br><strong>Selektory klas</strong> celują w elementy z określonym atrybutem <kbd>class</kbd>. Zaczynają się od kropki:<br><br><pre>.badge {<br>  background: coral;<br>}</pre><br>To stylizuje tylko elementy z <kbd>class=\"badge\"</kbd>.",
+			"task": "Ostyluj badge powiadomień. Napisz regułę z <kbd>.badge</kbd> jako selektorem i ustaw <kbd>background: tomato</kbd>.",
+			"previewHTML": "<header>\n  <h1>Dashboard</h1>\n  <span class=\"badge\">3</span>\n</header>\n<p>You have new notifications waiting.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } h1 { margin: 0; font-size: 1.5rem; } .badge { color: white; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.875rem; } p { color: #555; margin: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* The .card class already has basic styling */\n/* Now target elements with BOTH classes: 'card' AND 'featured' */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": ".card.featured { border-color: gold; background-color: lemonchiffon }",
+			"solution": ".badge {\n  background: tomato;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.card\\.featured\\s*{",
-					"message": "Chain the selectors as <kbd>.card.featured</kbd> (no space between them)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "border-color:",
-					"message": "Include the <kbd>border-color</kbd> property"
+					"value": "\\.badge\\s*\\{",
+					"message": "Zacznij od <kbd>.badge {</kbd> (nie zapomnij o kropce!)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "border-color",
-						"expected": "gold"
-					},
-					"message": "Set the border color to <kbd>gold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*;",
-					"message": "Make sure to end your CSS rule with a semicolon <kbd>;</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lemonchiffon"
-					},
-					"message": "Set the background color to <kbd>lemonchiffon</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "tomato" },
+					"message": "Ustaw <kbd>background: tomato</kbd>"
 				}
 			]
 		},
 		{
-			"id": "class-with-type",
-			"title": "Combining Types",
-			"description": "You can combine type selectors with class selectors to target specific HTML elements that have a certain class. This creates a more specific selector that only matches when both conditions are true: the element is of the specified type AND it has the specified class. For example, <kbd>p.note</kbd> would select paragraph elements with the class <kbd>note</kbd>, but would not select divs or spans with that same class. You can style these combined selections using properties like <kbd>background-color</kbd> to set a colored background for your elements. This approach allows you to apply different styles to the same class when it appears on different element types.",
-			"task": "Create a CSS rule that specifically targets <kbd>&lt;span&gt;</kbd> elements with the class <kbd>highlight</kbd>. Make those elements have an orange background, while other elements with the highlight class remain untouched.",
-			"previewHTML": "<h2>Type and Class Combinations</h2>\n<p>This paragraph has a <span class=\"highlight\">highlighted span</span> that should have an orange background.</p>\n<p class=\"highlight\">This paragraph has the highlight class but should NOT have an orange background.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .highlight { font-weight: bold; }",
-			"sandboxCSS": "h2, p, span { padding: 5px; }",
-			"codePrefix": "/* The .highlight class already sets font-weight to bold */\n/* Now target ONLY span elements with the highlight class */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^span\\.highlight\\s*{",
-					"message": "Use <kbd>span.highlight</kbd> selector (no space between element and class)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "orange"
-					},
-					"message": "Set the background color to <kbd>orange</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "span\\.highlight\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-selectors",
-			"title": "ID Selectors",
-			"description": "ID selectors target elements with a specific id attribute. They begin with a hash/pound sign (#) followed by the ID name. Unlike classes, IDs must be unique within a document—each ID value should be used only once per page. ID selectors have higher specificity than class or element selectors, meaning they override those selectors when conflicts arise. When styling with ID selectors, you can use properties like <kbd>color</kbd> to define text color, and <kbd>text-decoration</kbd> to control the appearance of text, such as adding underlines to elements. Because of their uniqueness requirement, IDs are best used for one-of-a-kind elements like page headers, main navigation, or specific unique components that appear only once on a page.",
-			"task": "Create a CSS rule with an ID selector that targets the element with the ID <kbd>main-title</kbd>. Set its color to purple and add an underline with <kbd>text-decoration: underline</kbd>.",
-			"previewHTML": "<h1 id=\"main-title\">Main Page Title</h1>\n<p>Regular paragraph content.</p>\n<h2>Secondary Heading</h2>\n<p id=\"intro\">Introduction paragraph (different ID).</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Create an ID selector to target the element with id=\"main-title\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^#main-title\\s*{",
-					"message": "Start your rule with <kbd>#main-title</kbd> to create an ID selector",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Set the color to <kbd>purple</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "text-decoration:",
-					"message": "Include the <kbd>text-decoration</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "text-decoration",
-						"expected": "underline"
-					},
-					"message": "Set the text-decoration to <kbd>underline</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "#main-title\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-with-type",
-			"title": "Type + ID",
-			"description": "Similar to how you can combine type and class selectors, you can also combine type selectors with ID selectors. For example, <kbd>h1#title</kbd> targets an h1 element with the ID 'title'. When using this combined approach, you can apply CSS properties like <kbd>font-style</kbd> to control the slant of the text, making it italic or normal. While this selector combination is more specific than using just the ID selector, it's often unnecessary since IDs should already be unique in a document. However, this technique can be useful for improving code readability or when you want to emphasize that a particular ID should only appear on a specific element type.",
-			"task": "Create a CSS rule that combines a type selector with an ID selector to target specifically a paragraph element with the ID <kbd>special</kbd>. Set its font style to italic.",
-			"previewHTML": "<h2 id=\"special\">Heading with ID \"special\" (should NOT be affected)</h2>\n<p id=\"special\">Paragraph with ID \"special\" (should become italic)</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Create a combined type+ID selector for a paragraph with id=\"special\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^p#special\\s*{",
-					"message": "Use <kbd>p#special</kbd> to target paragraphs with ID <kbd>special</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "font-style:",
-					"message": "Include the <kbd>font-style</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-style",
-						"expected": "italic"
-					},
-					"message": "Set the font-style to <kbd>italic</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "p#special\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "selector-lists",
-			"title": "Selector Lists",
-			"description": "When multiple elements need the same styling, you can group them together using a selector list (also known as grouping selectors). Selector lists are created by separating individual selectors with commas. This approach reduces repetition in your CSS, making it more maintainable and efficient. For example, <kbd>h1, h2, h3 { color: blue; }</kbd> applies the same blue color to all three heading levels. When styling multiple selectors at once, you can apply properties like <kbd>background-color</kbd> to set the background, <kbd>border-left</kbd> to create a left border with a specific thickness, style, and color, and <kbd>padding-left</kbd> to create space between the content and the left border. Whitespace around commas is optional, and each selector in the list can be any valid selector type-elements, classes, IDs, or even more complex selectors.",
-			"task": "Create a selector list that applies the same styles to three different elements: paragraphs with class <kbd>note</kbd>, list items with class <kbd>important</kbd>, and the element with ID <kbd>summary</kbd>. Give them a <kbd>lightyellow</kbd> background, a <kbd>gold</kbd> left border, and some left <kbd>padding</kbd>.",
-			"previewHTML": "<p class=\"note\">This is a note paragraph.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"important\">Important list item</li>\n</ul>\n<div id=\"summary\">Summary section</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p, li, div { padding: 8px; margin-bottom: 8px; border: 1px dashed gray; }",
-			"codePrefix": "/* Create a selector list to apply the same styles to multiple different elements */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"solution": "p.note,\nli.important,\n#summary {\n  background-color: lightyellow;\n  border-left: 3px solid gold;\n  padding-left: 10px\n}",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "p.note",
-					"message": "Include <kbd>p.note</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "li.important",
-					"message": "Include <kbd>li.important</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "#summary",
-					"message": "Include <kbd>#summary</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "regex",
-					"value": "(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)",
-					"message": "Create a comma-separated list with all three selectors",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lightyellow"
-					},
-					"message": "Set the background color to <kbd>lightyellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "border-left:",
-					"message": "Include the <kbd>border-left</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "border-left",
-						"expected": "3px solid gold"
-					},
-					"message": "Use <kbd>border-left: 3px solid gold</kbd> to create a left border"
-				},
-				{
-					"type": "contains",
-					"value": "padding-left:",
-					"message": "Include the <kbd>padding-left</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "padding-left",
-						"expected": "10px"
-					},
-					"message": "Use <kbd>padding-left: 10px</kbd> to add left padding"
-				}
-			]
-		},
-		{
-			"id": "universal-selector",
-			"title": "Universal (*)",
-			"description": "The universal selector is denoted by an asterisk (*) and matches any element of any type. It selects everything in the document or, when combined with other selectors, everything within a specific context. For example, <kbd>* { margin: 0; }</kbd> removes margins from all elements, while <kbd>article *</kbd> selects all elements inside article elements. When using the universal selector in combination with other selectors, you can apply properties like <kbd>margin</kbd> to control the spacing around elements. The universal selector is powerful but should be used carefully due to its broad impact. It's commonly used in CSS resets, to override default browser styling, or to target all children of a particular element.",
-			"task": "Use the universal selector to remove margins from all elements inside the container div. Create a rule using <kbd>div.container *</kbd> as the selector and set <kbd>margin: 0</kbd>.",
-			"previewHTML": "<div class=\"container\">\n  <h2>Inside Container</h2>\n  <p>This paragraph is inside the container.</p>\n  <ul>\n    <li>List item inside container</li>\n  </ul>\n</div>\n<p>This paragraph is outside the container and should not be affected.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } div.container { border: 2px solid navy; padding: 15px; background-color: lavender; } h2, p, ul, li { margin: 15px 0; }",
+			"id": "button-variants",
+			"title": "Warianty przycisków",
+			"description": "Elementy mogą mieć wiele klas. Gdy łączysz selektory klas bez spacji, celujesz w elementy które mają <em>wszystkie</em> te klasy:<br><br><pre>.btn.primary {<br>  background: steelblue;<br>}</pre><br>To celuje w elementy z <kbd>class=\"btn primary\"</kbd>, nie tylko <kbd>.btn</kbd> lub tylko <kbd>.primary</kbd>.",
+			"task": "Ostyluj główny przycisk. Napisz regułę z <kbd>.btn.primary</kbd> jako selektorem i ustaw <kbd>background: steelblue</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Cancel</button>\n  <button class=\"btn primary\">Save Changes</button>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #e0e0e0; color: #333; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use the universal selector to target all elements inside the container */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": ".btn.primary {\n  background: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^div\\.container\\s+\\*\\s*{",
-					"message": "Use <kbd>div.container *</kbd> selector (with a space between container and *)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "margin:",
-					"message": "Include the <kbd>margin</kbd> property"
+					"value": "\\.btn\\.primary\\s*\\{",
+					"message": "Użyj <kbd>.btn.primary {</kbd> (bez spacji między klasami)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "margin",
-						"expected": "0"
-					},
-					"message": "Set margin to <kbd>0</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "div\\.container\\s+\\*\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "steelblue" },
+					"message": "Ustaw <kbd>background: steelblue</kbd>"
 				}
 			]
 		},
 		{
-			"id": "specificity-basics",
-			"title": "Specificity",
-			"description": "CSS specificity determines which styles take precedence when multiple conflicting rules target the same element. Specificity follows a hierarchical system: inline styles have the highest specificity, followed by ID selectors, then class/attribute/pseudo-class selectors, and finally element/pseudo-element selectors. This can be conceptualized as a four-part score (inline, ID, class, element). When creating multiple rules that may target the same elements, you can use the <kbd>color</kbd> property to set text colors, and specificity will determine which color is actually applied. Understanding specificity is crucial for predictable styling and debugging CSS conflicts. When two selectors have equal specificity, the one that comes last in the stylesheet wins.",
-			"task": "Examine the existing CSS rules and add a new rule with higher specificity to override the text color of the paragraph. Create a rule using '.content p' as the selector and set color: green.",
-			"previewHTML": "<div class=\"content\">\n  <p>What color will this paragraph be? Look at the CSS rules and their specificity.</p>\n</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p { border: 1px dashed gray; padding: 10px; }",
-			"codePrefix": "/* These CSS rules target the same paragraph but have different specificity */\n\n/* Rule 1: Element selector (lowest specificity) */\np {\n  color: red;\n}\n\n/* Rule 2: Descendant selector (higher specificity than just 'p') */\n",
+			"id": "specific-elements",
+			"title": "Celowanie w konkretne elementy",
+			"description": "Czasem chcesz, żeby klasa wyglądała inaczej na różnych elementach. Połącz selektor typu z selektorem klasy (bez spacji) aby być bardziej specyficznym:<br><br><pre>a.btn {<br>  text-decoration: none;<br>}</pre><br>To stylizuje tylko elementy <kbd>&lt;a&gt;</kbd> z klasą <kbd>btn</kbd>, nie elementy <kbd>&lt;button&gt;</kbd> z tą klasą.",
+			"task": "Usuń podkreślenie z przycisków-linków. Napisz regułę z <kbd>a.btn</kbd> jako selektorem i ustaw <kbd>text-decoration: none</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Regular Button</button>\n  <a href=\"#\" class=\"btn\">Link Button</a>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; align-items: center; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: steelblue; color: white; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": "a.btn {\n  text-decoration: none;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.content\\s+p\\s*{",
-					"message": "Use <kbd>.content p</kbd> as your selector (note the space between)",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": "a\\.btn\\s*\\{",
+					"message": "Użyj <kbd>a.btn {</kbd> (typ + klasa, bez spacji)"
 				},
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color</kbd> property"
+					"type": "property_value",
+					"value": { "property": "text-decoration", "expected": "none" },
+					"message": "Ustaw <kbd>text-decoration: none</kbd>"
+				}
+			]
+		},
+		{
+			"id": "grouping-selectors",
+			"title": "Grupowanie selektorów",
+			"description": "Gdy wiele elementów potrzebuje tych samych stylów, wymień je oddzielone przecinkami. To utrzymuje CSS czystym i łatwym w utrzymaniu.<br><br><pre>h1, h2, h3 {<br>  color: steelblue;<br>}</pre><br>To stosuje ten sam kolor do wszystkich trzech poziomów nagłówków w jednej regule.",
+			"task": "Ostyluj wszystkie nagłówki jednolicie. Dodaj <kbd>color: steelblue</kbd> do zgrupowanego selektora <kbd>h1, h2, h3</kbd>.",
+			"previewHTML": "<article><h1>Main Title</h1><p>Introduction paragraph with some text.</p><h2>Section Heading</h2><p>More content here.</p><h3>Subsection</h3><p>Final paragraph.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } p { color: #555; line-height: 1.6; }",
+			"sandboxCSS": "",
+			"codePrefix": "h1, h2, h3 {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "color: steelblue;",
+			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "Ustaw <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "descendant-selectors",
+			"title": "Selektory potomków",
+			"description": "Celuj w elementy wewnątrz innych elementów używając spacji między selektorami. To jeden z najbardziej użytecznych wzorców w CSS.<br><br><pre>.nav a {<br>  color: white;<br>}</pre><br>To stylizuje tylko linki wewnątrz <kbd>.nav</kbd>, pozostawiając inne linki bez zmian.",
+			"task": "Ostyluj linki nawigacji inaczej. Napisz regułę z <kbd>.nav a</kbd> jako selektorem i ustaw <kbd>color: white</kbd>.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav><p>Read more in our <a href=\"#\">documentation</a>.</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; margin: 0; } .nav { background: steelblue; padding: 1rem; display: flex; gap: 1rem; border-radius: 8px; margin-bottom: 1rem; } .nav a { text-decoration: none; } p a { color: steelblue; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".nav a {\n  color: white;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.nav\\s+a\\s*\\{",
+					"message": "Użyj <kbd>.nav a {</kbd> (spacja między .nav a a)"
 				},
 				{
-					"type": "contains",
-					"value": "green",
-					"message": ""
+					"type": "property_value",
+					"value": { "property": "color", "expected": "white" },
+					"message": "Ustaw <kbd>color: white</kbd>"
+				}
+			]
+		},
+		{
+			"id": "nested-styling",
+			"title": "Zagnieżdżone style",
+			"description": "Selektory potomków pozwalają tworzyć style kontekstowe. Ten sam element może wyglądać inaczej w zależności od tego gdzie się znajduje.<br><br>Na przykład, akapity w <kbd>.card</kbd> mogą być mniejsze niż akapity w <kbd>article</kbd>.",
+			"task": "Zmniejsz akapity wewnątrz karty. Napisz regułę z <kbd>.card p</kbd> jako selektorem i ustaw <kbd>font-size: 0.9rem</kbd>.",
+			"previewHTML": "<article><h2>Article Title</h2><p>This is a regular article paragraph with normal-sized text for comfortable reading.</p><div class=\"card\"><strong>Quick Tip</strong><p>Card paragraphs should be slightly smaller to fit the compact design.</p></div><p>Back to regular article text here.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } h2 { color: steelblue; margin-top: 0; } p { line-height: 1.6; color: #444; } .card { background: #f0f4f8; padding: 1rem; border-radius: 8px; border-left: 4px solid steelblue; } .card strong { color: steelblue; display: block; margin-bottom: 0.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".card p {\n  font-size: 0.9rem;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.card\\s+p\\s*\\{",
+					"message": "Użyj <kbd>.card p {</kbd> (spacja między .card a p)"
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "font-size", "expected": "0.9rem" },
+					"message": "Ustaw <kbd>font-size: 0.9rem</kbd>"
 				}
 			]
 		}

lessons/pl/00-welcome.json

@@ -1,16 +1,17 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "welcome",
-	"title": "Code Crispies",
-	"description": "Welcome to Code Crispies - your interactive web development learning platform",
+	"title": "Witaj",
+	"description": "Rozpocznij przygodę z Code Crispies",
 	"mode": "html",
 	"difficulty": "beginner",
+	"excludeFromProgress": true,
 	"lessons": [
 		{
-			"id": "get-started",
-			"title": "Get Started",
-			"description": "<strong>Code Crispies</strong> is a free, open-source platform for learning web development through hands-on exercises. No account required!<br><br><strong>What you'll learn:</strong><br>• <strong>HTML</strong> - Semantic elements, forms, tables, SVG (<em>HTML Block & Inline</em>, <em>HTML Forms</em>, <em>HTML Tables</em>)<br>• <strong>CSS</strong> - Selectors, box model, flexbox, animations (<em>CSS Selectors</em>, <em>CSS Box Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media queries and mobile-first layouts<br><br><strong>How it works:</strong><br>1. Read the task in the left panel<br>2. Write code in the editor<br>3. See live results in the preview<br>4. Get instant feedback with hints<br><br><strong>Keyboard shortcuts:</strong> <kbd>Ctrl+Z</kbd> to undo, <kbd>Ctrl+Shift+Z</kbd> to redo<br><br><strong>More resources:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript solutions<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript technology roadmap",
-			"task": "Write <code>Hello World</code>",
+			"id": "hello",
+			"title": "Cześć!",
+			"description": "<strong>Witaj w Code Crispies!</strong> Naucz się CSS i HTML poprzez praktyczne ćwiczenia.<br><br><strong>Jak to działa:</strong><br>1. Przeczytaj zadanie po lewej<br>2. Napisz kod w edytorze<br>3. Zobacz wyniki na żywo w podglądzie<br><br><strong>Wskazówki:</strong> Użyj <kbd>Ctrl+Z</kbd> aby cofnąć. Otwórz menu (☰) aby przeglądać wszystkie moduły.",
+			"task": "Napisz <code>Hello World</code> aby rozpocząć",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }",
 			"sandboxCSS": "",
@@ -21,42 +22,9 @@
 				{
 					"type": "contains",
 					"value": "Hello World",
-					"message": "Write <code>Hello World</code>"
+					"message": "Napisz <code>Hello World</code>"
 				}
 			]
-		},
-		{
-			"id": "overview",
-			"title": "Overview",
-			"description": "<strong>You're ready!</strong> Open the menu (☰) to explore all modules.<br><br><strong>Recommended learning path:</strong><br>1. <em>HTML Block & Inline</em> - Understand container vs inline elements<br>2. <em>HTML Forms</em> - Build interactive forms with validation<br>3. <em>CSS Selectors</em> - Target elements precisely<br>4. <em>CSS Box Model</em> - Master padding, margin, borders<br>5. <em>CSS Flexbox</em> - Create flexible layouts<br>6. <em>CSS Animations</em> - Add motion and transitions<br><br><strong>Tips:</strong><br>• Use <em>Show Expected</em> to see the target result<br>• Your progress is saved automatically<br>• Try Emmet in HTML mode: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Made by <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
-			"task": "Click Next to continue",
-			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }",
-			"sandboxCSS": "",
-			"initialCode": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "Hello World",
-					"message": "Click Next to continue"
-				}
-			]
-		},
-		{
-			"id": "playground",
-			"title": "Playground",
-			"mode": "playground",
-			"description": "",
-			"task": "",
-			"previewHTML": "",
-			"previewBaseCSS": "",
-			"sandboxCSS": "",
-			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
-			"solution": "",
-			"previewContainer": "preview-area",
-			"validations": []
 		}
 	]
 }

lessons/pl/01-box-model.json

@@ -2,18 +2,18 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "box-model",
 	"title": "CSS Box Model",
-	"description": "Master the fundamental principles of space management in web design through the CSS box model. This module explores how content, padding, borders, and margins combine to create layout structures that are both visually appealing and structurally sound.",
+	"description": "Opanuj podstawowe zasady zarządzania przestrzenią w projektowaniu stron poprzez model pudełkowy CSS. Ten moduł bada, jak treść, padding, ramki i marginesy łączą się, tworząc struktury układu.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "box-model-1",
-			"title": "Box Model Components",
-			"description": "The CSS box model consists of four concentric layers: content area (innermost), padding, border, and margin (outermost). Understanding how these components interact is essential for precise layout control.",
-			"task": "Set <kbd>padding</kbd> to <kbd>1rem</kbd> to create space between the content and border.",
-			"previewHTML": "<div class=\"box\">Box Model Components</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }",
+			"title": "Padding",
+			"description": "Każdy element w CSS to pudełko z czterema warstwami: treść, padding, ramka i margines. <strong>Padding</strong> tworzy przestrzeń między treścią a krawędzią pudełka.<br><br>Bez paddingu tekst przylega niezręcznie do ramek. Padding sprawia, że treść jest czytelna i wizualnie zbalansowana.<br><br><pre>.card {\n  padding: 1rem;\n}</pre>",
+			"task": "Ta karta profilu wygląda na ciasną. Dodaj <kbd>padding: 1rem</kbd>, aby tekst miał miejsce do oddychania.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "padding: 1rem;",
@@ -22,62 +22,62 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Set <kbd>padding: 1rem</kbd>"
+					"message": "Ustaw <kbd>padding: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-2",
-			"title": "Adding Borders",
-			"description": "Borders outline an element, creating visual separation from surrounding content. The border shorthand accepts three values: width, style, and color.",
-			"task": "Set <kbd>border</kbd> to <kbd>2px solid darkslategray</kbd>.",
-			"previewHTML": "<div class=\"box\">This box needs a border</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }",
+			"title": "Borders",
+			"description": "Ramki tworzą wizualne granice wokół elementów. Skrót <kbd>border</kbd> przyjmuje trzy wartości: szerokość, styl i kolor.<br><br>Popularne style: <kbd>solid</kbd>, <kbd>dashed</kbd>, <kbd>dotted</kbd>, <kbd>none</kbd>",
+			"task": "Dodaj subtelny lewy akcent do karty za pomocą <kbd>border-left: 4px solid steelblue</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border: 2px solid darkslategray;",
+			"solution": "border-left: 4px solid steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "border:\\s*2px\\s+solid\\s+darkslategray",
-					"message": "Set <kbd>border: 2px solid darkslategray</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
+					"message": "Ustaw <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-3",
-			"title": "Adding Margins",
-			"description": "Margins create space between elements, controlling how they relate to one another within a layout. Unlike padding (which affects internal spacing), margins exist outside the element's border.",
-			"task": "Set <kbd>margin</kbd> to <kbd>1rem</kbd> to create space between this element and its neighbors.",
-			"previewHTML": "<div class=\"container\"><div class=\"outer\">This box needs margins</div><div class=\"neighbor\">Adjacent element</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .outer { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }",
+			"title": "Margins",
+			"description": "Marginesy tworzą przestrzeń <em>na zewnątrz</em> elementu, oddzielając go od sąsiadów. Podczas gdy padding przesuwa treść do wewnątrz, marginesy odpychają inne elementy.",
+			"task": "Dodaj przestrzeń między tymi dwiema kartami profilu za pomocą <kbd>margin-bottom: 1rem</kbd> na <kbd>.card</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article><article class=\"card\"><h3>Alex Rivera</h3><p>UX Designer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".outer {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem;",
+			"solution": "margin-bottom: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "margin", "expected": "1rem" },
-					"message": "Set <kbd>margin: 1rem</kbd>"
+					"value": { "property": "margin-bottom", "expected": "1rem" },
+					"message": "Ustaw <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-4",
-			"title": "Box Sizing: Border-Box",
-			"description": "The <kbd>box-sizing</kbd> property determines how element dimensions are calculated. The default <kbd>content-box</kbd> excludes padding and border from width/height, while <kbd>border-box</kbd> includes them, making layout calculations more intuitive.",
-			"task": "Set <kbd>box-sizing</kbd> to <kbd>border-box</kbd> so padding and border are included in the width.",
-			"previewHTML": "<div class=\"sizing-demo\"><div class=\"box default\">Content-box (default)</div><div class=\"box sized\">Border-box</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .default { box-sizing: content-box; }",
+			"title": "Box Sizing",
+			"description": "Domyślnie <kbd>width</kbd> ustawia tylko szerokość treści. Padding i ramki są dodawane. To powoduje problemy z układem.<br><br><kbd>box-sizing: border-box</kbd> włącza padding i ramkę do szerokości, czyniąc rozmiary przewidywalnymi. Większość programistów stosuje to do wszystkich elementów.",
+			"task": "Obie karty mają <kbd>width: 200px</kbd>. Lewa używa domyślnego rozmiaru (content-box), stając się szersza niż oczekiwano. Napraw prawą kartę za pomocą <kbd>box-sizing: border-box</kbd>.",
+			"previewHTML": "<div class=\"demo\"><article class=\"card\">Content-box</article><article class=\"card fix\">Border-box</article></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .demo { display: flex; gap: 1rem; } .card { width: 200px; padding: 1rem; border: 4px solid steelblue; background: white; border-radius: 8px; }",
 			"sandboxCSS": "",
-			"codePrefix": ".sized {\n  ",
+			"codePrefix": ".fix {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "box-sizing: border-box;",
@@ -86,93 +86,104 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Set <kbd>box-sizing: border-box</kbd>"
+					"message": "Ustaw <kbd>box-sizing: border-box</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-5",
-			"title": "Margin Collapse",
-			"description": "When two vertical margins meet, they collapse to the larger value instead of adding up. Understanding this behavior is crucial for consistent vertical spacing.",
-			"task": "Set <kbd>margin-bottom</kbd> to <kbd>2rem</kbd>. Notice the space between paragraphs equals 2rem (not 3rem) due to margin collapse.",
-			"previewHTML": "<div class=\"collapse-demo\"><p class=\"first\">This paragraph has a bottom margin.</p><p class=\"second\">This paragraph has a top margin of 1rem.</p></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }",
+			"title": "Padding Shorthand",
+			"description": "Padding przyjmuje 1-4 wartości:<br>• 1 wartość: wszystkie strony<br>• 2 wartości: pionowo | poziomo<br>• 4 wartości: góra | prawo | dół | lewo",
+			"task": "Ten przycisk potrzebuje więcej miejsca poziomego niż pionowego. Ustaw <kbd>padding: 8px 1rem</kbd> (8px góra/dół, 1rem lewo/prawo).",
+			"previewHTML": "<button class=\"btn\">Follow</button>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .btn { background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }",
 			"sandboxCSS": "",
-			"codePrefix": ".first {\n  ",
+			"codePrefix": ".btn {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin-bottom: 2rem;",
+			"solution": "padding: 8px 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "property_value",
-					"value": { "property": "margin-bottom", "expected": "2rem" },
-					"message": "Set <kbd>margin-bottom: 2rem</kbd>"
+					"type": "regex",
+					"value": "padding:\\s*8px\\s+1rem",
+					"message": "Ustaw <kbd>padding: 8px 1rem</kbd>",
+					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-6",
-			"title": "Margin Shorthand Notation",
-			"description": "The margin shorthand can set all four sides at once. Two values set vertical (top/bottom) and horizontal (left/right) margins respectively.",
-			"task": "Set <kbd>margin</kbd> to <kbd>1rem 2rem</kbd> for 1rem top/bottom and 2rem left/right.",
-			"previewHTML": "<div class=\"container\"><div class=\"spaced\">This box needs margins: 1rem top/bottom, 2rem left/right</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .spaced { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }",
+			"title": "Margin Shorthand",
+			"description": "Margines używa tego samego wzorca skrótu co padding. Typowym wzorcem jest poziome centrowanie elementów blokowych za pomocą <kbd>margin: 0 auto</kbd>.",
+			"task": "Wycentruj tę kartę poziomo. Ustaw <kbd>margin: 0 auto</kbd>, aby automatycznie obliczyć równe marginesy lewo/prawo.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { width: 250px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".spaced {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem 2rem;",
+			"solution": "margin: 0 auto;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "margin:\\s*1rem\\s+2rem",
-					"message": "Set <kbd>margin: 1rem 2rem</kbd>",
+					"value": "margin:\\s*0\\s+auto",
+					"message": "Ustaw <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-7",
-			"title": "Padding Shorthand Notation",
-			"description": "Like margin, padding shorthand allows setting all sides at once. A single value applies to all four sides equally.",
-			"task": "Set <kbd>padding</kbd> to <kbd>2rem</kbd> to add equal padding on all sides.",
-			"previewHTML": "<div class=\"padded\">This box needs equal padding on all sides</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }",
+			"title": "Border Radius",
+			"description": "Chociaż nie jest częścią klasycznego modelu pudełkowego, <kbd>border-radius</kbd> zaokrągla rogi ramki elementu. Użyj <kbd>50%</kbd> na kwadratowym elemencie, aby utworzyć koło.",
+			"task": "Zrób okrągły obrazek awatara za pomocą <kbd>border-radius: 50%</kbd>.",
+			"previewHTML": "<article class=\"card\"><img class=\"avatar\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='25' fill='%23666'/%3E%3Ccircle cx='50' cy='90' r='40' fill='%23666'/%3E%3C/svg%3E\" alt=\"Avatar\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; text-align: center; } .avatar { width: 80px; height: 80px; background: #ddd; margin-bottom: 8px; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".padded {\n  ",
+			"codePrefix": ".avatar {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "padding: 2rem;",
+			"solution": "border-radius: 50%;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "padding", "expected": "2rem" },
-					"message": "Set <kbd>padding: 2rem</kbd>"
+					"value": { "property": "border-radius", "expected": "50%" },
+					"message": "Ustaw <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-8",
-			"title": "Border on Specific Sides",
-			"description": "For granular control, you can target specific sides with <kbd>border-top</kbd>, <kbd>border-right</kbd>, <kbd>border-bottom</kbd>, or <kbd>border-left</kbd>.",
-			"task": "Set <kbd>border-bottom</kbd> to <kbd>4px solid dodgerblue</kbd>.",
-			"previewHTML": "<div class=\"line\">This element needs only a bottom border</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }",
+			"title": "Complete Card",
+			"description": "Połączmy wszystko razem. Ta karta powiadomienia potrzebuje stylowania, żeby wyglądać profesjonalnie.",
+			"task": "Ostyluj powiadomienie: dodaj <kbd>padding: 1rem</kbd>, <kbd>border-left: 4px solid coral</kbd> i <kbd>border-radius: 4px</kbd>.",
+			"previewHTML": "<div class=\"alert\"><strong>New message</strong><p>You have 3 unread notifications</p></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { background: seashell; } .alert strong { color: coral; } .alert p { margin: 4px 0 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".line {\n  ",
+			"codePrefix": ".alert {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border-bottom: 4px solid dodgerblue;",
+			"solution": "padding: 1rem;\n  border-left: 4px solid coral;\n  border-radius: 4px;",
 			"previewContainer": "preview-area",
 			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "Ustaw <kbd>padding: 1rem</kbd>"
+				},
 				{
 					"type": "regex",
-					"value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue",
-					"message": "Set <kbd>border-bottom: 4px solid dodgerblue</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+coral",
+					"message": "Ustaw <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "border-radius", "expected": "4px" },
+					"message": "Ustaw <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}

lessons/pl/05-units-variables.json

@@ -1,115 +1,100 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "units-variables",
-	"title": "CSS Units & Variables",
-	"description": "Understand the variety of CSS measurement units and how to define and use custom properties for maintainable styles.",
+	"title": "Jednostki CSS i zmienne",
+	"description": "Poznaj różnorodność jednostek miar CSS oraz jak definiować i używać właściwości niestandardowych dla łatwych w utrzymaniu stylów.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "units-1",
-			"title": "Absolute vs. Relative Units",
-			"description": "Learn the difference between px, rem, em, %, and vw/vh for flexible, responsive layouts.",
-			"task": "Set the <kbd>width</kbd> of <kbd>.box</kbd> to <kbd>80%</kbd> and <kbd>max-width</kbd> to <kbd>37.5rem</kbd>.",
-			"previewHTML": "<div class=\"box\">Resize me!</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background: #f5f5f5; padding: 1rem; }",
+			"title": "Relative Units",
+			"description": "CSS oferuje dwa typy jednostek: <em>absolutne</em> (jak <kbd>px</kbd>) i <em>względne</em> (jak <kbd>%</kbd> i <kbd>rem</kbd>). Jednostki względne dostosowują się do kontekstu, czyniąc layouty elastycznymi i dostępnymi.<br><br><strong>Popularne jednostki względne:</strong><br>• <kbd>%</kbd> – Względem elementu nadrzędnego<br>• <kbd>rem</kbd> – Względem rozmiaru czcionki root (zwykle 16px)<br>• <kbd>em</kbd> – Względem rozmiaru czcionki elementu<br><br>Popularny wzorzec dla czytelnej treści: ustaw <kbd>width: 100%</kbd>, aby wypełnić dostępną przestrzeń, potem <kbd>max-width: 40rem</kbd> aby ograniczyć długość linii dla czytelności.",
+			"task": "Ten tekst artykułu jest zbyt szeroki na dużych ekranach. Dodaj <kbd>max-width: 40rem</kbd> dla optymalnej szerokości czytania.",
+			"previewHTML": "<article class=\"article\"><h2>The Art of Typography</h2><p>Good typography is invisible. When text is set well, readers absorb information without noticing the design decisions that make it comfortable to read. Line length is crucial—too wide and eyes get lost, too narrow and reading becomes choppy.</p><p>The ideal line length is 45-75 characters per line. At typical font sizes, this works out to roughly 40rem maximum width.</p></article>",
+			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 1rem; background: #f9f9f9; } .article { background: white; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .article h2 { margin: 0 0 1rem; color: #333; } .article p { margin: 0 0 1rem; line-height: 1.6; color: #444; } .article p:last-child { margin-bottom: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Set flexible sizing */\n.box {",
+			"codePrefix": ".article {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 80%;\n  max-width: 37.5rem;",
+			"codeSuffix": "\n}",
+			"solution": "max-width: 40rem;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "width", "message": "Use <kbd>width</kbd> property", "options": { "caseSensitive": false } },
-				{ "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Set width to <kbd>80%</kbd>" },
-				{ "type": "contains", "value": "max-width", "message": "Use <kbd>max-width</kbd> property", "options": { "caseSensitive": false } },
 				{
 					"type": "property_value",
-					"value": { "property": "max-width", "expected": "37.5rem" },
-					"message": "Set max-width to <kbd>37.5rem</kbd>"
+					"value": { "property": "max-width", "expected": "40rem" },
+					"message": "Ustaw <kbd>max-width: 40rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "units-2",
-			"title": "CSS Custom Properties",
-			"description": "Define and reuse variables (--custom properties) to centralize your theme values.",
-			"task": "Create a <kbd>--main-color</kbd> variable in <kbd>:root</kbd> with <kbd>#6200ee</kbd> and apply it as the border color on <kbd>.themed</kbd>.",
-			"previewHTML": "<div class=\"themed\">Variable Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }",
+			"title": "CSS Variables",
+			"description": "Właściwości niestandardowe CSS (zmienne) pozwalają definiować wartości wielokrotnego użytku. Definiuj je za pomocą <kbd>--nazwa</kbd> i używaj z <kbd>var(--nazwa)</kbd>. Zmienne zdefiniowane na <kbd>:root</kbd> są dostępne wszędzie.",
+			"task": "Zdefiniuj <kbd>--brand: steelblue</kbd> w <kbd>:root</kbd>, następnie użyj jako koloru <kbd>background</kbd> dla <kbd>.btn</kbd>.",
+			"previewHTML": "<div class=\"actions\"><button class=\"btn\">Subscribe</button><button class=\"btn\">Learn More</button></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .actions { display: flex; gap: 1rem; } .btn { color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #ccc; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Define and use a CSS variable */\n:root {",
+			"codePrefix": ":root {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}\n.themed { }",
-			"solution": "  --main-color: #6200ee;\n}\n.themed {\n  border-color: var(--main-color);",
+			"codeSuffix": "\n}\n\n.btn {\n  background: var(--brand);\n}",
+			"solution": "--brand: steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "contains",
-					"value": "--main-color",
-					"message": "Define <kbd>--main-color</kbd> in :root",
+					"value": "--brand",
+					"message": "Zdefiniuj zmienną <kbd>--brand</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
-					"value": "var(--main-color)",
-					"message": "Use <kbd>var(--main-color)</kbd>",
+					"value": "steelblue",
+					"message": "Ustaw wartość na <kbd>steelblue</kbd>",
 					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "property_value",
-					"value": { "property": "border", "expected": "var(--main-color)" },
-					"message": "Apply variable to border color",
-					"options": { "exact": false }
 				}
 			]
 		},
 		{
 			"id": "units-3",
-			"title": "Unit Calculations (calc)",
-			"description": "Use the <kbd>calc()</kbd> function to combine different units in one expression.",
-			"task": "Set the <kbd>width</kbd> of <kbd>.sized</kbd> to <kbd>calc(100% - 2rem)</kbd> and <kbd>min-height</kbd> to <kbd>calc(10vh + 1rem)</kbd>.",
-			"previewHTML": "<div class=\"sized\">Calc Demo</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }",
+			"title": "calc() Function",
+			"description": "Funkcja <kbd>calc()</kbd> pozwala mieszać różne jednostki w obliczeniach. Jest niezbędna dla layoutów łączących stałe i elastyczne rozmiary, jak układ z sidebar.",
+			"task": "Główna treść powinna wypełnić pozostałe miejsce po sidebarze 200px. Ustaw <kbd>width: calc(100% - 200px)</kbd> na <kbd>.main</kbd>.",
+			"previewHTML": "<div class=\"layout\"><aside class=\"sidebar\">Sidebar<br>Navigation</aside><main class=\"main\"><h2>Main Content</h2><p>This area should fill the remaining width after accounting for the fixed-width sidebar.</p></main></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .layout { display: flex; gap: 1rem; } .sidebar { width: 200px; background: #1a1a2e; color: white; padding: 1rem; border-radius: 8px; flex-shrink: 0; } .main { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .main h2 { margin: 0 0 8px; } .main p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use calc for dynamic sizing */\n.sized {",
+			"codePrefix": ".main {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: calc(100% - 2rem);\n  min-height: calc(10vh + 1rem);",
+			"codeSuffix": "\n}",
+			"solution": "width: calc(100% - 200px);",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "calc", "message": "Use <kbd>calc()</kbd> function", "options": { "caseSensitive": false } },
 				{
 					"type": "regex",
-					"value": "width:\\s*calc\\(100% - 2rem\\)",
-					"message": "Width should be <kbd>calc(100% - 2rem)</kbd>",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "regex",
-					"value": "min-height:\\s*calc\\(10vh \\+ 1rem\\)",
-					"message": "Min-height should be <kbd>calc(10vh + 1rem)</kbd>",
+					"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
+					"message": "Ustaw <kbd>width: calc(100% - 200px)</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "units-4",
-			"title": "Viewport & Responsive Units",
-			"description": "Control layouts relative to viewport size with vw, vh, and vmin/vmax units.",
-			"task": "Give <kbd>.view</kbd> a <kbd>width</kbd> of <kbd>50vw</kbd> and <kbd>height</kbd> of <kbd>20vh</kbd>.",
-			"previewHTML": "<div class=\"view\">Viewport Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .view { background: #ffe0b2; }",
+			"title": "Viewport Units",
+			"description": "Jednostki viewport wymiarują elementy względem okna przeglądarki:<br>• <kbd>vw</kbd> – 1% szerokości viewport<br>• <kbd>vh</kbd> – 1% wysokości viewport<br><br>Są idealne dla sekcji pełnoekranowych jak banery hero.",
+			"task": "Spraw, aby ta sekcja hero wypełniła wysokość viewport ustawiając <kbd>min-height: 100vh</kbd>.",
+			"previewHTML": "<section class=\"hero\"><h1>Welcome</h1><p>Scroll down to explore</p></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .hero { background: linear-gradient(135deg, #1a1a2e 0%, steelblue 100%); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .hero h1 { margin: 0 0 1rem; font-size: 2.5rem; } .hero p { margin: 0; opacity: 0.8; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use viewport units */\n.view {",
+			"codePrefix": ".hero {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 50vw;\n  height: 20vh;",
+			"codeSuffix": "\n}",
+			"solution": "min-height: 100vh;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "vw", "message": "Use <kbd>vw</kbd> unit", "options": { "caseSensitive": false } },
-				{ "type": "contains", "value": "vh", "message": "Use <kbd>vh</kbd> unit", "options": { "caseSensitive": false } },
-				{ "type": "property_value", "value": { "property": "width", "expected": "50vw" }, "message": "Set width to <kbd>50vw</kbd>" },
-				{ "type": "property_value", "value": { "property": "height", "expected": "20vh" }, "message": "Set height to <kbd>20vh</kbd>" }
+				{
+					"type": "property_value",
+					"value": { "property": "min-height", "expected": "100vh" },
+					"message": "Ustaw <kbd>min-height: 100vh</kbd>"
+				}
 			]
 		}
 	]

lessons/pl/06-transitions-animations.json

@@ -1,15 +1,15 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "transitions-animations",
-	"title": "CSS Animations",
-	"description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.",
+	"title": "Animacje CSS",
+	"description": "Dodaj interaktywność do interfejsu poprzez płynne przejścia właściwości i animacje oparte na keyframes.",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "transitions-1",
 			"title": "Transitions",
-			"description": "Learn how to apply <kbd>transition</kbd> to properties for smooth changes on state changes.<br><br><pre>transition: property duration;\n/* e.g. transition: background-color 0.3s; */</pre>",
-			"task": "Add <kbd>transition: background-color 0.3s</kbd> to <kbd>.btn</kbd> so the color fades smoothly on hover.",
+			"description": "Naucz się jak stosować <kbd>transition</kbd> do właściwości dla płynnych zmian przy zmianie stanu.<br><br><pre>transition: property duration;\n/* np. transition: background-color 0.3s; */</pre>",
+			"task": "Dodaj <kbd>transition: background-color 0.3s</kbd>, aby kolor płynnie zmieniał się przy hover.",
 			"previewHTML": "<button class=\"btn\">Hover Me</button>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: black; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; } .btn:hover { background: white; color: black; }",
 			"sandboxCSS": "",
@@ -22,13 +22,13 @@
 				{
 					"type": "contains",
 					"value": "transition",
-					"message": "Use the <kbd>transition</kbd> property",
+					"message": "Użyj właściwości <kbd>transition</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
 					"value": "transition:\\s*background-color\\s*0\\.3s",
-					"message": "Set <kbd>transition: background-color 0.3s</kbd>",
+					"message": "Ustaw <kbd>transition: background-color 0.3s</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -36,8 +36,8 @@
 		{
 			"id": "transitions-2",
 			"title": "Timing Funcs",
-			"description": "Explore easing functions like <kbd>ease</kbd>, <kbd>linear</kbd>, <kbd>ease-in</kbd>, <kbd>ease-out</kbd> to control animation pacing.",
-			"task": "Set <kbd>transition-timing-function</kbd> to <kbd>ease-in-out</kbd> on <kbd>.btn</kbd>.",
+			"description": "Poznaj funkcje easing jak <kbd>ease</kbd>, <kbd>linear</kbd>, <kbd>ease-in</kbd>, <kbd>ease-out</kbd> do kontrolowania tempa animacji.",
+			"task": "Ustaw <kbd>transition-timing-function</kbd> na <kbd>ease-in-out</kbd>.",
 			"previewHTML": "<button class=\"btn\">Timing</button>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: navy; color: gold; padding: 0.5rem 1rem; border: none; cursor: pointer; transition: all 0.5s; } .btn:hover { background: gold; color: navy; transform: scale(1.1); }",
 			"sandboxCSS": "",
@@ -50,21 +50,21 @@
 				{
 					"type": "contains",
 					"value": "transition-timing-function",
-					"message": "Use <kbd>transition-timing-function</kbd>",
+					"message": "Użyj <kbd>transition-timing-function</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
-					"message": "Set timing to <kbd>ease-in-out</kbd>"
+					"message": "Ustaw timing na <kbd>ease-in-out</kbd>"
 				}
 			]
 		},
 		{
 			"id": "transitions-3",
 			"title": "Keyframes",
-			"description": "Create named animations using <kbd>@keyframes</kbd> and apply them via the <kbd>animation</kbd> shorthand.<br><br><pre>@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}</pre>",
-			"task": "Define a keyframe at <kbd>50%</kbd> with <kbd>transform: translateY(-20px)</kbd> and apply <kbd>animation: bounce 1s infinite</kbd> to <kbd>.ball</kbd>.",
+			"description": "Twórz nazwane animacje używając <kbd>@keyframes</kbd> i stosuj je przez skrót <kbd>animation</kbd>.<br><br><pre>@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}</pre>",
+			"task": "Zdefiniuj keyframe przy <kbd>50%</kbd> z <kbd>transform: translateY(-20px)</kbd> i zastosuj <kbd>animation: bounce 1s infinite</kbd> na <kbd>.ball</kbd>.",
 			"previewHTML": "<div class=\"ball\"></div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; margin: 2rem auto; }",
 			"sandboxCSS": "",
@@ -77,25 +77,25 @@
 				{
 					"type": "contains",
 					"value": "@keyframes bounce",
-					"message": "Define <kbd>@keyframes bounce</kbd>",
+					"message": "Zdefiniuj <kbd>@keyframes bounce</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
 					"value": "50%.*transform: translateY\\(-20px\\)",
-					"message": "At <kbd>50%</kbd>, use <kbd>transform: translateY(-20px)</kbd>",
+					"message": "Przy <kbd>50%</kbd>, użyj <kbd>transform: translateY(-20px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": "animation",
-					"message": "Use <kbd>animation</kbd> property on <kbd>.ball</kbd>",
+					"message": "Użyj właściwości <kbd>animation</kbd> na <kbd>.ball</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
 					"value": "animation:.*bounce.*1s.*infinite",
-					"message": "Apply <kbd>animation: bounce 1s infinite</kbd>",
+					"message": "Zastosuj <kbd>animation: bounce 1s infinite</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -103,8 +103,8 @@
 		{
 			"id": "transitions-4",
 			"title": "Animation Properties",
-			"description": "Fine-tune animations with <kbd>animation-delay</kbd>, <kbd>animation-iteration-count</kbd>, <kbd>animation-direction</kbd>, and <kbd>animation-fill-mode</kbd>.",
-			"task": "Apply the <kbd>pulse</kbd> animation to <kbd>.box</kbd> with <kbd>animation-name: pulse</kbd>, <kbd>animation-duration: 2s</kbd>, <kbd>animation-delay: 1s</kbd>, <kbd>animation-iteration-count: 2</kbd>, and <kbd>animation-fill-mode: forwards</kbd>.",
+			"description": "Dostosuj animacje za pomocą <kbd>animation-delay</kbd>, <kbd>animation-iteration-count</kbd>, <kbd>animation-direction</kbd> i <kbd>animation-fill-mode</kbd>.",
+			"task": "Zastosuj animację <kbd>pulse</kbd> na <kbd>.box</kbd> z <kbd>animation-name: pulse</kbd>, <kbd>animation-duration: 2s</kbd>, <kbd>animation-delay: 1s</kbd>, <kbd>animation-iteration-count: 2</kbd> i <kbd>animation-fill-mode: forwards</kbd>.",
 			"previewHTML": "<div class=\"box\">Pulse</div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { width: 100px; height: 100px; background: black; color: white; display: flex; align-items: center; justify-content: center; margin: 2rem auto; } @keyframes pulse { 0% { background: black; color: white; transform: scale(1); } 50% { background: white; color: black; transform: scale(1.2); } 100% { background: limegreen; color: black; transform: scale(1); } }",
 			"sandboxCSS": "",
@@ -117,27 +117,27 @@
 				{
 					"type": "property_value",
 					"value": { "property": "animation-name", "expected": "pulse" },
-					"message": "Set <kbd>animation-name: pulse</kbd>"
+					"message": "Ustaw <kbd>animation-name: pulse</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-duration", "expected": "2s" },
-					"message": "Set <kbd>animation-duration: 2s</kbd>"
+					"message": "Ustaw <kbd>animation-duration: 2s</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-delay", "expected": "1s" },
-					"message": "Set <kbd>animation-delay: 1s</kbd>"
+					"message": "Ustaw <kbd>animation-delay: 1s</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-iteration-count", "expected": "2" },
-					"message": "Set <kbd>animation-iteration-count: 2</kbd>"
+					"message": "Ustaw <kbd>animation-iteration-count: 2</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-fill-mode", "expected": "forwards" },
-					"message": "Set <kbd>animation-fill-mode: forwards</kbd>"
+					"message": "Ustaw <kbd>animation-fill-mode: forwards</kbd>"
 				}
 			]
 		}

lessons/pl/08-responsive.json

@@ -2,14 +2,14 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "responsive-design",
 	"title": "CSS Responsive Design",
-	"description": "Make your layouts adapt to different screen sizes using media queries and fluid design techniques.",
+	"description": "Dostosuj swoje layouty do różnych rozmiarów ekranów używając media queries i technik płynnego designu.",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "responsive-1",
 			"title": "Media Queries",
-			"description": "Understand the syntax and use cases for CSS media queries to apply styles conditionally based on viewport characteristics.",
-			"task": "Write a media query with <kbd>@media (max-width: 600px)</kbd> that changes <kbd>.panel</kbd> background to <kbd>lightcoral</kbd>.",
+			"description": "Poznaj składnię i przypadki użycia CSS media queries do warunkowego stosowania stylów na podstawie cech viewport.<br><br><pre>@media (max-width: 600px) {\n  .panel {\n    background: lightcoral;\n  }\n}</pre>",
+			"task": "Napisz media query z <kbd>@media (max-width: 600px)</kbd>, która zmienia tło <kbd>.panel</kbd> na <kbd>lightcoral</kbd>.",
 			"previewHTML": "<div class=\"panel\">Resize the window</div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }",
 			"sandboxCSS": "",
@@ -22,19 +22,19 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(max-width:\\s*600px\\)",
-					"message": "Use <kbd>@media (max-width: 600px)</kbd>",
+					"message": "Użyj <kbd>@media (max-width: 600px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": ".panel",
-					"message": "Target <kbd>.panel</kbd> inside the media query",
+					"message": "Zaadresuj <kbd>.panel</kbd> wewnątrz media query",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "background", "expected": "lightcoral" },
-					"message": "Set <kbd>background: lightcoral</kbd>",
+					"message": "Ustaw <kbd>background: lightcoral</kbd>",
 					"options": { "exact": false }
 				}
 			]
@@ -42,8 +42,8 @@
 		{
 			"id": "responsive-2",
 			"title": "Fluid Type",
-			"description": "Use relative units like <kbd>vw</kbd> to make font sizes scale with the viewport width.",
-			"task": "Set <kbd>font-size: 5vw</kbd> on <kbd>.text</kbd> so it scales as the viewport changes.",
+			"description": "Używaj jednostek względnych jak <kbd>vw</kbd>, aby rozmiary czcionek skalowały się z szerokością viewport.",
+			"task": "Ustaw <kbd>font-size: 5vw</kbd>, aby skalowała się ze zmianą viewport.",
 			"previewHTML": "<p class=\"text\">Fluid Typography</p>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
 			"sandboxCSS": "",
@@ -53,46 +53,46 @@
 			"solution": "  font-size: 5vw;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Set <kbd>font-size: 5vw</kbd>" }
+				{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Ustaw <kbd>font-size: 5vw</kbd>" }
 			]
 		},
 		{
 			"id": "responsive-3",
-			"title": "Flex Grids",
-			"description": "Combine CSS Grid with <kbd>auto-fit</kbd> or <kbd>auto-fill</kbd> for responsive column layouts.",
-			"task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.cards</kbd>.",
-			"previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
+			"title": "Responsive Grid",
+			"description": "Połącz CSS Grid z <kbd>auto-fit</kbd> lub <kbd>auto-fill</kbd> dla responsywnych układów kolumnowych, które automatycznie dostosowują liczbę kolumn na podstawie dostępnej przestrzeni.",
+			"task": "Dodaj <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> i <kbd>gap: 1rem</kbd>.",
+			"previewHTML": "<section class=\"features\"><article class=\"feature\"><h3>Fast</h3><p>Lightning quick load times</p></article><article class=\"feature\"><h3>Secure</h3><p>Enterprise-grade security</p></article><article class=\"feature\"><h3>Reliable</h3><p>99.9% uptime guaranteed</p></article><article class=\"feature\"><h3>Support</h3><p>24/7 customer service</p></article></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .feature { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .feature h3 { margin: 0 0 8px; color: steelblue; } .feature p { margin: 0; color: #666; font-size: 0.9rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Create a responsive grid */\n.cards {",
+			"codePrefix": ".features {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
+			"codeSuffix": "\n}",
+			"solution": "display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
 					"value": { "property": "display", "expected": "grid" },
-					"message": "Set <kbd>display: grid</kbd>"
+					"message": "Ustaw <kbd>display: grid</kbd>"
 				},
 				{
 					"type": "regex",
 					"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
-					"message": "Use <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
+					"message": "Użyj <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "gap", "expected": "1rem" },
-					"message": "Set <kbd>gap: 1rem</kbd>"
+					"message": "Ustaw <kbd>gap: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "responsive-4",
 			"title": "Mobile-First",
-			"description": "Adopt a mobile-first approach by writing base styles for small screens and enhancing for larger viewports.",
-			"task": "Write a media query with <kbd>@media (min-width: 768px)</kbd> that sets <kbd>.sidebar</kbd> width to <kbd>250px</kbd>.",
+			"description": "Zastosuj podejście mobile-first: pisz bazowe style dla małych ekranów i rozszerzaj dla większych viewport.",
+			"task": "Napisz media query z <kbd>@media (min-width: 768px)</kbd>, która ustawia szerokość <kbd>.sidebar</kbd> na <kbd>250px</kbd>.",
 			"previewHTML": "<aside class=\"sidebar\">Sidebar</aside>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sidebar { background: #c8e6c9; padding: 1rem; }",
 			"sandboxCSS": "",
@@ -105,19 +105,19 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(min-width:\\s*768px\\)",
-					"message": "Use <kbd>@media (min-width: 768px)</kbd>",
+					"message": "Użyj <kbd>@media (min-width: 768px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": ".sidebar",
-					"message": "Target <kbd>.sidebar</kbd> inside media query",
+					"message": "Zaadresuj <kbd>.sidebar</kbd> w media query",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "width", "expected": "250px" },
-					"message": "Set <kbd>width: 250px</kbd>",
+					"message": "Ustaw <kbd>width: 250px</kbd>",
 					"options": { "exact": false }
 				}
 			]

lessons/pl/20-html-elements.json

@@ -2,94 +2,65 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-elements",
 	"title": "HTML Block & Inline",
-	"description": "Understanding the fundamental difference between container (block) and inline elements",
+	"description": "Zrozum podstawową różnicę między elementami kontenerowymi (blokowymi) a elementami liniowymi",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "block-vs-inline-intro",
-			"title": "Block vs Inline Elements",
-			"description": "HTML elements fall into two main categories:<br><br><strong>Block elements</strong> (containers) start on a new line and take full width. Examples: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>Inline elements</strong> flow within text and only take needed width. Examples: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
-			"task": "Wrap the word <kbd>important</kbd> with <kbd>&lt;strong&gt;</kbd> tags to make it bold. Notice how the paragraph (block) takes full width while strong (inline) flows with text.",
+			"title": "Elementy blokowe vs liniowe",
+			"description": "Elementy HTML dzielą się na dwie główne kategorie:<br><br><strong>Elementy blokowe</strong> (kontenery) zaczynają się w nowej linii i zajmują pełną szerokość. Przykłady: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>Elementy liniowe</strong> płyną wewnątrz tekstu i zajmują tylko potrzebną szerokość. Przykłady: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
+			"task": "Otocz słowo <kbd>ważne</kbd> tagami <kbd>&lt;strong&gt;</kbd>, aby je pogrubić. Zauważ, jak akapit (blok) zajmuje pełną szerokość, podczas gdy strong (liniowy) płynie z tekstem.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
 			"sandboxCSS": "",
-			"initialCode": "<p>This is a paragraph with an important word.</p>",
-			"solution": "<p>This is a paragraph with an <strong>important</strong> word.</p>",
+			"initialCode": "<p>To jest akapit z ważne słowem.</p>",
+			"solution": "<p>To jest akapit z <strong>ważne</strong> słowem.</p>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Add a <kbd>&lt;p&gt;</kbd> paragraph element"
+					"message": "Dodaj element akapitu <kbd>&lt;p&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "p", "child": "strong" },
-					"message": "Wrap the word <kbd>important</kbd> with <kbd>&lt;strong&gt;</kbd> tags"
+					"message": "Otocz słowo <kbd>ważne</kbd> tagami <kbd>&lt;strong&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "semantic-containers",
-			"title": "Semantic Tags",
-			"description": "Modern HTML uses semantic containers that describe their content:<br><br><kbd>&lt;header&gt;</kbd> - Page or section header<br><kbd>&lt;nav&gt;</kbd> - Navigation links<br><kbd>&lt;main&gt;</kbd> - Main content area<br><kbd>&lt;section&gt;</kbd> - Thematic grouping<br><kbd>&lt;article&gt;</kbd> - Self-contained content<br><kbd>&lt;footer&gt;</kbd> - Page or section footer",
-			"task": "Create a basic page structure:<br>1. Add a <kbd>&lt;header&gt;</kbd> with an <kbd>&lt;h1&gt;</kbd> containing the text <code>My Website</code><br>2. Add a <kbd>&lt;main&gt;</kbd> element with a paragraph saying <code>Welcome to my site!</code><br>3. Add a <kbd>&lt;footer&gt;</kbd> with a paragraph saying <code>Copyright 2026</code>",
+			"title": "Tagi semantyczne",
+			"description": "Nowoczesny HTML używa semantycznych kontenerów, które opisują swoją zawartość:<br><br><kbd>&lt;header&gt;</kbd> - Nagłówek strony lub sekcji<br><kbd>&lt;nav&gt;</kbd> - Linki nawigacyjne<br><kbd>&lt;main&gt;</kbd> - Główna treść<br><kbd>&lt;section&gt;</kbd> - Grupa tematyczna<br><kbd>&lt;article&gt;</kbd> - Samodzielna treść<br><kbd>&lt;footer&gt;</kbd> - Stopka strony lub sekcji",
+			"task": "Stwórz podstawową strukturę strony:<br>1. Dodaj <kbd>&lt;header&gt;</kbd> z <kbd>&lt;h1&gt;</kbd> zawierającym tekst <code>Moja Strona</code><br>2. Dodaj element <kbd>&lt;main&gt;</kbd> z akapitem mówiącym <code>Witaj na mojej stronie!</code><br>3. Dodaj <kbd>&lt;footer&gt;</kbd> z akapitem mówiącym <code>Copyright 2026</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<header>\n  <h1>My Website</h1>\n</header>\n<main>\n  <p>Welcome to my site!</p>\n</main>\n<footer>\n  <p>Copyright 2026</p>\n</footer>",
+			"solution": "<header>\n  <h1>Moja Strona</h1>\n</header>\n<main>\n  <p>Witaj na mojej stronie!</p>\n</main>\n<footer>\n  <p>Copyright 2026</p>\n</footer>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "header",
-					"message": "Add a <kbd>&lt;header&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;header&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "main",
-					"message": "Add a <kbd>&lt;main&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;main&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "footer",
-					"message": "Add a <kbd>&lt;footer&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;footer&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "header", "child": "h1" },
-					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
-				}
-			]
-		},
-		{
-			"id": "div-vs-span",
-			"title": "div & span",
-			"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
-			"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
-			"sandboxCSS": "",
-			"initialCode": "The most highlighted moment was unforgettable.",
-			"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "div",
-					"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "span",
-					"message": "Add a <kbd>&lt;span&gt;</kbd> around the word <kbd>highlighted</kbd>"
-				},
-				{
-					"type": "element_text",
-					"value": { "selector": "span", "text": "highlighted" },
-					"message": "The <kbd>&lt;span&gt;</kbd> should contain the word <kbd>highlighted</kbd>"
+					"message": "Dodaj nagłówek <kbd>&lt;h1&gt;</kbd> wewnątrz header"
 				}
 			]
 		}

lessons/pl/21-html-forms-basic.json

@@ -1,100 +1,100 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-basic",
-	"title": "HTML Forms",
-	"description": "Learn to create forms with various input types",
+	"title": "Formularze HTML",
+	"description": "Naucz się tworzyć formularze z różnymi typami pól",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "form-structure",
-			"title": "Form Structure",
-			"description": "Every form needs a <kbd>&lt;form&gt;</kbd> wrapper. Inside, use <kbd>&lt;label&gt;</kbd> to describe inputs and <kbd>&lt;input&gt;</kbd> for user data entry.<br><br>The <kbd>for</kbd> attribute on labels should match the <kbd>id</kbd> on inputs for accessibility.",
-			"task": "Create a form with:<br>1. A <kbd>&lt;label&gt;</kbd> with the text <code>Name:</code> and <kbd>for=\"name\"</kbd> attribute<br>2. A text <kbd>&lt;input&gt;</kbd> with <kbd>id=\"name\"</kbd> and <kbd>name=\"name\"</kbd> attributes",
+			"title": "Struktura formularza",
+			"description": "Każdy formularz potrzebuje wrappera <kbd>&lt;form&gt;</kbd>. Wewnątrz używaj <kbd>&lt;label&gt;</kbd> do opisywania pól i <kbd>&lt;input&gt;</kbd> do wprowadzania danych.<br><br>Atrybut <kbd>for</kbd> w labelach powinien odpowiadać <kbd>id</kbd> pól dla dostępności.",
+			"task": "Stwórz formularz z:<br>1. <kbd>&lt;label&gt;</kbd> z tekstem <code>Imię:</code> i atrybutem <kbd>for=\"name\"</kbd><br>2. Tekstowym <kbd>&lt;input&gt;</kbd> z atrybutami <kbd>id=\"name\"</kbd> i <kbd>name=\"name\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<form>\n  <label for=\"name\">Name:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Imię:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Wrap everything in a <kbd>&lt;form&gt;</kbd> element"
+					"message": "Otocz wszystko elementem <kbd>&lt;form&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for your input"
+					"message": "Dodaj <kbd>&lt;label&gt;</kbd> dla swojego pola"
 				},
 				{
 					"type": "element_exists",
 					"value": "input",
-					"message": "Add an <kbd>&lt;input&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;input&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "label", "attr": "for", "value": null },
-					"message": "Add a <kbd>for</kbd> attribute to your label"
+					"message": "Dodaj atrybut <kbd>for</kbd> do swojego labela"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "id", "value": null },
-					"message": "Add an <kbd>id</kbd> attribute to your input"
+					"message": "Dodaj atrybut <kbd>id</kbd> do swojego pola"
 				}
 			]
 		},
 		{
 			"id": "input-types",
-			"title": "Input Types",
-			"description": "Different input types provide appropriate keyboards and validation:<br><br><kbd>type=\"text\"</kbd> - General text<br><kbd>type=\"email\"</kbd> - Email with @ validation<br><kbd>type=\"password\"</kbd> - Hidden characters<br><kbd>type=\"number\"</kbd> - Numeric keyboard<br><kbd>type=\"tel\"</kbd> - Phone keyboard",
-			"task": "Create a login form with two fields:<br>1. An email field: <kbd>&lt;label for=\"email\"&gt;Email:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. A password field: <kbd>&lt;label for=\"password\"&gt;Password:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
+			"title": "Typy pól",
+			"description": "Różne typy pól zapewniają odpowiednie klawiatury i walidację:<br><br><kbd>type=\"text\"</kbd> - Ogólny tekst<br><kbd>type=\"email\"</kbd> - Email z walidacją @<br><kbd>type=\"password\"</kbd> - Ukryte znaki<br><kbd>type=\"number\"</kbd> - Klawiatura numeryczna<br><kbd>type=\"tel\"</kbd> - Klawiatura telefoniczna",
+			"task": "Stwórz formularz logowania z dwoma polami:<br>1. Pole email: <kbd>&lt;label for=\"email\"&gt;Email:&lt;/label&gt;</kbd> i <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. Pole hasła: <kbd>&lt;label for=\"password\"&gt;Hasło:&lt;/label&gt;</kbd> i <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  \n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
+			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Hasło:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "input[type='email']",
-					"message": "Add an input with type=\"email\""
+					"message": "Dodaj pole z type=\"email\""
 				},
 				{
 					"type": "element_exists",
 					"value": "input[type='password']",
-					"message": "Add an input with type=\"password\""
+					"message": "Dodaj pole z type=\"password\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "label", "min": 2 },
-					"message": "Add labels for both inputs"
+					"message": "Dodaj labele dla obu pól"
 				}
 			]
 		},
 		{
 			"id": "submit-button",
-			"title": "Submit Button",
-			"description": "Forms need a way to submit data. Use:<br><br><kbd>&lt;button type=\"submit\"&gt;</kbd> - Preferred, flexible content<br><kbd>&lt;input type=\"submit\"&gt;</kbd> - Simple text-only button<br><br>The button text should be action-oriented (e.g., <code>Sign In</code>, 'Register', 'Send').",
-			"task": "Add a submit button to the form with the text <code>Sign In</code>.",
+			"title": "Przycisk wysyłania",
+			"description": "Formularze potrzebują sposobu na wysłanie danych. Użyj:<br><br><kbd>&lt;button type=\"submit\"&gt;</kbd> - Preferowany, elastyczna zawartość<br><kbd>&lt;input type=\"submit\"&gt;</kbd> - Prosty przycisk tekstowy<br><br>Tekst przycisku powinien być zorientowany na akcję (np. <code>Zaloguj</code>, 'Zarejestruj', 'Wyślij').",
+			"task": "Dodaj przycisk wysyłania do formularza z tekstem <code>Zaloguj</code>.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">Sign In</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Hasło:</label>\n  <input type=\"password\" id=\"password\">\n  \n</form>",
+			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Hasło:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">Zaloguj</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "button[type='submit'], input[type='submit']",
-					"message": "Add a submit button to your form"
+					"message": "Dodaj przycisk wysyłania do formularza"
 				},
 				{
 					"type": "element_text",
-					"value": { "selector": "button", "text": "Sign In" },
-					"message": "The button should say <kbd>Sign In</kbd>"
+					"value": { "selector": "button", "text": "Zaloguj" },
+					"message": "Przycisk powinien wyświetlać <kbd>Zaloguj</kbd>"
 				}
 			]
 		}

lessons/pl/22-html-forms-validation.json

@@ -1,110 +1,32 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-validation",
-	"title": "HTML Validation",
-	"description": "Learn HTML5 built-in form validation attributes",
+	"title": "Walidacja formularzy",
+	"description": "Użyj wbudowanej walidacji HTML5 dla lepszego doświadczenia użytkownika",
 	"mode": "html",
-	"difficulty": "intermediate",
+	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "required-fields",
-			"title": "Required Fields",
-			"description": "The <kbd>required</kbd> attribute prevents form submission if the field is empty.<br><br>Add it to any input that must be filled:<br><kbd>&lt;input type=\"text\" required&gt;</kbd><br><br>The browser shows a validation message automatically.",
-			"task": "Make both the name and email fields required by adding the <kbd>required</kbd> attribute.",
+			"title": "Pola wymagane",
+			"description": "Atrybut <kbd>required</kbd> zapobiega wysłaniu formularza, jeśli pole jest puste. Przeglądarka automatycznie pokazuje komunikat walidacji - bez JavaScript!<br><br>Dodaj go do każdego pola, które musi być wypełnione:<br><kbd>&lt;input type=\"text\" required&gt;</kbd>",
+			"task": "Uczyń oba pola (imię i email) wymaganymi, dodając atrybut <kbd>required</kbd> do każdego pola.",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 320px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } input:focus { outline: 2px solid steelblue; border-color: transparent; } button { margin-top: 20px; padding: 10px 20px; background: steelblue; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Submit</button>\n</form>",
-			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Submit</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"name\">Imię *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Wyślij</button>\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Imię *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Wyślij</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='name']", "attr": "required", "value": true },
-					"message": "Add the <kbd>required</kbd> attribute to the name input"
+					"message": "Dodaj <kbd>required</kbd> do pola imienia"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='email']", "attr": "required", "value": true },
-					"message": "Add the <kbd>required</kbd> attribute to the email input"
-				}
-			]
-		},
-		{
-			"id": "input-constraints",
-			"title": "Constraints",
-			"description": "Control what users can enter:<br><br><kbd>minlength</kbd> / <kbd>maxlength</kbd> - Text length limits<br><kbd>min</kbd> / <kbd>max</kbd> - Number range<br><kbd>pattern</kbd> - Regex pattern matching<br><kbd>placeholder</kbd> - Hint text (not a label!)",
-			"task": "Add validation to the password input:<br>1. Add <kbd>minlength=\"8\"</kbd> for minimum length<br>2. Add <kbd>maxlength=\"20\"</kbd> for maximum length<br>3. Add <kbd>placeholder=\"Enter password\"</kbd> as a hint",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } small { display: block; font-size: 12px; color: #666; margin-top: 4px; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"solution": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
-					"message": "Add <kbd>minlength</kbd>=\"8\" to the password input"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
-					"message": "Add <kbd>maxlength</kbd>=\"20\" to the password input"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "placeholder", "value": null },
-					"message": "Add a <kbd>placeholder</kbd> to hint what to enter"
-				}
-			]
-		},
-		{
-			"id": "complete-registration",
-			"title": "Full Form",
-			"description": "Build a complete registration form with all validation concepts:<br><br>- Required fields marked with *<br>- Email validation (use type=\"email\")<br>- Password with length constraints<br>- Terms checkbox (required)<br>- Submit button",
-			"task": "Complete the registration form. Add required attributes, proper input types, and validation constraints.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } input[type='checkbox'] { width: auto; margin-right: 8px; vertical-align: middle; } label:has(input[type='checkbox']) { display: flex; align-items: center; font-weight: normal; } button { width: 100%; margin-top: 20px; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\">\n  \n  <label for=\"email\">Email *</label>\n  <input id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password *</label>\n  <input id=\"password\" name=\"password\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"solution": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Password *</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#fullname", "attr": "required", "value": true },
-					"message": "Make the full name field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "type", "value": "email" },
-					"message": "Set the email input <kbd>type=\"email\"</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "required", "value": true },
-					"message": "Make the email field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "type", "value": "password" },
-					"message": "Set the password input <kbd>type=\"password\"</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "required", "value": true },
-					"message": "Make the password field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "minlength", "value": "8" },
-					"message": "Add <kbd>minlength</kbd>=\"8\" to password"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#terms", "attr": "required", "value": true },
-					"message": "Make the terms checkbox <kbd>required</kbd>"
+					"message": "Dodaj <kbd>required</kbd> do pola email"
 				}
 			]
 		}

lessons/pl/23-html-details-summary.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-details-summary",
 	"title": "HTML Details & Summary",
-	"description": "Create expandable content sections without JavaScript",
+	"description": "Twórz rozwijane sekcje bez JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "details-summary-basic",
-			"title": "First Widget",
-			"description": "The <kbd>&lt;details&gt;</kbd> element creates a collapsible section. The <kbd>&lt;summary&gt;</kbd> provides the clickable label.<br><br>Click the summary to toggle the hidden content - no JavaScript needed!",
-			"task": "Create a <kbd>&lt;details&gt;</kbd> element with:<br>1. A <kbd>&lt;summary&gt;</kbd> saying <code>Click to reveal</code><br>2. A <kbd>&lt;p&gt;</kbd> with the text <code>This content was hidden!</code>",
+			"title": "Pierwszy widget",
+			"description": "Element <kbd>&lt;details&gt;</kbd> tworzy zwijany sekcję. Element <kbd>&lt;summary&gt;</kbd> zapewnia klikalną etykietę.<br><br>Kliknij podsumowanie, aby przełączyć ukrytą treść - bez JavaScript!",
+			"task": "Utwórz element <kbd>&lt;details&gt;</kbd> z:<br>1. Elementem <kbd>&lt;summary&gt;</kbd> z tekstem <code>Click to reveal</code><br>2. Elementem <kbd>&lt;p&gt;</kbd> z tekstem <code>This content was hidden!</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "details",
-					"message": "Add a <kbd>&lt;details&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;details&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "summary",
-					"message": "Add a <kbd>&lt;summary&gt;</kbd> inside the details"
+					"message": "Dodaj <kbd>&lt;summary&gt;</kbd> wewnątrz details"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "summary" },
-					"message": "The <kbd>&lt;summary&gt;</kbd> must be inside <kbd>&lt;details&gt;</kbd>"
+					"message": "Element <kbd>&lt;summary&gt;</kbd> musi być wewnątrz <kbd>&lt;details&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "p" },
-					"message": "Add a <kbd>&lt;p&gt;</kbd> inside <kbd>&lt;details&gt;</kbd> for the hidden content"
+					"message": "Dodaj <kbd>&lt;p&gt;</kbd> wewnątrz <kbd>&lt;details&gt;</kbd> dla ukrytej treści"
 				}
 			]
 		},
 		{
 			"id": "details-open-attribute",
-			"title": "Pre-expanded Details",
-			"description": "By default, <kbd>&lt;details&gt;</kbd> is closed. Add the <kbd>open</kbd> attribute to show the content initially.<br><br>This is a boolean attribute - just add <kbd>open</kbd> without a value.",
-			"task": "Add the <kbd>open</kbd> attribute to the <kbd>&lt;details&gt;</kbd> element to show the content by default.",
+			"title": "Domyślnie rozwinięte",
+			"description": "Domyślnie <kbd>&lt;details&gt;</kbd> jest zamknięte. Dodaj atrybut <kbd>open</kbd>, aby pokazać treść na początku.<br><br>To jest atrybut logiczny - po prostu dodaj <kbd>open</kbd> bez wartości.",
+			"task": "Dodaj atrybut <kbd>open</kbd> do elementu <kbd>&lt;details&gt;</kbd>, aby domyślnie pokazać treść.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; background: #f9f9f9; } summary { font-weight: 600; cursor: pointer; } details p { margin-top: 15px; color: #666; }",
 			"sandboxCSS": "",
@@ -55,15 +55,15 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "details", "attr": "open", "value": true },
-					"message": "Add the <kbd>open</kbd> attribute to <kbd>&lt;details&gt;</kbd>"
+					"message": "Dodaj atrybut <kbd>open</kbd> do <kbd>&lt;details&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "faq-accordion",
-			"title": "FAQ Accordion",
-			"description": "Multiple <kbd>&lt;details&gt;</kbd> elements create an accordion-style FAQ. Each question can be expanded independently.<br><br><b>Pro tip:</b> Type <kbd>details*3&gt;summary+p</kbd> and press Tab for Emmet expansion. <kbd>*3</kbd> creates 3 elements, <kbd>&gt;</kbd> nests inside, <kbd>+</kbd> adds siblings.",
-			"task": "Create an FAQ section with:<br>1. An <kbd>&lt;h1&gt;</kbd> saying <code>Frequently Asked Questions</code><br>2. Three <kbd>&lt;details&gt;</kbd> elements, each with a question in <kbd>&lt;summary&gt;</kbd> and an answer in <kbd>&lt;p&gt;</kbd>",
+			"title": "Akordeon FAQ",
+			"description": "Wiele elementów <kbd>&lt;details&gt;</kbd> tworzy FAQ w stylu akordeonu. Każde pytanie może być rozwijane niezależnie.<br><br><b>Pro tip:</b> Wpisz <kbd>details*3&gt;summary+p</kbd> i naciśnij Tab dla rozwinięcia Emmet. <kbd>*3</kbd> tworzy 3 elementy, <kbd>&gt;</kbd> zagnieżdża wewnątrz, <kbd>+</kbd> dodaje rodzeństwo.",
+			"task": "Utwórz sekcję FAQ z:<br>1. Nagłówkiem <kbd>&lt;h1&gt;</kbd> z tekstem <code>Frequently Asked Questions</code><br>2. Trzema elementami <kbd>&lt;details&gt;</kbd>, każdy z pytaniem w <kbd>&lt;summary&gt;</kbd> i odpowiedzią w <kbd>&lt;p&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
 			"sandboxCSS": "",
@@ -74,22 +74,22 @@
 				{
 					"type": "element_exists",
 					"value": "h1",
-					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading for the FAQ title"
+					"message": "Dodaj nagłówek <kbd>&lt;h1&gt;</kbd> dla tytułu FAQ"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "details", "min": 3 },
-					"message": "Create at least 3 <kbd>&lt;details&gt;</kbd> elements for the FAQ"
+					"message": "Utwórz co najmniej 3 elementy <kbd>&lt;details&gt;</kbd> dla FAQ"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "summary", "min": 3 },
-					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <kbd>&lt;summary&gt;</kbd> for the question"
+					"message": "Każdy <kbd>&lt;details&gt;</kbd> potrzebuje <kbd>&lt;summary&gt;</kbd> dla pytania"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "details p", "min": 3 },
-					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <kbd>&lt;p&gt;</kbd> for the answer"
+					"message": "Każdy <kbd>&lt;details&gt;</kbd> potrzebuje <kbd>&lt;p&gt;</kbd> dla odpowiedzi"
 				}
 			]
 		}

lessons/pl/24-html-progress-meter.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-progress-meter",
 	"title": "HTML Progress & Meter",
-	"description": "Display completion status and scalar measurements natively",
+	"description": "Wyświetlaj postęp i pomiary natywnie",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "progress-basic",
-			"title": "Progress Bars",
-			"description": "The <kbd>&lt;progress&gt;</kbd> element shows task completion. Use <kbd>value</kbd> for current progress and <kbd>max</kbd> for the total.<br><br><b>Note:</b> This is not a self-closing tag! Write <kbd>&lt;progress&gt;...&lt;/progress&gt;</kbd> with fallback text inside for older browsers.",
-			"task": "Create a progress bar showing 70% completion:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Download:</code><br>2. Add a <kbd>&lt;progress&gt;</kbd> with <kbd>value=\"70\"</kbd> and <kbd>max=\"100\"</kbd>",
+			"title": "Paski postępu",
+			"description": "Element <kbd>&lt;progress&gt;</kbd> pokazuje postęp zadania. Użyj <kbd>value</kbd> dla aktualnego postępu i <kbd>max</kbd> dla całości.<br><br><b>Uwaga:</b> To nie jest samozamykający się tag! Pisz <kbd>&lt;progress&gt;...&lt;/progress&gt;</kbd> z tekstem zastępczym w środku dla starszych przeglądarek.",
+			"task": "Utwórz pasek postępu pokazujący 70% ukończenia:<br>1. Dodaj <kbd>&lt;label&gt;</kbd> z tekstem <code>Download:</code><br>2. Dodaj <kbd>&lt;progress&gt;</kbd> z <kbd>value=\"70\"</kbd> i <kbd>max=\"100\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;progress&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "value", "value": "70" },
-					"message": "Set <kbd>value=</kbd>\"70\" on the progress element"
+					"message": "Ustaw <kbd>value=</kbd>\"70\" w elemencie progress"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "max", "value": "100" },
-					"message": "Set <kbd>max=</kbd>\"100\" on the progress element"
+					"message": "Ustaw <kbd>max=</kbd>\"100\" w elemencie progress"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the progress bar"
+					"message": "Dodaj <kbd>&lt;label&gt;</kbd> dla paska postępu"
 				}
 			]
 		},
 		{
 			"id": "progress-indeterminate",
-			"title": "Indeterminate Progress",
-			"description": "When progress is unknown (like loading), omit the <kbd>value</kbd> attribute. This creates an animated indeterminate state.<br><br>Useful for network requests or processes with unknown duration.",
-			"task": "Create a loading indicator:<br>1. Add a <kbd>&lt;p&gt;</kbd> saying <code>Loading...</code><br>2. Add a <kbd>&lt;progress&gt;</kbd> without a value attribute",
+			"title": "Nieokreślony postęp",
+			"description": "Gdy postęp jest nieznany (jak przy ładowaniu), pomiń atrybut <kbd>value</kbd>. To tworzy animowany stan nieokreślony.<br><br>Przydatne dla żądań sieciowych lub procesów o nieznanym czasie trwania.",
+			"task": "Utwórz wskaźnik ładowania:<br>1. Dodaj <kbd>&lt;p&gt;</kbd> z tekstem <code>Loading...</code><br>2. Dodaj <kbd>&lt;progress&gt;</kbd> bez atrybutu value",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
 			"sandboxCSS": "",
@@ -55,20 +55,20 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;progress&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Add a <kbd>&lt;p&gt;</kbd> with loading text"
+					"message": "Dodaj <kbd>&lt;p&gt;</kbd> z tekstem ładowania"
 				}
 			]
 		},
 		{
 			"id": "meter-gauge",
-			"title": "Meter Gauges",
-			"description": "The <kbd>&lt;meter&gt;</kbd> element displays a scalar value within a range. Use it for measurements like disk space, battery, or ratings.<br><br>Set <kbd>low</kbd>, <kbd>high</kbd>, and <kbd>optimum</kbd> to define good/bad ranges - the browser colors it accordingly!",
-			"task": "Create a battery level meter:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Battery:</code><br>2. Add a <kbd>&lt;meter&gt;</kbd> with:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> and <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> and <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
+			"title": "Wskaźniki meter",
+			"description": "Element <kbd>&lt;meter&gt;</kbd> wyświetla wartość skalarną w zakresie. Używaj go do pomiarów jak przestrzeń dyskowa, bateria lub oceny.<br><br>Ustaw <kbd>low</kbd>, <kbd>high</kbd> i <kbd>optimum</kbd>, aby zdefiniować dobre/złe zakresy - przeglądarka odpowiednio je koloruje!",
+			"task": "Utwórz wskaźnik poziomu baterii:<br>1. Dodaj <kbd>&lt;label&gt;</kbd> z tekstem <code>Battery:</code><br>2. Dodaj <kbd>&lt;meter&gt;</kbd> z:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> i <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> i <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
 			"sandboxCSS": "",
@@ -79,22 +79,42 @@
 				{
 					"type": "element_exists",
 					"value": "meter",
-					"message": "Add a <kbd>&lt;meter&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;meter&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "value", "value": "0.8" },
-					"message": "Set <kbd>value=</kbd>\"0.8\" on the meter"
+					"message": "Ustaw <kbd>value=</kbd>\"0.8\" w meter"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "min", "value": "0" },
+					"message": "Ustaw <kbd>min=</kbd>\"0\" w meter"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "max", "value": "1" },
+					"message": "Ustaw <kbd>max=</kbd>\"1\" w meter"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "low", "value": "0.2" },
-					"message": "Set <kbd>low=</kbd>\"0.2\" to define the low threshold"
+					"message": "Ustaw <kbd>low=</kbd>\"0.2\", aby zdefiniować niski próg"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "high", "value": "0.8" },
+					"message": "Ustaw <kbd>high=</kbd>\"0.8\", aby zdefiniować wysoki próg"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "optimum", "value": "1" },
+					"message": "Ustaw <kbd>optimum=</kbd>\"1\", aby wskazać optymalną wartość"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the meter"
+					"message": "Dodaj <kbd>&lt;label&gt;</kbd> dla meter"
 				}
 			]
 		}

lessons/pl/25-html-datalist.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-datalist",
 	"title": "Datalist",
-	"description": "Provide suggestions for text inputs without JavaScript",
+	"description": "Dodaj sugestie do pól tekstowych bez JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "datalist-basic",
-			"title": "Input with Suggestions",
-			"description": "The <kbd>&lt;datalist&gt;</kbd> element provides autocomplete suggestions for inputs. Connect it using the <kbd>list</kbd> attribute on the input matching the datalist's <kbd>id</kbd>.<br><br>Users can still type freely - suggestions are just helpers!",
-			"task": "Create a browser selector:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Browser:</code><br>2. Add an <kbd>&lt;input&gt;</kbd> with <kbd>list=\"browsers\"</kbd><br>3. Add a <kbd>&lt;datalist id=\"browsers\"&gt;</kbd> with options for Chrome, Firefox, and Safari",
+			"title": "Pole z sugestiami",
+			"description": "Element <kbd>&lt;datalist&gt;</kbd> dostarcza sugestie autouzupełniania dla pól. Połącz go używając atrybutu <kbd>list</kbd> na polu, pasującego do <kbd>id</kbd> datalist.<br><br>Użytkownicy mogą nadal pisać dowolnie - sugestie to tylko pomocnicy!",
+			"task": "Utwórz selektor przeglądarki:<br>1. Dodaj <kbd>&lt;label&gt;</kbd> z tekstem <code>Przeglądarka:</code><br>2. Dodaj <kbd>&lt;input&gt;</kbd> z <kbd>list=\"browsers\"</kbd><br>3. Dodaj <kbd>&lt;datalist id=\"browsers\"&gt;</kbd> z opcjami Chrome, Firefox i Safari",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Add a <kbd>&lt;datalist&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "browsers" },
-					"message": "Connect the input to datalist using <kbd>list=</kbd>\"browsers\""
+					"message": "Połącz pole z datalist używając <kbd>list=</kbd>\"browsers\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "option", "min": 3 },
-					"message": "Add at least 3 <kbd>&lt;option&gt;</kbd> elements inside <kbd>&lt;datalist&gt;</kbd>"
+					"message": "Dodaj co najmniej 3 elementy <kbd>&lt;option&gt;</kbd> wewnątrz <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the input"
+					"message": "Dodaj <kbd>&lt;label&gt;</kbd> dla pola"
 				}
 			]
 		},
 		{
 			"id": "datalist-countries",
-			"title": "Country Selector",
-			"description": "Datalists work great for long lists like countries. Users can type to filter suggestions instantly.<br><br>The <kbd>value</kbd> attribute is what gets entered, and you can add display text after it.",
-			"task": "Create a country input:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Country:</code><br>2. Add an <kbd>&lt;input&gt;</kbd> with <kbd>list=\"countries\"</kbd><br>3. Add a <kbd>&lt;datalist id=\"countries\"&gt;</kbd> with at least 4 country options",
+			"title": "Selektor krajów",
+			"description": "Datalist świetnie sprawdza się przy długich listach jak kraje. Użytkownicy mogą pisać, aby natychmiast filtrować sugestie.<br><br>Atrybut <kbd>value</kbd> określa, co zostanie wpisane, a po nim możesz dodać tekst wyświetlany.",
+			"task": "Utwórz pole kraju:<br>1. Dodaj <kbd>&lt;label&gt;</kbd> z tekstem <code>Kraj:</code><br>2. Dodaj <kbd>&lt;input&gt;</kbd> z <kbd>list=\"countries\"</kbd><br>3. Dodaj <kbd>&lt;datalist id=\"countries\"&gt;</kbd> z co najmniej 4 opcjami krajów",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 30px; background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } label { display: block; margin-bottom: 10px; font-weight: 600; color: #00695c; } input { width: 100%; padding: 12px 15px; border: 2px solid #26a69a; border-radius: 8px; font-size: 16px; background: white; } input:focus { outline: none; border-color: #00695c; box-shadow: 0 0 0 3px rgba(38,166,154,0.2); }",
 			"sandboxCSS": "",
@@ -55,22 +55,22 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Add a <kbd>&lt;datalist&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "datalist", "attr": "id", "value": "countries" },
-					"message": "Set <kbd>id=</kbd>\"countries\" on the datalist"
+					"message": "Ustaw <kbd>id=</kbd>\"countries\" w datalist"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "countries" },
-					"message": "Connect the input using <kbd>list=</kbd>\"countries\""
+					"message": "Połącz pole używając <kbd>list=</kbd>\"countries\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "option", "min": 4 },
-					"message": "Add at least 4 country options"
+					"message": "Dodaj co najmniej 4 opcje krajów"
 				}
 			]
 		}

lessons/pl/27-html-dialog.json

@@ -1,16 +1,16 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-dialog",
-	"title": "Dialogs",
-	"description": "Create modal dialogs without JavaScript libraries",
+	"title": "Dialogi",
+	"description": "Twórz okna dialogowe bez bibliotek JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "dialog-basic",
-			"title": "Open Dialog",
-			"description": "The <kbd>&lt;dialog&gt;</kbd> element creates a native modal. Add the <kbd>open</kbd> attribute to show it.<br><br>Use <kbd>&lt;form method=\"dialog\"&gt;</kbd> inside to close it when the form submits - no JavaScript needed!",
-			"task": "Create a dialog with:<br>1. The <kbd>open</kbd> attribute to show it<br>2. An <kbd>&lt;h2&gt;</kbd> saying <code>Welcome!</code><br>3. A <kbd>&lt;p&gt;</kbd> with a greeting message<br>4. A <kbd>&lt;form method=\"dialog\"&gt;</kbd> with a close button",
+			"title": "Otwórz dialog",
+			"description": "Element <kbd>&lt;dialog&gt;</kbd> tworzy natywne okno modalne. Dodaj atrybut <kbd>open</kbd>, aby je wyświetlić.<br><br>Użyj <kbd>&lt;form method=\"dialog\"&gt;</kbd> wewnątrz, aby zamknąć je przy wysłaniu formularza - bez JavaScript!",
+			"task": "Utwórz dialog z:<br>1. Atrybutem <kbd>open</kbd> aby go wyświetlić<br>2. Elementem <kbd>&lt;h2&gt;</kbd> z tekstem <code>Witaj!</code><br>3. Elementem <kbd>&lt;p&gt;</kbd> z wiadomością powitalną<br>4. Elementem <kbd>&lt;form method=\"dialog\"&gt;</kbd> z przyciskiem zamknięcia",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: #f5f5f5; } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 400px; } dialog::backdrop { background: rgba(0,0,0,0.5); } dialog h2 { margin: 0 0 15px 0; color: #1976d2; } dialog p { color: #666; margin: 0 0 20px 0; } dialog button { background: #1976d2; color: white; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-size: 16px; } dialog button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
@@ -21,35 +21,35 @@
 				{
 					"type": "element_exists",
 					"value": "dialog",
-					"message": "Add a <kbd>&lt;dialog&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;dialog&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "dialog", "attr": "open", "value": true },
-					"message": "Add the <kbd>open</kbd> attribute to show the dialog"
+					"message": "Dodaj atrybut <kbd>open</kbd> aby wyświetlić dialog"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog h2",
-					"message": "Add an <kbd>&lt;h2&gt;</kbd> heading inside the dialog"
+					"message": "Dodaj nagłówek <kbd>&lt;h2&gt;</kbd> wewnątrz dialogu"
 				},
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Add a <kbd>&lt;form method=\"dialog\"&gt;</kbd> for closing"
+					"message": "Dodaj <kbd>&lt;form method=\"dialog\"&gt;</kbd> do zamknięcia"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog button",
-					"message": "Add a close button inside the form"
+					"message": "Dodaj przycisk zamknięcia wewnątrz formularza"
 				}
 			]
 		},
 		{
 			"id": "dialog-form",
-			"title": "Dialog + Form",
-			"description": "Dialogs can contain full forms. The <kbd>method=\"dialog\"</kbd> makes the form close the dialog on submit instead of sending data.<br><br>This pattern is perfect for confirmation dialogs, quick inputs, or settings panels.",
-			"task": "Create a confirmation dialog:<br>1. Add <kbd>open</kbd> to show it<br>2. An <kbd>&lt;h2&gt;</kbd> saying <code>Confirm Delete</code><br>3. A <kbd>&lt;p&gt;</kbd> asking <code>Are you sure?</code><br>4. A <kbd>&lt;form method=\"dialog\"&gt;</kbd> with Cancel and Delete buttons",
+			"title": "Dialog z formularzem",
+			"description": "Dialogi mogą zawierać pełne formularze. <kbd>method=\"dialog\"</kbd> sprawia, że formularz zamyka dialog przy wysłaniu zamiast wysyłać dane.<br><br>Ten wzorzec jest idealny dla dialogów potwierdzenia, szybkich wejść lub paneli ustawień.",
+			"task": "Utwórz dialog potwierdzenia:<br>1. Dodaj <kbd>open</kbd> aby go wyświetlić<br>2. Element <kbd>&lt;h2&gt;</kbd> z tekstem <code>Potwierdź usunięcie</code><br>3. Element <kbd>&lt;p&gt;</kbd> z pytaniem <code>Czy jesteś pewien?</code><br>4. Element <kbd>&lt;form method=\"dialog\"&gt;</kbd> z przyciskami Anuluj i Usuń",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 350px; text-align: center; } dialog h2 { margin: 0 0 10px 0; color: #c62828; } dialog p { color: #666; margin: 0 0 20px 0; } dialog form { display: flex; gap: 10px; justify-content: center; } dialog button { padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; border: none; } dialog button:first-child { background: #e0e0e0; color: #333; } dialog button:last-child { background: #c62828; color: white; } dialog button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
@@ -60,22 +60,22 @@
 				{
 					"type": "element_exists",
 					"value": "dialog[open]",
-					"message": "Add a <kbd>&lt;dialog&gt;</kbd> with the open attribute"
+					"message": "Dodaj <kbd>&lt;dialog&gt;</kbd> z atrybutem open"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog h2",
-					"message": "Add a heading to the dialog"
+					"message": "Dodaj nagłówek do dialogu"
 				},
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Add a <kbd>&lt;form method=\"dialog\"&gt;</kbd> for the buttons"
+					"message": "Dodaj <kbd>&lt;form method=\"dialog\"&gt;</kbd> dla przycisków"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "dialog button", "min": 2 },
-					"message": "Add at least 2 buttons (Cancel and Confirm)"
+					"message": "Dodaj co najmniej 2 przyciski (Anuluj i Potwierdź)"
 				}
 			]
 		}

lessons/pl/28-html-forms-fieldset.json

@@ -1,16 +1,16 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-fieldset",
-	"title": "Fieldsets",
-	"description": "Group form controls with fieldset and legend elements",
+	"title": "Fieldset",
+	"description": "Grupuj elementy formularza za pomocą fieldset i legend",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "fieldset-basic",
-			"title": "Grouping with Fieldset",
-			"description": "The <kbd>&lt;fieldset&gt;</kbd> element groups related form controls together. Add a <kbd>&lt;legend&gt;</kbd> as the first child to give the group a title.<br><br>This helps with accessibility and visual organization of complex forms.",
-			"task": "Create a form with a fieldset:<br>1. A <kbd>&lt;form&gt;</kbd> element<br>2. A <kbd>&lt;fieldset&gt;</kbd> inside<br>3. A <kbd>&lt;legend&gt;</kbd> saying <code>Personal Info</code><br>4. Two labeled inputs for name and email",
+			"title": "Grupowanie z Fieldset",
+			"description": "Element <kbd>&lt;fieldset&gt;</kbd> grupuje powiązane elementy formularza. Dodaj <kbd>&lt;legend&gt;</kbd> jako pierwsze dziecko, aby nadać grupie tytuł.<br><br>To pomaga w dostępności i wizualnej organizacji złożonych formularzy.",
+			"task": "Utwórz formularz z fieldset:<br>1. Element <kbd>&lt;form&gt;</kbd><br>2. Element <kbd>&lt;fieldset&gt;</kbd> wewnątrz<br>3. Element <kbd>&lt;legend&gt;</kbd> z tekstem <code>Dane osobowe</code><br>4. Dwa opisane pola dla imienia i e-maila",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
 			"sandboxCSS": "",
@@ -21,35 +21,35 @@
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Add a <kbd>&lt;form&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;form&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Add a <kbd>&lt;fieldset&gt;</kbd> inside the form"
+					"message": "Dodaj <kbd>&lt;fieldset&gt;</kbd> wewnątrz formularza"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Add a <kbd>&lt;legend&gt;</kbd> to title your fieldset"
+					"message": "Dodaj <kbd>&lt;legend&gt;</kbd> jako tytuł fieldset"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "label", "min": 2 },
-					"message": "Add at least 2 labels"
+					"message": "Dodaj co najmniej 2 etykiety"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "input", "min": 2 },
-					"message": "Add at least 2 input fields"
+					"message": "Dodaj co najmniej 2 pola wprowadzania"
 				}
 			]
 		},
 		{
 			"id": "fieldset-textarea",
-			"title": "Adding Textarea",
-			"description": "The <kbd>&lt;textarea&gt;</kbd> element creates a multi-line text input, perfect for longer content like messages or descriptions.<br><br>Use <kbd>rows</kbd> and <kbd>cols</kbd> attributes to set default size.",
-			"task": "Create a contact form:<br>1. A <kbd>&lt;fieldset&gt;</kbd> with <kbd>&lt;legend&gt;</kbd> <code>Contact Us</code><br>2. A labeled <kbd>&lt;input&gt;</kbd> for email<br>3. A labeled <kbd>&lt;textarea&gt;</kbd> for the message<br>4. A submit <kbd>&lt;button&gt;</kbd>",
+			"title": "Dodawanie Textarea",
+			"description": "Element <kbd>&lt;textarea&gt;</kbd> tworzy wieloliniowe pole tekstowe, idealne dla dłuższych treści jak wiadomości lub opisy.<br><br>Użyj atrybutów <kbd>rows</kbd> i <kbd>cols</kbd> aby ustawić domyślny rozmiar.",
+			"task": "Utwórz formularz kontaktowy:<br>1. Element <kbd>&lt;fieldset&gt;</kbd> z <kbd>&lt;legend&gt;</kbd> <code>Kontakt</code><br>2. Opisane <kbd>&lt;input&gt;</kbd> dla e-maila<br>3. Opisane <kbd>&lt;textarea&gt;</kbd> dla wiadomości<br>4. Przycisk <kbd>&lt;button&gt;</kbd> wysyłania",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
@@ -60,35 +60,35 @@
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Add a <kbd>&lt;fieldset&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;fieldset&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Add a <kbd>&lt;legend&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;legend&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "textarea",
-					"message": "Add a <kbd>&lt;textarea&gt;</kbd> for the message"
+					"message": "Dodaj <kbd>&lt;textarea&gt;</kbd> dla wiadomości"
 				},
 				{
 					"type": "element_exists",
 					"value": "button",
-					"message": "Add a submit button"
+					"message": "Dodaj przycisk wysyłania"
 				},
 				{
 					"type": "element_exists",
 					"value": "input",
-					"message": "Add an input field for email"
+					"message": "Dodaj pole dla e-maila"
 				}
 			]
 		},
 		{
 			"id": "fieldset-multiple",
-			"title": "Multiple Fieldsets",
-			"description": "Complex forms can use multiple <kbd>&lt;fieldset&gt;</kbd> elements to organize different sections.<br><br>This improves usability for long forms like registration or checkout pages.",
-			"task": "Create a registration form with 2 fieldsets:<br>1. <code>Account Info</code> with username and password inputs<br>2. <code>Preferences</code> with a textarea for bio<br>3. A submit button outside the fieldsets",
+			"title": "Wiele Fieldsetów",
+			"description": "Złożone formularze mogą używać wielu elementów <kbd>&lt;fieldset&gt;</kbd> do organizacji różnych sekcji.<br><br>To poprawia użyteczność długich formularzy jak rejestracja czy koszyk.",
+			"task": "Utwórz formularz rejestracji z 2 fieldsetami:<br>1. <code>Dane konta</code> z polami nazwa użytkownika i hasło<br>2. <code>Preferencje</code> z textarea dla bio<br>3. Przycisk wysyłania poza fieldsetami",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
 			"sandboxCSS": "",
@@ -99,27 +99,27 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "fieldset", "min": 2 },
-					"message": "Create at least 2 fieldsets"
+					"message": "Utwórz co najmniej 2 fieldsety"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "legend", "min": 2 },
-					"message": "Add a legend to each fieldset"
+					"message": "Dodaj legend do każdego fieldseta"
 				},
 				{
 					"type": "element_exists",
 					"value": "textarea",
-					"message": "Add a textarea for the bio"
+					"message": "Dodaj textarea dla bio"
 				},
 				{
 					"type": "element_exists",
 					"value": "button",
-					"message": "Add a submit button"
+					"message": "Dodaj przycisk wysyłania"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "input", "min": 2 },
-					"message": "Add at least 2 input fields"
+					"message": "Dodaj co najmniej 2 pola wprowadzania"
 				}
 			]
 		}

lessons/pl/30-html-tables.json

@@ -1,125 +1,42 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-tables",
-	"title": "HTML Tables",
-	"description": "Create structured data tables with headers and captions",
+	"title": "Tabele HTML",
+	"description": "Twórz strukturalne tabele danych z semantycznym znacznikiem",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "table-basic",
-			"title": "Basic Table Structure",
-			"description": "Tables use <kbd>&lt;table&gt;</kbd> with <kbd>&lt;tr&gt;</kbd> for rows. Inside rows, use <kbd>&lt;th&gt;</kbd> for headers and <kbd>&lt;td&gt;</kbd> for data cells.<br><br>The <kbd>&lt;caption&gt;</kbd> element provides an accessible title for the table.",
-			"task": "Create a simple table with:<br>1. A <kbd>&lt;caption&gt;</kbd> saying <code>Fruit Prices</code><br>2. A header row with <code>Fruit</code> and <code>Price</code> columns<br>3. At least 2 data rows",
+			"title": "Tabele danych",
+			"description": "Tabele wyświetlają strukturalne dane w wierszach i kolumnach. Użyj <kbd>&lt;table&gt;</kbd> jako kontenera, <kbd>&lt;tr&gt;</kbd> dla wierszy, <kbd>&lt;th&gt;</kbd> dla komórek nagłówka i <kbd>&lt;td&gt;</kbd> dla komórek danych.<br><br>Dodaj <kbd>&lt;caption&gt;</kbd> dla dostępnego tytułu opisującego zawartość tabeli.",
+			"task": "Utwórz tabelę cenową:<br>1. Element <kbd>&lt;caption&gt;</kbd> z tekstem <code>Pricing</code><br>2. Wiersz nagłówka z <code>Plan</code> i <code>Price</code><br>3. Dwa wiersze danych dla Basic ($9) i Pro ($29)",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px; font-weight: 600; font-size: 1.2rem; color: #333; background: #f8f9fa; } th, td { padding: 12px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 500; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 350px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 16px; font-weight: 600; font-size: 1.1rem; color: #333; background: #f8f9fa; } th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: steelblue; color: white; font-weight: 500; } tr:last-child td { border-bottom: none; } tr:hover td { background: #f8f9fa; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<table>\n  <caption>Fruit Prices</caption>\n  <tr>\n    <th>Fruit</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Apple</td>\n    <td>$1.50</td>\n  </tr>\n  <tr>\n    <td>Banana</td>\n    <td>$0.75</td>\n  </tr>\n</table>",
+			"solution": "<table>\n  <caption>Pricing</caption>\n  <tr>\n    <th>Plan</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Basic</td>\n    <td>$9</td>\n  </tr>\n  <tr>\n    <td>Pro</td>\n    <td>$29</td>\n  </tr>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;table&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> for the table title"
+					"message": "Dodaj <kbd>&lt;caption&gt;</kbd> dla tytułu tabeli"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "th", "min": 2 },
-					"message": "Add at least 2 header cells (th)"
+					"message": "Dodaj komórki nagłówka (<kbd>&lt;th&gt;</kbd>) dla Plan i Price"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "tr", "min": 3 },
-					"message": "Add at least 3 rows (1 header + 2 data rows)"
-				}
-			]
-		},
-		{
-			"id": "table-thead-tbody",
-			"title": "Table Head & Body",
-			"description": "Use <kbd>&lt;thead&gt;</kbd> to group header rows and <kbd>&lt;tbody&gt;</kbd> to group data rows. This helps browsers and assistive technology understand the table structure.<br><br>You can also use <kbd>&lt;tfoot&gt;</kbd> for footer rows like totals.",
-			"task": "Create a structured table:<br>1. A <kbd>&lt;caption&gt;</kbd> with <code>Monthly Sales</code><br>2. A <kbd>&lt;thead&gt;</kbd> with Month and Revenue headers<br>3. A <kbd>&lt;tbody&gt;</kbd> with at least 2 data rows",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } table { border-collapse: collapse; width: 100%; max-width: 450px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } caption { padding: 20px; font-weight: 700; font-size: 1.3rem; color: white; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); caption-side: top; } thead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } th { padding: 15px 20px; text-align: left; color: white; font-weight: 500; } tbody tr { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } td { padding: 15px 20px; color: #333; } tbody tr:last-child { border-bottom: none; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Monthly Sales</caption>\n  <thead>\n    <tr>\n      <th>Month</th>\n      <th>Revenue</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>January</td>\n      <td>$12,500</td>\n    </tr>\n    <tr>\n      <td>February</td>\n      <td>$14,200</td>\n    </tr>\n  </tbody>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Add a <kbd>&lt;thead&gt;</kbd> for the header section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Add a <kbd>&lt;tbody&gt;</kbd> for the data rows"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Add at least 2 data rows in tbody"
-				}
-			]
-		},
-		{
-			"id": "table-complete",
-			"title": "Complete Table with Footer",
-			"description": "Add <kbd>&lt;tfoot&gt;</kbd> to create a footer section for totals or summary data. The footer stays at the bottom even if tbody has many rows.<br><br>Combine all sections for a fully structured, accessible table.",
-			"task": "Create a complete table:<br>1. A <kbd>&lt;caption&gt;</kbd> with <code>Order Summary</code><br>2. A <kbd>&lt;thead&gt;</kbd> with Item and Price headers<br>3. A <kbd>&lt;tbody&gt;</kbd> with 2 items<br>4. A <kbd>&lt;tfoot&gt;</kbd> with a Total row",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px 20px; font-weight: 600; font-size: 1.1rem; color: #333; text-align: left; background: #f8f9fa; border-bottom: 2px solid #eee; } th, td { padding: 12px 20px; text-align: left; } thead th { background: #2c3e50; color: white; } tbody td { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } tfoot { background: #ecf0f1; font-weight: 600; } tfoot td { border-top: 2px solid #2c3e50; color: #2c3e50; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Order Summary</caption>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Price</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Widget</td>\n      <td>$25.00</td>\n    </tr>\n    <tr>\n      <td>Gadget</td>\n      <td>$35.00</td>\n    </tr>\n  </tbody>\n  <tfoot>\n    <tr>\n      <td>Total</td>\n      <td>$60.00</td>\n    </tr>\n  </tfoot>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Add a <kbd>&lt;thead&gt;</kbd> section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Add a <kbd>&lt;tbody&gt;</kbd> section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tfoot",
-					"message": "Add a <kbd>&lt;tfoot&gt;</kbd> section for the total"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Add at least 2 item rows in tbody"
+					"message": "Dodaj 3 wiersze (1 nagłówek + 2 wiersze danych)"
 				}
 			]
 		}

lessons/pl/31-html-marquee.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-marquee",
 	"title": "HTML Marquee",
-	"description": "Create scrolling text with the classic (deprecated but fun!) marquee element",
+	"description": "Twórz przewijający się tekst za pomocą klasycznego (przestarzałego ale fajnego!) elementu marquee",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "marquee-basic",
-			"title": "Scrolling Text",
-			"description": "The <kbd>&lt;marquee&gt;</kbd> element creates scrolling text - a classic from the early web! While deprecated, it still works in most browsers.<br><br>Note: For production, use CSS animations instead. But for learning and fun, marquee is great!",
-			"task": "Create a simple marquee:<br>1. Add a <kbd>&lt;marquee&gt;</kbd> element<br>2. Put some text inside like <code>Welcome to my website!</code>",
+			"title": "Przewijający się tekst",
+			"description": "Element <kbd>&lt;marquee&gt;</kbd> tworzy przewijający się tekst - klasyk z wczesnego internetu! Choć przestarzały, nadal działa w większości przeglądarek.<br><br>Uwaga: W produkcji używaj animacji CSS. Ale do nauki i zabawy marquee jest świetne!",
+			"task": "Utwórz prosty marquee:<br>1. Dodaj element <kbd>&lt;marquee&gt;</kbd><br>2. Umieść w nim tekst jak <code>Witaj na mojej stronie!</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
 			"sandboxCSS": "",
@@ -21,15 +21,15 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;marquee&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "marquee-direction",
-			"title": "Direction & Behavior",
-			"description": "Control the marquee with attributes:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (default), slide (stops at edge), alternate (bounces)<br>• <kbd>scrollamount</kbd>: speed (default is 6)",
-			"task": "Create a bouncing marquee:<br>1. Add a <kbd>&lt;marquee&gt;</kbd> element<br>2. Set <kbd>behavior=\"alternate\"</kbd> to make it bounce<br>3. Add some fun text",
+			"title": "Kierunek i zachowanie",
+			"description": "Kontroluj marquee za pomocą atrybutów:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (domyślnie), slide (zatrzymuje się na krawędzi), alternate (odbija się)<br>• <kbd>scrollamount</kbd>: prędkość (domyślnie 6)",
+			"task": "Utwórz odbijający się marquee:<br>1. Dodaj element <kbd>&lt;marquee&gt;</kbd><br>2. Ustaw <kbd>behavior=\"alternate\"</kbd> aby się odbijał<br>3. Dodaj jakiś fajny tekst",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
 			"sandboxCSS": "",
@@ -40,20 +40,20 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;marquee&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
-					"message": "Add <kbd>behavior=</kbd>\"alternate\" to make it bounce"
+					"message": "Dodaj <kbd>behavior=</kbd>\"alternate\" aby się odbijał"
 				}
 			]
 		},
 		{
 			"id": "marquee-retro",
-			"title": "Retro News Ticker",
-			"description": "Combine multiple marquee attributes for a classic news ticker effect. You can even put multiple elements inside!<br><br>Remember: This is deprecated HTML. Modern sites use CSS animations, but marquee is great for understanding web history.",
-			"task": "Create a news ticker:<br>1. A <kbd>&lt;marquee&gt;</kbd> with <kbd>direction=\"left\"</kbd><br>2. Set <kbd>scrollamount=\"5\"</kbd> for smooth scrolling<br>3. Add a breaking news headline inside",
+			"title": "Retro pasek wiadomości",
+			"description": "Połącz wiele atrybutów marquee dla klasycznego efektu paska wiadomości. Możesz nawet umieścić wiele elementów w środku!<br><br>Pamiętaj: To przestarzały HTML. Nowoczesne strony używają animacji CSS, ale marquee jest świetne do zrozumienia historii internetu.",
+			"task": "Utwórz pasek wiadomości:<br>1. Element <kbd>&lt;marquee&gt;</kbd> z <kbd>direction=\"left\"</kbd><br>2. Ustaw <kbd>scrollamount=\"5\"</kbd> dla płynnego przewijania<br>3. Dodaj w środku nagłówek z ostatniej chwili",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
 			"sandboxCSS": "",
@@ -64,17 +64,17 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;marquee&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "direction", "value": "left" },
-					"message": "Add <kbd>direction=</kbd>\"left\" for horizontal scrolling"
+					"message": "Dodaj <kbd>direction=</kbd>\"left\" dla poziomego przewijania"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
-					"message": "Add <kbd>scrollamount=</kbd>\"5\" for smooth speed"
+					"message": "Dodaj <kbd>scrollamount=</kbd>\"5\" dla płynnej prędkości"
 				}
 			]
 		}

lessons/pl/32-html-svg.json

@@ -2,99 +2,169 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-svg",
 	"title": "HTML SVG",
-	"description": "Draw scalable vector graphics directly in HTML",
+	"description": "Rysuj skalowalne grafiki wektorowe bezpośrednio w HTML",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "svg-circle",
-			"title": "Drawing Circles",
-			"description": "SVG (Scalable Vector Graphics) lets you draw shapes directly in HTML. The <kbd>&lt;svg&gt;</kbd> element is the container, with <kbd>width</kbd> and <kbd>height</kbd> attributes.<br><br>Use <kbd>&lt;circle&gt;</kbd> with <kbd>cx</kbd>, <kbd>cy</kbd> (center) and <kbd>r</kbd> (radius) to draw circles.",
-			"task": "Create an SVG with a circle:<br>1. An <kbd>&lt;svg&gt;</kbd> with width=\"200\" and height=\"200\"<br>2. A <kbd>&lt;circle&gt;</kbd> centered at (100,100) with radius 50<br>3. Add a <kbd>fill</kbd> color",
+			"title": "Rysowanie kół",
+			"description": "SVG (Scalable Vector Graphics) pozwala rysować kształty bezpośrednio w HTML. Element <kbd>&lt;svg&gt;</kbd> jest kontenerem z atrybutami <kbd>width</kbd> i <kbd>height</kbd>.<br><br>Użyj <kbd>&lt;circle&gt;</kbd> z <kbd>cx</kbd>, <kbd>cy</kbd> (środek) i <kbd>r</kbd> (promień) do rysowania kół.",
+			"task": "Utwórz SVG z kołem:<br>1. Element <kbd>&lt;svg&gt;</kbd> z width=\"200\" i height=\"200\"<br>2. Element <kbd>&lt;circle&gt;</kbd> wyśrodkowany w (100,100) z promieniem 50<br>3. Dodaj kolor <kbd>fill</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; display: flex; justify-content: center; } svg { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"#3498db\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"steelblue\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;svg&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "circle",
-					"message": "Add a <kbd>&lt;circle&gt;</kbd> element inside the SVG"
+					"message": "Dodaj element <kbd>&lt;circle&gt;</kbd> wewnątrz SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "width", "value": "200" },
+					"message": "Ustaw <kbd>width=</kbd>\"200\" w SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "height", "value": "200" },
+					"message": "Ustaw <kbd>height=</kbd>\"200\" w SVG"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cx", "value": "100" },
-					"message": "Set <kbd>cx=</kbd>\"100\" for the circle's horizontal center"
+					"message": "Ustaw <kbd>cx=</kbd>\"100\" dla poziomego środka koła"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "circle", "attr": "cy", "value": "100" },
-					"message": "Set <kbd>cy=</kbd>\"100\" for the circle's vertical center"
+					"message": "Ustaw <kbd>cy=</kbd>\"100\" dla pionowego środka koła"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "circle", "attr": "r", "value": "50" },
+					"message": "Ustaw <kbd>r=</kbd>\"50\" dla promienia koła"
 				}
 			]
 		},
 		{
 			"id": "svg-rect-line",
-			"title": "Rectangles & Lines",
-			"description": "Draw rectangles with <kbd>&lt;rect&gt;</kbd> using <kbd>x</kbd>, <kbd>y</kbd>, <kbd>width</kbd>, <kbd>height</kbd>.<br><br>Draw lines with <kbd>&lt;line&gt;</kbd> using <kbd>x1</kbd>, <kbd>y1</kbd> (start) and <kbd>x2</kbd>, <kbd>y2</kbd> (end). Lines need a <kbd>stroke</kbd> color!",
-			"task": "Create an SVG with:<br>1. An <kbd>&lt;svg&gt;</kbd> (200x150)<br>2. A <kbd>&lt;rect&gt;</kbd> at position (20,20) with size 80x60<br>3. A <kbd>&lt;line&gt;</kbd> from (120,30) to (180,90) with a stroke color",
+			"title": "Prostokąty i linie",
+			"description": "Rysuj prostokąty za pomocą <kbd>&lt;rect&gt;</kbd> używając <kbd>x</kbd>, <kbd>y</kbd>, <kbd>width</kbd>, <kbd>height</kbd>.<br><br>Rysuj linie za pomocą <kbd>&lt;line&gt;</kbd> używając <kbd>x1</kbd>, <kbd>y1</kbd> (start) i <kbd>x2</kbd>, <kbd>y2</kbd> (koniec). Linie potrzebują koloru <kbd>stroke</kbd>!",
+			"task": "Utwórz SVG z:<br>1. Elementem <kbd>&lt;svg&gt;</kbd> (200x150)<br>2. Elementem <kbd>&lt;rect&gt;</kbd> na pozycji (20,20) o rozmiarze 80x60<br>3. Elementem <kbd>&lt;line&gt;</kbd> od (120,30) do (180,90) z kolorem stroke",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 200px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"#e74c3c\" />\n  <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"#2c3e50\" stroke-width=\"3\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"tomato\" />\n  <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"slategray\" stroke-width=\"3\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;svg&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "rect",
-					"message": "Add a <kbd>&lt;rect&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;rect&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "line",
-					"message": "Add a <kbd>&lt;line&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;line&gt;</kbd>"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "width", "value": "200" },
+					"message": "Ustaw <kbd>width=</kbd>\"200\" w SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "svg", "attr": "height", "value": "150" },
+					"message": "Ustaw <kbd>height=</kbd>\"150\" w SVG"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "x", "value": "20" },
+					"message": "Ustaw <kbd>x=</kbd>\"20\" w rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "y", "value": "20" },
+					"message": "Ustaw <kbd>y=</kbd>\"20\" w rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "width", "value": "80" },
+					"message": "Ustaw <kbd>width=</kbd>\"80\" w rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "rect", "attr": "height", "value": "60" },
+					"message": "Ustaw <kbd>height=</kbd>\"60\" w rect"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "x1", "value": "120" },
+					"message": "Ustaw <kbd>x1=</kbd>\"120\" w line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "y1", "value": "30" },
+					"message": "Ustaw <kbd>y1=</kbd>\"30\" w line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "x2", "value": "180" },
+					"message": "Ustaw <kbd>x2=</kbd>\"180\" w line"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "line", "attr": "y2", "value": "90" },
+					"message": "Ustaw <kbd>y2=</kbd>\"90\" w line"
+				},
+				{
+					"type": "contains",
+					"value": "stroke",
+					"message": "Dodaj kolor <kbd>stroke</kbd> do line"
 				}
 			]
 		},
 		{
 			"id": "svg-shapes",
-			"title": "Multiple Shapes",
-			"description": "Combine shapes to create simple graphics! Add <kbd>stroke</kbd> for outlines and <kbd>stroke-width</kbd> for thickness.<br><br>Use <kbd>fill=\"none\"</kbd> for hollow shapes. Shapes stack in order - later elements appear on top.",
-			"task": "Create a simple face:<br>1. An <kbd>&lt;svg&gt;</kbd> (200x200)<br>2. A large <kbd>&lt;circle&gt;</kbd> for the face<br>3. Two small <kbd>&lt;circle&gt;</kbd> elements for eyes<br>4. A <kbd>&lt;line&gt;</kbd> for the smile",
+			"title": "Wiele kształtów",
+			"description": "Łącz kształty, aby tworzyć proste grafiki! Dodaj <kbd>stroke</kbd> dla konturów i <kbd>stroke-width</kbd> dla grubości.<br><br>Użyj <kbd>fill=\"none\"</kbd> dla pustych kształtów. Kształty nakładają się w kolejności - późniejsze elementy są na wierzchu.",
+			"task": "Utwórz prostą twarz:<br>1. Element <kbd>&lt;svg&gt;</kbd> (200x200)<br>2. Duże <kbd>&lt;circle&gt;</kbd> dla twarzy<br>3. Dwa małe <kbd>&lt;circle&gt;</kbd> dla oczu<br>4. Element <kbd>&lt;line&gt;</kbd> dla uśmiechu",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 250px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#f1c40f\" stroke=\"#e67e22\" stroke-width=\"4\" />\n  <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"#2c3e50\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
+			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"gold\" stroke=\"orange\" stroke-width=\"4\" />\n  <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n  <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n  <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"darkslategray\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "svg",
-					"message": "Add an <kbd>&lt;svg&gt;</kbd> element"
+					"message": "Dodaj element <kbd>&lt;svg&gt;</kbd>"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "circle", "min": 3 },
-					"message": "Add at least 3 circles (1 face + 2 eyes)"
+					"message": "Dodaj co najmniej 3 koła (1 twarz + 2 oczy)"
 				},
 				{
 					"type": "element_exists",
 					"value": "line",
-					"message": "Add a <kbd>&lt;line&gt;</kbd> for the smile"
+					"message": "Dodaj <kbd>&lt;line&gt;</kbd> dla uśmiechu"
 				}
 			]
 		}

lessons/pl/flexbox.json

@@ -2,18 +2,18 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "flexbox",
 	"title": "CSS Flexbox",
-	"description": "Master the flexible box layout model for modern responsive designs",
+	"description": "Opanuj model elastycznego układu pudełkowego dla nowoczesnych responsywnych projektów",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "flexbox-1",
 			"title": "Container",
-			"description": "Learn how to create a flex container and understand the main and cross axes.",
-			"task": "Add <kbd>display: flex</kbd> to <kbd>.wrap</kbd> to create a flexbox layout.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "Przed flexboxem nawet proste układy wymagały floatów, hacków pozycjonowania lub układów tabelarycznych. Flexbox (Flexible Box Layout) zrewolucjonizował CSS, dostarczając jednowymiarowy system układu zaprojektowany specjalnie do dystrybucji przestrzeni i wyrównywania zawartości.<br><br><strong>Jak to działa:</strong> Gdy ustawisz <kbd>display: flex</kbd> na elemencie, staje się on <em>kontenerem flex</em>. Jego bezpośrednie dzieci automatycznie stają się <em>elementami flex</em>, które płyną wzdłuż osi głównej (domyślnie poziomej). Ta jedna właściwość przekształca ułożone elementy blokowe w poziomy rząd.<br><br><strong>Dwie osie:</strong><br>• <em>Oś główna</em> – Główny kierunek przepływu elementów (row = lewo→prawo)<br>• <em>Oś poprzeczna</em> – Prostopadła do głównej (row = góra→dół)<br><br><pre>.nav {\n  display: flex;\n}</pre>",
+			"task": "To menu nawigacyjne układa się pionowo. Dodaj <kbd>display: flex</kbd>, aby ułożyć linki poziomo.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "display: flex;",
@@ -21,61 +21,41 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "display",
-						"expected": "flex"
-					},
-					"message": "Set <kbd>display: flex</kbd>"
+					"value": { "property": "display", "expected": "flex" },
+					"message": "Ustaw <kbd>display: flex</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-2",
-			"title": "Direction & Wrap",
-			"description": "Control the direction and wrapping of flex items within a container.",
-			"task": "Add <kbd>flex-direction: column</kbd> and <kbd>flex-wrap: wrap</kbd> to <kbd>.wrap</kbd>.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
-			"codePrefix": ".wrap {\n  ",
+			"title": "Gap",
+			"description": "Właściwość <kbd>gap</kbd> dodaje równomierne odstępy między elementami flex bez potrzeby używania marginesów. Tworzy przestrzeń tylko między elementami, nie na krawędziach.",
+			"task": "Dodaj <kbd>gap: 1rem</kbd>, aby równomiernie rozmieścić linki nawigacyjne.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; background: rgba(255,255,255,0.1); }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "flex-direction: column;\n  flex-wrap: wrap;",
+			"solution": "gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "flex-direction",
-						"expected": "column"
-					},
-					"message": "Set <kbd>flex-direction: column</kbd>",
-					"options": {
-						"exact": true
-					}
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "flex-wrap",
-						"expected": "wrap"
-					},
-					"message": "Set <kbd>flex-wrap: wrap</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "gap", "expected": "1rem" },
+					"message": "Ustaw <kbd>gap: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-3",
 			"title": "Justify Content",
-			"description": "Learn how to align flex items along the main axis of the flex container.",
-			"task": "Add <kbd>justify-content: space-between</kbd> to <kbd>.wrap</kbd> to distribute the boxes evenly.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "<kbd>justify-content</kbd> rozmieszcza elementy wzdłuż osi głównej. Popularne wartości:<br>• <kbd>flex-start</kbd> – pakuj elementy na początku<br>• <kbd>flex-end</kbd> – pakuj na końcu<br>• <kbd>center</kbd> – wyśrodkuj elementy<br>• <kbd>space-between</kbd> – równa przestrzeń między elementami<br>• <kbd>space-around</kbd> – równa przestrzeń wokół elementów",
+			"task": "Przesuń przycisk \"Login\" na prawą stronę, ustawiając <kbd>justify-content: space-between</kbd> na nawigacji.",
+			"previewHTML": "<nav class=\"nav\"><div class=\"links\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a></div><a href=\"#\" class=\"login\">Login</a></nav>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .links { display: flex; gap: 8px; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); } .login { background: steelblue; }",
+			"sandboxCSS": "",
+			"codePrefix": ".nav {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "justify-content: space-between;",
@@ -83,26 +63,20 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "justify-content",
-						"expected": "space-between"
-					},
-					"message": "Set <kbd>justify-content: space-between</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "justify-content", "expected": "space-between" },
+					"message": "Ustaw <kbd>justify-content: space-between</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-4",
 			"title": "Align Items",
-			"description": "Control how flex items are aligned along the cross axis of the flex container.",
-			"task": "Add <kbd>align-items: center</kbd> to <kbd>.wrap</kbd> to vertically center the boxes.",
-			"previewHTML": "<div class='wrap'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
-			"codePrefix": ".wrap {\n  ",
+			"description": "<kbd>align-items</kbd> kontroluje wyrównanie na osi poprzecznej (pionowo gdy flex-direction to row). Wartości to:<br>• <kbd>stretch</kbd> – rozciągnij do wypełnienia (domyślnie)<br>• <kbd>flex-start</kbd> – wyrównaj do góry<br>• <kbd>flex-end</kbd> – wyrównaj do dołu<br>• <kbd>center</kbd> – wyśrodkuj pionowo",
+			"task": "Logo i linki nawigacyjne mają różne wysokości. Wyśrodkuj je pionowo za pomocą <kbd>align-items: center</kbd>.",
+			"previewHTML": "<header class=\"header\"><div class=\"logo\">ACME</div><nav><a href=\"#\">Products</a><a href=\"#\">Pricing</a><a href=\"#\">Docs</a></nav></header>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .header { background: white; padding: 1rem 2rem; display: flex; justify-content: space-between; border-bottom: 1px solid #eee; } .logo { font-size: 1.5rem; font-weight: bold; color: steelblue; } nav { display: flex; gap: 1rem; } nav a { color: #333; text-decoration: none; font-size: 0.9rem; }",
+			"sandboxCSS": "",
+			"codePrefix": ".header {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "align-items: center;",
@@ -110,62 +84,50 @@
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "align-items",
-						"expected": "center"
-					},
-					"message": "Set <kbd>align-items: center</kbd>",
-					"options": {
-						"exact": true
-					}
+					"value": { "property": "align-items", "expected": "center" },
+					"message": "Ustaw <kbd>align-items: center</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-5",
-			"title": "Flex Grow",
-			"description": "The <kbd>flex</kbd> property controls how much an item grows relative to others.",
-			"task": "Add <kbd>flex: 2</kbd> to <kbd>.box2</kbd> to make it grow twice as wide.",
-			"previewHTML": "<div class='wrap'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": ".box2 {\n  ",
+			"title": "Flex Wrap",
+			"description": "Domyślnie elementy flex ściskają się w jednej linii. <kbd>flex-wrap: wrap</kbd> pozwala elementom przenosić się na kolejne linie, gdy zabraknie miejsca.",
+			"task": "Te karty wychodzą poza kontener. Dodaj <kbd>flex-wrap: wrap</kbd>, aby mogły przenosić się do nowych wierszy.",
+			"previewHTML": "<div class=\"cards\"><article class=\"card\">Card 1</article><article class=\"card\">Card 2</article><article class=\"card\">Card 3</article><article class=\"card\">Card 4</article><article class=\"card\">Card 5</article><article class=\"card\">Card 6</article></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .cards { display: flex; gap: 1rem; } .card { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); min-width: 120px; text-align: center; }",
+			"sandboxCSS": "",
+			"codePrefix": ".cards {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "flex: 2;",
+			"solution": "flex-wrap: wrap;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "flex",
-						"expected": "2"
-					},
-					"message": "Set <kbd>flex: 2</kbd>"
+					"value": { "property": "flex-wrap", "expected": "wrap" },
+					"message": "Ustaw <kbd>flex-wrap: wrap</kbd>"
 				}
 			]
 		},
 		{
 			"id": "flexbox-6",
-			"title": "Align Self",
-			"description": "Use <kbd>align-self</kbd> to override alignment for a single flex item.",
-			"task": "Add <kbd>align-self: flex-start</kbd> to <kbd>.middle</kbd> to move it to the top.",
-			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }",
-			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
-			"codePrefix": ".middle {\n  ",
+			"title": "Flex Grow",
+			"description": "Właściwość <kbd>flex</kbd> na elementach kontroluje ich rozrastanie i kurczenie się. <kbd>flex: 1</kbd> sprawia, że element rozrasta się, aby wypełnić dostępną przestrzeń. Wiele elementów z <kbd>flex: 1</kbd> dzieli przestrzeń równomiernie.",
+			"task": "Spraw, aby pole wyszukiwania rozszerzyło się i wypełniło dostępną przestrzeń, ustawiając <kbd>flex: 1</kbd> na <kbd>.search</kbd>.",
+			"previewHTML": "<div class=\"toolbar\"><input class=\"search\" type=\"text\" placeholder=\"Search...\"><button class=\"btn\">Search</button><button class=\"btn\">Filters</button></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .toolbar { display: flex; gap: 8px; padding: 1rem; background: #f5f5f5; border-radius: 8px; } .search { padding: 8px 1rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } .btn { padding: 8px 1rem; background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; }",
+			"sandboxCSS": "",
+			"codePrefix": ".search {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "align-self: flex-start;",
+			"solution": "flex: 1;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": {
-						"property": "align-self",
-						"expected": "flex-start"
-					},
-					"message": "Set <kbd>align-self: flex-start</kbd>"
+					"value": { "property": "flex", "expected": "1" },
+					"message": "Ustaw <kbd>flex: 1</kbd>"
 				}
 			]
 		}

lessons/uk/00-basic-selectors.json

@@ -1,548 +1,257 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "css-basic-selectors",
-	"title": "CSS Selectors",
-	"description": "CSS selectors are the foundation of styling web pages, allowing you to target specific HTML elements for styling. This module introduces fundamental selector types including element type selectors, class selectors, ID selectors, and the universal selector.",
+	"title": "Основи CSS",
+	"description": "Вивчіть основні будівельні блоки CSS: властивості, значення та селектори. Цей модуль навчає правилам синтаксису, яких дотримується кожна декларація CSS.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
-			"id": "introduction-to-selectors",
-			"title": "What's a Selector?",
-			"description": "A CSS selector is the first part of a CSS rule that tells the browser which HTML elements should receive the styles defined in the declaration block. Selectors are essentially patterns that match against elements in your HTML document. Understanding selectors is fundamental because they determine which elements your CSS rules will affect. The element or elements targeted by a selector are referred to as the 'subject of the selector.' When writing a CSS rule, you first specify the selector, followed by curly braces that contain the style declarations.<br/>For example, to change the text color of elements, you can use the <kbd>color</kbd> property within your declaration block.<br><br><pre>/* Element selector */\np {\n  color: orangered;\n  /* │       └─── Indicates the value of the expression\n     │                                                     \n     └─────────── Indicates the property of the expression */\n}</pre>",
-			"task": "Write a CSS rule using a type selector that targets all paragraph elements <kbd>p</kbd> in the document. Make the text blue by setting the <kbd>color</kbd> property to <kbd>blue</kbd>.",
-			"previewHTML": "<h1>Introduction to CSS Selectors</h1>\n<p>This paragraph should turn blue.</p>\n<div>This div element should remain unchanged.</div>\n<p>This second paragraph should also turn blue.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, p, div { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Write a type selector to target all paragraph elements */\n",
+			"id": "css-properties",
+			"title": "Властивості CSS",
+			"description": "CSS стилізує елементи за допомогою <strong>декларацій</strong> - пар властивостей і значень. Кожна декларація має той самий шаблон:<br><br><pre>property: value;</pre><br><strong>Властивість</strong> - це те, що ви хочете змінити (як <kbd>color</kbd> або <kbd>background</kbd>). <strong>Значення</strong> - це те, на що ви це встановлюєте. Двокрапка їх розділяє, а крапка з комою закінчує рядок.<br><br>Значення бувають різних типів:<br>• <strong>Ключові слова:</strong> <kbd>red</kbd>, <kbd>bold</kbd>, <kbd>center</kbd><br>• <strong>Числа з одиницями:</strong> <kbd>16px</kbd>, <kbd>2rem</kbd>, <kbd>100%</kbd><br>• <strong>Кольори:</strong> <kbd>steelblue</kbd>, <kbd>#ff0000</kbd>",
+			"task": "Завершіть декларацію, додавши <kbd>color: coral;</kbd> щоб змінити колір тексту.",
+			"previewHTML": "<p class=\"text\">This text should turn coral.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .text { font-size: 1.25rem; }",
+			"sandboxCSS": "",
+			"codePrefix": ".text {\n  ",
 			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
-			"solution": "p { color: blue }",
+			"solution": "color: coral;",
 			"validations": [
 				{
-					"type": "regex",
-					"value": "^p\\s*{",
-					"message": "Start your rule with <kbd>p { … }</kbd> to select all paragraph elements",
-					"options": {
-						"caseSensitive": false
-					}
-				},
+					"type": "property_value",
+					"value": { "property": "color", "expected": "coral" },
+					"message": "Додайте <kbd>color: coral;</kbd>"
+				}
+			]
+		},
+		{
+			"id": "multiple-properties",
+			"title": "Кілька властивостей",
+			"description": "Правило може мати кілька декларацій. Кожна йде в окремому рядку, і кожна потребує крапки з комою в кінці:<br><br><pre>.box {<br>  background: gold;<br>  color: navy;<br>  padding: 1rem;<br>}</pre><br>Порядок зазвичай не має значення - CSS застосовує всі. При конфліктах перемагає остання.",
+			"task": "Додайте дві декларації: <kbd>background: lavender;</kbd> та <kbd>padding: 1rem;</kbd>",
+			"previewHTML": "<div class=\"card\">A styled card with background and padding.</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .card { border-radius: 8px; }",
+			"sandboxCSS": "",
+			"codePrefix": ".card {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "background: lavender;\n  padding: 1rem;",
+			"validations": [
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color:</kbd> property in your CSS rule"
-				},
-				{
-					"type": "contains",
-					"value": "blue",
-					"message": "Set the color value to <kbd>blue</kbd>"
+					"type": "property_value",
+					"value": { "property": "background", "expected": "lavender" },
+					"message": "Додайте <kbd>background: lavender;</kbd>"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "blue"
-					},
-					"message": "Use <kbd>color: blue</kbd> to set the text color"
-				},
-				{
-					"type": "regex",
-					"value": "p\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": false
-					}
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "Додайте <kbd>padding: 1rem;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "type-selectors",
-			"title": "Type Selectors",
-			"description": "Type selectors (also called tag name selectors or element selectors) target HTML elements based on their tag name. For example, <kbd>p</kbd> selects all paragraph elements, <kbd>h1</kbd> selects all level-one headings, and <kbd>div</kbd> selects all division elements. Type selectors are the most fundamental way to select elements, applying styles consistently to all instances of a particular HTML element throughout your document. You can define a variety of CSS properties with type selectors, such as <kbd>color</kbd> for text color, <kbd>background-color</kbd> for the background, and <kbd>font-weight</kbd> for text emphasis. They provide a broad approach for styling your page and are often the starting point for more specific styling using other selector types.",
-			"task": "Write three separate CSS rules using type selectors to target specific HTML elements: make <kbd>h2</kbd> headings <kbd>purple</kbd>, give <kbd>span</kbd> elements a <kbd>yellow</kbd> background, and make <kbd>strong</kbd> elements <kbd>red</kbd>.",
-			"previewHTML": "<h2>Type Selectors Example</h2>\n<p>Regular paragraph text <span>with a highlighted span</span> that should have a yellow background.</p>\n<p>Another paragraph with <strong>strong important text</strong> that should be red.</p>\n<h2>Another Heading</h2>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, span, strong { padding: 3px; }",
-			"codePrefix": "/* Write three separate type selectors below */\n\n",
-			"initialCode": "/* 1. Make h2 headings purple */\n\n\n/* 2. Give span elements a yellow background */\n\n\n/* 3. Make strong elements red */\n",
+			"title": "Селектори типу",
+			"description": "<strong>Селектор</strong> говорить браузеру, які елементи стилізувати. Найпростіший селектор - це <strong>селектор типу</strong> — просто назва HTML-тегу.<br><br><pre>p {<br>  color: steelblue;<br>}</pre><br>Це правило націлюється на кожен елемент <kbd>&lt;p&gt;</kbd> на сторінці. Селектори типу чудово підходять для встановлення базових стилів.",
+			"task": "Стилізуйте всі абзаци. Напишіть правило з <kbd>p</kbd> як селектором і встановіть <kbd>color: steelblue</kbd>.",
+			"previewHTML": "<article>\n  <h2>Fresh Roasted Coffee</h2>\n  <p>Our beans are sourced from small farms in Colombia and Ethiopia.</p>\n  <p>Each batch is roasted weekly to ensure peak freshness.</p>\n</article>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h2 { margin: 0 0 1rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": "/* 1. Make h2 headings purple */\nh2 {\n  color: purple;\n}\n\n/* 2. Give span elements a yellow background */\nspan {\n  background-color: yellow;\n}\n\n/* 3. Make strong elements red */\nstrong {\n  color: red;\n}",
+			"solution": "p {\n  color: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^h2\\s*{",
-					"message": "Include an <kbd>h2 { … }</kbd> selector"
+					"value": "p\\s*\\{",
+					"message": "Почніть з <kbd>p {</kbd> щоб вибрати абзаци"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Set the <kbd>color</kbd> property to <kbd>purple</kbd> for h2 elements"
-				},
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "Встановіть <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "styling-links",
+			"title": "Стилізація посилань",
+			"description": "Селектори типу працюють для будь-якого HTML-елемента. Селектор <kbd>a</kbd> націлюється на всі посилання на сторінці.<br><br>Посилання мають синій колір і підкреслення за замовчуванням. Ви можете змінити обидва з CSS — використовуйте <kbd>color</kbd> для тексту і <kbd>text-decoration: none</kbd> щоб прибрати підкреслення.",
+			"task": "Стилізуйте навігаційні посилання. Напишіть правило з <kbd>a</kbd> як селектором і встановіть <kbd>color: coral</kbd>.",
+			"previewHTML": "<nav>\n  <a href=\"#\">Home</a>\n  <a href=\"#\">Menu</a>\n  <a href=\"#\">About</a>\n  <a href=\"#\">Contact</a>\n</nav>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } nav { display: flex; gap: 1.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": "a {\n  color: coral;\n}",
+			"validations": [
 				{
 					"type": "regex",
-					"value": "h2\\s*{[^}]*}",
-					"message": "Make sure to close your h2 rule with a closing brace <kbd>}</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "^span\\s*{",
-					"message": "Include a <kbd>span { … }</kbd> selector"
+					"value": "a\\s*\\{",
+					"message": "Почніть з <kbd>a {</kbd> щоб вибрати посилання"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Set a <kbd>background-color: yellow</kbd> for span elements"
-				},
-				{
-					"type": "regex",
-					"value": "span\\s*{[^}]*}",
-					"message": "Make sure to close your span rule with a closing brace <kbd>}</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "^strong\\s*{",
-					"message": "Include a <kbd>strong { … }</kbd> selector"
-				},
-				{
-					"type": "regex",
-					"value": "strong\\s*{\\s*color:\\s*red;[^}]*}",
-					"message": "Set the <kbd>color: red</kbd> for strong elements"
+					"value": { "property": "color", "expected": "coral" },
+					"message": "Встановіть <kbd>color: coral</kbd>"
 				}
 			]
 		},
 		{
 			"id": "class-selectors",
-			"title": "Class Selectors",
-			"description": "Class selectors target elements with a specific class attribute value. They begin with a dot (.) followed by the class name. Classes are powerful because they allow you to apply the same styles to multiple elements regardless of their type. An HTML element can have multiple classes (separated by spaces in the class attribute), and a class can be applied to any number of elements. When using class selectors, you can apply properties like <kbd>background-color</kbd> to set the background color of elements, and <kbd>font-weight</kbd> to control text thickness, making text bold or normal. This flexibility makes class selectors one of the most commonly used methods for applying styles in CSS, allowing for modular and reusable styling across your website.",
-			"task": "Create a CSS rule using a class selector that targets elements with the class <kbd>highlight</kbd>. Give these elements a <kbd>yellow</kbd> background and <kbd>bold</kbd> text.",
-			"previewHTML": "<h2>Using Class Selectors</h2>\n<p>This is a regular paragraph, but <span class=\"highlight\">this span has the highlight class</span> applied to it.</p>\n<p class=\"highlight\">This entire paragraph has the highlight class.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"highlight\">This list item is highlighted</li>\n</ul>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p, li { padding: 5px; margin-bottom: 10px; }",
-			"codePrefix": "/* Create a class selector for elements with the 'highlight' class */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^\\.highlight\\s*{",
-					"message": "Start your rule with <kbd>.highlight { … }</kbd> to create a class selector",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color:</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "yellow"
-					},
-					"message": "Set the background color to <kbd>yellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "font-weight:",
-					"message": "Include the <kbd>font-weight:</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-weight",
-						"expected": "bold"
-					},
-					"message": "Set the font-weight to <kbd>bold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.highlight\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "multiple-classes",
-			"title": "Multiple Classes",
-			"description": "HTML elements can have multiple classes applied simultaneously, allowing for composable and modular CSS designs. When an element has multiple classes, it will receive styles from all matching class selectors. This approach enables you to build a library of reusable CSS classes that can be combined in different ways. You can also target elements that have a specific combination of classes by chaining class selectors together without spaces (e.g., <kbd>.class1.class2</kbd>). When styling these elements, you might use properties like <kbd>border-color</kbd> to change the color of element borders, and <kbd>background-color</kbd> to set the background color of elements. This technique lets you create conditional styles that only apply when certain classes appear together.",
-			"task": "Complete the CSS rule that targets elements with both <kbd>card</kbd> and <kbd>featured</kbd> classes by chaining the selectors. Set the border-color to gold and the background-color to lemonchiffon to make featured cards stand out.",
-			"previewHTML": "<h2>Multiple Class Combinations</h2>\n<div class=\"card\">Regular Card</div>\n<div class=\"card featured\">Featured Card</div>\n<div class=\"featured\">Just Featured (not a card)</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .card { border: 2px solid gray; padding: 15px; margin-bottom: 10px; border-radius: 5px; }",
+			"title": "Селектори класів",
+			"description": "Селектори типу стилізують <em>усі</em> елементи цього типу. Але що якщо ви хочете стилізувати лише деякі з них?<br><br><strong>Селектори класів</strong> націлюються на елементи з певним атрибутом <kbd>class</kbd>. Вони починаються з крапки:<br><br><pre>.badge {<br>  background: coral;<br>}</pre><br>Це стилізує лише елементи з <kbd>class=\"badge\"</kbd>.",
+			"task": "Стилізуйте значок сповіщень. Напишіть правило з <kbd>.badge</kbd> як селектором і встановіть <kbd>background: tomato</kbd>.",
+			"previewHTML": "<header>\n  <h1>Dashboard</h1>\n  <span class=\"badge\">3</span>\n</header>\n<p>You have new notifications waiting.</p>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } h1 { margin: 0; font-size: 1.5rem; } .badge { color: white; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.875rem; } p { color: #555; margin: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* The .card class already has basic styling */\n/* Now target elements with BOTH classes: 'card' AND 'featured' */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
-			"solution": ".card.featured { border-color: gold; background-color: lemonchiffon }",
+			"solution": ".badge {\n  background: tomato;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.card\\.featured\\s*{",
-					"message": "Chain the selectors as <kbd>.card.featured</kbd> (no space between them)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "border-color:",
-					"message": "Include the <kbd>border-color</kbd> property"
+					"value": "\\.badge\\s*\\{",
+					"message": "Почніть з <kbd>.badge {</kbd> (не забудьте крапку!)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "border-color",
-						"expected": "gold"
-					},
-					"message": "Set the border color to <kbd>gold</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*;",
-					"message": "Make sure to end your CSS rule with a semicolon <kbd>;</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lemonchiffon"
-					},
-					"message": "Set the background color to <kbd>lemonchiffon</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\\.card\\.featured\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "tomato" },
+					"message": "Встановіть <kbd>background: tomato</kbd>"
 				}
 			]
 		},
 		{
-			"id": "class-with-type",
-			"title": "Combining Types",
-			"description": "You can combine type selectors with class selectors to target specific HTML elements that have a certain class. This creates a more specific selector that only matches when both conditions are true: the element is of the specified type AND it has the specified class. For example, <kbd>p.note</kbd> would select paragraph elements with the class <kbd>note</kbd>, but would not select divs or spans with that same class. You can style these combined selections using properties like <kbd>background-color</kbd> to set a colored background for your elements. This approach allows you to apply different styles to the same class when it appears on different element types.",
-			"task": "Create a CSS rule that specifically targets <kbd>&lt;span&gt;</kbd> elements with the class <kbd>highlight</kbd>. Make those elements have an orange background, while other elements with the highlight class remain untouched.",
-			"previewHTML": "<h2>Type and Class Combinations</h2>\n<p>This paragraph has a <span class=\"highlight\">highlighted span</span> that should have an orange background.</p>\n<p class=\"highlight\">This paragraph has the highlight class but should NOT have an orange background.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .highlight { font-weight: bold; }",
-			"sandboxCSS": "h2, p, span { padding: 5px; }",
-			"codePrefix": "/* The .highlight class already sets font-weight to bold */\n/* Now target ONLY span elements with the highlight class */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^span\\.highlight\\s*{",
-					"message": "Use <kbd>span.highlight</kbd> selector (no space between element and class)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "orange"
-					},
-					"message": "Set the background color to <kbd>orange</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "span\\.highlight\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-selectors",
-			"title": "ID Selectors",
-			"description": "ID selectors target elements with a specific id attribute. They begin with a hash/pound sign (#) followed by the ID name. Unlike classes, IDs must be unique within a document—each ID value should be used only once per page. ID selectors have higher specificity than class or element selectors, meaning they override those selectors when conflicts arise. When styling with ID selectors, you can use properties like <kbd>color</kbd> to define text color, and <kbd>text-decoration</kbd> to control the appearance of text, such as adding underlines to elements. Because of their uniqueness requirement, IDs are best used for one-of-a-kind elements like page headers, main navigation, or specific unique components that appear only once on a page.",
-			"task": "Create a CSS rule with an ID selector that targets the element with the ID <kbd>main-title</kbd>. Set its color to purple and add an underline with <kbd>text-decoration: underline</kbd>.",
-			"previewHTML": "<h1 id=\"main-title\">Main Page Title</h1>\n<p>Regular paragraph content.</p>\n<h2>Secondary Heading</h2>\n<p id=\"intro\">Introduction paragraph (different ID).</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h1, h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Create an ID selector to target the element with id=\"main-title\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^#main-title\\s*{",
-					"message": "Start your rule with <kbd>#main-title</kbd> to create an ID selector",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "purple"
-					},
-					"message": "Set the color to <kbd>purple</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "text-decoration:",
-					"message": "Include the <kbd>text-decoration</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "text-decoration",
-						"expected": "underline"
-					},
-					"message": "Set the text-decoration to <kbd>underline</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "#main-title\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "id-with-type",
-			"title": "Type + ID",
-			"description": "Similar to how you can combine type and class selectors, you can also combine type selectors with ID selectors. For example, <kbd>h1#title</kbd> targets an h1 element with the ID 'title'. When using this combined approach, you can apply CSS properties like <kbd>font-style</kbd> to control the slant of the text, making it italic or normal. While this selector combination is more specific than using just the ID selector, it's often unnecessary since IDs should already be unique in a document. However, this technique can be useful for improving code readability or when you want to emphasize that a particular ID should only appear on a specific element type.",
-			"task": "Create a CSS rule that combines a type selector with an ID selector to target specifically a paragraph element with the ID <kbd>special</kbd>. Set its font style to italic.",
-			"previewHTML": "<h2 id=\"special\">Heading with ID \"special\" (should NOT be affected)</h2>\n<p id=\"special\">Paragraph with ID \"special\" (should become italic)</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
-			"codePrefix": "/* Create a combined type+ID selector for a paragraph with id=\"special\" */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "^p#special\\s*{",
-					"message": "Use <kbd>p#special</kbd> to target paragraphs with ID <kbd>special</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "font-style:",
-					"message": "Include the <kbd>font-style</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "font-style",
-						"expected": "italic"
-					},
-					"message": "Set the font-style to <kbd>italic</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "p#special\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
-				}
-			]
-		},
-		{
-			"id": "selector-lists",
-			"title": "Selector Lists",
-			"description": "When multiple elements need the same styling, you can group them together using a selector list (also known as grouping selectors). Selector lists are created by separating individual selectors with commas. This approach reduces repetition in your CSS, making it more maintainable and efficient. For example, <kbd>h1, h2, h3 { color: blue; }</kbd> applies the same blue color to all three heading levels. When styling multiple selectors at once, you can apply properties like <kbd>background-color</kbd> to set the background, <kbd>border-left</kbd> to create a left border with a specific thickness, style, and color, and <kbd>padding-left</kbd> to create space between the content and the left border. Whitespace around commas is optional, and each selector in the list can be any valid selector type-elements, classes, IDs, or even more complex selectors.",
-			"task": "Create a selector list that applies the same styles to three different elements: paragraphs with class <kbd>note</kbd>, list items with class <kbd>important</kbd>, and the element with ID <kbd>summary</kbd>. Give them a <kbd>lightyellow</kbd> background, a <kbd>gold</kbd> left border, and some left <kbd>padding</kbd>.",
-			"previewHTML": "<p class=\"note\">This is a note paragraph.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"important\">Important list item</li>\n</ul>\n<div id=\"summary\">Summary section</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p, li, div { padding: 8px; margin-bottom: 8px; border: 1px dashed gray; }",
-			"codePrefix": "/* Create a selector list to apply the same styles to multiple different elements */\n",
-			"initialCode": "",
-			"codeSuffix": "",
-			"previewContainer": "preview-area",
-			"solution": "p.note,\nli.important,\n#summary {\n  background-color: lightyellow;\n  border-left: 3px solid gold;\n  padding-left: 10px\n}",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "p.note",
-					"message": "Include <kbd>p.note</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "li.important",
-					"message": "Include <kbd>li.important</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "#summary",
-					"message": "Include <kbd>#summary</kbd> in your selector list",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "regex",
-					"value": "(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)",
-					"message": "Create a comma-separated list with all three selectors",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "background-color:",
-					"message": "Include the <kbd>background-color</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "background-color",
-						"expected": "lightyellow"
-					},
-					"message": "Set the background color to <kbd>lightyellow</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "border-left:",
-					"message": "Include the <kbd>border-left</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "border-left",
-						"expected": "3px solid gold"
-					},
-					"message": "Use <kbd>border-left: 3px solid gold</kbd> to create a left border"
-				},
-				{
-					"type": "contains",
-					"value": "padding-left:",
-					"message": "Include the <kbd>padding-left</kbd> property"
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "padding-left",
-						"expected": "10px"
-					},
-					"message": "Use <kbd>padding-left: 10px</kbd> to add left padding"
-				}
-			]
-		},
-		{
-			"id": "universal-selector",
-			"title": "Universal (*)",
-			"description": "The universal selector is denoted by an asterisk (*) and matches any element of any type. It selects everything in the document or, when combined with other selectors, everything within a specific context. For example, <kbd>* { margin: 0; }</kbd> removes margins from all elements, while <kbd>article *</kbd> selects all elements inside article elements. When using the universal selector in combination with other selectors, you can apply properties like <kbd>margin</kbd> to control the spacing around elements. The universal selector is powerful but should be used carefully due to its broad impact. It's commonly used in CSS resets, to override default browser styling, or to target all children of a particular element.",
-			"task": "Use the universal selector to remove margins from all elements inside the container div. Create a rule using <kbd>div.container *</kbd> as the selector and set <kbd>margin: 0</kbd>.",
-			"previewHTML": "<div class=\"container\">\n  <h2>Inside Container</h2>\n  <p>This paragraph is inside the container.</p>\n  <ul>\n    <li>List item inside container</li>\n  </ul>\n</div>\n<p>This paragraph is outside the container and should not be affected.</p>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } div.container { border: 2px solid navy; padding: 15px; background-color: lavender; } h2, p, ul, li { margin: 15px 0; }",
+			"id": "button-variants",
+			"title": "Варіанти кнопок",
+			"description": "Елементи можуть мати кілька класів. Коли ви з'єднуєте селектори класів без пробілів, ви націлюєтесь на елементи, які мають <em>усі</em> ці класи:<br><br><pre>.btn.primary {<br>  background: steelblue;<br>}</pre><br>Це націлюється на елементи з <kbd>class=\"btn primary\"</kbd>, а не лише <kbd>.btn</kbd> або лише <kbd>.primary</kbd>.",
+			"task": "Стилізуйте основну кнопку. Напишіть правило з <kbd>.btn.primary</kbd> як селектором і встановіть <kbd>background: steelblue</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Cancel</button>\n  <button class=\"btn primary\">Save Changes</button>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #e0e0e0; color: #333; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use the universal selector to target all elements inside the container */\n",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": ".btn.primary {\n  background: steelblue;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^div\\.container\\s+\\*\\s*{",
-					"message": "Use <kbd>div.container *</kbd> selector (with a space between container and *)",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "margin:",
-					"message": "Include the <kbd>margin</kbd> property"
+					"value": "\\.btn\\.primary\\s*\\{",
+					"message": "Використовуйте <kbd>.btn.primary {</kbd> (без пробілу між класами)"
 				},
 				{
 					"type": "property_value",
-					"value": {
-						"property": "margin",
-						"expected": "0"
-					},
-					"message": "Set margin to <kbd>0</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "div\\.container\\s+\\*\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": { "property": "background", "expected": "steelblue" },
+					"message": "Встановіть <kbd>background: steelblue</kbd>"
 				}
 			]
 		},
 		{
-			"id": "specificity-basics",
-			"title": "Specificity",
-			"description": "CSS specificity determines which styles take precedence when multiple conflicting rules target the same element. Specificity follows a hierarchical system: inline styles have the highest specificity, followed by ID selectors, then class/attribute/pseudo-class selectors, and finally element/pseudo-element selectors. This can be conceptualized as a four-part score (inline, ID, class, element). When creating multiple rules that may target the same elements, you can use the <kbd>color</kbd> property to set text colors, and specificity will determine which color is actually applied. Understanding specificity is crucial for predictable styling and debugging CSS conflicts. When two selectors have equal specificity, the one that comes last in the stylesheet wins.",
-			"task": "Examine the existing CSS rules and add a new rule with higher specificity to override the text color of the paragraph. Create a rule using '.content p' as the selector and set color: green.",
-			"previewHTML": "<div class=\"content\">\n  <p>What color will this paragraph be? Look at the CSS rules and their specificity.</p>\n</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
-			"sandboxCSS": "p { border: 1px dashed gray; padding: 10px; }",
-			"codePrefix": "/* These CSS rules target the same paragraph but have different specificity */\n\n/* Rule 1: Element selector (lowest specificity) */\np {\n  color: red;\n}\n\n/* Rule 2: Descendant selector (higher specificity than just 'p') */\n",
+			"id": "specific-elements",
+			"title": "Націлювання на конкретні елементи",
+			"description": "Іноді ви хочете, щоб клас виглядав по-різному на різних елементах. Поєднайте селектор типу з селектором класу (без пробілу) щоб бути більш специфічним:<br><br><pre>a.btn {<br>  text-decoration: none;<br>}</pre><br>Це стилізує лише елементи <kbd>&lt;a&gt;</kbd> з класом <kbd>btn</kbd>, а не елементи <kbd>&lt;button&gt;</kbd> з цим класом.",
+			"task": "Приберіть підкреслення з кнопок-посилань. Напишіть правило з <kbd>a.btn</kbd> як селектором і встановіть <kbd>text-decoration: none</kbd>.",
+			"previewHTML": "<div class=\"actions\">\n  <button class=\"btn\">Regular Button</button>\n  <a href=\"#\" class=\"btn\">Link Button</a>\n</div>",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; align-items: center; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: steelblue; color: white; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
 			"initialCode": "",
 			"codeSuffix": "",
 			"previewContainer": "preview-area",
+			"solution": "a.btn {\n  text-decoration: none;\n}",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "^\\.content\\s+p\\s*{",
-					"message": "Use <kbd>.content p</kbd> as your selector (note the space between)",
-					"options": {
-						"caseSensitive": true
-					}
+					"value": "a\\.btn\\s*\\{",
+					"message": "Використовуйте <kbd>a.btn {</kbd> (тип + клас, без пробілу)"
 				},
 				{
-					"type": "contains",
-					"value": "color:",
-					"message": "Include the <kbd>color</kbd> property"
+					"type": "property_value",
+					"value": { "property": "text-decoration", "expected": "none" },
+					"message": "Встановіть <kbd>text-decoration: none</kbd>"
+				}
+			]
+		},
+		{
+			"id": "grouping-selectors",
+			"title": "Групування селекторів",
+			"description": "Коли кільком елементам потрібні однакові стилі, перелічіть їх через кому. Це тримає ваш CSS чистим і підтримуваним.<br><br><pre>h1, h2, h3 {<br>  color: steelblue;<br>}</pre><br>Це застосовує однаковий колір до всіх трьох рівнів заголовків в одному правилі.",
+			"task": "Стилізуйте всі заголовки однаково. Додайте <kbd>color: steelblue</kbd> до згрупованого селектора <kbd>h1, h2, h3</kbd>.",
+			"previewHTML": "<article><h1>Main Title</h1><p>Introduction paragraph with some text.</p><h2>Section Heading</h2><p>More content here.</p><h3>Subsection</h3><p>Final paragraph.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } p { color: #555; line-height: 1.6; }",
+			"sandboxCSS": "",
+			"codePrefix": "h1, h2, h3 {\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"solution": "color: steelblue;",
+			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "color", "expected": "steelblue" },
+					"message": "Встановіть <kbd>color: steelblue</kbd>"
+				}
+			]
+		},
+		{
+			"id": "descendant-selectors",
+			"title": "Селектори нащадків",
+			"description": "Націлюйтесь на елементи всередині інших елементів використовуючи пробіл між селекторами. Це один з найкорисніших патернів у CSS.<br><br><pre>.nav a {<br>  color: white;<br>}</pre><br>Це стилізує лише посилання всередині <kbd>.nav</kbd>, залишаючи інші посилання без змін.",
+			"task": "Стилізуйте навігаційні посилання по-іншому. Напишіть правило з <kbd>.nav a</kbd> як селектором і встановіть <kbd>color: white</kbd>.",
+			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav><p>Read more in our <a href=\"#\">documentation</a>.</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; margin: 0; } .nav { background: steelblue; padding: 1rem; display: flex; gap: 1rem; border-radius: 8px; margin-bottom: 1rem; } .nav a { text-decoration: none; } p a { color: steelblue; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".nav a {\n  color: white;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.nav\\s+a\\s*\\{",
+					"message": "Використовуйте <kbd>.nav a {</kbd> (пробіл між .nav і a)"
 				},
 				{
-					"type": "contains",
-					"value": "green",
-					"message": ""
+					"type": "property_value",
+					"value": { "property": "color", "expected": "white" },
+					"message": "Встановіть <kbd>color: white</kbd>"
+				}
+			]
+		},
+		{
+			"id": "nested-styling",
+			"title": "Вкладені стилі",
+			"description": "Селектори нащадків дозволяють створювати контекстні стилі. Один і той самий елемент може виглядати по-різному залежно від того, де він з'являється.<br><br>Наприклад, абзаци в <kbd>.card</kbd> можуть бути меншими ніж абзаци в <kbd>article</kbd>.",
+			"task": "Зробіть абзаци всередині картки меншими. Напишіть правило з <kbd>.card p</kbd> як селектором і встановіть <kbd>font-size: 0.9rem</kbd>.",
+			"previewHTML": "<article><h2>Article Title</h2><p>This is a regular article paragraph with normal-sized text for comfortable reading.</p><div class=\"card\"><strong>Quick Tip</strong><p>Card paragraphs should be slightly smaller to fit the compact design.</p></div><p>Back to regular article text here.</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } h2 { color: steelblue; margin-top: 0; } p { line-height: 1.6; color: #444; } .card { background: #f0f4f8; padding: 1rem; border-radius: 8px; border-left: 4px solid steelblue; } .card strong { color: steelblue; display: block; margin-bottom: 0.5rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "",
+			"initialCode": "",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"solution": ".card p {\n  font-size: 0.9rem;\n}",
+			"validations": [
+				{
+					"type": "regex",
+					"value": "\\.card\\s+p\\s*\\{",
+					"message": "Використовуйте <kbd>.card p {</kbd> (пробіл між .card і p)"
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "font-size", "expected": "0.9rem" },
+					"message": "Встановіть <kbd>font-size: 0.9rem</kbd>"
 				}
 			]
 		}

lessons/uk/00-welcome.json

@@ -1,16 +1,17 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "welcome",
-	"title": "Code Crispies",
-	"description": "Welcome to Code Crispies - your interactive web development learning platform",
+	"title": "Ласкаво просимо",
+	"description": "Почніть з Code Crispies",
 	"mode": "html",
 	"difficulty": "beginner",
+	"excludeFromProgress": true,
 	"lessons": [
 		{
-			"id": "get-started",
-			"title": "Get Started",
-			"description": "<strong>Code Crispies</strong> is a free, open-source platform for learning web development through hands-on exercises. No account required!<br><br><strong>What you'll learn:</strong><br>• <strong>HTML</strong> - Semantic elements, forms, tables, SVG (<em>HTML Block & Inline</em>, <em>HTML Forms</em>, <em>HTML Tables</em>)<br>• <strong>CSS</strong> - Selectors, box model, flexbox, animations (<em>CSS Selectors</em>, <em>CSS Box Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media queries and mobile-first layouts<br><br><strong>How it works:</strong><br>1. Read the task in the left panel<br>2. Write code in the editor<br>3. See live results in the preview<br>4. Get instant feedback with hints<br><br><strong>Keyboard shortcuts:</strong> <kbd>Ctrl+Z</kbd> to undo, <kbd>Ctrl+Shift+Z</kbd> to redo<br><br><strong>More resources:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript solutions<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript technology roadmap",
-			"task": "Write <code>Hello World</code>",
+			"id": "hello",
+			"title": "Привіт!",
+			"description": "<strong>Ласкаво просимо до Code Crispies!</strong> Вивчайте CSS та HTML через практичні вправи.<br><br><strong>Як це працює:</strong><br>1. Прочитайте завдання зліва<br>2. Напишіть код в редакторі<br>3. Побачте результати в попередньому перегляді<br><br><strong>Поради:</strong> Використовуйте <kbd>Ctrl+Z</kbd> для скасування. Відкрийте меню (☰) щоб переглянути всі модулі.",
+			"task": "Напишіть <code>Hello World</code> щоб почати",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }",
 			"sandboxCSS": "",
@@ -21,42 +22,9 @@
 				{
 					"type": "contains",
 					"value": "Hello World",
-					"message": "Write <code>Hello World</code>"
+					"message": "Напишіть <code>Hello World</code>"
 				}
 			]
-		},
-		{
-			"id": "overview",
-			"title": "Overview",
-			"description": "<strong>You're ready!</strong> Open the menu (☰) to explore all modules.<br><br><strong>Recommended learning path:</strong><br>1. <em>HTML Block & Inline</em> - Understand container vs inline elements<br>2. <em>HTML Forms</em> - Build interactive forms with validation<br>3. <em>CSS Selectors</em> - Target elements precisely<br>4. <em>CSS Box Model</em> - Master padding, margin, borders<br>5. <em>CSS Flexbox</em> - Create flexible layouts<br>6. <em>CSS Animations</em> - Add motion and transitions<br><br><strong>Tips:</strong><br>• Use <em>Show Expected</em> to see the target result<br>• Your progress is saved automatically<br>• Try Emmet in HTML mode: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Made by <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
-			"task": "Click Next to continue",
-			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }",
-			"sandboxCSS": "",
-			"initialCode": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "Hello World",
-					"message": "Click Next to continue"
-				}
-			]
-		},
-		{
-			"id": "playground",
-			"title": "Playground",
-			"mode": "playground",
-			"description": "",
-			"task": "",
-			"previewHTML": "",
-			"previewBaseCSS": "",
-			"sandboxCSS": "",
-			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
-			"solution": "",
-			"previewContainer": "preview-area",
-			"validations": []
 		}
 	]
 }

lessons/uk/01-box-model.json

@@ -2,18 +2,18 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "box-model",
 	"title": "CSS Box Model",
-	"description": "Master the fundamental principles of space management in web design through the CSS box model. This module explores how content, padding, borders, and margins combine to create layout structures that are both visually appealing and structurally sound.",
+	"description": "Опануйте фундаментальні принципи управління простором у веб-дизайні через блокову модель CSS. Цей модуль досліджує, як контент, відступи, межі та поля поєднуються для створення структур макету.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "box-model-1",
-			"title": "Box Model Components",
-			"description": "The CSS box model consists of four concentric layers: content area (innermost), padding, border, and margin (outermost). Understanding how these components interact is essential for precise layout control.",
-			"task": "Set <kbd>padding</kbd> to <kbd>1rem</kbd> to create space between the content and border.",
-			"previewHTML": "<div class=\"box\">Box Model Components</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }",
+			"title": "Padding",
+			"description": "Кожен елемент у CSS - це блок з чотирма шарами: контент, відступ (padding), межа та поле. <strong>Padding</strong> створює простір для дихання між вашим контентом і краєм блоку.<br><br>Без padding текст незручно притискається до меж. Padding робить контент читабельним і візуально збалансованим.<br><br><pre>.card {\n  padding: 1rem;\n}</pre>",
+			"task": "Ця картка профілю виглядає тісною. Додайте <kbd>padding: 1rem</kbd>, щоб текст мав простір для дихання.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "padding: 1rem;",
@@ -22,62 +22,62 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Set <kbd>padding: 1rem</kbd>"
+					"message": "Встановіть <kbd>padding: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-2",
-			"title": "Adding Borders",
-			"description": "Borders outline an element, creating visual separation from surrounding content. The border shorthand accepts three values: width, style, and color.",
-			"task": "Set <kbd>border</kbd> to <kbd>2px solid darkslategray</kbd>.",
-			"previewHTML": "<div class=\"box\">This box needs a border</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }",
+			"title": "Borders",
+			"description": "Межі створюють візуальні границі навколо елементів. Скорочення <kbd>border</kbd> приймає три значення: ширину, стиль і колір.<br><br>Поширені стилі: <kbd>solid</kbd>, <kbd>dashed</kbd>, <kbd>dotted</kbd>, <kbd>none</kbd>",
+			"task": "Додайте тонкий лівий акцент до картки за допомогою <kbd>border-left: 4px solid steelblue</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".box {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border: 2px solid darkslategray;",
+			"solution": "border-left: 4px solid steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "border:\\s*2px\\s+solid\\s+darkslategray",
-					"message": "Set <kbd>border: 2px solid darkslategray</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
+					"message": "Встановіть <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-3",
-			"title": "Adding Margins",
-			"description": "Margins create space between elements, controlling how they relate to one another within a layout. Unlike padding (which affects internal spacing), margins exist outside the element's border.",
-			"task": "Set <kbd>margin</kbd> to <kbd>1rem</kbd> to create space between this element and its neighbors.",
-			"previewHTML": "<div class=\"container\"><div class=\"outer\">This box needs margins</div><div class=\"neighbor\">Adjacent element</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .outer { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }",
+			"title": "Margins",
+			"description": "Поля створюють простір <em>зовні</em> елемента, відділяючи його від сусідів. Тоді як padding штовхає контент всередину, поля відштовхують інші елементи.",
+			"task": "Додайте простір між цими двома картками профілю за допомогою <kbd>margin-bottom: 1rem</kbd> на <kbd>.card</kbd>.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article><article class=\"card\"><h3>Alex Rivera</h3><p>UX Designer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".outer {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem;",
+			"solution": "margin-bottom: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "margin", "expected": "1rem" },
-					"message": "Set <kbd>margin: 1rem</kbd>"
+					"value": { "property": "margin-bottom", "expected": "1rem" },
+					"message": "Встановіть <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-4",
-			"title": "Box Sizing: Border-Box",
-			"description": "The <kbd>box-sizing</kbd> property determines how element dimensions are calculated. The default <kbd>content-box</kbd> excludes padding and border from width/height, while <kbd>border-box</kbd> includes them, making layout calculations more intuitive.",
-			"task": "Set <kbd>box-sizing</kbd> to <kbd>border-box</kbd> so padding and border are included in the width.",
-			"previewHTML": "<div class=\"sizing-demo\"><div class=\"box default\">Content-box (default)</div><div class=\"box sized\">Border-box</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .default { box-sizing: content-box; }",
+			"title": "Box Sizing",
+			"description": "За замовчуванням <kbd>width</kbd> встановлює лише ширину контенту. Padding і межі додаються до загальної суми. Це спричиняє проблеми з макетом.<br><br><kbd>box-sizing: border-box</kbd> включає padding і межу у ширину, роблячи розмір передбачуваним. Більшість розробників застосовують це до всіх елементів.",
+			"task": "Обидві картки мають <kbd>width: 200px</kbd>. Ліва використовує стандартний розмір (content-box), стаючи ширшою за очікуване. Виправте праву картку за допомогою <kbd>box-sizing: border-box</kbd>.",
+			"previewHTML": "<div class=\"demo\"><article class=\"card\">Content-box</article><article class=\"card fix\">Border-box</article></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .demo { display: flex; gap: 1rem; } .card { width: 200px; padding: 1rem; border: 4px solid steelblue; background: white; border-radius: 8px; }",
 			"sandboxCSS": "",
-			"codePrefix": ".sized {\n  ",
+			"codePrefix": ".fix {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"solution": "box-sizing: border-box;",
@@ -86,93 +86,104 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Set <kbd>box-sizing: border-box</kbd>"
+					"message": "Встановіть <kbd>box-sizing: border-box</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-5",
-			"title": "Margin Collapse",
-			"description": "When two vertical margins meet, they collapse to the larger value instead of adding up. Understanding this behavior is crucial for consistent vertical spacing.",
-			"task": "Set <kbd>margin-bottom</kbd> to <kbd>2rem</kbd>. Notice the space between paragraphs equals 2rem (not 3rem) due to margin collapse.",
-			"previewHTML": "<div class=\"collapse-demo\"><p class=\"first\">This paragraph has a bottom margin.</p><p class=\"second\">This paragraph has a top margin of 1rem.</p></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }",
+			"title": "Padding Shorthand",
+			"description": "Padding приймає 1-4 значення:<br>• 1 значення: всі сторони<br>• 2 значення: вертикально | горизонтально<br>• 4 значення: верх | право | низ | ліво",
+			"task": "Ця кнопка потребує більше горизонтального простору, ніж вертикального. Встановіть <kbd>padding: 8px 1rem</kbd> (8px верх/низ, 1rem ліво/право).",
+			"previewHTML": "<button class=\"btn\">Follow</button>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .btn { background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }",
 			"sandboxCSS": "",
-			"codePrefix": ".first {\n  ",
+			"codePrefix": ".btn {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin-bottom: 2rem;",
+			"solution": "padding: 8px 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "property_value",
-					"value": { "property": "margin-bottom", "expected": "2rem" },
-					"message": "Set <kbd>margin-bottom: 2rem</kbd>"
+					"type": "regex",
+					"value": "padding:\\s*8px\\s+1rem",
+					"message": "Встановіть <kbd>padding: 8px 1rem</kbd>",
+					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-6",
-			"title": "Margin Shorthand Notation",
-			"description": "The margin shorthand can set all four sides at once. Two values set vertical (top/bottom) and horizontal (left/right) margins respectively.",
-			"task": "Set <kbd>margin</kbd> to <kbd>1rem 2rem</kbd> for 1rem top/bottom and 2rem left/right.",
-			"previewHTML": "<div class=\"container\"><div class=\"spaced\">This box needs margins: 1rem top/bottom, 2rem left/right</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .spaced { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }",
+			"title": "Margin Shorthand",
+			"description": "Margin використовує той самий шаблон скорочення, що й padding. Поширений шаблон - горизонтальне центрування блокових елементів за допомогою <kbd>margin: 0 auto</kbd>.",
+			"task": "Відцентруйте цю картку горизонтально. Встановіть <kbd>margin: 0 auto</kbd>, щоб автоматично обчислити рівні ліві/праві поля.",
+			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { width: 250px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".spaced {\n  ",
+			"codePrefix": ".card {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "margin: 1rem 2rem;",
+			"solution": "margin: 0 auto;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "regex",
-					"value": "margin:\\s*1rem\\s+2rem",
-					"message": "Set <kbd>margin: 1rem 2rem</kbd>",
+					"value": "margin:\\s*0\\s+auto",
+					"message": "Встановіть <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "box-model-7",
-			"title": "Padding Shorthand Notation",
-			"description": "Like margin, padding shorthand allows setting all sides at once. A single value applies to all four sides equally.",
-			"task": "Set <kbd>padding</kbd> to <kbd>2rem</kbd> to add equal padding on all sides.",
-			"previewHTML": "<div class=\"padded\">This box needs equal padding on all sides</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }",
+			"title": "Border Radius",
+			"description": "Хоча не є частиною класичної блокової моделі, <kbd>border-radius</kbd> заокруглює кути межі елемента. Використовуйте <kbd>50%</kbd> на квадратному елементі, щоб створити коло.",
+			"task": "Зробіть зображення аватара круглим за допомогою <kbd>border-radius: 50%</kbd>.",
+			"previewHTML": "<article class=\"card\"><img class=\"avatar\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='25' fill='%23666'/%3E%3Ccircle cx='50' cy='90' r='40' fill='%23666'/%3E%3C/svg%3E\" alt=\"Avatar\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; text-align: center; } .avatar { width: 80px; height: 80px; background: #ddd; margin-bottom: 8px; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".padded {\n  ",
+			"codePrefix": ".avatar {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "padding: 2rem;",
+			"solution": "border-radius: 50%;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
-					"value": { "property": "padding", "expected": "2rem" },
-					"message": "Set <kbd>padding: 2rem</kbd>"
+					"value": { "property": "border-radius", "expected": "50%" },
+					"message": "Встановіть <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
 		{
 			"id": "box-model-8",
-			"title": "Border on Specific Sides",
-			"description": "For granular control, you can target specific sides with <kbd>border-top</kbd>, <kbd>border-right</kbd>, <kbd>border-bottom</kbd>, or <kbd>border-left</kbd>.",
-			"task": "Set <kbd>border-bottom</kbd> to <kbd>4px solid dodgerblue</kbd>.",
-			"previewHTML": "<div class=\"line\">This element needs only a bottom border</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }",
+			"title": "Complete Card",
+			"description": "Об'єднаймо все разом. Ця картка сповіщення потребує стилізації, щоб виглядати професійно.",
+			"task": "Стилізуйте сповіщення: додайте <kbd>padding: 1rem</kbd>, <kbd>border-left: 4px solid coral</kbd> та <kbd>border-radius: 4px</kbd>.",
+			"previewHTML": "<div class=\"alert\"><strong>New message</strong><p>You have 3 unread notifications</p></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { background: seashell; } .alert strong { color: coral; } .alert p { margin: 4px 0 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": ".line {\n  ",
+			"codePrefix": ".alert {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
-			"solution": "border-bottom: 4px solid dodgerblue;",
+			"solution": "padding: 1rem;\n  border-left: 4px solid coral;\n  border-radius: 4px;",
 			"previewContainer": "preview-area",
 			"validations": [
+				{
+					"type": "property_value",
+					"value": { "property": "padding", "expected": "1rem" },
+					"message": "Встановіть <kbd>padding: 1rem</kbd>"
+				},
 				{
 					"type": "regex",
-					"value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue",
-					"message": "Set <kbd>border-bottom: 4px solid dodgerblue</kbd>",
+					"value": "border-left:\\s*4px\\s+solid\\s+coral",
+					"message": "Встановіть <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "border-radius", "expected": "4px" },
+					"message": "Встановіть <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}

lessons/uk/05-units-variables.json

@@ -1,115 +1,100 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "units-variables",
-	"title": "CSS Units & Variables",
-	"description": "Understand the variety of CSS measurement units and how to define and use custom properties for maintainable styles.",
+	"title": "Одиниці CSS та змінні",
+	"description": "Зрозумійте різноманітність одиниць вимірювання CSS та як визначати й використовувати кастомні властивості для стилів, які легко підтримувати.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "units-1",
-			"title": "Absolute vs. Relative Units",
-			"description": "Learn the difference between px, rem, em, %, and vw/vh for flexible, responsive layouts.",
-			"task": "Set the <kbd>width</kbd> of <kbd>.box</kbd> to <kbd>80%</kbd> and <kbd>max-width</kbd> to <kbd>37.5rem</kbd>.",
-			"previewHTML": "<div class=\"box\">Resize me!</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background: #f5f5f5; padding: 1rem; }",
+			"title": "Relative Units",
+			"description": "CSS пропонує два типи одиниць: <em>абсолютні</em> (як <kbd>px</kbd>) та <em>відносні</em> (як <kbd>%</kbd> і <kbd>rem</kbd>). Відносні одиниці адаптуються до контексту, роблячи макети гнучкими та доступними.<br><br><strong>Поширені відносні одиниці:</strong><br>• <kbd>%</kbd> – Відносно батьківського елемента<br>• <kbd>rem</kbd> – Відносно кореневого розміру шрифту (зазвичай 16px)<br>• <kbd>em</kbd> – Відносно розміру шрифту елемента<br><br>Поширений патерн для читабельного контенту: встановіть <kbd>width: 100%</kbd>, щоб заповнити доступний простір, потім <kbd>max-width: 40rem</kbd> для обмеження довжини рядка.",
+			"task": "Цей текст статті занадто широкий на великих екранах. Додайте <kbd>max-width: 40rem</kbd> для оптимальної ширини читання.",
+			"previewHTML": "<article class=\"article\"><h2>The Art of Typography</h2><p>Good typography is invisible. When text is set well, readers absorb information without noticing the design decisions that make it comfortable to read. Line length is crucial—too wide and eyes get lost, too narrow and reading becomes choppy.</p><p>The ideal line length is 45-75 characters per line. At typical font sizes, this works out to roughly 40rem maximum width.</p></article>",
+			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 1rem; background: #f9f9f9; } .article { background: white; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .article h2 { margin: 0 0 1rem; color: #333; } .article p { margin: 0 0 1rem; line-height: 1.6; color: #444; } .article p:last-child { margin-bottom: 0; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Set flexible sizing */\n.box {",
+			"codePrefix": ".article {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 80%;\n  max-width: 37.5rem;",
+			"codeSuffix": "\n}",
+			"solution": "max-width: 40rem;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "width", "message": "Use <kbd>width</kbd> property", "options": { "caseSensitive": false } },
-				{ "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Set width to <kbd>80%</kbd>" },
-				{ "type": "contains", "value": "max-width", "message": "Use <kbd>max-width</kbd> property", "options": { "caseSensitive": false } },
 				{
 					"type": "property_value",
-					"value": { "property": "max-width", "expected": "37.5rem" },
-					"message": "Set max-width to <kbd>37.5rem</kbd>"
+					"value": { "property": "max-width", "expected": "40rem" },
+					"message": "Встановіть <kbd>max-width: 40rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "units-2",
-			"title": "CSS Custom Properties",
-			"description": "Define and reuse variables (--custom properties) to centralize your theme values.",
-			"task": "Create a <kbd>--main-color</kbd> variable in <kbd>:root</kbd> with <kbd>#6200ee</kbd> and apply it as the border color on <kbd>.themed</kbd>.",
-			"previewHTML": "<div class=\"themed\">Variable Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }",
+			"title": "CSS Variables",
+			"description": "Кастомні властивості CSS (змінні) дозволяють визначати значення для повторного використання. Визначайте їх за допомогою <kbd>--назва</kbd> та використовуйте з <kbd>var(--назва)</kbd>. Змінні, визначені на <kbd>:root</kbd>, доступні всюди.",
+			"task": "Визначте <kbd>--brand: steelblue</kbd> в <kbd>:root</kbd>, потім використайте як колір <kbd>background</kbd> для <kbd>.btn</kbd>.",
+			"previewHTML": "<div class=\"actions\"><button class=\"btn\">Subscribe</button><button class=\"btn\">Learn More</button></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .actions { display: flex; gap: 1rem; } .btn { color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #ccc; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Define and use a CSS variable */\n:root {",
+			"codePrefix": ":root {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}\n.themed { }",
-			"solution": "  --main-color: #6200ee;\n}\n.themed {\n  border-color: var(--main-color);",
+			"codeSuffix": "\n}\n\n.btn {\n  background: var(--brand);\n}",
+			"solution": "--brand: steelblue;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "contains",
-					"value": "--main-color",
-					"message": "Define <kbd>--main-color</kbd> in :root",
+					"value": "--brand",
+					"message": "Визначте змінну <kbd>--brand</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
-					"value": "var(--main-color)",
-					"message": "Use <kbd>var(--main-color)</kbd>",
+					"value": "steelblue",
+					"message": "Встановіть значення <kbd>steelblue</kbd>",
 					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "property_value",
-					"value": { "property": "border", "expected": "var(--main-color)" },
-					"message": "Apply variable to border color",
-					"options": { "exact": false }
 				}
 			]
 		},
 		{
 			"id": "units-3",
-			"title": "Unit Calculations (calc)",
-			"description": "Use the <kbd>calc()</kbd> function to combine different units in one expression.",
-			"task": "Set the <kbd>width</kbd> of <kbd>.sized</kbd> to <kbd>calc(100% - 2rem)</kbd> and <kbd>min-height</kbd> to <kbd>calc(10vh + 1rem)</kbd>.",
-			"previewHTML": "<div class=\"sized\">Calc Demo</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }",
+			"title": "calc() Function",
+			"description": "Функція <kbd>calc()</kbd> дозволяє змішувати різні одиниці в обчисленнях. Це важливо для макетів, що поєднують фіксовані та гнучкі розміри, як макет із сайдбаром.",
+			"task": "Основний контент повинен заповнити залишок місця після сайдбару 200px. Встановіть <kbd>width: calc(100% - 200px)</kbd> на <kbd>.main</kbd>.",
+			"previewHTML": "<div class=\"layout\"><aside class=\"sidebar\">Sidebar<br>Navigation</aside><main class=\"main\"><h2>Main Content</h2><p>This area should fill the remaining width after accounting for the fixed-width sidebar.</p></main></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .layout { display: flex; gap: 1rem; } .sidebar { width: 200px; background: #1a1a2e; color: white; padding: 1rem; border-radius: 8px; flex-shrink: 0; } .main { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .main h2 { margin: 0 0 8px; } .main p { margin: 0; color: #666; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use calc for dynamic sizing */\n.sized {",
+			"codePrefix": ".main {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: calc(100% - 2rem);\n  min-height: calc(10vh + 1rem);",
+			"codeSuffix": "\n}",
+			"solution": "width: calc(100% - 200px);",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "calc", "message": "Use <kbd>calc()</kbd> function", "options": { "caseSensitive": false } },
 				{
 					"type": "regex",
-					"value": "width:\\s*calc\\(100% - 2rem\\)",
-					"message": "Width should be <kbd>calc(100% - 2rem)</kbd>",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "regex",
-					"value": "min-height:\\s*calc\\(10vh \\+ 1rem\\)",
-					"message": "Min-height should be <kbd>calc(10vh + 1rem)</kbd>",
+					"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
+					"message": "Встановіть <kbd>width: calc(100% - 200px)</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
 		},
 		{
 			"id": "units-4",
-			"title": "Viewport & Responsive Units",
-			"description": "Control layouts relative to viewport size with vw, vh, and vmin/vmax units.",
-			"task": "Give <kbd>.view</kbd> a <kbd>width</kbd> of <kbd>50vw</kbd> and <kbd>height</kbd> of <kbd>20vh</kbd>.",
-			"previewHTML": "<div class=\"view\">Viewport Box</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .view { background: #ffe0b2; }",
+			"title": "Viewport Units",
+			"description": "Одиниці viewport розміряють елементи відносно вікна браузера:<br>• <kbd>vw</kbd> – 1% ширини viewport<br>• <kbd>vh</kbd> – 1% висоти viewport<br><br>Вони ідеальні для повноекранних секцій як hero-банери.",
+			"task": "Зробіть цю hero-секцію висотою з viewport, встановивши <kbd>min-height: 100vh</kbd>.",
+			"previewHTML": "<section class=\"hero\"><h1>Welcome</h1><p>Scroll down to explore</p></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .hero { background: linear-gradient(135deg, #1a1a2e 0%, steelblue 100%); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .hero h1 { margin: 0 0 1rem; font-size: 2.5rem; } .hero p { margin: 0; opacity: 0.8; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Use viewport units */\n.view {",
+			"codePrefix": ".hero {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  width: 50vw;\n  height: 20vh;",
+			"codeSuffix": "\n}",
+			"solution": "min-height: 100vh;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "vw", "message": "Use <kbd>vw</kbd> unit", "options": { "caseSensitive": false } },
-				{ "type": "contains", "value": "vh", "message": "Use <kbd>vh</kbd> unit", "options": { "caseSensitive": false } },
-				{ "type": "property_value", "value": { "property": "width", "expected": "50vw" }, "message": "Set width to <kbd>50vw</kbd>" },
-				{ "type": "property_value", "value": { "property": "height", "expected": "20vh" }, "message": "Set height to <kbd>20vh</kbd>" }
+				{
+					"type": "property_value",
+					"value": { "property": "min-height", "expected": "100vh" },
+					"message": "Встановіть <kbd>min-height: 100vh</kbd>"
+				}
 			]
 		}
 	]

lessons/uk/06-transitions-animations.json

@@ -1,15 +1,15 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "transitions-animations",
-	"title": "CSS Animations",
-	"description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.",
+	"title": "CSS Анімації",
+	"description": "Додайте інтерактивність до інтерфейсу через плавні переходи властивостей та анімації на основі keyframes.",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "transitions-1",
 			"title": "Transitions",
-			"description": "Learn how to apply <kbd>transition</kbd> to properties for smooth changes on state changes.<br><br><pre>transition: property duration;\n/* e.g. transition: background-color 0.3s; */</pre>",
-			"task": "Add <kbd>transition: background-color 0.3s</kbd> to <kbd>.btn</kbd> so the color fades smoothly on hover.",
+			"description": "Навчіться застосовувати <kbd>transition</kbd> до властивостей для плавних змін при зміні стану.<br><br><pre>transition: property duration;\n/* напр. transition: background-color 0.3s; */</pre>",
+			"task": "Додайте <kbd>transition: background-color 0.3s</kbd>, щоб колір плавно змінювався при наведенні.",
 			"previewHTML": "<button class=\"btn\">Hover Me</button>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: black; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; } .btn:hover { background: white; color: black; }",
 			"sandboxCSS": "",
@@ -22,13 +22,13 @@
 				{
 					"type": "contains",
 					"value": "transition",
-					"message": "Use the <kbd>transition</kbd> property",
+					"message": "Використайте властивість <kbd>transition</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
 					"value": "transition:\\s*background-color\\s*0\\.3s",
-					"message": "Set <kbd>transition: background-color 0.3s</kbd>",
+					"message": "Встановіть <kbd>transition: background-color 0.3s</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -36,8 +36,8 @@
 		{
 			"id": "transitions-2",
 			"title": "Timing Funcs",
-			"description": "Explore easing functions like <kbd>ease</kbd>, <kbd>linear</kbd>, <kbd>ease-in</kbd>, <kbd>ease-out</kbd> to control animation pacing.",
-			"task": "Set <kbd>transition-timing-function</kbd> to <kbd>ease-in-out</kbd> on <kbd>.btn</kbd>.",
+			"description": "Дослідіть функції пом'якшення як <kbd>ease</kbd>, <kbd>linear</kbd>, <kbd>ease-in</kbd>, <kbd>ease-out</kbd> для контролю темпу анімації.",
+			"task": "Встановіть <kbd>transition-timing-function</kbd> на <kbd>ease-in-out</kbd>.",
 			"previewHTML": "<button class=\"btn\">Timing</button>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: navy; color: gold; padding: 0.5rem 1rem; border: none; cursor: pointer; transition: all 0.5s; } .btn:hover { background: gold; color: navy; transform: scale(1.1); }",
 			"sandboxCSS": "",
@@ -50,21 +50,21 @@
 				{
 					"type": "contains",
 					"value": "transition-timing-function",
-					"message": "Use <kbd>transition-timing-function</kbd>",
+					"message": "Використайте <kbd>transition-timing-function</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
-					"message": "Set timing to <kbd>ease-in-out</kbd>"
+					"message": "Встановіть timing на <kbd>ease-in-out</kbd>"
 				}
 			]
 		},
 		{
 			"id": "transitions-3",
 			"title": "Keyframes",
-			"description": "Create named animations using <kbd>@keyframes</kbd> and apply them via the <kbd>animation</kbd> shorthand.<br><br><pre>@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}</pre>",
-			"task": "Define a keyframe at <kbd>50%</kbd> with <kbd>transform: translateY(-20px)</kbd> and apply <kbd>animation: bounce 1s infinite</kbd> to <kbd>.ball</kbd>.",
+			"description": "Створюйте іменовані анімації використовуючи <kbd>@keyframes</kbd> та застосовуйте їх через скорочення <kbd>animation</kbd>.<br><br><pre>@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}</pre>",
+			"task": "Визначте keyframe при <kbd>50%</kbd> з <kbd>transform: translateY(-20px)</kbd> та застосуйте <kbd>animation: bounce 1s infinite</kbd> на <kbd>.ball</kbd>.",
 			"previewHTML": "<div class=\"ball\"></div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; margin: 2rem auto; }",
 			"sandboxCSS": "",
@@ -77,25 +77,25 @@
 				{
 					"type": "contains",
 					"value": "@keyframes bounce",
-					"message": "Define <kbd>@keyframes bounce</kbd>",
+					"message": "Визначте <kbd>@keyframes bounce</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
 					"value": "50%.*transform: translateY\\(-20px\\)",
-					"message": "At <kbd>50%</kbd>, use <kbd>transform: translateY(-20px)</kbd>",
+					"message": "При <kbd>50%</kbd>, використайте <kbd>transform: translateY(-20px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": "animation",
-					"message": "Use <kbd>animation</kbd> property on <kbd>.ball</kbd>",
+					"message": "Використайте властивість <kbd>animation</kbd> на <kbd>.ball</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
 					"value": "animation:.*bounce.*1s.*infinite",
-					"message": "Apply <kbd>animation: bounce 1s infinite</kbd>",
+					"message": "Застосуйте <kbd>animation: bounce 1s infinite</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -103,8 +103,8 @@
 		{
 			"id": "transitions-4",
 			"title": "Animation Properties",
-			"description": "Fine-tune animations with <kbd>animation-delay</kbd>, <kbd>animation-iteration-count</kbd>, <kbd>animation-direction</kbd>, and <kbd>animation-fill-mode</kbd>.",
-			"task": "Apply the <kbd>pulse</kbd> animation to <kbd>.box</kbd> with <kbd>animation-name: pulse</kbd>, <kbd>animation-duration: 2s</kbd>, <kbd>animation-delay: 1s</kbd>, <kbd>animation-iteration-count: 2</kbd>, and <kbd>animation-fill-mode: forwards</kbd>.",
+			"description": "Налаштуйте анімації за допомогою <kbd>animation-delay</kbd>, <kbd>animation-iteration-count</kbd>, <kbd>animation-direction</kbd> та <kbd>animation-fill-mode</kbd>.",
+			"task": "Застосуйте анімацію <kbd>pulse</kbd> до <kbd>.box</kbd> з <kbd>animation-name: pulse</kbd>, <kbd>animation-duration: 2s</kbd>, <kbd>animation-delay: 1s</kbd>, <kbd>animation-iteration-count: 2</kbd> та <kbd>animation-fill-mode: forwards</kbd>.",
 			"previewHTML": "<div class=\"box\">Pulse</div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { width: 100px; height: 100px; background: black; color: white; display: flex; align-items: center; justify-content: center; margin: 2rem auto; } @keyframes pulse { 0% { background: black; color: white; transform: scale(1); } 50% { background: white; color: black; transform: scale(1.2); } 100% { background: limegreen; color: black; transform: scale(1); } }",
 			"sandboxCSS": "",
@@ -117,27 +117,27 @@
 				{
 					"type": "property_value",
 					"value": { "property": "animation-name", "expected": "pulse" },
-					"message": "Set <kbd>animation-name: pulse</kbd>"
+					"message": "Встановіть <kbd>animation-name: pulse</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-duration", "expected": "2s" },
-					"message": "Set <kbd>animation-duration: 2s</kbd>"
+					"message": "Встановіть <kbd>animation-duration: 2s</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-delay", "expected": "1s" },
-					"message": "Set <kbd>animation-delay: 1s</kbd>"
+					"message": "Встановіть <kbd>animation-delay: 1s</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-iteration-count", "expected": "2" },
-					"message": "Set <kbd>animation-iteration-count: 2</kbd>"
+					"message": "Встановіть <kbd>animation-iteration-count: 2</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-fill-mode", "expected": "forwards" },
-					"message": "Set <kbd>animation-fill-mode: forwards</kbd>"
+					"message": "Встановіть <kbd>animation-fill-mode: forwards</kbd>"
 				}
 			]
 		}

lessons/uk/08-responsive.json

@@ -2,14 +2,14 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "responsive-design",
 	"title": "CSS Responsive Design",
-	"description": "Make your layouts adapt to different screen sizes using media queries and fluid design techniques.",
+	"description": "Адаптуйте ваші макети до різних розмірів екранів використовуючи media queries та техніки плавного дизайну.",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "responsive-1",
 			"title": "Media Queries",
-			"description": "Understand the syntax and use cases for CSS media queries to apply styles conditionally based on viewport characteristics.",
-			"task": "Write a media query with <kbd>@media (max-width: 600px)</kbd> that changes <kbd>.panel</kbd> background to <kbd>lightcoral</kbd>.",
+			"description": "Зрозумійте синтаксис та випадки використання CSS media queries для умовного застосування стилів на основі характеристик viewport.<br><br><pre>@media (max-width: 600px) {\n  .panel {\n    background: lightcoral;\n  }\n}</pre>",
+			"task": "Напишіть media query з <kbd>@media (max-width: 600px)</kbd>, яка змінює фон <kbd>.panel</kbd> на <kbd>lightcoral</kbd>.",
 			"previewHTML": "<div class=\"panel\">Resize the window</div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }",
 			"sandboxCSS": "",
@@ -22,19 +22,19 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(max-width:\\s*600px\\)",
-					"message": "Use <kbd>@media (max-width: 600px)</kbd>",
+					"message": "Використайте <kbd>@media (max-width: 600px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": ".panel",
-					"message": "Target <kbd>.panel</kbd> inside the media query",
+					"message": "Вкажіть <kbd>.panel</kbd> всередині media query",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "background", "expected": "lightcoral" },
-					"message": "Set <kbd>background: lightcoral</kbd>",
+					"message": "Встановіть <kbd>background: lightcoral</kbd>",
 					"options": { "exact": false }
 				}
 			]
@@ -42,8 +42,8 @@
 		{
 			"id": "responsive-2",
 			"title": "Fluid Type",
-			"description": "Use relative units like <kbd>vw</kbd> to make font sizes scale with the viewport width.",
-			"task": "Set <kbd>font-size: 5vw</kbd> on <kbd>.text</kbd> so it scales as the viewport changes.",
+			"description": "Використовуйте відносні одиниці як <kbd>vw</kbd>, щоб розміри шрифтів масштабувались з шириною viewport.",
+			"task": "Встановіть <kbd>font-size: 5vw</kbd>, щоб масштабувалась з viewport.",
 			"previewHTML": "<p class=\"text\">Fluid Typography</p>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
 			"sandboxCSS": "",
@@ -53,46 +53,50 @@
 			"solution": "  font-size: 5vw;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Set <kbd>font-size: 5vw</kbd>" }
+				{
+					"type": "property_value",
+					"value": { "property": "font-size", "expected": "5vw" },
+					"message": "Встановіть <kbd>font-size: 5vw</kbd>"
+				}
 			]
 		},
 		{
 			"id": "responsive-3",
-			"title": "Flex Grids",
-			"description": "Combine CSS Grid with <kbd>auto-fit</kbd> or <kbd>auto-fill</kbd> for responsive column layouts.",
-			"task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.cards</kbd>.",
-			"previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
+			"title": "Responsive Grid",
+			"description": "Поєднайте CSS Grid з <kbd>auto-fit</kbd> або <kbd>auto-fill</kbd> для адаптивних колонкових макетів, які автоматично налаштовують кількість колонок на основі доступного простору.",
+			"task": "Додайте <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> та <kbd>gap: 1rem</kbd>.",
+			"previewHTML": "<section class=\"features\"><article class=\"feature\"><h3>Fast</h3><p>Lightning quick load times</p></article><article class=\"feature\"><h3>Secure</h3><p>Enterprise-grade security</p></article><article class=\"feature\"><h3>Reliable</h3><p>99.9% uptime guaranteed</p></article><article class=\"feature\"><h3>Support</h3><p>24/7 customer service</p></article></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .feature { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .feature h3 { margin: 0 0 8px; color: steelblue; } .feature p { margin: 0; color: #666; font-size: 0.9rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Create a responsive grid */\n.cards {",
+			"codePrefix": ".features {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
+			"codeSuffix": "\n}",
+			"solution": "display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
 					"value": { "property": "display", "expected": "grid" },
-					"message": "Set <kbd>display: grid</kbd>"
+					"message": "Встановіть <kbd>display: grid</kbd>"
 				},
 				{
 					"type": "regex",
 					"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
-					"message": "Use <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
+					"message": "Використайте <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "gap", "expected": "1rem" },
-					"message": "Set <kbd>gap: 1rem</kbd>"
+					"message": "Встановіть <kbd>gap: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "responsive-4",
 			"title": "Mobile-First",
-			"description": "Adopt a mobile-first approach by writing base styles for small screens and enhancing for larger viewports.",
-			"task": "Write a media query with <kbd>@media (min-width: 768px)</kbd> that sets <kbd>.sidebar</kbd> width to <kbd>250px</kbd>.",
+			"description": "Застосуйте підхід mobile-first: пишіть базові стилі для малих екранів і розширюйте для більших viewport.",
+			"task": "Напишіть media query з <kbd>@media (min-width: 768px)</kbd>, яка встановлює ширину <kbd>.sidebar</kbd> на <kbd>250px</kbd>.",
 			"previewHTML": "<aside class=\"sidebar\">Sidebar</aside>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sidebar { background: #c8e6c9; padding: 1rem; }",
 			"sandboxCSS": "",
@@ -105,19 +109,19 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(min-width:\\s*768px\\)",
-					"message": "Use <kbd>@media (min-width: 768px)</kbd>",
+					"message": "Використайте <kbd>@media (min-width: 768px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": ".sidebar",
-					"message": "Target <kbd>.sidebar</kbd> inside media query",
+					"message": "Вкажіть <kbd>.sidebar</kbd> в media query",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "width", "expected": "250px" },
-					"message": "Set <kbd>width: 250px</kbd>",
+					"message": "Встановіть <kbd>width: 250px</kbd>",
 					"options": { "exact": false }
 				}
 			]

lessons/uk/20-html-elements.json

@@ -2,94 +2,65 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-elements",
 	"title": "HTML Block & Inline",
-	"description": "Understanding the fundamental difference between container (block) and inline elements",
+	"description": "Зрозумійте основну різницю між контейнерними (блоковими) та рядковими елементами",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "block-vs-inline-intro",
-			"title": "Block vs Inline Elements",
-			"description": "HTML elements fall into two main categories:<br><br><strong>Block elements</strong> (containers) start on a new line and take full width. Examples: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>Inline elements</strong> flow within text and only take needed width. Examples: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
-			"task": "Wrap the word <kbd>important</kbd> with <kbd>&lt;strong&gt;</kbd> tags to make it bold. Notice how the paragraph (block) takes full width while strong (inline) flows with text.",
+			"title": "Блокові vs рядкові елементи",
+			"description": "HTML елементи поділяються на дві основні категорії:<br><br><strong>Блокові елементи</strong> (контейнери) починаються з нового рядка і займають повну ширину. Приклади: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>Рядкові елементи</strong> розміщуються всередині тексту і займають лише необхідну ширину. Приклади: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
+			"task": "Оберніть слово <kbd>важливе</kbd> тегами <kbd>&lt;strong&gt;</kbd>, щоб зробити його жирним. Зверніть увагу, як абзац (блок) займає повну ширину, тоді як strong (рядковий) тече з текстом.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
 			"sandboxCSS": "",
-			"initialCode": "<p>This is a paragraph with an important word.</p>",
-			"solution": "<p>This is a paragraph with an <strong>important</strong> word.</p>",
+			"initialCode": "<p>Це абзац з важливе словом.</p>",
+			"solution": "<p>Це абзац з <strong>важливе</strong> словом.</p>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Add a <kbd>&lt;p&gt;</kbd> paragraph element"
+					"message": "Додайте елемент абзацу <kbd>&lt;p&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "p", "child": "strong" },
-					"message": "Wrap the word <kbd>important</kbd> with <kbd>&lt;strong&gt;</kbd> tags"
+					"message": "Оберніть слово <kbd>важливе</kbd> тегами <kbd>&lt;strong&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "semantic-containers",
-			"title": "Semantic Tags",
-			"description": "Modern HTML uses semantic containers that describe their content:<br><br><kbd>&lt;header&gt;</kbd> - Page or section header<br><kbd>&lt;nav&gt;</kbd> - Navigation links<br><kbd>&lt;main&gt;</kbd> - Main content area<br><kbd>&lt;section&gt;</kbd> - Thematic grouping<br><kbd>&lt;article&gt;</kbd> - Self-contained content<br><kbd>&lt;footer&gt;</kbd> - Page or section footer",
-			"task": "Create a basic page structure:<br>1. Add a <kbd>&lt;header&gt;</kbd> with an <kbd>&lt;h1&gt;</kbd> containing the text <code>My Website</code><br>2. Add a <kbd>&lt;main&gt;</kbd> element with a paragraph saying <code>Welcome to my site!</code><br>3. Add a <kbd>&lt;footer&gt;</kbd> with a paragraph saying <code>Copyright 2026</code>",
+			"title": "Семантичні теги",
+			"description": "Сучасний HTML використовує семантичні контейнери, які описують свій вміст:<br><br><kbd>&lt;header&gt;</kbd> - Заголовок сторінки або секції<br><kbd>&lt;nav&gt;</kbd> - Навігаційні посилання<br><kbd>&lt;main&gt;</kbd> - Основний вміст<br><kbd>&lt;section&gt;</kbd> - Тематичне групування<br><kbd>&lt;article&gt;</kbd> - Самостійний вміст<br><kbd>&lt;footer&gt;</kbd> - Підвал сторінки або секції",
+			"task": "Створіть базову структуру сторінки:<br>1. Додайте <kbd>&lt;header&gt;</kbd> з <kbd>&lt;h1&gt;</kbd>, що містить текст <code>Мій Сайт</code><br>2. Додайте елемент <kbd>&lt;main&gt;</kbd> з абзацом, що каже <code>Ласкаво просимо на мій сайт!</code><br>3. Додайте <kbd>&lt;footer&gt;</kbd> з абзацом, що каже <code>Copyright 2026</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<header>\n  <h1>My Website</h1>\n</header>\n<main>\n  <p>Welcome to my site!</p>\n</main>\n<footer>\n  <p>Copyright 2026</p>\n</footer>",
+			"solution": "<header>\n  <h1>Мій Сайт</h1>\n</header>\n<main>\n  <p>Ласкаво просимо на мій сайт!</p>\n</main>\n<footer>\n  <p>Copyright 2026</p>\n</footer>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "header",
-					"message": "Add a <kbd>&lt;header&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;header&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "main",
-					"message": "Add a <kbd>&lt;main&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;main&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "footer",
-					"message": "Add a <kbd>&lt;footer&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;footer&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "header", "child": "h1" },
-					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
-				}
-			]
-		},
-		{
-			"id": "div-vs-span",
-			"title": "div & span",
-			"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
-			"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
-			"sandboxCSS": "",
-			"initialCode": "The most highlighted moment was unforgettable.",
-			"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "div",
-					"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "span",
-					"message": "Add a <kbd>&lt;span&gt;</kbd> around the word <kbd>highlighted</kbd>"
-				},
-				{
-					"type": "element_text",
-					"value": { "selector": "span", "text": "highlighted" },
-					"message": "The <kbd>&lt;span&gt;</kbd> should contain the word <kbd>highlighted</kbd>"
+					"message": "Додайте заголовок <kbd>&lt;h1&gt;</kbd> всередині header"
 				}
 			]
 		}

lessons/uk/21-html-forms-basic.json

@@ -1,100 +1,100 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-basic",
-	"title": "HTML Forms",
-	"description": "Learn to create forms with various input types",
+	"title": "HTML Форми",
+	"description": "Навчіться створювати форми з різними типами полів",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "form-structure",
-			"title": "Form Structure",
-			"description": "Every form needs a <kbd>&lt;form&gt;</kbd> wrapper. Inside, use <kbd>&lt;label&gt;</kbd> to describe inputs and <kbd>&lt;input&gt;</kbd> for user data entry.<br><br>The <kbd>for</kbd> attribute on labels should match the <kbd>id</kbd> on inputs for accessibility.",
-			"task": "Create a form with:<br>1. A <kbd>&lt;label&gt;</kbd> with the text <code>Name:</code> and <kbd>for=\"name\"</kbd> attribute<br>2. A text <kbd>&lt;input&gt;</kbd> with <kbd>id=\"name\"</kbd> and <kbd>name=\"name\"</kbd> attributes",
+			"title": "Структура форми",
+			"description": "Кожна форма потребує обгортки <kbd>&lt;form&gt;</kbd>. Всередині використовуйте <kbd>&lt;label&gt;</kbd> для опису полів та <kbd>&lt;input&gt;</kbd> для введення даних.<br><br>Атрибут <kbd>for</kbd> у label має відповідати <kbd>id</kbd> полів для доступності.",
+			"task": "Створіть форму з:<br>1. <kbd>&lt;label&gt;</kbd> з текстом <code>Ім'я:</code> та атрибутом <kbd>for=\"name\"</kbd><br>2. Текстовим <kbd>&lt;input&gt;</kbd> з атрибутами <kbd>id=\"name\"</kbd> та <kbd>name=\"name\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<form>\n  <label for=\"name\">Name:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Ім'я:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Wrap everything in a <kbd>&lt;form&gt;</kbd> element"
+					"message": "Оберніть все елементом <kbd>&lt;form&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for your input"
+					"message": "Додайте <kbd>&lt;label&gt;</kbd> для вашого поля"
 				},
 				{
 					"type": "element_exists",
 					"value": "input",
-					"message": "Add an <kbd>&lt;input&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;input&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "label", "attr": "for", "value": null },
-					"message": "Add a <kbd>for</kbd> attribute to your label"
+					"message": "Додайте атрибут <kbd>for</kbd> до вашого label"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "id", "value": null },
-					"message": "Add an <kbd>id</kbd> attribute to your input"
+					"message": "Додайте атрибут <kbd>id</kbd> до вашого поля"
 				}
 			]
 		},
 		{
 			"id": "input-types",
-			"title": "Input Types",
-			"description": "Different input types provide appropriate keyboards and validation:<br><br><kbd>type=\"text\"</kbd> - General text<br><kbd>type=\"email\"</kbd> - Email with @ validation<br><kbd>type=\"password\"</kbd> - Hidden characters<br><kbd>type=\"number\"</kbd> - Numeric keyboard<br><kbd>type=\"tel\"</kbd> - Phone keyboard",
-			"task": "Create a login form with two fields:<br>1. An email field: <kbd>&lt;label for=\"email\"&gt;Email:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. A password field: <kbd>&lt;label for=\"password\"&gt;Password:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
+			"title": "Типи полів",
+			"description": "Різні типи полів надають відповідні клавіатури та валідацію:<br><br><kbd>type=\"text\"</kbd> - Загальний текст<br><kbd>type=\"email\"</kbd> - Email з валідацією @<br><kbd>type=\"password\"</kbd> - Приховані символи<br><kbd>type=\"number\"</kbd> - Цифрова клавіатура<br><kbd>type=\"tel\"</kbd> - Телефонна клавіатура",
+			"task": "Створіть форму входу з двома полями:<br>1. Поле email: <kbd>&lt;label for=\"email\"&gt;Email:&lt;/label&gt;</kbd> та <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. Поле пароля: <kbd>&lt;label for=\"password\"&gt;Пароль:&lt;/label&gt;</kbd> та <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  \n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
+			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Пароль:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "input[type='email']",
-					"message": "Add an input with type=\"email\""
+					"message": "Додайте поле з type=\"email\""
 				},
 				{
 					"type": "element_exists",
 					"value": "input[type='password']",
-					"message": "Add an input with type=\"password\""
+					"message": "Додайте поле з type=\"password\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "label", "min": 2 },
-					"message": "Add labels for both inputs"
+					"message": "Додайте label для обох полів"
 				}
 			]
 		},
 		{
 			"id": "submit-button",
-			"title": "Submit Button",
-			"description": "Forms need a way to submit data. Use:<br><br><kbd>&lt;button type=\"submit\"&gt;</kbd> - Preferred, flexible content<br><kbd>&lt;input type=\"submit\"&gt;</kbd> - Simple text-only button<br><br>The button text should be action-oriented (e.g., <code>Sign In</code>, 'Register', 'Send').",
-			"task": "Add a submit button to the form with the text <code>Sign In</code>.",
+			"title": "Кнопка відправки",
+			"description": "Форми потребують способу відправки даних. Використовуйте:<br><br><kbd>&lt;button type=\"submit\"&gt;</kbd> - Переважно, гнучкий вміст<br><kbd>&lt;input type=\"submit\"&gt;</kbd> - Простий текстовий кнопка<br><br>Текст кнопки має бути орієнтованим на дію (напр. <code>Увійти</code>, 'Зареєструватись', 'Надіслати').",
+			"task": "Додайте кнопку відправки до форми з текстом <code>Увійти</code>.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">Sign In</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Пароль:</label>\n  <input type=\"password\" id=\"password\">\n  \n</form>",
+			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Пароль:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">Увійти</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "button[type='submit'], input[type='submit']",
-					"message": "Add a submit button to your form"
+					"message": "Додайте кнопку відправки до форми"
 				},
 				{
 					"type": "element_text",
-					"value": { "selector": "button", "text": "Sign In" },
-					"message": "The button should say <kbd>Sign In</kbd>"
+					"value": { "selector": "button", "text": "Увійти" },
+					"message": "Кнопка має відображати <kbd>Увійти</kbd>"
 				}
 			]
 		}

lessons/uk/22-html-forms-validation.json

@@ -1,110 +1,32 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-validation",
-	"title": "HTML Validation",
-	"description": "Learn HTML5 built-in form validation attributes",
+	"title": "Валідація форм",
+	"description": "Використовуйте вбудовану валідацію HTML5 для кращого досвіду користувача",
 	"mode": "html",
-	"difficulty": "intermediate",
+	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "required-fields",
-			"title": "Required Fields",
-			"description": "The <kbd>required</kbd> attribute prevents form submission if the field is empty.<br><br>Add it to any input that must be filled:<br><kbd>&lt;input type=\"text\" required&gt;</kbd><br><br>The browser shows a validation message automatically.",
-			"task": "Make both the name and email fields required by adding the <kbd>required</kbd> attribute.",
+			"title": "Обов'язкові поля",
+			"description": "Атрибут <kbd>required</kbd> запобігає відправці форми, якщо поле порожнє. Браузер автоматично показує повідомлення валідації - без JavaScript!<br><br>Додайте його до будь-якого поля, яке має бути заповнене:<br><kbd>&lt;input type=\"text\" required&gt;</kbd>",
+			"task": "Зробіть обидва поля (ім'я та email) обов'язковими, додавши атрибут <kbd>required</kbd> до кожного поля.",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 320px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } input:focus { outline: 2px solid steelblue; border-color: transparent; } button { margin-top: 20px; padding: 10px 20px; background: steelblue; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Submit</button>\n</form>",
-			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Submit</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"name\">Ім'я *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Надіслати</button>\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Ім'я *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Надіслати</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='name']", "attr": "required", "value": true },
-					"message": "Add the <kbd>required</kbd> attribute to the name input"
+					"message": "Додайте <kbd>required</kbd> до поля імені"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='email']", "attr": "required", "value": true },
-					"message": "Add the <kbd>required</kbd> attribute to the email input"
-				}
-			]
-		},
-		{
-			"id": "input-constraints",
-			"title": "Constraints",
-			"description": "Control what users can enter:<br><br><kbd>minlength</kbd> / <kbd>maxlength</kbd> - Text length limits<br><kbd>min</kbd> / <kbd>max</kbd> - Number range<br><kbd>pattern</kbd> - Regex pattern matching<br><kbd>placeholder</kbd> - Hint text (not a label!)",
-			"task": "Add validation to the password input:<br>1. Add <kbd>minlength=\"8\"</kbd> for minimum length<br>2. Add <kbd>maxlength=\"20\"</kbd> for maximum length<br>3. Add <kbd>placeholder=\"Enter password\"</kbd> as a hint",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } small { display: block; font-size: 12px; color: #666; margin-top: 4px; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"solution": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
-					"message": "Add <kbd>minlength</kbd>=\"8\" to the password input"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
-					"message": "Add <kbd>maxlength</kbd>=\"20\" to the password input"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "input[type='password']", "attr": "placeholder", "value": null },
-					"message": "Add a <kbd>placeholder</kbd> to hint what to enter"
-				}
-			]
-		},
-		{
-			"id": "complete-registration",
-			"title": "Full Form",
-			"description": "Build a complete registration form with all validation concepts:<br><br>- Required fields marked with *<br>- Email validation (use type=\"email\")<br>- Password with length constraints<br>- Terms checkbox (required)<br>- Submit button",
-			"task": "Complete the registration form. Add required attributes, proper input types, and validation constraints.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } input[type='checkbox'] { width: auto; margin-right: 8px; vertical-align: middle; } label:has(input[type='checkbox']) { display: flex; align-items: center; font-weight: normal; } button { width: 100%; margin-top: 20px; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
-			"sandboxCSS": "",
-			"initialCode": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\">\n  \n  <label for=\"email\">Email *</label>\n  <input id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password *</label>\n  <input id=\"password\" name=\"password\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"solution": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Password *</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#fullname", "attr": "required", "value": true },
-					"message": "Make the full name field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "type", "value": "email" },
-					"message": "Set the email input <kbd>type=\"email\"</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#email", "attr": "required", "value": true },
-					"message": "Make the email field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "type", "value": "password" },
-					"message": "Set the password input <kbd>type=\"password\"</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "required", "value": true },
-					"message": "Make the password field <kbd>required</kbd>"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#password", "attr": "minlength", "value": "8" },
-					"message": "Add <kbd>minlength</kbd>=\"8\" to password"
-				},
-				{
-					"type": "attribute_value",
-					"value": { "selector": "#terms", "attr": "required", "value": true },
-					"message": "Make the terms checkbox <kbd>required</kbd>"
+					"message": "Додайте <kbd>required</kbd> до поля email"
 				}
 			]
 		}

lessons/uk/23-html-details-summary.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-details-summary",
 	"title": "HTML Details & Summary",
-	"description": "Create expandable content sections without JavaScript",
+	"description": "Створюйте розгортувані секції без JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "details-summary-basic",
-			"title": "First Widget",
-			"description": "The <kbd>&lt;details&gt;</kbd> element creates a collapsible section. The <kbd>&lt;summary&gt;</kbd> provides the clickable label.<br><br>Click the summary to toggle the hidden content - no JavaScript needed!",
-			"task": "Create a <kbd>&lt;details&gt;</kbd> element with:<br>1. A <kbd>&lt;summary&gt;</kbd> saying <code>Click to reveal</code><br>2. A <kbd>&lt;p&gt;</kbd> with the text <code>This content was hidden!</code>",
+			"title": "Перший віджет",
+			"description": "Елемент <kbd>&lt;details&gt;</kbd> створює згортувану секцію. Елемент <kbd>&lt;summary&gt;</kbd> надає клікабельний заголовок.<br><br>Натисніть на summary, щоб показати прихований вміст - без JavaScript!",
+			"task": "Створіть елемент <kbd>&lt;details&gt;</kbd> з:<br>1. Елементом <kbd>&lt;summary&gt;</kbd> з текстом <code>Click to reveal</code><br>2. Елементом <kbd>&lt;p&gt;</kbd> з текстом <code>This content was hidden!</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "details",
-					"message": "Add a <kbd>&lt;details&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;details&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "summary",
-					"message": "Add a <kbd>&lt;summary&gt;</kbd> inside the details"
+					"message": "Додайте <kbd>&lt;summary&gt;</kbd> всередину details"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "summary" },
-					"message": "The <kbd>&lt;summary&gt;</kbd> must be inside <kbd>&lt;details&gt;</kbd>"
+					"message": "Елемент <kbd>&lt;summary&gt;</kbd> має бути всередині <kbd>&lt;details&gt;</kbd>"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "p" },
-					"message": "Add a <kbd>&lt;p&gt;</kbd> inside <kbd>&lt;details&gt;</kbd> for the hidden content"
+					"message": "Додайте <kbd>&lt;p&gt;</kbd> всередину <kbd>&lt;details&gt;</kbd> для прихованого вмісту"
 				}
 			]
 		},
 		{
 			"id": "details-open-attribute",
-			"title": "Pre-expanded Details",
-			"description": "By default, <kbd>&lt;details&gt;</kbd> is closed. Add the <kbd>open</kbd> attribute to show the content initially.<br><br>This is a boolean attribute - just add <kbd>open</kbd> without a value.",
-			"task": "Add the <kbd>open</kbd> attribute to the <kbd>&lt;details&gt;</kbd> element to show the content by default.",
+			"title": "Розгорнуто за замовчуванням",
+			"description": "За замовчуванням <kbd>&lt;details&gt;</kbd> закритий. Додайте атрибут <kbd>open</kbd>, щоб показати вміст спочатку.<br><br>Це булевий атрибут - просто додайте <kbd>open</kbd> без значення.",
+			"task": "Додайте атрибут <kbd>open</kbd> до елемента <kbd>&lt;details&gt;</kbd>, щоб показати вміст за замовчуванням.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; background: #f9f9f9; } summary { font-weight: 600; cursor: pointer; } details p { margin-top: 15px; color: #666; }",
 			"sandboxCSS": "",
@@ -55,15 +55,15 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "details", "attr": "open", "value": true },
-					"message": "Add the <kbd>open</kbd> attribute to <kbd>&lt;details&gt;</kbd>"
+					"message": "Додайте атрибут <kbd>open</kbd> до <kbd>&lt;details&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "faq-accordion",
-			"title": "FAQ Accordion",
-			"description": "Multiple <kbd>&lt;details&gt;</kbd> elements create an accordion-style FAQ. Each question can be expanded independently.<br><br><b>Pro tip:</b> Type <kbd>details*3&gt;summary+p</kbd> and press Tab for Emmet expansion. <kbd>*3</kbd> creates 3 elements, <kbd>&gt;</kbd> nests inside, <kbd>+</kbd> adds siblings.",
-			"task": "Create an FAQ section with:<br>1. An <kbd>&lt;h1&gt;</kbd> saying <code>Frequently Asked Questions</code><br>2. Three <kbd>&lt;details&gt;</kbd> elements, each with a question in <kbd>&lt;summary&gt;</kbd> and an answer in <kbd>&lt;p&gt;</kbd>",
+			"title": "FAQ акордеон",
+			"description": "Кілька елементів <kbd>&lt;details&gt;</kbd> створюють FAQ у стилі акордеону. Кожне питання можна розгортати незалежно.<br><br><b>Порада:</b> Введіть <kbd>details*3&gt;summary+p</kbd> і натисніть Tab для розгортання Emmet. <kbd>*3</kbd> створює 3 елементи, <kbd>&gt;</kbd> вкладає всередину, <kbd>+</kbd> додає сусідні.",
+			"task": "Створіть секцію FAQ з:<br>1. Заголовком <kbd>&lt;h1&gt;</kbd> з текстом <code>Frequently Asked Questions</code><br>2. Трьома елементами <kbd>&lt;details&gt;</kbd>, кожен з питанням у <kbd>&lt;summary&gt;</kbd> та відповіддю у <kbd>&lt;p&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
 			"sandboxCSS": "",
@@ -74,22 +74,22 @@
 				{
 					"type": "element_exists",
 					"value": "h1",
-					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading for the FAQ title"
+					"message": "Додайте заголовок <kbd>&lt;h1&gt;</kbd> для назви FAQ"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "details", "min": 3 },
-					"message": "Create at least 3 <kbd>&lt;details&gt;</kbd> elements for the FAQ"
+					"message": "Створіть принаймні 3 елементи <kbd>&lt;details&gt;</kbd> для FAQ"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "summary", "min": 3 },
-					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <kbd>&lt;summary&gt;</kbd> for the question"
+					"message": "Кожен <kbd>&lt;details&gt;</kbd> потребує <kbd>&lt;summary&gt;</kbd> для питання"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "details p", "min": 3 },
-					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <kbd>&lt;p&gt;</kbd> for the answer"
+					"message": "Кожен <kbd>&lt;details&gt;</kbd> потребує <kbd>&lt;p&gt;</kbd> для відповіді"
 				}
 			]
 		}

lessons/uk/24-html-progress-meter.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-progress-meter",
 	"title": "HTML Progress & Meter",
-	"description": "Display completion status and scalar measurements natively",
+	"description": "Відображайте статус виконання та вимірювання нативно",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "progress-basic",
-			"title": "Progress Bars",
-			"description": "The <kbd>&lt;progress&gt;</kbd> element shows task completion. Use <kbd>value</kbd> for current progress and <kbd>max</kbd> for the total.<br><br><b>Note:</b> This is not a self-closing tag! Write <kbd>&lt;progress&gt;...&lt;/progress&gt;</kbd> with fallback text inside for older browsers.",
-			"task": "Create a progress bar showing 70% completion:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Download:</code><br>2. Add a <kbd>&lt;progress&gt;</kbd> with <kbd>value=\"70\"</kbd> and <kbd>max=\"100\"</kbd>",
+			"title": "Смуги прогресу",
+			"description": "Елемент <kbd>&lt;progress&gt;</kbd> показує виконання завдання. Використовуйте <kbd>value</kbd> для поточного прогресу та <kbd>max</kbd> для загального.<br><br><b>Примітка:</b> Це не самозакриваючий тег! Пишіть <kbd>&lt;progress&gt;...&lt;/progress&gt;</kbd> з резервним текстом всередині для старих браузерів.",
+			"task": "Створіть смугу прогресу, що показує 70% виконання:<br>1. Додайте <kbd>&lt;label&gt;</kbd> з текстом <code>Download:</code><br>2. Додайте <kbd>&lt;progress&gt;</kbd> з <kbd>value=\"70\"</kbd> та <kbd>max=\"100\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;progress&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "value", "value": "70" },
-					"message": "Set <kbd>value=</kbd>\"70\" on the progress element"
+					"message": "Встановіть <kbd>value=</kbd>\"70\" в елементі progress"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "progress", "attr": "max", "value": "100" },
-					"message": "Set <kbd>max=</kbd>\"100\" on the progress element"
+					"message": "Встановіть <kbd>max=</kbd>\"100\" в елементі progress"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the progress bar"
+					"message": "Додайте <kbd>&lt;label&gt;</kbd> для смуги прогресу"
 				}
 			]
 		},
 		{
 			"id": "progress-indeterminate",
-			"title": "Indeterminate Progress",
-			"description": "When progress is unknown (like loading), omit the <kbd>value</kbd> attribute. This creates an animated indeterminate state.<br><br>Useful for network requests or processes with unknown duration.",
-			"task": "Create a loading indicator:<br>1. Add a <kbd>&lt;p&gt;</kbd> saying <code>Loading...</code><br>2. Add a <kbd>&lt;progress&gt;</kbd> without a value attribute",
+			"title": "Невизначений прогрес",
+			"description": "Коли прогрес невідомий (як при завантаженні), опустіть атрибут <kbd>value</kbd>. Це створює анімований невизначений стан.<br><br>Корисно для мережевих запитів або процесів з невідомою тривалістю.",
+			"task": "Створіть індикатор завантаження:<br>1. Додайте <kbd>&lt;p&gt;</kbd> з текстом <code>Loading...</code><br>2. Додайте <kbd>&lt;progress&gt;</kbd> без атрибута value",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
 			"sandboxCSS": "",
@@ -55,20 +55,20 @@
 				{
 					"type": "element_exists",
 					"value": "progress",
-					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;progress&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "p",
-					"message": "Add a <kbd>&lt;p&gt;</kbd> with loading text"
+					"message": "Додайте <kbd>&lt;p&gt;</kbd> з текстом завантаження"
 				}
 			]
 		},
 		{
 			"id": "meter-gauge",
-			"title": "Meter Gauges",
-			"description": "The <kbd>&lt;meter&gt;</kbd> element displays a scalar value within a range. Use it for measurements like disk space, battery, or ratings.<br><br>Set <kbd>low</kbd>, <kbd>high</kbd>, and <kbd>optimum</kbd> to define good/bad ranges - the browser colors it accordingly!",
-			"task": "Create a battery level meter:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Battery:</code><br>2. Add a <kbd>&lt;meter&gt;</kbd> with:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> and <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> and <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
+			"title": "Шкали meter",
+			"description": "Елемент <kbd>&lt;meter&gt;</kbd> відображає скалярне значення в діапазоні. Використовуйте його для вимірювань, як-от місце на диску, батарея або рейтинги.<br><br>Встановіть <kbd>low</kbd>, <kbd>high</kbd> та <kbd>optimum</kbd>, щоб визначити хороші/погані діапазони - браузер забарвлює відповідно!",
+			"task": "Створіть шкалу рівня батареї:<br>1. Додайте <kbd>&lt;label&gt;</kbd> з текстом <code>Battery:</code><br>2. Додайте <kbd>&lt;meter&gt;</kbd> з:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> та <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> та <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
 			"sandboxCSS": "",
@@ -79,22 +79,42 @@
 				{
 					"type": "element_exists",
 					"value": "meter",
-					"message": "Add a <kbd>&lt;meter&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;meter&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "value", "value": "0.8" },
-					"message": "Set <kbd>value=</kbd>\"0.8\" on the meter"
+					"message": "Встановіть <kbd>value=</kbd>\"0.8\" в meter"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "min", "value": "0" },
+					"message": "Встановіть <kbd>min=</kbd>\"0\" в meter"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "max", "value": "1" },
+					"message": "Встановіть <kbd>max=</kbd>\"1\" в meter"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "meter", "attr": "low", "value": "0.2" },
-					"message": "Set <kbd>low=</kbd>\"0.2\" to define the low threshold"
+					"message": "Встановіть <kbd>low=</kbd>\"0.2\", щоб визначити низький поріг"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "high", "value": "0.8" },
+					"message": "Встановіть <kbd>high=</kbd>\"0.8\", щоб визначити високий поріг"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "optimum", "value": "1" },
+					"message": "Встановіть <kbd>optimum=</kbd>\"1\", щоб вказати оптимальне значення"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the meter"
+					"message": "Додайте <kbd>&lt;label&gt;</kbd> для meter"
 				}
 			]
 		}

lessons/uk/25-html-datalist.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-datalist",
 	"title": "Datalist",
-	"description": "Provide suggestions for text inputs without JavaScript",
+	"description": "Додайте підказки для текстових полів без JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "datalist-basic",
-			"title": "Input with Suggestions",
-			"description": "The <kbd>&lt;datalist&gt;</kbd> element provides autocomplete suggestions for inputs. Connect it using the <kbd>list</kbd> attribute on the input matching the datalist's <kbd>id</kbd>.<br><br>Users can still type freely - suggestions are just helpers!",
-			"task": "Create a browser selector:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Browser:</code><br>2. Add an <kbd>&lt;input&gt;</kbd> with <kbd>list=\"browsers\"</kbd><br>3. Add a <kbd>&lt;datalist id=\"browsers\"&gt;</kbd> with options for Chrome, Firefox, and Safari",
+			"title": "Поле з підказками",
+			"description": "Елемент <kbd>&lt;datalist&gt;</kbd> надає підказки автозаповнення для полів. З'єднайте його за допомогою атрибута <kbd>list</kbd> на полі, що відповідає <kbd>id</kbd> datalist.<br><br>Користувачі все одно можуть вводити вільно - підказки лише помічники!",
+			"task": "Створіть селектор браузера:<br>1. Додайте <kbd>&lt;label&gt;</kbd> з текстом <code>Браузер:</code><br>2. Додайте <kbd>&lt;input&gt;</kbd> з <kbd>list=\"browsers\"</kbd><br>3. Додайте <kbd>&lt;datalist id=\"browsers\"&gt;</kbd> з варіантами Chrome, Firefox та Safari",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; }",
 			"sandboxCSS": "",
@@ -21,30 +21,30 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Add a <kbd>&lt;datalist&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "browsers" },
-					"message": "Connect the input to datalist using <kbd>list=</kbd>\"browsers\""
+					"message": "З'єднайте поле з datalist за допомогою <kbd>list=</kbd>\"browsers\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "option", "min": 3 },
-					"message": "Add at least 3 <kbd>&lt;option&gt;</kbd> elements inside <kbd>&lt;datalist&gt;</kbd>"
+					"message": "Додайте принаймні 3 елементи <kbd>&lt;option&gt;</kbd> всередину <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "label",
-					"message": "Add a <kbd>&lt;label&gt;</kbd> for the input"
+					"message": "Додайте <kbd>&lt;label&gt;</kbd> для поля"
 				}
 			]
 		},
 		{
 			"id": "datalist-countries",
-			"title": "Country Selector",
-			"description": "Datalists work great for long lists like countries. Users can type to filter suggestions instantly.<br><br>The <kbd>value</kbd> attribute is what gets entered, and you can add display text after it.",
-			"task": "Create a country input:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying <code>Country:</code><br>2. Add an <kbd>&lt;input&gt;</kbd> with <kbd>list=\"countries\"</kbd><br>3. Add a <kbd>&lt;datalist id=\"countries\"&gt;</kbd> with at least 4 country options",
+			"title": "Селектор країн",
+			"description": "Datalist чудово працює для довгих списків, як країни. Користувачі можуть вводити, щоб миттєво фільтрувати підказки.<br><br>Атрибут <kbd>value</kbd> - це те, що вводиться, і ви можете додати текст для відображення після нього.",
+			"task": "Створіть поле країни:<br>1. Додайте <kbd>&lt;label&gt;</kbd> з текстом <code>Країна:</code><br>2. Додайте <kbd>&lt;input&gt;</kbd> з <kbd>list=\"countries\"</kbd><br>3. Додайте <kbd>&lt;datalist id=\"countries\"&gt;</kbd> з принаймні 4 варіантами країн",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 30px; background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } label { display: block; margin-bottom: 10px; font-weight: 600; color: #00695c; } input { width: 100%; padding: 12px 15px; border: 2px solid #26a69a; border-radius: 8px; font-size: 16px; background: white; } input:focus { outline: none; border-color: #00695c; box-shadow: 0 0 0 3px rgba(38,166,154,0.2); }",
 			"sandboxCSS": "",
@@ -55,22 +55,22 @@
 				{
 					"type": "element_exists",
 					"value": "datalist",
-					"message": "Add a <kbd>&lt;datalist&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "datalist", "attr": "id", "value": "countries" },
-					"message": "Set <kbd>id=</kbd>\"countries\" on the datalist"
+					"message": "Встановіть <kbd>id=</kbd>\"countries\" в datalist"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "countries" },
-					"message": "Connect the input using <kbd>list=</kbd>\"countries\""
+					"message": "З'єднайте поле за допомогою <kbd>list=</kbd>\"countries\""
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "option", "min": 4 },
-					"message": "Add at least 4 country options"
+					"message": "Додайте принаймні 4 варіанти країн"
 				}
 			]
 		}

lessons/uk/27-html-dialog.json

@@ -1,16 +1,16 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-dialog",
-	"title": "Dialogs",
-	"description": "Create modal dialogs without JavaScript libraries",
+	"title": "Діалоги",
+	"description": "Створюйте модальні діалоги без JavaScript бібліотек",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "dialog-basic",
-			"title": "Open Dialog",
-			"description": "The <kbd>&lt;dialog&gt;</kbd> element creates a native modal. Add the <kbd>open</kbd> attribute to show it.<br><br>Use <kbd>&lt;form method=\"dialog\"&gt;</kbd> inside to close it when the form submits - no JavaScript needed!",
-			"task": "Create a dialog with:<br>1. The <kbd>open</kbd> attribute to show it<br>2. An <kbd>&lt;h2&gt;</kbd> saying <code>Welcome!</code><br>3. A <kbd>&lt;p&gt;</kbd> with a greeting message<br>4. A <kbd>&lt;form method=\"dialog\"&gt;</kbd> with a close button",
+			"title": "Відкрити діалог",
+			"description": "Елемент <kbd>&lt;dialog&gt;</kbd> створює нативне модальне вікно. Додайте атрибут <kbd>open</kbd>, щоб показати його.<br><br>Використовуйте <kbd>&lt;form method=\"dialog\"&gt;</kbd> всередині, щоб закрити його при відправці форми - без JavaScript!",
+			"task": "Створіть діалог з:<br>1. Атрибутом <kbd>open</kbd> для відображення<br>2. Елементом <kbd>&lt;h2&gt;</kbd> з текстом <code>Вітаємо!</code><br>3. Елементом <kbd>&lt;p&gt;</kbd> з привітальним повідомленням<br>4. Елементом <kbd>&lt;form method=\"dialog\"&gt;</kbd> з кнопкою закриття",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: #f5f5f5; } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 400px; } dialog::backdrop { background: rgba(0,0,0,0.5); } dialog h2 { margin: 0 0 15px 0; color: #1976d2; } dialog p { color: #666; margin: 0 0 20px 0; } dialog button { background: #1976d2; color: white; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-size: 16px; } dialog button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
@@ -21,35 +21,35 @@
 				{
 					"type": "element_exists",
 					"value": "dialog",
-					"message": "Add a <kbd>&lt;dialog&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;dialog&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "dialog", "attr": "open", "value": true },
-					"message": "Add the <kbd>open</kbd> attribute to show the dialog"
+					"message": "Додайте атрибут <kbd>open</kbd> щоб показати діалог"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog h2",
-					"message": "Add an <kbd>&lt;h2&gt;</kbd> heading inside the dialog"
+					"message": "Додайте заголовок <kbd>&lt;h2&gt;</kbd> всередині діалогу"
 				},
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Add a <kbd>&lt;form method=\"dialog\"&gt;</kbd> for closing"
+					"message": "Додайте <kbd>&lt;form method=\"dialog\"&gt;</kbd> для закриття"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog button",
-					"message": "Add a close button inside the form"
+					"message": "Додайте кнопку закриття всередині форми"
 				}
 			]
 		},
 		{
 			"id": "dialog-form",
-			"title": "Dialog + Form",
-			"description": "Dialogs can contain full forms. The <kbd>method=\"dialog\"</kbd> makes the form close the dialog on submit instead of sending data.<br><br>This pattern is perfect for confirmation dialogs, quick inputs, or settings panels.",
-			"task": "Create a confirmation dialog:<br>1. Add <kbd>open</kbd> to show it<br>2. An <kbd>&lt;h2&gt;</kbd> saying <code>Confirm Delete</code><br>3. A <kbd>&lt;p&gt;</kbd> asking <code>Are you sure?</code><br>4. A <kbd>&lt;form method=\"dialog\"&gt;</kbd> with Cancel and Delete buttons",
+			"title": "Діалог + Форма",
+			"description": "Діалоги можуть містити повні форми. <kbd>method=\"dialog\"</kbd> змушує форму закривати діалог при відправці замість відправки даних.<br><br>Цей шаблон ідеальний для діалогів підтвердження, швидкого введення або панелей налаштувань.",
+			"task": "Створіть діалог підтвердження:<br>1. Додайте <kbd>open</kbd> для відображення<br>2. Елемент <kbd>&lt;h2&gt;</kbd> з текстом <code>Підтвердити видалення</code><br>3. Елемент <kbd>&lt;p&gt;</kbd> з питанням <code>Ви впевнені?</code><br>4. Елемент <kbd>&lt;form method=\"dialog\"&gt;</kbd> з кнопками Скасувати та Видалити",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 350px; text-align: center; } dialog h2 { margin: 0 0 10px 0; color: #c62828; } dialog p { color: #666; margin: 0 0 20px 0; } dialog form { display: flex; gap: 10px; justify-content: center; } dialog button { padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; border: none; } dialog button:first-child { background: #e0e0e0; color: #333; } dialog button:last-child { background: #c62828; color: white; } dialog button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
@@ -60,22 +60,22 @@
 				{
 					"type": "element_exists",
 					"value": "dialog[open]",
-					"message": "Add a <kbd>&lt;dialog&gt;</kbd> with the open attribute"
+					"message": "Додайте <kbd>&lt;dialog&gt;</kbd> з атрибутом open"
 				},
 				{
 					"type": "element_exists",
 					"value": "dialog h2",
-					"message": "Add a heading to the dialog"
+					"message": "Додайте заголовок до діалогу"
 				},
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Add a <kbd>&lt;form method=\"dialog\"&gt;</kbd> for the buttons"
+					"message": "Додайте <kbd>&lt;form method=\"dialog\"&gt;</kbd> для кнопок"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "dialog button", "min": 2 },
-					"message": "Add at least 2 buttons (Cancel and Confirm)"
+					"message": "Додайте принаймні 2 кнопки (Скасувати та Підтвердити)"
 				}
 			]
 		}

lessons/uk/28-html-forms-fieldset.json

@@ -1,16 +1,16 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-fieldset",
-	"title": "Fieldsets",
-	"description": "Group form controls with fieldset and legend elements",
+	"title": "Fieldset",
+	"description": "Групуйте елементи форми за допомогою fieldset та legend",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "fieldset-basic",
-			"title": "Grouping with Fieldset",
-			"description": "The <kbd>&lt;fieldset&gt;</kbd> element groups related form controls together. Add a <kbd>&lt;legend&gt;</kbd> as the first child to give the group a title.<br><br>This helps with accessibility and visual organization of complex forms.",
-			"task": "Create a form with a fieldset:<br>1. A <kbd>&lt;form&gt;</kbd> element<br>2. A <kbd>&lt;fieldset&gt;</kbd> inside<br>3. A <kbd>&lt;legend&gt;</kbd> saying <code>Personal Info</code><br>4. Two labeled inputs for name and email",
+			"title": "Групування з Fieldset",
+			"description": "Елемент <kbd>&lt;fieldset&gt;</kbd> групує пов'язані елементи форми разом. Додайте <kbd>&lt;legend&gt;</kbd> як перший дочірній елемент, щоб дати групі заголовок.<br><br>Це допомагає з доступністю та візуальною організацією складних форм.",
+			"task": "Створіть форму з fieldset:<br>1. Елемент <kbd>&lt;form&gt;</kbd><br>2. Елемент <kbd>&lt;fieldset&gt;</kbd> всередині<br>3. Елемент <kbd>&lt;legend&gt;</kbd> з текстом <code>Особисті дані</code><br>4. Два підписаних поля для імені та email",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
 			"sandboxCSS": "",
@@ -21,35 +21,35 @@
 				{
 					"type": "element_exists",
 					"value": "form",
-					"message": "Add a <kbd>&lt;form&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;form&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Add a <kbd>&lt;fieldset&gt;</kbd> inside the form"
+					"message": "Додайте <kbd>&lt;fieldset&gt;</kbd> всередину форми"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Add a <kbd>&lt;legend&gt;</kbd> to title your fieldset"
+					"message": "Додайте <kbd>&lt;legend&gt;</kbd> як заголовок fieldset"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "label", "min": 2 },
-					"message": "Add at least 2 labels"
+					"message": "Додайте принаймні 2 мітки"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "input", "min": 2 },
-					"message": "Add at least 2 input fields"
+					"message": "Додайте принаймні 2 поля введення"
 				}
 			]
 		},
 		{
 			"id": "fieldset-textarea",
-			"title": "Adding Textarea",
-			"description": "The <kbd>&lt;textarea&gt;</kbd> element creates a multi-line text input, perfect for longer content like messages or descriptions.<br><br>Use <kbd>rows</kbd> and <kbd>cols</kbd> attributes to set default size.",
-			"task": "Create a contact form:<br>1. A <kbd>&lt;fieldset&gt;</kbd> with <kbd>&lt;legend&gt;</kbd> <code>Contact Us</code><br>2. A labeled <kbd>&lt;input&gt;</kbd> for email<br>3. A labeled <kbd>&lt;textarea&gt;</kbd> for the message<br>4. A submit <kbd>&lt;button&gt;</kbd>",
+			"title": "Додавання Textarea",
+			"description": "Елемент <kbd>&lt;textarea&gt;</kbd> створює багаторядкове текстове поле, ідеальне для довшого вмісту як повідомлення або описи.<br><br>Використовуйте атрибути <kbd>rows</kbd> та <kbd>cols</kbd> для встановлення розміру за замовчуванням.",
+			"task": "Створіть контактну форму:<br>1. Елемент <kbd>&lt;fieldset&gt;</kbd> з <kbd>&lt;legend&gt;</kbd> <code>Зв'яжіться з нами</code><br>2. Підписане <kbd>&lt;input&gt;</kbd> для email<br>3. Підписане <kbd>&lt;textarea&gt;</kbd> для повідомлення<br>4. Кнопка <kbd>&lt;button&gt;</kbd> відправки",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
@@ -60,35 +60,35 @@
 				{
 					"type": "element_exists",
 					"value": "fieldset",
-					"message": "Add a <kbd>&lt;fieldset&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;fieldset&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "legend",
-					"message": "Add a <kbd>&lt;legend&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;legend&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "textarea",
-					"message": "Add a <kbd>&lt;textarea&gt;</kbd> for the message"
+					"message": "Додайте <kbd>&lt;textarea&gt;</kbd> для повідомлення"
 				},
 				{
 					"type": "element_exists",
 					"value": "button",
-					"message": "Add a submit button"
+					"message": "Додайте кнопку відправки"
 				},
 				{
 					"type": "element_exists",
 					"value": "input",
-					"message": "Add an input field for email"
+					"message": "Додайте поле для email"
 				}
 			]
 		},
 		{
 			"id": "fieldset-multiple",
-			"title": "Multiple Fieldsets",
-			"description": "Complex forms can use multiple <kbd>&lt;fieldset&gt;</kbd> elements to organize different sections.<br><br>This improves usability for long forms like registration or checkout pages.",
-			"task": "Create a registration form with 2 fieldsets:<br>1. <code>Account Info</code> with username and password inputs<br>2. <code>Preferences</code> with a textarea for bio<br>3. A submit button outside the fieldsets",
+			"title": "Кілька Fieldsetів",
+			"description": "Складні форми можуть використовувати кілька елементів <kbd>&lt;fieldset&gt;</kbd> для організації різних секцій.<br><br>Це покращує зручність використання довгих форм як реєстрація або оформлення замовлення.",
+			"task": "Створіть форму реєстрації з 2 fieldsetами:<br>1. <code>Дані облікового запису</code> з полями ім'я користувача та пароль<br>2. <code>Налаштування</code> з textarea для біо<br>3. Кнопка відправки поза fieldsetами",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
 			"sandboxCSS": "",
@@ -99,27 +99,27 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "fieldset", "min": 2 },
-					"message": "Create at least 2 fieldsets"
+					"message": "Створіть принаймні 2 fieldseti"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "legend", "min": 2 },
-					"message": "Add a legend to each fieldset"
+					"message": "Додайте legend до кожного fieldseta"
 				},
 				{
 					"type": "element_exists",
 					"value": "textarea",
-					"message": "Add a textarea for the bio"
+					"message": "Додайте textarea для біо"
 				},
 				{
 					"type": "element_exists",
 					"value": "button",
-					"message": "Add a submit button"
+					"message": "Додайте кнопку відправки"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "input", "min": 2 },
-					"message": "Add at least 2 input fields"
+					"message": "Додайте принаймні 2 поля введення"
 				}
 			]
 		}

lessons/uk/30-html-tables.json

@@ -1,125 +1,42 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-tables",
-	"title": "HTML Tables",
-	"description": "Create structured data tables with headers and captions",
+	"title": "Таблиці HTML",
+	"description": "Створюйте структуровані таблиці даних із семантичною розміткою",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "table-basic",
-			"title": "Basic Table Structure",
-			"description": "Tables use <kbd>&lt;table&gt;</kbd> with <kbd>&lt;tr&gt;</kbd> for rows. Inside rows, use <kbd>&lt;th&gt;</kbd> for headers and <kbd>&lt;td&gt;</kbd> for data cells.<br><br>The <kbd>&lt;caption&gt;</kbd> element provides an accessible title for the table.",
-			"task": "Create a simple table with:<br>1. A <kbd>&lt;caption&gt;</kbd> saying <code>Fruit Prices</code><br>2. A header row with <code>Fruit</code> and <code>Price</code> columns<br>3. At least 2 data rows",
+			"title": "Таблиці даних",
+			"description": "Таблиці відображають структуровані дані в рядках і стовпцях. Використовуйте <kbd>&lt;table&gt;</kbd> як контейнер, <kbd>&lt;tr&gt;</kbd> для рядків, <kbd>&lt;th&gt;</kbd> для комірок заголовка та <kbd>&lt;td&gt;</kbd> для комірок даних.<br><br>Додайте <kbd>&lt;caption&gt;</kbd> для доступного заголовка, що описує вміст таблиці.",
+			"task": "Створіть таблицю цін:<br>1. Елемент <kbd>&lt;caption&gt;</kbd> з текстом <code>Pricing</code><br>2. Рядок заголовка з <code>Plan</code> та <code>Price</code><br>3. Два рядки даних для Basic ($9) та Pro ($29)",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px; font-weight: 600; font-size: 1.2rem; color: #333; background: #f8f9fa; } th, td { padding: 12px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 500; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; }",
+			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 350px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 16px; font-weight: 600; font-size: 1.1rem; color: #333; background: #f8f9fa; } th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: steelblue; color: white; font-weight: 500; } tr:last-child td { border-bottom: none; } tr:hover td { background: #f8f9fa; }",
 			"sandboxCSS": "",
 			"initialCode": "",
-			"solution": "<table>\n  <caption>Fruit Prices</caption>\n  <tr>\n    <th>Fruit</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Apple</td>\n    <td>$1.50</td>\n  </tr>\n  <tr>\n    <td>Banana</td>\n    <td>$0.75</td>\n  </tr>\n</table>",
+			"solution": "<table>\n  <caption>Pricing</caption>\n  <tr>\n    <th>Plan</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Basic</td>\n    <td>$9</td>\n  </tr>\n  <tr>\n    <td>Pro</td>\n    <td>$29</td>\n  </tr>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;table&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
 					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> for the table title"
+					"message": "Додайте <kbd>&lt;caption&gt;</kbd> для заголовка таблиці"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "th", "min": 2 },
-					"message": "Add at least 2 header cells (th)"
+					"message": "Додайте комірки заголовка (<kbd>&lt;th&gt;</kbd>) для Plan та Price"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "tr", "min": 3 },
-					"message": "Add at least 3 rows (1 header + 2 data rows)"
-				}
-			]
-		},
-		{
-			"id": "table-thead-tbody",
-			"title": "Table Head & Body",
-			"description": "Use <kbd>&lt;thead&gt;</kbd> to group header rows and <kbd>&lt;tbody&gt;</kbd> to group data rows. This helps browsers and assistive technology understand the table structure.<br><br>You can also use <kbd>&lt;tfoot&gt;</kbd> for footer rows like totals.",
-			"task": "Create a structured table:<br>1. A <kbd>&lt;caption&gt;</kbd> with <code>Monthly Sales</code><br>2. A <kbd>&lt;thead&gt;</kbd> with Month and Revenue headers<br>3. A <kbd>&lt;tbody&gt;</kbd> with at least 2 data rows",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } table { border-collapse: collapse; width: 100%; max-width: 450px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } caption { padding: 20px; font-weight: 700; font-size: 1.3rem; color: white; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); caption-side: top; } thead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } th { padding: 15px 20px; text-align: left; color: white; font-weight: 500; } tbody tr { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } td { padding: 15px 20px; color: #333; } tbody tr:last-child { border-bottom: none; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Monthly Sales</caption>\n  <thead>\n    <tr>\n      <th>Month</th>\n      <th>Revenue</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>January</td>\n      <td>$12,500</td>\n    </tr>\n    <tr>\n      <td>February</td>\n      <td>$14,200</td>\n    </tr>\n  </tbody>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Add a <kbd>&lt;thead&gt;</kbd> for the header section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Add a <kbd>&lt;tbody&gt;</kbd> for the data rows"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Add at least 2 data rows in tbody"
-				}
-			]
-		},
-		{
-			"id": "table-complete",
-			"title": "Complete Table with Footer",
-			"description": "Add <kbd>&lt;tfoot&gt;</kbd> to create a footer section for totals or summary data. The footer stays at the bottom even if tbody has many rows.<br><br>Combine all sections for a fully structured, accessible table.",
-			"task": "Create a complete table:<br>1. A <kbd>&lt;caption&gt;</kbd> with <code>Order Summary</code><br>2. A <kbd>&lt;thead&gt;</kbd> with Item and Price headers<br>3. A <kbd>&lt;tbody&gt;</kbd> with 2 items<br>4. A <kbd>&lt;tfoot&gt;</kbd> with a Total row",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px 20px; font-weight: 600; font-size: 1.1rem; color: #333; text-align: left; background: #f8f9fa; border-bottom: 2px solid #eee; } th, td { padding: 12px 20px; text-align: left; } thead th { background: #2c3e50; color: white; } tbody td { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } tfoot { background: #ecf0f1; font-weight: 600; } tfoot td { border-top: 2px solid #2c3e50; color: #2c3e50; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"solution": "<table>\n  <caption>Order Summary</caption>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Price</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Widget</td>\n      <td>$25.00</td>\n    </tr>\n    <tr>\n      <td>Gadget</td>\n      <td>$35.00</td>\n    </tr>\n  </tbody>\n  <tfoot>\n    <tr>\n      <td>Total</td>\n      <td>$60.00</td>\n    </tr>\n  </tfoot>\n</table>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "table",
-					"message": "Add a <kbd>&lt;table&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "caption",
-					"message": "Add a <kbd>&lt;caption&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "thead",
-					"message": "Add a <kbd>&lt;thead&gt;</kbd> section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tbody",
-					"message": "Add a <kbd>&lt;tbody&gt;</kbd> section"
-				},
-				{
-					"type": "element_exists",
-					"value": "tfoot",
-					"message": "Add a <kbd>&lt;tfoot&gt;</kbd> section for the total"
-				},
-				{
-					"type": "element_count",
-					"value": { "selector": "tbody tr", "min": 2 },
-					"message": "Add at least 2 item rows in tbody"
+					"message": "Додайте 3 рядки (1 заголовок + 2 рядки даних)"
 				}
 			]
 		}

lessons/uk/31-html-marquee.json

@@ -2,15 +2,15 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-marquee",
 	"title": "HTML Marquee",
-	"description": "Create scrolling text with the classic (deprecated but fun!) marquee element",
+	"description": "Створюйте біжучий текст за допомогою класичного (застарілого але веселого!) елемента marquee",
 	"mode": "html",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "marquee-basic",
-			"title": "Scrolling Text",
-			"description": "The <kbd>&lt;marquee&gt;</kbd> element creates scrolling text - a classic from the early web! While deprecated, it still works in most browsers.<br><br>Note: For production, use CSS animations instead. But for learning and fun, marquee is great!",
-			"task": "Create a simple marquee:<br>1. Add a <kbd>&lt;marquee&gt;</kbd> element<br>2. Put some text inside like <code>Welcome to my website!</code>",
+			"title": "Біжучий текст",
+			"description": "Елемент <kbd>&lt;marquee&gt;</kbd> створює біжучий текст - класика раннього вебу! Хоча він застарілий, все ще працює в більшості браузерів.<br><br>Примітка: Для продакшену використовуйте CSS-анімації. Але для навчання та розваги marquee чудовий!",
+			"task": "Створіть простий marquee:<br>1. Додайте елемент <kbd>&lt;marquee&gt;</kbd><br>2. Помістіть текст всередину, наприклад <code>Ласкаво просимо на мій сайт!</code>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
 			"sandboxCSS": "",
@@ -21,15 +21,15 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;marquee&gt;</kbd>"
 				}
 			]
 		},
 		{
 			"id": "marquee-direction",
-			"title": "Direction & Behavior",
-			"description": "Control the marquee with attributes:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (default), slide (stops at edge), alternate (bounces)<br>• <kbd>scrollamount</kbd>: speed (default is 6)",
-			"task": "Create a bouncing marquee:<br>1. Add a <kbd>&lt;marquee&gt;</kbd> element<br>2. Set <kbd>behavior=\"alternate\"</kbd> to make it bounce<br>3. Add some fun text",
+			"title": "Напрямок та поведінка",
+			"description": "Керуйте marquee за допомогою атрибутів:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (за замовчуванням), slide (зупиняється на краю), alternate (відбивається)<br>• <kbd>scrollamount</kbd>: швидкість (за замовчуванням 6)",
+			"task": "Створіть marquee що відбивається:<br>1. Додайте елемент <kbd>&lt;marquee&gt;</kbd><br>2. Встановіть <kbd>behavior=\"alternate\"</kbd> щоб він відбивався<br>3. Додайте веселий текст",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
 			"sandboxCSS": "",
@@ -40,20 +40,20 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;marquee&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
-					"message": "Add <kbd>behavior=</kbd>\"alternate\" to make it bounce"
+					"message": "Додайте <kbd>behavior=</kbd>\"alternate\" щоб він відбивався"
 				}
 			]
 		},
 		{
 			"id": "marquee-retro",
-			"title": "Retro News Ticker",
-			"description": "Combine multiple marquee attributes for a classic news ticker effect. You can even put multiple elements inside!<br><br>Remember: This is deprecated HTML. Modern sites use CSS animations, but marquee is great for understanding web history.",
-			"task": "Create a news ticker:<br>1. A <kbd>&lt;marquee&gt;</kbd> with <kbd>direction=\"left\"</kbd><br>2. Set <kbd>scrollamount=\"5\"</kbd> for smooth scrolling<br>3. Add a breaking news headline inside",
+			"title": "Ретро-стрічка новин",
+			"description": "Поєднайте кілька атрибутів marquee для класичного ефекту стрічки новин. Ви навіть можете помістити кілька елементів всередину!<br><br>Пам'ятайте: Це застарілий HTML. Сучасні сайти використовують CSS-анімації, але marquee чудовий для розуміння історії вебу.",
+			"task": "Створіть стрічку новин:<br>1. Елемент <kbd>&lt;marquee&gt;</kbd> з <kbd>direction=\"left\"</kbd><br>2. Встановіть <kbd>scrollamount=\"5\"</kbd> для плавного прокручування<br>3. Додайте всередину заголовок термінових новин",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
 			"sandboxCSS": "",
@@ -64,17 +64,17 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
+					"message": "Додайте елемент <kbd>&lt;marquee&gt;</kbd>"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "direction", "value": "left" },
-					"message": "Add <kbd>direction=</kbd>\"left\" for horizontal scrolling"
+					"message": "Додайте <kbd>direction=</kbd>\"left\" для горизонтального прокручування"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
-					"message": "Add <kbd>scrollamount=</kbd>\"5\" for smooth speed"
+					"message": "Додайте <kbd>scrollamount=</kbd>\"5\" для плавної швидкості"
 				}
 			]
 		}