code-crispies/lessons/uk/08-responsive.json

{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "responsive-design",
	"title": "CSS Responsive Design",
	"description": "Адаптуйте ваші макети до різних розмірів екранів використовуючи media queries та техніки плавного дизайну.",
	"difficulty": "intermediate",
	"lessons": [
		{
			"id": "responsive-1",
			"title": "Media Queries",
			"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": "",
			"codePrefix": "/* Add your media query below */\n",
			"initialCode": "",
			"codeSuffix": "",
			"solution": "@media (max-width: 600px) {\n  .panel {\n    background: lightcoral;\n  }\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "regex",
					"value": "@media\\s*\\(max-width:\\s*600px\\)",
					"message": "Почніть з правила <kbd>@media</kbd> — яка умова націлюється на екрани шириною 600px або менше?",
					"options": { "caseSensitive": false }
				},
				{
					"type": "contains",
					"value": ".panel",
					"message": "Вкажіть <kbd>.panel</kbd> всередині media query",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "background", "expected": "lightcoral" },
					"message": "Яка властивість змінює колір фону елемента?",
					"options": { "exact": false }
				}
			]
		},
		{
			"id": "responsive-2",
			"title": "Fluid Type",
			"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": "",
			"codePrefix": "/* Apply fluid font sizing */\n.text {",
			"initialCode": "",
			"codeSuffix": "}",
			"solution": "  font-size: 5vw;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "font-size", "expected": "5vw" },
					"message": "Яка одиниця CSS масштабується відносно ширини viewport?"
				}
			]
		},
		{
			"id": "responsive-3",
			"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": ".features {\n  ",
			"initialCode": "",
			"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": "Який режим display дозволяє визначати рядки та колонки?"
				},
				{
					"type": "regex",
					"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
					"message": "Спробуйте <kbd>repeat()</kbd> з <kbd>auto-fit</kbd> та <kbd>minmax()</kbd> — які мінімальний та максимальний розміри створять гнучкі колонки?",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "gap", "expected": "1rem" },
					"message": "Яка властивість додає простір між елементами grid?"
				}
			]
		},
		{
			"id": "responsive-4",
			"title": "Mobile-First",
			"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": "",
			"codePrefix": "/* Add mobile-first enhancement */\n",
			"initialCode": "",
			"codeSuffix": "",
			"solution": "@media (min-width: 768px) {\n  .sidebar {\n    width: 250px;\n  }\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "regex",
					"value": "@media\\s*\\(min-width:\\s*768px\\)",
					"message": "Яка умова <kbd>@media</kbd> застосовує стилі, коли viewport має ширину щонайменше 768px?",
					"options": { "caseSensitive": false }
				},
				{
					"type": "contains",
					"value": ".sidebar",
					"message": "Вкажіть <kbd>.sidebar</kbd> в media query",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "width", "expected": "250px" },
					"message": "Яка властивість контролює ширину сайдбару на великих екранах?",
					"options": { "exact": false }
				}
			]
		}
	]
}