<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "bee6762d4092a13fc7c338814963f980",
  "translation_date": "2025-10-22T14:54:16+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "ur"
}
-->
# سی ایس ایس ریفیکٹرنگ اسائنمنٹ

## مقصد

اپنے ٹیریریم پروجیکٹ کو جدید سی ایس ایس لے آؤٹ تکنیکوں کے ساتھ تبدیل کریں! موجودہ ایبسولیوٹ پوزیشننگ کے طریقے کو **Flexbox** یا **CSS Grid** کے ذریعے ریفیکٹر کریں تاکہ زیادہ قابل انتظام اور ریسپانسیو ڈیزائن حاصل کیا جا سکے۔ یہ اسائنمنٹ آپ کو جدید سی ایس ایس اسٹینڈرڈز کو اپنانے کا چیلنج دیتی ہے جبکہ آپ کے ٹیریریم کی بصری کشش کو برقرار رکھتی ہے۔

یہ سمجھنا کہ مختلف لے آؤٹ طریقے کب اور کیسے استعمال کیے جائیں، جدید ویب ڈیولپمنٹ کے لیے ایک اہم مہارت ہے۔ یہ مشق روایتی پوزیشننگ تکنیکوں کو جدید سی ایس ایس لے آؤٹ سسٹمز کے ساتھ جوڑتی ہے۔

## اسائنمنٹ کی ہدایات

### مرحلہ 1: تجزیہ اور منصوبہ بندی
1. **اپنے موجودہ ٹیریریم کوڈ کا جائزہ لیں** - ان عناصر کی شناخت کریں جو فی الحال ایبسولیوٹ پوزیشننگ استعمال کر رہے ہیں۔
2. **اپنا لے آؤٹ طریقہ منتخب کریں** - فیصلہ کریں کہ آیا Flexbox یا CSS Grid آپ کے ڈیزائن کے اہداف کے لیے زیادہ موزوں ہے۔
3. **اپنے نئے لے آؤٹ کا خاکہ بنائیں** - منصوبہ بنائیں کہ کنٹینرز اور پودے کے عناصر کو کیسے منظم کیا جائے گا۔

### مرحلہ 2: عمل درآمد
1. **اپنے ٹیریریم پروجیکٹ کا نیا ورژن** ایک الگ فولڈر میں بنائیں۔
2. **HTML اسٹرکچر کو اپ ڈیٹ کریں** تاکہ آپ کے منتخب کردہ لے آؤٹ طریقے کی حمایت کی جا سکے۔
3. **CSS کو ریفیکٹر کریں** تاکہ ایبسولیوٹ پوزیشننگ کے بجائے Flexbox یا CSS Grid استعمال کیا جا سکے۔
4. **بصری مستقل مزاجی برقرار رکھیں** - یقینی بنائیں کہ آپ کے پودے اور ٹیریریم جار وہی پوزیشنز میں نظر آئیں۔
5. **ریسپانسیو بیہیویر نافذ کریں** - آپ کا لے آؤٹ مختلف اسکرین سائزز کے ساتھ خوبصورتی سے ایڈجسٹ ہونا چاہیے۔

### مرحلہ 3: ٹیسٹنگ اور دستاویزات
1. **کراس-براؤزر ٹیسٹنگ** - تصدیق کریں کہ آپ کا ڈیزائن Chrome، Firefox، Edge، اور Safari میں کام کرتا ہے۔
2. **ریسپانسیو ٹیسٹنگ** - اپنے لے آؤٹ کو موبائل، ٹیبلٹ، اور ڈیسک ٹاپ اسکرین سائزز پر چیک کریں۔
3. **دستاویزات** - اپنے CSS میں تبصرے شامل کریں جو آپ کے لے آؤٹ کے انتخاب کی وضاحت کریں۔
4. **اسکرین شاٹس** - مختلف براؤزرز اور اسکرین سائزز میں اپنے ٹیریریم کی تصاویر لیں۔

## تکنیکی ضروریات

### لے آؤٹ عمل درآمد
- **ایک منتخب کریں**: Flexbox یا CSS Grid میں سے کسی ایک کو نافذ کریں (ایک ہی عناصر کے لیے دونوں کا استعمال نہ کریں)
- **ریسپانسیو ڈیزائن**: فکسڈ پکسلز کے بجائے رشتہ دار یونٹس (`rem`, `em`, `%`, `vw`, `vh`) استعمال کریں۔
- **ایکسسسبلیٹی**: مناسب سیمینٹک HTML اسٹرکچر اور alt ٹیکسٹ برقرار رکھیں۔
- **کوڈ کوالٹی**: مستقل نام دینے کے کنونشنز استعمال کریں اور CSS کو منطقی طور پر منظم کریں۔

### شامل کرنے کے لیے جدید سی ایس ایس فیچرز
```css
/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}
```

### براؤزر سپورٹ کی ضروریات
- **Chrome/Edge**: تازہ ترین 2 ورژنز
- **Firefox**: تازہ ترین 2 ورژنز  
- **Safari**: تازہ ترین 2 ورژنز
- **موبائل براؤزرز**: iOS Safari، Chrome Mobile

## ڈیلیورایبلز

