علم نفسك CSS Flexbox مع لعبة Flexbox Froggy
في الماضي ، لقد تعاملنا مع flexbox وأساسيات كيفية عمله. ولكن في الواقع ، قد يكون تطبيق flexbox على سير عملك أمرًا صعبًا لأنه يمثل إضافة معقدة لمواصفات CSS.
مع Flexbox Froggy يمكنك تعلم كل أساسيات فليكس بوكس من خلال لعبة ويب ممتعة تتضمن الضفادع و lilypads. أعلم أن هذا يبدو مجنونًا ، لكن هذا يعد تطبيقًا رائعًا على الويب.
تبدأ في المستوى 1 و العمل ببطء في طريقك من خلال 24 مستويات مختلفة تدريس العديد من جوانب اتجاه flexbox. تبدأ المستويات المبكرة بالسهولة محاذاة واحدة أو اثنين من الضفادع على طول حاوية واحدة. تتضمن الدروس المبكرة أيضًا نصائح واقتراحات لمساعدتك في ذلك.
ولكن بمجرد الانتهاء من الدرس الماضي ، تسخن عشرة أشياء بالفعل. ستحتاج إلى معرفة كيفية إعادة-تنظيم العناصر داخل الحاوية, كيف تنظم يحتوى عموديا, وكيف تصنع تباعد متساوي بين صفوف مختلفة من محتوى مختلف.
قد تجذبك الضفادع الصغيرة اللطيفة ، لكن تطمئن إلى أن هذه لعبة صعبة.
ومع ذلك, من المبتدئين كاملة لمطوري الويب أكثر خبرة, تم صنع اللعبة لجميع المستويات. الدروس المبكرة هي نسيم ويمكن أن تتركك الدروس المتأخرة على الشاشة مع كتل من الشعر بجانبك.
يتوفر رمز مصدر اللعبة الكامل مجانًا على GitHub حتى تتمكن من تنزيله وتشغيله محليًا إذا كنت ترغب في ذلك.
بالإضافة إلى أن webapp متعدد اللغات تقدم 20 لغة بما في ذلك الإنجليزية والفرنسية والألمانية والإيطالية والصينية واليابانية والروسية (بالإضافة إلى العديد من اللغات الأخرى).
سوف أعترف بذلك إعادة ترتيب الضفادع لن تجعلك على الفور سيدًا من فليكس بوكس. ولكن هذه الدروس تهدف إلى تعرفك على بناء الجملة flexbox بحيث يمكنك أن تشعر براحة أكبر في العمل في سيناريوهات العالم الحقيقي.
إذا كنت المطور على شبكة الإنترنت من أي مستوى المهارة يجب عليك بالتأكيد التحقق من Flexbox Froggy. إنه مجاني تمامًا ، ممتع للغاية للعب وتعليمي بشكل مدهش.
