You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
17 KiB
157 lines
17 KiB
# మీ బ్యాంక్ యాప్ను ఆధునిక CSS తో స్టైల్ చేయండి
|
|
|
|
## ప్రాజెక్ట్ అవలోకనం
|
|
|
|
మీ ఫంక్షనల్ బ్యాంకింగ్ అప్లికేషన్ను ఆధునిక CSS సాంకేతికతలను ఉపయోగించి దృశ్యంగా ఆకర్షణీయమైన, ప్రొఫెషనల్ లుక్ ఉన్న వెబ్ యాప్గా మార్చండి. మీరు వినియోగదారు అనుభవాన్ని మెరుగుపరచుకునే సమగ్ర డిజైన్ సిస్టమ్ను సృష్టిస్తారు, అదే సమయంలో యాక్సెస్IBILITY మరియు రెస్పాన్స్వివ్ డిజైన్ సూత్రాలను నిలుపుకుంటారు.
|
|
|
|
ఈ అసైన్మెంట్ మీకు సంఘటిత వెబ్ డిజైన్ నమూనాలను ఉపయోగించడానికి, నిరంతర దృశ్య ఐడెంటిటీని అమలు చేయడానికి, మరియు వినియోగదారులకు ఆకర్షణీయంగా మరియు సుగమంగా నావిగేట్ చేయగల ఇంటర్ఫేస్ను సృష్టించడానికి సవాలు అరుగుతుంది.
|
|
|
|
## సూచనలు
|
|
|
|
### దశ 1: మీ స్టైల్షీట్ను సెట్ చేయండి
|
|
|
|
**మీ CSS పునాది సృష్టించండి:**
|
|
|
|
1. **సృష్టించండి** మీ ప్రాజెక్ట్ రూట్లో `styles.css` అనే కొత్త ఫైల్
|
|
2. **లింక్ చేయండి** స్టైల్షీట్ను మీ `index.html` ఫైల్లో:
|
|
```html
|
|
<link rel="stylesheet" href="styles.css">
|
|
```
|
|
3. **ప్రారంభించండి** 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: మెరుగైన ఫీచర్లు (ఐచ్ఛికం)
|
|
|
|
**ఈ ఆధునిక ఫీచర్లను అమలు చేయాలని పరిగణించండి:**
|
|
- **డార్క్ మోడ్**: లైట్ మరియు డార్క్ థీమ్ల మధ్య టోగుల్
|
|
- **అనిమేషన్లు**: సుబtle మార్పులు మరియు సూక్ష్మ పరస్పర చర్యలు
|
|
- **లోడింగ్ స్థితులు**: ఫారమ్ సమర్పణ సమయంలో దృశ్య స్పందన
|
|
- **రెస్పాన్స్వివ్ చిత్రాలు**: వేర్వేరు స్క్రీన్ పరిమాణాలకు ఆప్టిమైజ్ చేసిన చిత్రాలు
|
|
|
|
## డిజైన్ ప్రేరణ
|
|
|
|
**ఆధునిక బ్యాంకింగ్ యాప్ లక్షణాలు:**
|
|
- **శుభ్రమైన, కనిష్ట డిజైన్** వైట్ స్పేస్ పుష్కలంగా
|
|
- **ప్రొఫెషనల్ కలర్ స్కీమ్స్** (నీలాలు, ఆకులతో లేదా శ్రద్ధావంతమైన న్యూట్రల్స్)
|
|
- **స్పష్టమైన దృశ్య హైరార్కీ** ప్రాముఖ్యమైన కాల్-టు-యాక్షన్ బటన్లతో
|
|
- **యాక్సెసిబుల్ కాంట్రాస్ట్ రేషియోస్** WCAG మార్గదర్శకాలతో సరిపోలడం
|
|
- **మొబైల్-రెస్పాన్స్వివ్ లేఅవుట్లు** అన్ని పరికరాలపై పని చేసే విధంగా
|
|
|
|
## సాంకేతిక అవసరాలు
|
|
|
|
### CSS విషయకరణ
|
|
```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 */
|
|
```
|
|
|
|
### యాక్సెస్IBILITY అవసరాలు
|
|
- **రంగు కాంట్రాస్ట్**: సాధారణ టెక్స్ట్కు కనీసం 4.5:1 నిష్పత్తి నిర్ధారించండి
|
|
- **ఫోకస్ సూచికలు**: కీబోర్డ్ నావిగేషన్ కోసం కనిపించే ఫోకస్ స్థితులు
|
|
- **ఫారమ్ లేబుల్స్**: ఇన్పుట్లతో సరిగ్గా అనుసంధానితమైనవి
|
|
- **రెస్పాన్స్వివ్ డిజైన్**: 320px నుండి 1920px వెడల్పు స్క్రీన్లపై ఉపయోగించదగినది
|
|
|
|
## మూల్యాంకన రుబ్రిక్
|
|
|
|
| ప్రమాణాలు | అద్భుతం (A) | ప్రావీణ్యం (B) | అభివృద్ధి (C) | మెరుగుదల అవసరం (F) |
|
|
|----------|--------------|----------------|----------------|----------------------|
|
|
| **డిజైన్ సిస్టమ్** | నిరంతర రంగులు, టైపోగ్రఫీ, మరియు స్పేసింగ్తో సమగ్ర డిజైన్ సిస్టమ్ను అమలు చేస్తుంది | స్పష్టమైన డిజైన్ నమూనాలు మరియు మంచి దృశ్య హైరార్కీతో స్థిరమైన స్టైలింగ్ ఉపయోగిస్తుంది | కొంత స్థిరమైన సమస్యలతో లేదా లేని డిజైన్ అంశాలతో ప్రాథమిక స్టైలింగ్ ఉపయోగించింది | తక్కువ స్టైలింగ్, అసమ్తుల లేదా విరుద్ధ డిజైన్ ఎంపికలు |
|
|
| **వినియోగదారు అనుభవం** | అద్భుతమైన వినియోగదార అనుభవంతో, సులభమైన మరియు ప్రొఫెషనల్ ఇంటర్ఫేస్ సృష్టిస్తుంది | స్పష్టమైన నావిగేషన్ మరియు చదవదగిన కంటెంట్తో మంచి వినియోగదారు అనుభవం ఇస్తుంది | కొన్ని UX మెరుగుదలలతో ప్రాథమిక వాడుక యోగ్యత | చెడు వాడుక యోగ్యత, నావిగేట్ చేయడానికి లేదా చదవడానికి కష్టమే |
|
|
| **సాంకేతిక అమలుపాటు** | ఆధునిక CSS సాంకేతికతలు, సక్రమంగా ఏర్పాటుచేసిన కోడ్ నిర్మాణం మరియు ఉత్తమ పద్ధతులు అనుసరిస్తుంది | CSSని సమర్థవంతంగా ఉపయోగించి మంచి నిర్వహణ మరియు సరైన సాంకేతికతలు అమలు చేస్తుంది | CSS సరిగ్గా పనిచేస్తుంది కానీ ఏర్పాటులో లేదా ఆధునిక దృష్టికోణాలలో లోపముంటుంది | చెడు CSS అమలు, సాంకేతిక సమస్యలు లేదా బ్రౌజర్ అనుకూలత సమస్యలు |
|
|
| **రెస్పాన్స్వివ్ డిజైన్** | అన్ని పరికర పరిమాణాలపై అద్భుతంగా పనిచేసే పూర్తి రెస్పాన్స్వివ్ డిజైన్ | కొన్ని స్క్రీన్ల పరిమాణాలలో స్వల్ప సమస్యలతో మంచి రెస్పాన్స్వ్ ప్రవర్తన | కొంత లేఅవుట్ సమస్యలతో ప్రాథమిక రెస్పాన్స్వివ్ అమలు | రెస్పాన్సివ్ కాదు లేదా మొబైల్ పరికరాల్లో పెద్ద సమస్యలు |
|
|
| **యాక్సెస్IBILITY** | అద్భుతమైన కీబోర్డ్ నావిగేషన్ మరియు స్క్రీన్ రీడర్ మద్దతుతో WCAG మార్గదర్శకాలకు అనుగుణంగా ఉంటుంది | సరైన కాంట్రాస్ట్ మరియు ఫోకస్ సూచికలతో మంచి యాక్సెస్IBILITY పద్ధతులు | కొన్ని లిప్తి అంశాలతో ప్రాథమిక యాక్సెస్IBILITY పరిగణన | చెడు యాక్సెస్IBILITY, వికలాంగులతో ఉన్న వినియోగదారులకు కష్టం |
|
|
|
|
## సమర్పణ మార్గదర్శకాలు
|
|
|
|
**మీ సమర్పణలో చేర్చండి:**
|
|
- **styles.css**: మీ పూర్తి స్టైల్షీట్
|
|
- **అప్డేటెడ్ HTML**: మీరు చేసిన ఏ HTML మార్పులు
|
|
- **స్క్రీన్షాట్లు**: డెస్క్టాప్ మరియు మొబైల్పై మీ డిజైన్ చూపించే చిత్రాలు
|
|
- **README**: మీ డిజైన్ ఎంపికలు మరియు రంగుల పలెట్ యొక్క సంక్షిప్త వివరణ
|
|
|
|
**బోనస్ పాయింట్లు కోసం:**
|
|
- **CSS కస్టమ్ ప్రాపర్టీస్** మేన్టైనబుల్ థీమింగ్ కోసం
|
|
- **అధునిక CSS ఫీచర్లు** జల్లు, ఫ్లెక్స్బాక్స్, లేదా CSS అనిమేషన్ల వంటి
|
|
- **పర్ఫార్మెన్స్ పరిగణనలు** ఆప్టిమైజ్డ్ CSS మరియు కనీస ఫైల్ సైజ్
|
|
- **క్రాస్-బ్రౌజర్ టెస్టింగ్** వేర్వేరు బ్రౌజర్లలో అనుకూలతను నిర్ధారించడం
|
|
|
|
> 💡 **ప్రో టిప్**: ముందుగా మొబైల్ డిజైన్తో ప్రారంభించండి, తరువాత పెద్ద స్క్రీన్ల కోసం మెరుగుపరచండి. ఈ మొబైల్-ఫస్ట్ దృష్టికోణం మీ యాప్ అన్ని పరికరాలపై బాగా పనిచేయించి ఆధునిక వెబ్ అభివృద్ధి ఉత్తమ పద్ధతులను అనుసరిస్తుంది.
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**స్పష్టీకరణ**:
|
|
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మనం ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదంలో పొరపాట్లు లేదా తప్పులున్నాయి కావచ్చు. అసలు పత్రం దాని స్వదేశీ భాషలోనే అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదం సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వలన జనం కలిగిన ఏ వివరణా లోపాలు లేదా తప్పుదిద్దుల బాధ్యత మేము పడము.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |