ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

هل تعتقد أن المتعة وتطوير المواقع يمكن أن تتعايش مع بعضها؟ إذا كنت تحب بالفعل كتابة التعليمات البرمجية فلا ينبغي أن يكون هذا مفاجأة لك. لكن العديد من المطورين الجدد يكافحون من أجل فهم مفاهيم HTML / CSS الأساسية ، ويمكن أن يكون هذا الصراع محبطًا أو مزعجًا تمامًا.

يمكن أن يكون تعلم برمجة CSS تجربة محبطة ، ولكن على الأقل لا يجب أن يكون مملًا! أحد أفضل الأشياء المتعلقة بتعلم البرمجة هو أن الأشخاص الذين يجيدون الترميز يتمتعون أيضًا بالمهارات اللازمة لإنشاء الألعاب التي نعمل على تعيلم الآخرين المفاهيم الأساسية بعبارات بسيطة. لا يوجد بديل عن الممارسة والتجربة في تعلم برمجة CSS الأساسي ، ولكن الألعاب تساعد بالتأكيد ، وتستفيد من نماذج التخطيط الأحدث مثل الشبكة و flexbox بشكل خاص من نموذج التعلم العملي.

games to learn css thumb min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

لهذا جمعت حفنة من الألعاب الترفيهية لمساعدتك في معرفة المزيد عن لغة البرمجة CSS. يمكن لعب جميع هذه الألعاب مجانًا في متصفحك وهي مثالية لتحسين معرفتك في CSS.

1. Enjoy CSS

Enjoy CSS هي أداة للتصميم المرئي على شبكة الإنترنت لـ تعلم برمجة CSS على الصفحة. تعمل واجهة السحب والإفلات على تسهيل إضافة عناصر للصفحة وتطبيق الأنماط عليها مثل الزوايا الدائرية والتدرجات وظلال النص والانتقالات.

04 enjoy css library webapp min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

جرب اللعب في هذا العرض التوضيحي وشاهد ما يمكنك بناءه. الخيارات محدودة فقط من خلال إمكانيات CSS. يمكنك حفظ نماذج بالحجم الطبيعي المرئي ومشاركتها لتقديم الأفكار أو تعليم مفاهيم CSS محددة للآخرين.

بالإضافة إلى أن كل الكود مجاني تمامًا ويمكن الوصول إليه لنسخه ولصقه في مشاريع الويب الخاصة بك. تحقق أيضًا من قائمة المعرض للعناصر التي تم إنشاؤها مسبقًا باستخدام أنماط CSS المخصصة.

2. Unfolding the Box Model

Unfolding ليست لعبة تمامًا ، ولكنها جولة تفاعلية جدًا في طراز صندوق CSS. يتم عرض المفاهيم بشكل مرئي لتعليمك المزيد حول تحويلات CSS3 ، boxes، وعناصر الصفحة ، وكيف تعمل جميعها معًا لمعالجة المحتوى على الصفحة.

05 folding the box model min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

تم إنشاء تطبيق الويب المرح الصغير هذا بواسطة Chris Ruppel وتم استضافته كصفحة GitHub لأي شخص يريد اللعب به.

شفرة المصدر للمشروع بأكمله يمكن الوصول إليها بحرية أيضًا على GitHub repo. يمكنك تنزيل نسخة واستضافتها بنفسك أو استخدامها محليًا في حالة تقطعت بك السبل بدون الإنترنت.

ذات صلة:  مجموعة من أفضل الألعاب لهواة التصميم للقضاء على روتين العمل

3. SassMeister

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

06 sassmeister webapp sass code min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

مع تطبيق SassMeister webapp ، يمكنك التدرب على كتابة كود Sass في متصفحك. الطريقة التقليدية هي كتابة التعليمات البرمجية محليًا ، ثم ترجمة ملفات .SCSS إلى ملفات .CSS.