1. **اپ ڈیٹ شدہ HTML فائل** بہتر سیمینٹک اسٹرکچر کے ساتھ
2. **ریفیکٹرڈ CSS فائل** جدید لے آؤٹ تکنیکوں کے ساتھ
3. **اسکرین شاٹس کا مجموعہ** جو کراس-براؤزر مطابقت دکھاتا ہے:
   - ڈیسک ٹاپ ویو (1920x1080)
   - ٹیبلٹ ویو (768x1024) 
   - موبائل ویو (375x667)
   - کم از کم 2 مختلف براؤزرز
4. **README.md فائل** جس میں درج ہو:
   - آپ کا لے آؤٹ انتخاب (Flexbox بمقابلہ Grid) اور اس کی وجہ
   - ریفیکٹرنگ کے دوران پیش آنے والے چیلنجز
   - براؤزر مطابقت کے نوٹس
   - آپ کے کوڈ کو چلانے کی ہدایات

## اسیسمنٹ کا معیار

| معیار | بہترین (4) | قابل (3) | ترقی پذیر (2) | ابتدائی (1) |
|-------|------------|----------|---------------|-------------|
| **لے آؤٹ عمل درآمد** | Flexbox/Grid کا شاندار استعمال جدید فیچرز کے ساتھ؛ مکمل طور پر ریسپانسیو | درست عمل درآمد اچھے ریسپانسیو بیہیویر کے ساتھ | بنیادی عمل درآمد معمولی ریسپانسیو مسائل کے ساتھ | نامکمل یا غلط لے آؤٹ عمل درآمد |
| **کوڈ کوالٹی** | صاف، اچھی طرح منظم CSS بامعنی تبصروں اور مستقل ناموں کے ساتھ | اچھی تنظیم کچھ تبصروں کے ساتھ | مناسب تنظیم کم سے کم تبصروں کے ساتھ | ناقص تنظیم؛ سمجھنا مشکل |
| **کراس-براؤزر مطابقت** | تمام مطلوبہ براؤزرز میں مکمل مستقل مزاجی اسکرین شاٹس کے ساتھ | اچھی مطابقت معمولی فرق کے ساتھ دستاویزی | کچھ مطابقت کے مسائل جو فعالیت کو متاثر نہیں کرتے | بڑے مطابقت کے مسائل یا ٹیسٹنگ کی کمی |
| **ریسپانسیو ڈیزائن** | غیر معمولی موبائل-فرسٹ اپروچ ہموار بریک پوائنٹس کے ساتھ | اچھا ریسپانسیو بیہیویر مناسب بریک پوائنٹس کے ساتھ | بنیادی ریسپانسیو فیچرز کچھ لے آؤٹ مسائل کے ساتھ | محدود یا خراب ریسپانسیو بیہیویر |
| **دستاویزات** | جامع README تفصیلی وضاحتوں اور بصیرتوں کے ساتھ | اچھی دستاویزات تمام مطلوبہ عناصر کا احاطہ کرتی ہیں | بنیادی دستاویزات کم سے کم وضاحتوں کے ساتھ | نامکمل یا غائب دستاویزات |

## مددگار وسائل

### لے آؤٹ طریقہ گائیڈز
- 📖 [Flexbox کا مکمل گائیڈ](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- 📖 [CSS Grid کا مکمل گائیڈ](https://css-tricks.com/snippets/css/complete-guide-grid/)
- 📖 [Flexbox بمقابلہ Grid - صحیح ٹول کا انتخاب کریں](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)

### براؤزر ٹیسٹنگ ٹولز
- 🛠️ [براؤزر DevTools ریسپانسیو موڈ](https://developer.chrome.com/docs/devtools/device-mode/)
- 🛠️ [Can I Use - فیچر سپورٹ](https://caniuse.com/)
- 🛠️ [BrowserStack - کراس-براؤزر ٹیسٹنگ](https://www.browserstack.com/)

### کوڈ کوالٹی ٹولز
- ✅ [CSS Validator](https://jigsaw.w3.org/css-validator/)
- ✅ [HTML Validator](https://validator.w3.org/)
- ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

## اضافی چیلنجز

🌟 **جدید لے آؤٹس**: اپنے ڈیزائن کے مختلف حصوں میں Flexbox اور Grid دونوں کو نافذ کریں  
🌟 **اینیمیشن انٹیگریشن**: CSS ٹرانزیشنز یا اینیمیشنز شامل کریں جو آپ کے نئے لے آؤٹ کے ساتھ کام کریں  
🌟 **ڈارک موڈ**: CSS کسٹم پراپرٹیز پر مبنی تھیم سوئچر نافذ کریں  
🌟 **کنٹینر کوئریز**: جدید کنٹینر کوئری تکنیکوں کا استعمال کریں تاکہ کمپوننٹ لیول پر ریسپانسیو نیس حاصل ہو  

> 💡 **یاد رکھیں**: مقصد صرف کام کرنا نہیں ہے بلکہ یہ سمجھنا ہے کہ آپ کا منتخب کردہ لے آؤٹ طریقہ اس خاص ڈیزائن چیلنج کے لیے بہترین حل کیوں ہے!

---

**اعلانِ لاتعلقی**:  
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