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.
127 lines
5.9 KiB
JSON
127 lines
5.9 KiB
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 (max-width: 600px)</kbd>",
|
|
"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": "اضبط <kbd>background: lightcoral</kbd>",
|
|
"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": "اضبط <kbd>font-size: 5vw</kbd>" }
|
|
]
|
|
},
|
|
{
|
|
"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": "اضبط <kbd>display: grid</kbd>"
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
|
|
"message": "استخدم <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "gap", "expected": "1rem" },
|
|
"message": "اضبط <kbd>gap: 1rem</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "responsive-4",
|
|
"title": "Mobile-First",
|
|
"description": "اتبع نهج mobile-first بكتابة أنماط أساسية للشاشات الصغيرة وتحسينها لـ viewports أكبر.",
|
|
"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 (min-width: 768px)</kbd>",
|
|
"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": "اضبط <kbd>width: 250px</kbd>",
|
|
"options": { "exact": false }
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|