<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T09:10:56+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "hi"
}
-->
# CSS रिफैक्टरिंग असाइनमेंट

## उद्देश्य

**Flexbox** या **CSS Grid** का उपयोग करके टेरारियम प्रोजेक्ट को रिफैक्टर करें। आधुनिक, उत्तरदायी डिज़ाइन प्राप्त करने के लिए HTML और CSS को आवश्यकतानुसार अपडेट करें। आपको ड्रैगेबल एलिमेंट्स को लागू करने की आवश्यकता नहीं है—केवल लेआउट और स्टाइलिंग पर ध्यान केंद्रित करें।

## निर्देश

1. **टेरारियम ऐप का एक नया संस्करण बनाएं।** लेआउट के लिए Flexbox या CSS Grid का उपयोग करने के लिए मार्कअप और CSS को अपडेट करें।
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/) गाइड की समीक्षा करें।
- उत्तरदायित्व का परीक्षण करने के लिए ब्राउज़र डेवलपर टूल्स का उपयोग करें।
- स्पष्टता के लिए अपने कोड में टिप्पणियाँ जोड़ें।

---

**अस्वीकरण**:  
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।