ومع ذلك ، باستخدام هذا التطبيق الرائع يمكنك كتابة كود Sass في المتصفح ومعرفة كيف يتم تجميعه في الوقت الفعلي. ليس IDE كامل مثل CodePen ، لكنه ملعب عبر الإنترنت لاختبار مقتطفات الشفرة واللعب مع Sass دون الحاجة إلى تثبيتها محليًا.

4. Flexplorer

يعد تطبيق الويب الخاص بـ Bennet Freely’s Flexplorer طريقة ممتعة حقًا للتعرف على flexbox بدون لعبة على غرار برج الدفاع. يمكنك اللعب باستخدام عرض توضيحي نشط للحاوية باستخدام خصائصه المرنة التي تحد من عدد العناصر في صف واحد ، ونسبة العرض لكل عنصر.

07 flexplorer webapp ui min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

لسوء الحظ ، لا يمكنني العثور على طريقة لرؤية الكود فعليًا للمثال بخلاف ميزة “عرض مصدر” للمتصفح. سيكون وجود عرض للمصدر مدمج في الصفحة رائعًا حقًا حتى تتمكن من نسخ / لصق الرمز في مشاريعك الخاصة.

ولكن لا يزال هذا webapp explorer المرئي وسيلة ممتعة وتفاعلية لفهم flexbox من الناحية النظرية.

5. Lrn App

لا يستند العنصر الأخير فعليًا إلى المتصفح ، ولكنه بدلاً من ذلك يعمل على جهاز iPhone (قريبًا لنظام Android).

Lrn App مجانية تمامًا ويعلمك كيفية كتابة التعليمات البرمجية باستخدام دروس بحجم صغير يمكن الوصول إليها. إنه يتميز بمسابقات صغيرة وتحديات فنية تحاكي العالم الحقيقي. سوف تتقن البرمجة بسرعة كبيرة وستكون قادرًا على تطبيق معرفتك من الناحية النظرية.

08 lrn iphone app ui learn code min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

تشمل اللغات HTML و CSS و JavaScript و Ruby و Python. هذا يعني أنه يمكنك تعلم جميع لغات الواجهة الأمامية وحتى بعض اللغات الخلفية إذا كان لديك الوقت.

كما أن Lrn ليس التطبيق الوحيد من نوعه. هناك تطبيقات أخرى من عيار مماثل ، ولكن Lrn يقف حقًا وحده فيما يتعلق بجودة التعليم.

ذات صلة:  طريقة الحصول علي لعبة Assassin’s Creed 3 مجانا من Ubisoft

6. CSS Diner: CSS Selectors

css games diner min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

جميل جدا ، أليس كذلك؟ حدد العناصر والفئات والمعرفات … ربما الطبقات الزائفة؟ ماذا يوجد هناك أيضآ؟ في الواقع ، هناك طرق أكثر لتحديد العناصر مما تعتقد ، وتريد CSS Diner أن تعلمك كيفية استخدامها عن طريق مطالبتك بتحديد أجزاء من الطعام باستخدام CSS. قد تكون بعض التحديات مربكة بعض الشيء ، لكن هذه هي البرمجة – ليس هناك أي عيب في البحث في غوغل.

7. Flexbox  Zombies

Flexbox Zombies عبارة عن لعبة / دورة تدريبية تم تطويرها بشكل غير معقول ، وتَعِدك بتعليمك كيفية استخدام flexbox مع لعبة بديهية وجذابة وذاتية التعزيز تدور معظمها حول إطلاق النار على الزومبي بأسلحة يتم التحكم فيها بواسطة كود flexbox. يأخذك من الأساسيات إلى العناصر المتقدمة على مدار عدة مستويات تأتي كاملة مع قصة ، رسومات رائعة ، وحركة ذبح Zombies – حتى أنك قد تنسى أنك تتعلم CSS.

css games flexbox zombies min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

