Michael Czechowski
857e110905
- 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
15 KiB
JSON
260 lines
15 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>"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|