16 KiB

Raw Permalink Blame History

अपने बैंक ऐप को आधुनिक CSS के साथ स्टाइल करें

परियोजना अवलोकन

अपने कार्यात्मक बैंकिंग एप्लिकेशन को आधुनिक CSS तकनीकों का उपयोग करके एक दृष्टिगत रूप से आकर्षक, पेशेवर दिखने वाले वेब ऐप में बदलें। आप एक ऐसा सौंदर्यपूर्ण डिज़ाइन सिस्टम बनाएंगे जो उपयोगकर्ता अनुभव को बढ़ाता है, जबकि पहुँच और प्रतिक्रियाशील डिज़ाइन सिद्धांतों को बनाए रखता है।

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

निर्देश

चरण 1: अपनी स्टाइलशीट सेटअप करें

अपनी CSS नींव बनाएँ:

बनाएँ एक नया फ़ाइल styles.css अपने प्रोजेक्ट रूट में
लिंक करें स्टाइलशीट को अपनी index.html फ़ाइल में:
```
<link rel="stylesheet" href="styles.css">
```

शुरू करें CSS रिसेट और आधुनिक डिफॉल्ट्स के साथ:

/* Modern CSS reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

चरण 2: डिजाइन सिस्टम आवश्यकताएं

इन आवश्यक डिजाइन तत्वों को लागू करें:

रंग पैलेट

प्राथमिक रंग: बटन और हाइलाइट के लिए एक पेशेवर रंग चुनें
द्वितीयक रंग: एक्सेंट और द्वितीयक कार्यों के लिए पूरक रंग
तटस्थ रंग: टेक्स्ट, बॉर्डर, और पृष्ठभूमि के लिए ग्रे
सफलता/त्रुटि रंग: सफलता के लिए हरा, त्रुटि के लिए लाल

टाइपोग्राफी

हेडिंग पदानुक्रम: H1, H2, और H3 तत्वों के बीच स्पष्ट भेद
बॉडी टेक्स्ट: पठनीय फ़ॉन्ट आकार (न्यूनतम 16px) और उपयुक्त लाइन हाइट
फॉर्म लेबल: स्पष्ट, पहुँचने योग्य टेक्स्ट स्टाइलिंग

लेआउट और रिक्त स्थान

सुसंगत रिक्त स्थान: रिक्त स्थान स्केल का उपयोग करें (8px, 16px, 24px, 32px)
ग्रिड सिस्टम: फॉर्म और कंटेंट सेक्शंस के लिए संगठित लेआउट
प्रतिक्रियाशील डिज़ाइन: मोबाइल-प्रथम दृष्टिकोण और ब्रेकपॉइंट्स

चरण 3: कंपोनेंट स्टाइलिंग

इन विशिष्ट कंपोनेंट्स को स्टाइल करें:

फॉर्म्स

इनपुट फील्ड्स: पेशेवर बॉर्डर, फोकस स्टेट्स, और वैधता स्टाइलिंग
बटन: होवर इफेक्ट्स, निष्क्रिय स्टेट्स, और लोडिंग संकेतक
लेबल: स्पष्ट पोजीशनिंग और आवश्यक फ़ील्ड संकेतक
त्रुटि संदेश: दृश्य त्रुटि स्टाइलिंग और उपयोगी संदेश

नेविगेशन

हेडर: साफ़, ब्रांडेड नेविगेशन क्षेत्र
लिंक: स्पष्ट होवर स्टेट्स और सक्रिय संकेतक
लोगो/शीर्षक: विशिष्ट ब्रांडिंग तत्व

कंटेंट क्षेत्र

सेक्शन: विभिन्न क्षेत्रों के बीच स्पष्ट दृश्य पृथक्करण
कार्ड: यदि कार्ड आधारित लेआउट्स का उपयोग करते हैं, तो छाया और बॉर्डर शामिल करें
पृष्ठभूमि: उचित श्वेत स्थान और सूक्ष्म पृष्ठभूमि का उपयोग

चरण 4: उन्नत फीचर्स (वैकल्पिक)

इन उन्नत फीचर्स को लागू करने पर विचार करें:

डार्क मोड: लाइट और डार्क थीम के बीच टॉगल करें
एनिमेशन: सूक्ष्म ट्रांजिशन और माइक्रो-इंटरएक्शन
लोडिंग स्टेट्स: फॉर्म सबमिशन के दौरान दृश्य प्रतिक्रिया
प्रतिक्रियाशील छवियां: विभिन्न स्क्रीन आकारों के लिए अनुकूलित छवियां

डिज़ाइन प्रेरणा

आधुनिक बैंकिंग ऐप की विशेषताएं:

स्वच्छ, न्यूनतम डिज़ाइन जिसमें पर्याप्त श्वेत स्थान हो
पेशेवर रंग योजनाएं (नीले, हरे, या परिष्कृत तटस्थ)
स्पष्ट दृश्य पदानुक्रम जिसमें प्रमुख कॉल-टू-एक्शन बटन हों
पहुँच योग्य कंट्रास्ट अनुपात जो WCAG दिशानिर्देशों के अनुरूप हों
मोबाइल-प्रतिक्रियाशील लेआउट जो सभी उपकरणों पर काम करें

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

CSS संगठन

/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */

