15 KiB

Raw Blame History

CSS पुनःसंरचना असाइनमेन्ट

उद्देश्य

आफ्नो टेरारियम प्रोजेक्टलाई आधुनिक CSS लेआउट प्रविधिहरू प्रयोग गरेर रूपान्तरण गर्नुहोस्! हालको absolute positioning विधिलाई Flexbox वा CSS Grid प्रयोग गरेर पुनःसंरचना गर्नुहोस् ताकि डिजाइन अधिक व्यवस्थित र उत्तरदायी बनोस्। यो असाइनमेन्टले तपाईंलाई आधुनिक CSS मापदण्डहरू लागू गर्न चुनौती दिन्छ जबकि टेरारियमको दृश्यात्मक आकर्षण कायम राख्छ।

आधुनिक वेब विकासका लागि विभिन्न लेआउट विधिहरू कहिले र कसरी प्रयोग गर्ने भन्ने बुझ्न महत्त्वपूर्ण सीप हो। यो अभ्यासले परम्परागत पोजिसनिङ प्रविधिहरूलाई समकालीन CSS लेआउट प्रणालीहरूसँग जोड्छ।

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

चरण १: विश्लेषण र योजना बनाउने

आफ्नो हालको टेरारियम कोड समीक्षा गर्नुहोस् - कुन तत्वहरूले हाल absolute positioning प्रयोग गरिरहेका छन् भनेर पहिचान गर्नुहोस्।
आफ्नो लेआउट विधि चयन गर्नुहोस् - Flexbox वा CSS Grid मध्ये कुन तपाईंको डिजाइन लक्ष्यहरूलाई राम्रोसँग अनुकूल बनाउँछ निर्णय गर्नुहोस्।
आफ्नो नयाँ लेआउट संरचना स्केच गर्नुहोस् - कन्टेनरहरू र बोटका तत्वहरू कसरी व्यवस्थित गरिनेछन् योजना बनाउनुहोस्।

चरण २: कार्यान्वयन

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

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

क्रस-ब्राउजर परीक्षण - तपाईंको डिजाइन Chrome, Firefox, Edge, र Safari मा काम गर्छ भनेर सुनिश्चित गर्नुहोस्।
उत्तरदायी परीक्षण - मोबाइल, ट्याब्लेट, र डेस्कटप स्क्रिन साइजहरूमा तपाईंको लेआउट जाँच गर्नुहोस्।
दस्तावेजीकरण - CSS मा तपाईंको लेआउट छनोटको व्याख्या गर्ने टिप्पणीहरू थप्नुहोस्।
स्क्रिनसटहरू - विभिन्न ब्राउजरहरू र स्क्रिन साइजहरूमा तपाईंको टेरारियमको स्क्रिनसटहरू लिनुहोस्।

प्राविधिक आवश्यकताहरू

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

एक मात्र चयन गर्नुहोस्: Flexbox वा CSS Grid मध्ये एकलाई लागू गर्नुहोस् (उस्तै तत्वहरूका लागि दुवै प्रयोग नगर्नुहोस्)।
उत्तरदायी डिजाइन: निश्चित पिक्सलको सट्टा सापेक्ष इकाइहरू (rem, em, %, vw, vh) प्रयोग गर्नुहोस्।
पहुंचयोग्यता: उचित semantic HTML संरचना र alt text कायम गर्नुहोस्।
कोड गुणस्तर: सुसंगत नामकरण परम्परा प्रयोग गर्नुहोस् र 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: पछिल्ला २ संस्करणहरू
Firefox: पछिल्ला २ संस्करणहरू
Safari: पछिल्ला २ संस्करणहरू
मोबाइल ब्राउजरहरू: iOS Safari, Chrome Mobile

डेलिभरेबल्स

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

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

मापदण्ड	उत्कृष्ट (४)	दक्ष (३)	विकासशील (२)	प्रारम्भिक (१)
लेआउट कार्यान्वयन	Flexbox/Grid को उत्कृष्ट प्रयोग उन्नत सुविधाहरू सहित; पूर्णत: उत्तरदायी	सही कार्यान्वयन राम्रो उत्तरदायी व्यवहारसहित	सामान्य कार्यान्वयन साना उत्तरदायी समस्याहरू सहित	अपूर्ण वा गलत लेआउट कार्यान्वयन
कोड गुणस्तर	सफा, राम्रोसँग व्यवस्थित CSS अर्थपूर्ण टिप्पणीहरू र सुसंगत नामकरणसहित	राम्रो संगठन केही टिप्पणीहरूसहित	पर्याप्त संगठन न्यूनतम टिप्पणीहरूसहित	खराब संगठन; बुझ्न गाह्रो
क्रस-ब्राउजर अनुकूलता	सबै आवश्यक ब्राउजरहरूमा पूर्ण सुसंगतता स्क्रिनसटहरूसहित	राम्रो अनुकूलता साना भिन्नताहरू दस्तावेजीकरण गरिएको	केही अनुकूलता समस्याहरू जसले कार्यक्षमता बिगार्दैन	प्रमुख अनुकूलता समस्याहरू वा परीक्षण हराएको
उत्तरदायी डिजाइन	असाधारण मोबाइल-प्रथम दृष्टिकोण सहज ब्रेकप्वाइन्टहरूसहित	राम्रो उत्तरदायी व्यवहार उपयुक्त ब्रेकप्वाइन्टहरूसहित	सामान्य उत्तरदायी सुविधाहरू केही लेआउट समस्याहरू सहित	सीमित वा बिग्रिएको उत्तरदायी व्यवहार
दस्तावेजीकरण	विस्तृत README स्पष्ट व्याख्या र अन्तर्दृष्टिहरूसहित	राम्रो दस्तावेजीकरण सबै आवश्यक तत्वहरू समेटेर	सामान्य दस्तावेजीकरण न्यूनतम व्याख्याहरूसहित	अपूर्ण वा हराएको दस्तावेजीकरण

उपयोगी स्रोतहरू

लेआउट विधि मार्गदर्शन

ब्राउजर परीक्षण उपकरणहरू

कोड गुणस्तर उपकरणहरू

बोनस चुनौतीहरू

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

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

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

15 KiB Raw Blame History