Michael Czechowski
74ccf32e76
- Updated de, pl, es, ar, uk translations to have identical structure - All 10 lessons now match English: code, solutions, validations - Only title, description, task, and message fields are translated - Removed obsolete lessons not present in English version 🤖 Generated with [Claude Code](https://claude.com/claude-code)
260 lines
17 KiB
JSON
260 lines
17 KiB
JSON
{
|
||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||
"id": "css-basic-selectors",
|
||
"title": "Основи CSS",
|
||
"description": "Вивчіть основні будівельні блоки CSS: властивості, значення та селектори. Цей модуль навчає правилам синтаксису, яких дотримується кожна декларація CSS.",
|
||
"difficulty": "beginner",
|
||
"lessons": [
|
||
{
|
||
"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": "\n}",
|
||
"previewContainer": "preview-area",
|
||
"solution": "color: coral;",
|
||
"validations": [
|
||
{
|
||
"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": "property_value",
|
||
"value": { "property": "background", "expected": "lavender" },
|
||
"message": "Додайте <kbd>background: lavender;</kbd>"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "padding", "expected": "1rem" },
|
||
"message": "Додайте <kbd>padding: 1rem;</kbd>"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "type-selectors",
|
||
"title": "Селектори типу",
|
||
"description": "<strong>Селектор</strong> говорить браузеру, які елементи стилізувати. Найпростіший селектор - це <strong>селектор типу</strong> — просто назва HTML-тегу.<br><br><pre>p {<br> color: steelblue;<br>}</pre><br>Це правило націлюється на кожен елемент <kbd><p></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": "p {\n color: steelblue;\n}",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "p\\s*\\{",
|
||
"message": "Почніть з <kbd>p {</kbd> щоб вибрати абзаци"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"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": "a\\s*\\{",
|
||
"message": "Почніть з <kbd>a {</kbd> щоб вибрати посилання"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "color", "expected": "coral" },
|
||
"message": "Встановіть <kbd>color: coral</kbd>"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "class-selectors",
|
||
"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": "",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": ".badge {\n background: tomato;\n}",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "\\.badge\\s*\\{",
|
||
"message": "Почніть з <kbd>.badge {</kbd> (не забудьте крапку!)"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "background", "expected": "tomato" },
|
||
"message": "Встановіть <kbd>background: tomato</kbd>"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"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": "",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": ".btn.primary {\n background: steelblue;\n}",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "\\.btn\\.primary\\s*\\{",
|
||
"message": "Використовуйте <kbd>.btn.primary {</kbd> (без пробілу між класами)"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "background", "expected": "steelblue" },
|
||
"message": "Встановіть <kbd>background: steelblue</kbd>"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "specific-elements",
|
||
"title": "Націлювання на конкретні елементи",
|
||
"description": "Іноді ви хочете, щоб клас виглядав по-різному на різних елементах. Поєднайте селектор типу з селектором класу (без пробілу) щоб бути більш специфічним:<br><br><pre>a.btn {<br> text-decoration: none;<br>}</pre><br>Це стилізує лише елементи <kbd><a></kbd> з класом <kbd>btn</kbd>, а не елементи <kbd><button></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": "a\\.btn\\s*\\{",
|
||
"message": "Використовуйте <kbd>a.btn {</kbd> (тип + клас, без пробілу)"
|
||
},
|
||
{
|
||
"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": "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>"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|