Michael Czechowski
c560676544
Rewrite ~120 validation error messages across 17 English lesson modules and their localized variants (ar, de, es, pl, uk) to use concept questions, property hints, and directional nudges instead of revealing the exact CSS property-value answers. Priority modules (flexbox, box-model, colors, positioning) fully rewritten. All remaining CSS modules updated. Only message strings changed — no validation logic modifications.
192 lines
13 KiB
JSON
192 lines
13 KiB
JSON
{
|
||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||
"id": "box-model",
|
||
"title": "CSS Box Model",
|
||
"description": "Опануйте фундаментальні принципи управління простором у веб-дизайні через блокову модель CSS. Цей модуль досліджує, як контент, відступи, межі та поля поєднуються для створення структур макету.",
|
||
"difficulty": "beginner",
|
||
"lessons": [
|
||
{
|
||
"id": "box-model-1",
|
||
"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": ".card {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "padding: 1rem;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "padding", "expected": "1rem" },
|
||
"message": "Яка властивість додає простір між вмістом елемента та його межею?"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "box-model-2",
|
||
"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": ".card {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "border-left: 4px solid steelblue;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
|
||
"message": "Використайте скорочення <kbd>border-left</kbd> зі значеннями ширини, стилю та кольору",
|
||
"options": { "caseSensitive": false }
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "box-model-3",
|
||
"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": ".card {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "margin-bottom: 1rem;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "margin-bottom", "expected": "1rem" },
|
||
"message": "Яка властивість створює простір знизу елемента, відштовхуючи сусідів?"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "box-model-4",
|
||
"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": ".fix {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "box-sizing: border-box;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "box-sizing", "expected": "border-box" },
|
||
"message": "Яке значення <kbd>box-sizing</kbd> включає padding та межу в загальну ширину елемента?"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "box-model-5",
|
||
"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": ".btn {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "padding: 8px 1rem;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "padding:\\s*8px\\s+1rem",
|
||
"message": "Використайте скорочення <kbd>padding</kbd> з двома значеннями: вертикальне та горизонтальне",
|
||
"options": { "caseSensitive": false }
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "box-model-6",
|
||
"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": ".card {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "margin: 0 auto;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "margin:\\s*0\\s+auto",
|
||
"message": "Використайте <kbd>margin</kbd> з ключовим словом, яке автоматично обчислює рівні ліві та праві відступи",
|
||
"options": { "caseSensitive": false }
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "box-model-7",
|
||
"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": ".avatar {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "border-radius: 50%;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "border-radius", "expected": "50%" },
|
||
"message": "Який відсоток <kbd>border-radius</kbd> створює ідеальне коло з квадратного елемента?"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "box-model-8",
|
||
"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": ".alert {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"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": "Додайте внутрішній відступ до картки сповіщення"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "border-left:\\s*4px\\s+solid\\s+coral",
|
||
"message": "Додайте лівий акцент за допомогою скорочення <kbd>border-left</kbd>",
|
||
"options": { "caseSensitive": false }
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "border-radius", "expected": "4px" },
|
||
"message": "Злегка заокругліть кути за допомогою <kbd>border-radius</kbd>"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|