Michael Czechowski
1a5c09b750
Synchronizes 72 lesson files across 5 languages (de, pl, es, ar, uk) to match the English source. This ensures code, solutions, and validations are identical while only title, description, task, and message fields are translated. Changes include: - Box model lessons (01-box-model.json) - Units and variables (05-units-variables.json) - Transitions and animations (06-transitions-animations.json) - Responsive design (08-responsive.json) - HTML elements (20-html-elements.json) - HTML forms basic and validation (21, 22) - HTML details/summary, progress/meter (23, 24) - HTML datalist, dialog, fieldset (25, 27, 28) - HTML tables and SVG (30, 32) - HTML marquee (31) - Welcome module (00-welcome.json) Fixes validation inconsistencies and removes extra content that exceeded English source. German translations were largely correct; Polish, Spanish, Arabic, and Ukrainian required full translations.
69 lines
4.5 KiB
JSON
69 lines
4.5 KiB
JSON
{
|
||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||
"id": "html-elements",
|
||
"title": "HTML Block & Inline",
|
||
"description": "Зрозумійте основну різницю між контейнерними (блоковими) та рядковими елементами",
|
||
"mode": "html",
|
||
"difficulty": "beginner",
|
||
"lessons": [
|
||
{
|
||
"id": "block-vs-inline-intro",
|
||
"title": "Блокові vs рядкові елементи",
|
||
"description": "HTML елементи поділяються на дві основні категорії:<br><br><strong>Блокові елементи</strong> (контейнери) починаються з нового рядка і займають повну ширину. Приклади: <kbd><div></kbd>, <kbd><p></kbd>, <kbd><h1></kbd>, <kbd><section></kbd><br><br><strong>Рядкові елементи</strong> розміщуються всередині тексту і займають лише необхідну ширину. Приклади: <kbd><span></kbd>, <kbd><a></kbd>, <kbd><strong></kbd>, <kbd><em></kbd>",
|
||
"task": "Оберніть слово <kbd>важливе</kbd> тегами <kbd><strong></kbd>, щоб зробити його жирним. Зверніть увагу, як абзац (блок) займає повну ширину, тоді як strong (рядковий) тече з текстом.",
|
||
"previewHTML": "",
|
||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
|
||
"sandboxCSS": "",
|
||
"initialCode": "<p>Це абзац з важливе словом.</p>",
|
||
"solution": "<p>Це абзац з <strong>важливе</strong> словом.</p>",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "element_exists",
|
||
"value": "p",
|
||
"message": "Додайте елемент абзацу <kbd><p></kbd>"
|
||
},
|
||
{
|
||
"type": "parent_child",
|
||
"value": { "parent": "p", "child": "strong" },
|
||
"message": "Оберніть слово <kbd>важливе</kbd> тегами <kbd><strong></kbd>"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "semantic-containers",
|
||
"title": "Семантичні теги",
|
||
"description": "Сучасний HTML використовує семантичні контейнери, які описують свій вміст:<br><br><kbd><header></kbd> - Заголовок сторінки або секції<br><kbd><nav></kbd> - Навігаційні посилання<br><kbd><main></kbd> - Основний вміст<br><kbd><section></kbd> - Тематичне групування<br><kbd><article></kbd> - Самостійний вміст<br><kbd><footer></kbd> - Підвал сторінки або секції",
|
||
"task": "Створіть базову структуру сторінки:<br>1. Додайте <kbd><header></kbd> з <kbd><h1></kbd>, що містить текст <code>Мій Сайт</code><br>2. Додайте елемент <kbd><main></kbd> з абзацом, що каже <code>Ласкаво просимо на мій сайт!</code><br>3. Додайте <kbd><footer></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>Мій Сайт</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": "Додайте елемент <kbd><header></kbd>"
|
||
},
|
||
{
|
||
"type": "element_exists",
|
||
"value": "main",
|
||
"message": "Додайте елемент <kbd><main></kbd>"
|
||
},
|
||
{
|
||
"type": "element_exists",
|
||
"value": "footer",
|
||
"message": "Додайте елемент <kbd><footer></kbd>"
|
||
},
|
||
{
|
||
"type": "parent_child",
|
||
"value": { "parent": "header", "child": "h1" },
|
||
"message": "Додайте заголовок <kbd><h1></kbd> всередині header"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|