Michael Czechowski
4bed75eb74
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.
102 lines
7.4 KiB
JSON
102 lines
7.4 KiB
JSON
{
|
||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||
"id": "units-variables",
|
||
"title": "Одиниці CSS та змінні",
|
||
"description": "Зрозумійте різноманітність одиниць вимірювання CSS та як визначати й використовувати кастомні властивості для стилів, які легко підтримувати.",
|
||
"difficulty": "beginner",
|
||
"lessons": [
|
||
{
|
||
"id": "units-1",
|
||
"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": ".article {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "max-width: 40rem;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "max-width", "expected": "40rem" },
|
||
"message": "Встановіть <kbd>max-width: 40rem</kbd>"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "units-2",
|
||
"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": ":root {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}\n\n.btn {\n background: var(--brand);\n}",
|
||
"solution": "--brand: steelblue;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "contains",
|
||
"value": "--brand",
|
||
"message": "Визначте змінну <kbd>--brand</kbd>",
|
||
"options": { "caseSensitive": false }
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "steelblue",
|
||
"message": "Встановіть значення <kbd>steelblue</kbd>",
|
||
"options": { "caseSensitive": false }
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "units-3",
|
||
"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": ".main {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "width: calc(100% - 200px);",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"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 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": ".hero {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "min-height: 100vh;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "min-height", "expected": "100vh" },
|
||
"message": "Встановіть <kbd>min-height: 100vh</kbd>"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|