آموزش CSS را با کمک ۶ بازی سرگرم کننده تجربه کنید

افرادی که پا در عرصه کد نویسی می گذارند، می دانند که با یک راه پر پیچ و خم روبرو هستند. این راه واقعا نیاز به حوصله دارد تا این که شما را به مقصد نهایی برساند. مخصوصا وقتی صحبت از آموزش CSS می شود، کد نویسان می دانند که پروسه ای خسته کننده در انتظار آن ها است.

اما این قضیه نمی تواند چنان که باید خسته کننده باقی بماند. خوشبختانه متخصصان CSS دارای نبوغی هستند که برخی از آن ها از آن استفاده می کنند تا آموزش CSS را شیرین تر کنند. توسعه دهندگان بازی که از CSS سر در می آورند، حالا به شما این امکان را داده اند تا با نصب چند بازی تفریحی، سی اس اس را یاد بگیرید و از کم و کیف ان سر در بیاورید.

 

بازی آموزش CSS به نام CSS Diner: CSS Selectors

CSS Diner نرم افزاری تفریحی و بازی برای یادگیری برنامه نویسی است. این بازی را نصب کنید و به محض شروع،  عناصر، کلاس ها، شناسه ها را انتخاب کنید. حالا این بازی به شما نشان می دهد که به شرط انتخاب برخی آیتم ها، خروجی چطور خواهد شد. البته که CSS Diner یک ابزار بسیار ساده و ابتدایی است اما ارزش آن را دارد تا برای شروع یاد گیری CSS یا تثبیت آموزش های خود از آن استفاده کنید.

CSS Diner هدفش این است که به شما یاد دهد که چطور می توانید از آن ها استفاده کنید و قطعات غذایی خود را سفارش دهید.

البته شاید در برخی مراحل کمی گیج شوید، اما این برنامه نویسی است و جای تعجب نیست که گاهی ابهام برای تان پیش آید. پس راحت باشید و به آموزش تان ادامه دهید.

جهت ورود به وب سایت این بازی کلیک کنید

 

یادگیری CSS با کمک زامبی ها در بازی Flexbox Zombies

این بازی، با رویکرد آموزش flexbox در سی اس اس، شکل گرفته است. با تجربه این بازی، شما می توانید کار کردن با flexbox  را به صورت کاملا حسی، و بصری و گام به گام یاد بگیرید.

بازی شروع می شود و شما را درگیر داستانی با زامبی ها می کند که بر اساس کد های سی اس اس هدایت می شود. این داستان از ابتدایی ترین مسائل شروع می شود تا جایی که به مراحل پیچیده می رسد. گاهی روند بازی انقدر جذاب می شود که حتی فراموش می کنید در حال آموزش CSS هستید.

توسعه دهنده این بازی دارای کی گیم سرگرم کننده و آموزشی دیگر در باره آموزش CSS است که  CSS Grid نام دارد. هر چند  CSS Grid رایگان نیست اما اگر از flexbox لذت ببرید، می توانید برای آن یکی هم هزینه کنید.

برای ورود به وب سایت این بازی کلیک کنید

 

یک روش برای آموختن CSS با بازی Grid Garden

به نظر من بازی  flexbox که در بخش قبل آن را بررسی کردیم یک بازی آموزشی عالی است اما این بازی در سطح و یک بعد، این موضوع را بسط می دهد. اما اگر شما بخواهید سی اس اس و  flexbox ها را کمی پیچید تر، یاد بگیرید می توایند از Grid Garden استفاده کنید. در حقیقت توصیه داریم که ابتدا اپلیکیشن قبلی را تست کنید و بعد پا به Grid Garden بگذارید. ان جا که می خواهید به صورت شبکه ای کار کنید و سطوح پیچیده تری تجربه کنید Grid Garden بکار شما می آید.

در بازی Grid Garden شما با یک باغ سر و کار دارید که باید در آن هویج بکارید و علف های هرز را از بین ببرید. مشخص است که در چنین شرایطی بکار بردن گرید ها می تواند مفید باشد.

این بازی و طرح آن به شما یک درک صحیح از موقعیت اساسی شبکه می دهد که بعدا می توانید به طرح بندی سایت خود اعمال کنید.

برای ورود به وب سایت این بازی کلیک کنید.

 

آموزش CSS با نرم افزار بازی Flexbox Defense

اگر شما در مرحله ای از آموزش CSS هستید که با flexbox آشنایی دارید اما نمی توانید با مفاهیمی نظیر “justify” و “align” خوب جور شوید این بازی دقیقا مناسب شماست. این بازی یک بازی دفاعی قلعه است که شما باید در آن به این دو موضوع توجه داشته باشید. اگر در این بازی justify-content و align-self را بیاد نداشته باشید و بکار نبرید خواهید مرد و مورد حمله واقع خواهید شد.

برای ورود به این بازی کلیک کنید

 

یادگیری تفریحی CSS با Flexbox Froggy

Flexbox Froggy بازی تفریحی دیگری برای یادگیری CSS است که بیشتر جنبه مروری دارد. به این معنی که اگر شما کاربر خوبی برای کد نویسی سی اس اس بوده اید، اما حالا، فکر می کنید کمی بین شما و سی اس اس فاصله افتاده است، می توانید از Flexbox Froggy استفاده کنید.

Flexbox Froggy یک بازی برای اموزش از ابتدا تا مراحل بالاتر نیست. با کمک این گیم می توانید به راحتی چیزهایی که فراموش کرده اید را به یاد بیاورید و در حرفه خود بکار ببرید.

البته با این اوصاف به نظر می رسد که لازم است که این بازی یکی از کارهای مرسوم و همیشگی برای کاربران و کدنویسان CSS باشد.

برای ورود به این وب سایت آموزشی بازی گونه کلیک کنید

 

CodePip Games ابزاری برای یاد گیری سریع CSS

اگر شما Grid Garden و Flexbox Froggy را چک کرده اید، بعضی نمونه های کار CodePip را دیده اید. برای داشتن نمونه تست ها و حالا اضافی می توانید حساب کاربر حرفه ای در سایت ایجاد کنید. در این شرایط می توانید مثال ها و تست های متفاوت تر را مشاهده کنید.

برای ورود به این وب سایت کلیک کنید

 

سطح آموزشی CSS در این بازی ها چقدر است؟

استفاده از این بازی ها نوعی از شیوه آموزش به نام گیم لرنینگ است. این بازی ها به شما کمک می کنند که برخی از مفاهیم اساسی را به خوبی یاد بگیرید.  مخصوصا اگر بخواهید فلاشبکس را یاد بگیرید این بازی ها بسیار موثر هستند. در عین حال، این بازی ها وقتی موثر تر واقع می شوند که شما آن ها را در عمل بکار گیرید و آموزه های خود را پیاده سازی کنید.

برای شروع یک ویرایشگر کد انتخاب کنید و برخی از این مفاهیم را انتخاب کرده و تست کنید و از کد نویسی به ظاهر خسته کننده لذت ببرید.

آیا در این باره بازی دیگری می شناسید که CSS را به خوبی آموزش دهد؟

نظر خود را برای ما بنویسید.

منبع

نوشته آموزش CSS را با کمک ۶ بازی سرگرم کننده تجربه کنید اولین بار در گويا آی‌ تی پدیدار شد.