Flexbox نفسها عبارة عن تقنية رائعة لتنظيم المحتوى بطريقة مستجيبة على بُعد واحد ، وإذا كنت تفعل أي شيء من خلال تطوير الويب الأمامي ، فأنت مدين لنفسك لتعلمه. سواء كنت تقوم بإيقاف تشغيله أم لا ، فإن Flexbox Zombies هو ذريعة ممتازة للعب لعبة تعلمك شيئًا حقًا. إذا كان فقط كل التعليم يمكن أن يكون بهذه الطريقة ، أليس كذلك؟

صمم نفس المنشئ أيضًا لعبة دورة لـ CSS Grid تسمى “Grid Critters“. إنها ليست مجانية ، ولكن إذا كنت تحب Flexbox Zombies ، فقد تختار إسقاط المال عليها.

8. Grid Garden

شخصياً ، أعتقد أن flexbox على ما يرام ، لكنها تضيء حقًا على تخطيطات أحادية البعد (صف أو عمود) ، لذلك بالنسبة للمشاريع والقوالب الكبيرة ، سترغب في الانتقال إلى الشبكة (ربما مع بعض حاويات flexbox داخل خلايا الشبكة). بمجرد معرفة ذلك ، سيكون هذا أنيقًا ونظيفًا ورائعًا ، لكن يمكن أن يكون هناك قدر من منحنى التعلم حيث يمكن أن تساعد Grid Garden (و Grid Critters المذكورة أعلاه).

ذات صلة:  ( +30 لعبة ) تحميل افضل العاب مجانية كاملة للكمبيوتر

css games grid garden min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

Grid Garden هي لعبة مجانية حيث يجب عليك وضع حديقة بحيث يتم سقي الجزر نزع الحشائش – واتضح أن الشبكة مثالية لهذه المهمة! سوف يمنحك فهمًا قويًا لتحديد المواقع الأساسية للشبكة التي يمكنك تطبيقها بعد ذلك على تخطيطات موقعك.

9. Flexbox Defense

css games flexbox min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

هل تعرف بالفعل أساسيات flexbox لكنك لا تستطيع “تبرير” و “محاذاة” ـها بشكل مستقيم تمامًا؟ Flexbox Defense عبارة عن برنامج تعليمي لـ flexbox متنكر في شكل لعبة للدفاع عن البرج من شأنها أن تتذكر محتواك المبرر وتقوم بالمحاذاة لنفسك – أو تموت. ولكن يمكنك فقط المحاولة مرة أخرى. إذا لم تكن أبدًا من محبي تلك الألعاب التي تقبل إجابة صحيحة واحدة فقط ، فستعجبك هذه اللعبة ، لأنها تتيح لك وضع الأبراج في أي مكان تريده وتنجح أو تفشل فيه.

10. Flexbox Froggy

css games flexbox froggy min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

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

11. CodePip Games

css games codepip min DzTechs - ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة

إذا قمت بتجربة Grid Garden و Flexbox Froggy ، فقد شاهدت بعض الأمثلة على عمل CodePip بالفعل. هذه هي مجرد اثنين من الألعاب المجانية التي تقدمها. إذا قمت بالتسجيل للحصول على حساب احترافي على موقعهم ، فإن لديهم أيضًا ألعابًا تتراوح من مراجعة CSS العامة إلى JavaScript.

كم سيعلمني هذا من كيفية برمجة CSS؟

يمكن أن يساعدك تشغيل هذه الألعاب في تعلم بعض المفاهيم الأساسية جيدًا – خاصةً إذا كنت تريد تعلم flexbox. في النهاية ، على الرغم من ذلك ، يمكن للألعاب أن تعلمك الكلمات التي تكتبها فقط. يجب عليك وضعها موضع التنفيذ إذا كنت ترغب حقًا في معرفة كيفية استخدامها. احصل على محرر أكواد جيد وبعض الأفكار التي تريد تنفيذها وإبدء العبث!

قد يعجبك ايضا

التعليقات مغلقة.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More