<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "bee6762d4092a13fc7c338814963f980",
  "translation_date": "2025-10-22T16:13:52+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "mr"
}
-->
# CSS पुनर्रचना असाइनमेंट

## उद्दिष्ट

तुमच्या टेरॅरियम प्रकल्पाला आधुनिक CSS लेआउट तंत्रांचा वापर करून सुधारित करा! सध्याच्या absolute positioning पद्धतीला बदलून **Flexbox** किंवा **CSS Grid** चा वापर करा जेणेकरून अधिक सुलभ, प्रतिसादक्षम डिझाइन तयार होईल. या असाइनमेंटमध्ये तुम्हाला आधुनिक CSS मानकांचा वापर करताना तुमच्या टेरॅरियमचा दृश्यात्मक आकर्षण टिकवून ठेवण्याचे आव्हान दिले जाते.

वेगवेगळ्या लेआउट पद्धतींचा वापर कधी आणि कसा करायचा हे समजून घेणे आधुनिक वेब विकासासाठी महत्त्वाचे कौशल्य आहे. ही व्यायाम पारंपरिक पोझिशनिंग तंत्र आणि आधुनिक CSS लेआउट प्रणालींमध्ये दुवा साधते.

## असाइनमेंट सूचना

### टप्पा 1: विश्लेषण आणि नियोजन
1. **तुमच्या सध्याच्या टेरॅरियम कोडचे पुनरावलोकन करा** - सध्या कोणते घटक absolute positioning वापरत आहेत ते ओळखा
2. **तुमची लेआउट पद्धत निवडा** - Flexbox किंवा CSS Grid तुमच्या डिझाइनच्या उद्दिष्टांसाठी अधिक योग्य आहे का ते ठरवा
3. **तुमच्या नवीन लेआउटची रचना तयार करा** - कंटेनर आणि प्लांट घटक कसे व्यवस्थित केले जातील याचे नियोजन करा

### टप्पा 2: अंमलबजावणी
1. **तुमच्या टेरॅरियम प्रकल्पाची नवीन आवृत्ती तयार करा** एका स्वतंत्र फोल्डरमध्ये
2. **HTML संरचना अद्यतनित करा** तुमच्या निवडलेल्या लेआउट पद्धतीला समर्थन देण्यासाठी
3. **CSS पुनर्रचना करा** absolute positioning ऐवजी 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 वैशिष्ट्ये
```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 vs 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 vs 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) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.