पहुँच आवश्यकताएं

रंग कंट्रास्ट: सामान्य टेक्स्ट के लिए कम से कम 4.5:1 अनुपात सुनिश्चित करें
फोकस संकेतक: कीबोर्ड नेविगेशन के लिए दृश्य फोकस स्टेट्स
फॉर्म लेबल: इनपुट्स के साथ सही ढंग से जुड़े हुए
प्रतिक्रियाशील डिज़ाइन: 320px से 1920px चौड़ाई वाली स्क्रीन पर उपयोगी

मूल्यांकन मापक

मापदंड	उत्कृष्ट (A)	सिद्ध (B)	विकासशील (C)	सुधार की आवश्यकता (F)
डिजाइन सिस्टम	सुसंगत रंग, टाइपोग्राफी, और रिक्त स्थान के साथ व्यापक डिजाइन सिस्टम लागू करता है	स्पष्ट डिजाइन पैटर्न और अच्छी दृश्य पदानुक्रम के साथ सुसंगत स्टाइलिंग का उपयोग करता है	कुछ सुसंगतता समस्याओं या गुम डिजाइन तत्वों के साथ बुनियादी स्टाइलिंग लागू करता है	असंगत या विवादास्पद डिज़ाइन विकल्पों के साथ न्यूनतम स्टाइलिंग
उपयोगकर्ता अनुभव	उत्कृष्ट उपयोगिता और दृश्य आकर्षण के साथ सहज, पेशेवर इंटरफ़ेस बनाता है	स्पष्ट नेविगेशन और पठनीय सामग्री के साथ अच्छा उपयोगकर्ता अनुभव प्रदान करता है	कुछ UX सुधारों की आवश्यकता वाले बुनियादी उपयोगिता	खराब उपयोगिता, नेविगेट या पढ़ने में कठिन
तकनीकी कार्यान्वयन	आधुनिक CSS तकनीकों का उपयोग करता है, संगठित कोड संरचना और सर्वोत्तम प्रथाओं का पालन करता है	प्रभावी CSS लागू करता है, अच्छी संगठन और उपयुक्त तकनीकों के साथ	CSS सही ढंग से काम करता है लेकिन संगठन या आधुनिक दृष्टिकोणों की कमी हो सकती है	तकनीकी समस्याओं या ब्राउज़र संगतता समस्याओं के साथ खराब CSS कार्यान्वयन
प्रतिक्रियाशील डिज़ाइन	पूर्ण रूप से प्रतिक्रियाशील डिज़ाइन जो सभी उपकरण आकारों पर शानदार काम करता है	कुछ स्क्रीन आकारों पर मामूली समस्याओं के साथ अच्छा प्रतिक्रियाशील व्यवहार	कुछ लेआउट समस्याओं के साथ बुनियादी प्रतिक्रियाशील कार्यान्वयन	प्रतिक्रियाशील नहीं या मोबाइल उपकरणों पर महत्वपूर्ण समस्याएं
पहुँच योग्यता	उत्कृष्ट कीबोर्ड नेविगेशन और स्क्रीन रीडर समर्थन के साथ WCAG दिशानिर्देशों को पूरा करता है	उचित कंट्रास्ट और फोकस संकेतकों के साथ अच्छी पहुँच प्रथाएं	कुछ गायब तत्वों के साथ बुनियादी पहुँच विचार	खराब पहुँच, विकलांग उपयोगकर्ताओं के लिए कठिन

सबमिशन दिशानिर्देश

अपने सबमिशन में शामिल करें:

styles.css: आपकी पूर्ण स्टाइलशीट
अद्यतन HTML: आपने किए गए कोई भी HTML संशोधन
स्क्रीनशॉट्स: डेस्कटॉप और मोबाइल पर आपके डिज़ाइन को दिखाने वाली छवियां
README: आपके डिज़ाइन विकल्पों और रंग पैलेट का संक्षिप्त विवरण

बोनस अंक के लिए:

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

💡 प्रो टिप: पहले मोबाइल डिज़ाइन से शुरू करें, फिर बड़े स्क्रीन के लिए सुधार करें। यह मोबाइल-प्रथम दृष्टिकोण सुनिश्चित करता है कि आपका ऐप सभी उपकरणों पर अच्छी तरह काम करे और आधुनिक वेब विकास सर्वोत्तम प्रथाओं का पालन करे।

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

16 KiB Raw Permalink Blame History