17 KiB

Raw Blame History Unescape Escape

आधुनिक CSS प्रयोग गरेर आफ्नो बैंक एपलाई स्टाइल गर्नुहोस्

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

आफ्नो कार्यात्मक बैंकिङ एप्लिकेसनलाई आधुनिक CSS प्रविधिहरू प्रयोग गरेर आकर्षक र व्यावसायिक देखिने वेब एपमा परिवर्तन गर्नुहोस्। तपाईंले एक सुसंगत डिजाइन प्रणाली सिर्जना गर्नुहुनेछ जसले प्रयोगकर्ता अनुभवलाई सुधार गर्दछ र पहुँचयोग्यता र उत्तरदायी डिजाइन सिद्धान्तहरू कायम राख्छ।

यो असाइनमेन्टले तपाईंलाई समकालीन वेब डिजाइन ढाँचाहरू लागू गर्न, सुसंगत दृश्य पहिचान कार्यान्वयन गर्न, र प्रयोगकर्ताहरूलाई आकर्षक र सहज नेभिगेट गर्न सक्ने इन्टरफेस सिर्जना गर्न चुनौती दिन्छ।

निर्देशनहरू

चरण १: आफ्नो स्टाइलशीट सेटअप गर्नुहोस्

आफ्नो 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;
}

चरण २: डिजाइन प्रणाली आवश्यकताहरू

यी आवश्यक डिजाइन तत्वहरू कार्यान्वयन गर्नुहोस्:

रंगको प्यालेट

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

टाइपोग्राफी

हेडिङ हाइरार्की: H1, H2, र H3 तत्वहरू बीच स्पष्ट भिन्नता।
बडी टेक्स्ट: पढ्न मिल्ने फन्ट साइज (न्यूनतम १६px) र उपयुक्त लाइन उचाइ।
फारम लेबलहरू: स्पष्ट, पहुँचयोग्य पाठ शैली।

लेआउट र स्पेसिङ

सुसंगत स्पेसिङ: स्पेसिङ स्केल प्रयोग गर्नुहोस् (८px, १६px, २४px, ३२px)।
ग्रिड प्रणाली: फारमहरू र सामग्री खण्डहरूको लागि व्यवस्थित लेआउट।
उत्तरदायी डिजाइन: ब्रेकप्वाइन्टहरूसँग मोबाइल-प्रथम दृष्टिकोण।

चरण ३: कम्पोनेन्ट स्टाइलिङ

यी विशेष कम्पोनेन्टहरू स्टाइल गर्नुहोस्:

फारमहरू

इनपुट फिल्डहरू: व्यावसायिक सीमा, फोकस अवस्थाहरू, र मान्यताको शैली।
बटनहरू: होभर प्रभावहरू, अक्षम अवस्थाहरू, र लोडिङ संकेतकहरू।
लेबलहरू: स्पष्ट स्थिति र आवश्यक फिल्ड संकेतकहरू।
त्रुटि सन्देशहरू: देखिने त्रुटि शैली र उपयोगी सन्देशहरू।

नेभिगेसन

हेडर: सफा, ब्रान्डेड नेभिगेसन क्षेत्र।
लिङ्कहरू: स्पष्ट होभर अवस्थाहरू र सक्रिय संकेतकहरू।
लोगो/शीर्षक: विशिष्ट ब्रान्डिङ तत्व।

सामग्री क्षेत्रहरू

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

चरण ४: उन्नत सुविधाहरू (वैकल्पिक)

यी उन्नत सुविधाहरू कार्यान्वयन गर्न विचार गर्नुहोस्:

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

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

आधुनिक बैंकिङ एपका विशेषताहरू:

सफा, न्यूनतम डिजाइन पर्याप्त सेतो ठाउँसहित।
व्यावसायिक रंग योजनाहरू (ब्लु, हरियो, वा परिष्कृत न्युट्रलहरू)।
स्पष्ट दृश्य हाइरार्की प्रमुख कल-टु-एक्सन बटनहरूसहित।
पहुंचयोग्य कन्ट्रास्ट अनुपातहरू 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 */

पहुँचयोग्यता आवश्यकताहरू

रंग कन्ट्रास्ट: सामान्य पाठको लागि कम्तीमा ४.५:१ अनुपात सुनिश्चित गर्नुहोस्।
फोकस संकेतकहरू: किबोर्ड नेभिगेसनको लागि देखिने फोकस अवस्थाहरू।
फारम लेबलहरू: इनपुटहरूसँग सही रूपमा सम्बद्ध।
उत्तरदायी डिजाइन: ३२०px देखि १९२०px चौडाइसम्मका स्क्रिनहरूमा प्रयोग गर्न मिल्ने।

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

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

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

तपाईंको सबमिशनमा समावेश गर्नुहोस्:

styles.css: तपाईंको पूर्ण स्टाइलशीट।
अपडेट गरिएको HTML: तपाईंले गरेका HTML परिमार्जनहरू।
स्क्रिनसटहरू: डेस्कटप र मोबाइलमा तपाईंको डिजाइन देखाउने छविहरू।
README: तपाईंको डिजाइन विकल्पहरू र रंग प्यालेटको संक्षिप्त विवरण।

बोनस अंकका लागि:

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

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

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

17 KiB Raw Blame History Unescape Escape