<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T08:42:15+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "fa"
}
-->
# تکلیف بازسازی CSS

## هدف

بازسازی پروژه تراریوم با استفاده از **Flexbox** یا **CSS Grid** برای چیدمان. HTML و CSS را به‌روزرسانی کنید تا طراحی مدرن و واکنش‌گرا ایجاد شود. نیازی به پیاده‌سازی عناصر قابل کشیدن نیست—فقط بر چیدمان و استایل تمرکز کنید.

## دستورالعمل‌ها

1. **یک نسخه جدید** از اپلیکیشن تراریوم ایجاد کنید. مارک‌آپ و CSS را به‌روزرسانی کنید تا از Flexbox یا CSS Grid برای چیدمان استفاده شود.
2. **اطمینان حاصل کنید که هنر و عناصر** همانند نسخه اصلی در جای خود قرار دارند.
3. **طراحی خود را آزمایش کنید** در حداقل دو مرورگر مختلف (مانند Chrome، Firefox، Edge).
4. **از تراریوم خود در هر مرورگر اسکرین‌شات بگیرید** تا سازگاری بین مرورگرها را نشان دهید.
5. **کد به‌روزرسانی‌شده و اسکرین‌شات‌ها را ارسال کنید.**

## معیار ارزیابی

| معیار       | عالی                                                                      | قابل قبول                          | نیاز به بهبود                          |
|-------------|---------------------------------------------------------------------------|-------------------------------------|-----------------------------------------|
| چیدمان      | کاملاً بازسازی‌شده با استفاده از Flexbox یا CSS Grid؛ زیبا و واکنش‌گرا      | برخی عناصر بازسازی‌شده؛ استفاده جزئی از Flexbox یا Grid | استفاده کم یا عدم استفاده از Flexbox یا Grid؛ چیدمان بدون تغییر |
| سازگاری بین مرورگرها | اسکرین‌شات‌ها برای چندین مرورگر ارائه شده؛ ظاهر سازگار              | اسکرین‌شات برای یک مرورگر؛ ناسازگاری جزئی | بدون اسکرین‌شات یا ناسازگاری‌های عمده |
| کیفیت کد    | HTML/CSS تمیز و سازمان‌یافته؛ کامنت‌های واضح                              | کمی سازمان‌یافته؛ کامنت‌های کم      | کد نامرتب؛ بدون کامنت                  |

## نکات

- راهنماهای [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) و [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) را مرور کنید.
- از ابزارهای توسعه‌دهنده مرورگر برای آزمایش واکنش‌گرایی استفاده کنید.
- کد خود را برای وضوح کامنت‌گذاری کنید.

---

**سلب مسئولیت**:  
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه انسانی حرفه‌ای استفاده کنید. ما مسئولیتی در قبال سوء تفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.