تعلم CSS من خلال الألعاب: Flexbox Froggy وGrid Garden

ابدأ بـ Flexbox Froggy للتدرب على المحاذاة على طول محور، ثم استخدم Grid Garden للتدرب على وضع عنصر بين خطوط الشبكة. بعد كل تمرين، طبّق الفكرة في صفحة صغيرة من تصميمك. من النتائج المفيدة أن تتمكن من شرح سبب عمل تعريف معين عند تغيير التخطيط، بدلاً من مجرد حفظ إجابة مستوى معين.

كيفية تعلم CSS من خلال الألعاب، ثم تطبيقه

يجمع هذا المسار بين لعبتين وثلاثة تمارين أصلية. يناسب هذا المسار من يستطيع قراءة قاعدة CSS بسيطة ويرغب في الحصول على ملاحظات مرئية. لا يُعد هذا المسار دورة كاملة في تطوير الويب: فالواجهات الحقيقية تحتاج أيضاً إلى محتوى مقروء، واستجابة سريعة، وإمكانية الوصول عبر لوحة المفاتيح، واختبارات مع كميات مختلفة من النصوص.

اختر التمرين المناسب لسؤالك

الألعاب من تصميم Codepip. يربط Cozcade كل لعبة مُستضافة بدليلها المُناسب: Flexbox Froggy ودليلها؛ Grid Garden ودليلها. تُقدم الصفحتان الأصليتان Froggy وGrid Garden نسخًا خاصة بالمؤلفين. استخدم لوحة المفاتيح عند اتباع تمارين البرمجة هنا.

أولًا، حدد المحور قبل اختيار الخاصية.

يحتوي Flexbox على محور رئيسي ومحور فرعي. يحدد flex-direction الاتجاه الرئيسي؛ بينما يحدد justify-content موضع العناصر على طول هذا المحور الرئيسي، أما align-items فيتعلق بالمحور الفرعي. في صف عادي من اليسار إلى اليمين، يكون المحور الرئيسي أفقيًا. غيّر الاتجاه إلى عمود ليصبح عموديًا. هذه التعريفات مُغطاة في MDN مقدمة عن Flexbox.

قبل تجربة التصريحات في Froggy، حدد الاتجاه الذي تريد تحريك العناصر فيه. ثم سمِّ هذا الاتجاه بالنسبة للمحور الرئيسي الحالي. هذا يحوّل الإجابة الخاطئة إلى سؤال محدد: هل اخترت الخاصية الخاطئة، أم القيمة الخاطئة، أم المحور الخاطئ؟

التمرين 1: نقل مجموعة إلى النهاية

أنشئ ثلاثة عناصر صغيرة داخل حاوية. هذا تمرين أصلي، وليس مستوى لعبة منسوخًا أو مفتاح إجابة.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

هدفكم هو نقل العناصر الثلاثة معًا نحو الحافة اليمنى دون تغيير ترتيبها أو ترك مسافة منفصلة بين كل عنصر. توقعوا النتيجة، ثم أضيفوا justify-content: flex-end إلى الحاوية.

قارنوا الآن النتيجة مع justify-content: space-between. الخيار الأول ينقل المجموعة، بينما الثاني يوزع المساحة المتاحة بين العناصر. جربوا حاوية ضيقة وأخرى واسعة. اشرحوا أي خيار ستختارون لثلاثة أزرار يجب أن تبقى متقاربة. النتيجة الظاهرة أهم من تذكر قيمة واحدة.

التمرين 2: احتفظ بنفس التعليمات، غيّر المحور

أعد استخدام الحاوية، أضف flex-direction: column، عيّن height: 12rem، واحتفظ بـ justify-content: flex-end. تتجمع العناصر الآن نحو الأسفل. لم يتحول تعريفك إلى أمر "نقل إلى اليمين": لا يزال يعمل على طول المحور الرئيسي الذي قمت بتغييره.

بعد ذلك، أضف align-items: flex-start. قارن الترتيب قبل وبعد هذه الإضافة. مع الاتجاه المحدد من اليسار إلى اليمين، تصطف العناصر نحو اليسار على المحور العرضي. أزل التعريف ولاحظ سلوك التمدد الافتراضي مرة أخرى.

