14 KiB

Raw Permalink Blame History

CSS रिफैक्टोरिंग असाइनमेंट

उद्देश्य

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

यह समझना कि विभिन्न लेआउट विधियों को कब और कैसे उपयोग किया जाए, आधुनिक वेब विकास के लिए एक महत्वपूर्ण कौशल है। यह अभ्यास पारंपरिक पोजिशनिंग तकनीकों को समकालीन CSS लेआउट सिस्टम के साथ जोड़ता है।

असाइनमेंट निर्देश

चरण 1: विश्लेषण और योजना

अपने मौजूदा टेरियम कोड की समीक्षा करें - पहचानें कि कौन से तत्व वर्तमान में एब्सोल्यूट पोजिशनिंग का उपयोग कर रहे हैं
अपनी लेआउट विधि चुनें - निर्णय लें कि Flexbox या CSS Grid आपकी डिज़ाइन आवश्यकताओं के लिए अधिक उपयुक्त है
अपने नए लेआउट संरचना का स्केच बनाएं - योजना बनाएं कि कंटेनर और पौधे के तत्व कैसे व्यवस्थित होंगे

चरण 2: क्रियान्वयन

अपने टेरियम प्रोजेक्ट का नया संस्करण बनाएं एक अलग फोल्डर में
HTML संरचना को आवश्यकतानुसार अपडेट करें ताकि चुनी गई लेआउट विधि का समर्थन हो सके
CSS को रिफैक्टर करें ताकि एब्सोल्यूट पोजिशनिंग के बजाय Flexbox या CSS Grid का उपयोग हो
दृश्य संगति बनाए रखें - सुनिश्चित करें कि आपके पौधे और टेरियम जार समान स्थानों पर दिखें
उत्तरदायी व्यवहार लागू करें - आपकी लेआउट विभिन्न स्क्रीन साइज़ के अनुसार सुगमता से अनुकूलित हो

चरण 3: परीक्षण और दस्तावेज़ीकरण

क्रॉस-ब्राउज़र परीक्षण - सत्यापित करें कि आपकी डिज़ाइन Chrome, Firefox, Edge और Safari में काम करती है
उत्तरदायी परीक्षण - मोबाइल, टैबलेट, और डेस्कटॉप स्क्रीन साइज़ पर अपने लेआउट का परीक्षण करें
दस्तावेज़ीकरण - अपनी CSS में टिप्पणियाँ जोड़ें जो आपकी लेआउट पसंद को समझाती हों
स्क्रीनशॉट - विभिन्न ब्राउज़रों और स्क्रीन साइज़ में अपने टेरियम के स्क्रीनशॉट लें

तकनीकी आवश्यकताएँ

लेआउट कार्यान्वयन

केवल एक चुनें: 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

डिलीवेरेबल्स

अपडेट किया हुआ HTML फ़ाइल जिसमें बेहतर सेमांटिक संरचना हो
रिफैक्टर्ड CSS फ़ाइल जिसमें आधुनिक लेआउट तकनीकें इस्तेमाल हुई हों
स्क्रीनशॉट संग्रह जो क्रॉस-ब्राउज़र संगतता दिखाता हो:
- डेस्कटॉप दृश्य (1920x1080)
- टैबलेट दृश्य (768x1024)
- मोबाइल दृश्य (375x667)
- कम से कम 2 अलग-अलग ब्राउज़र
README.md फ़ाइल जो दस्तावेज़ीकरण करे:
- आपकी लेआउट पसंद (Flexbox बनाम Grid) और कारण
- रिफैक्टोरिंग के दौरान सामने आई चुनौतियां
- ब्राउज़र संगतता नोट्स
- आपके कोड को चलाने के निर्देश

मूल्यांकन मानदंड

मापदंड	उत्कृष्ट (4)	सक्षम (3)	विकासशील (2)	प्रारंभिक (1)
लेआउट कार्यान्वयन	Flexbox/Grid का परिष्कृत उपयोग उन्नत सुविधाओं के साथ; पूरी तरह उत्तरदायी	सही कार्यान्वयन और अच्छी उत्तरदायी व्यवहार	बुनियादी कार्यान्वयन, कुछ उत्तरदायी समस्याएं	अपूर्ण या गलत लेआउट कार्यान्वयन
कोड गुणवत्ता	साफ़, अच्छी तरह व्यवस्थित CSS, सार्थक टिप्पणियाँ और संगत नामकरण	अच्छी संगठन, कुछ टिप्पणियाँ	पर्याप्त संगठन, न्यूनतम टिप्पणियाँ	खराब संगठन; समझना कठिन
क्रॉस-ब्राउज़र संगतता	सभी आवश्यक ब्राउज़रों में पूर्ण संगति, स्क्रीनशॉट के साथ	अच्छी संगति, सूक्ष्म भिन्नताओं के दस्तावेज़ीकरण के साथ	कुछ संगतता समस्याएं, जो कार्यक्षमता को प्रभावित नहीं करतीं	प्रमुख संगतता समस्याएं या परीक्षण का अभाव
उत्तरदायी डिज़ाइन	उत्कृष्ट मोबाइल-प्रथम तरीका, स्मूद ब्रेकपॉइंट्स के साथ	अच्छी उत्तरदायी व्यवहार, उपयुक्त ब्रेकपॉइंट्स	बुनियादी उत्तरदायी फीचर्स, कुछ लेआउट समस्याएं	सीमित या टूटी हुई उत्तरदायी व्यवहार
दस्तावेज़ीकरण	व्यापक README विस्तृत व्याख्याओं और अंतर्दृष्टि के साथ	अच्छी डॉक्यूमेंटेशन सभी आवश्यक तत्वों को कवर करती है	बुनियादी दस्तावेज़ीकरण, न्यूनतम व्याख्यान	अपूर्ण या गुम हुई डॉक्यूमेंटेशन

सहायक संसाधन

लेआउट विधि गाइड

ब्राउज़र परीक्षण टूल्स

कोड गुणवत्ता टूल्स

बोनस चुनौतियाँ

🌟 उन्नत लेआउट: अपने डिज़ाइन के विभिन्न भागों में Flexbox और Grid दोनों लागू करें
🌟 एनिमेशन एकीकरण: CSS ट्रांजिशन या एनिमेशन जोड़ें जो आपके नए लेआउट के साथ काम करें
🌟 डार्क मोड: CSS कस्टम प्रॉपर्टीज़ आधारित थीम स्विचर लागू करें
🌟 कंटेनर क्वेरीज: घटक-स्तरीय उत्तरदायित्व के लिए आधुनिक कंटेनर क्वेरी तकनीकों का उपयोग करें

💡 ध्यान दें: लक्ष्य केवल काम करना नहीं है, बल्कि यह समझना है कि आपका चुना हुआ लेआउट तरीका इस विशेष डिज़ाइन चुनौती के लिए सबसे अच्छा समाधान क्यों है!

अस्वीकरण: इस दस्तावेज़ का अनुवाद AI अनुवाद सेवा Co-op Translator का उपयोग करके किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या गलतियाँ हो सकती हैं। मूल भाषा में मूल दस्तावेज़ को अधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।

14 KiB Raw Permalink Blame History