اكتب شرحًا موجزًا ​​لكلا التغييرين دون استخدام عبارة "يعمل ببساطة". على سبيل المثال، حدد المحور والمساحة الفارغة والمجموعة التي يتم وضعها. إذا لم تتمكن من تفسير النتيجة، فاختصر المثال إلى عنصرين فقط، وغيّر تعريفًا واحدًا في كل مرة. هذه هي العادة التي يجب تطبيقها في اللعبة.

بعد ذلك، ميّز مسار الشبكة عن حدوده.

يستخدم وضع العناصر في الشبكة خطوطًا تحيط بالصفوف والأعمدة. تحتوي خمسة أعمدة محددة على ستة خطوط حدودية. العنصر الموضوع من السطر 3 إلى السطر 5 يمتد على عمودين، وليس ثلاثة. راجع مقدمة الشبكة في MDN للتمييز بين المسارات والخلايا والخطوط.

في Grid Garden، اقرأ حدود البداية والنهاية قبل تجربة أي موضع. في صفحتك الخاصة، ارسم أو سمِّ الحدود إذا كان عدّ المسافات مُربكًا.

التمرين 3: ضع بطاقة بين سطرين

أنشئ لوحة من خمسة أعمدة وأضف إليها بطاقة واحدة:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

توقع مكان ظهور البطاقة قبل فتح الصفحة. ثم اجعلها تغطي اللوحة بالكامل بتغيير موضعها في الأعمدة فقط. مع الأعمدة الخمسة المحددة أعلاه، يمتد grid-column: 1 / 6 من الحد الأول إلى الأخير.

أخيرًا، غيّر النص إلى جملة أطول بكثير واجعل المتصفح ضيقًا. يمكن أن تظل قاعدة الموضع صحيحة بينما يصبح عرض البطاقة ذو الارتفاع الثابت غير مناسب لمحتواها. يُعلّم حل تمرين اللعبة جزءًا من تصميم الصفحة؛ ويتطلب بناء صفحة قابلة للاستخدام التحقق من المحتوى أيضًا. حل تمرين لعبة يُعلّم جزءًا من تصميم الصفحة؛ بناء صفحة قابلة للاستخدام يتطلب التحقق من المحتوى أيضًا.

استخدم تقدمك في اللعبة كتقييم، وليس كدليل على إتقانك لها.

بعد إتمام تمرين بنجاح، غيّر أحد الافتراضات التالية: الاتجاه، أو عدد العناصر، أو العرض المتاح، أو طول النص. توقع النتيجة قبل النظر إليها. إذا استطعت تكييف الفكرة وشرح التغيير، فقد تعلمت أكثر من مجرد إجابة مستوى.

عند العودة إلى لعبة، تأكد من فتح نفس الإصدار وبيئة المتصفح. Cozcade تُحدد الألعاب المفضلة في حسابك الألعاب التي ترغب في العودة إليها؛ وهي لا تضمن نقل تقدمك في الدروس بين الأجهزة. تجنب حذف بيانات الموقع المخزنة أثناء مراجعة تقدمك، واستخدم ميزة التصدير الصريحة فقط إذا كانت اللعبة توفرها.

تابع دليل المطابقة

استخدم دليل Froggy للتدرب على المحاور والمحاذاة، ودليل Grid Garden لأسئلة تحديد المواقع. إذا كنت ترغب في نوع آخر من التدريب لاحقًا، فتصفح ألعاب التعلم.

كُتبت التمارين أعلاه خصيصًا لهذه المقالة. تمت مراجعة صفحات المراجع في 11 أكتوبر 2026. تغطي فحوصات اللعب المسجلة لدينا عددًا محدودًا من تفاعلات سطح المكتب، ولا تشمل إكمال جميع المستويات أو دورة كاملة على الهاتف المحمول. تُعلّم هذه المقالة تسلسلًا تدريبيًا؛ ولا تُمنح شهادة تأهيل أو تُغني عن اختبار واجهاتك الخاصة. تُعلّم هذه المقالة تسلسلًا تدريبيًا؛ ولا تُمنح شهادة تأهيل أو تُغني عن اختبار واجهاتك الخاصة. ...

ألعاب يمكنك لعبها على Cozcade

Flexbox FroggyGrid Garden