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.
127 lines
14 KiB
127 lines
14 KiB
# CSS పునర్నిర్మాణ కేటాయింపు
|
|
|
|
## లక్ష్యం
|
|
|
|
మీ టెరిరియం ప్రాజెక్ట్ను ఆధునిక CSS లేఅవుట్ సాంకేతికతలు ఉపయోగించడానికి మార్చండి! ప్రస్తుత అబ్సల్యూట్ పొజిషనింగ్ విధానాన్ని పునర్నిర్మాణం చేసి, మరింత నిర్వహణగల, స్పందనతో కూడిన డిజైన్ కోసం **Flexbox** లేదా **CSS Grid** ఉపయోగించండి. ఈ కేటాయింపులో మీరు आधुनिक CSS ప్రమాణాలను వర్తింపజేయాల్సి ఉంటుంది, అలాగే మీ టెరిరియం యొక్క దృశ్య ఆకర్షణను కూడా నిలబెట్టుకోవాలి.
|
|
|
|
విభిన్న లేఅవుట్ పద్ధతులను ఎప్పుడు మరియు ఎలా ఉపయోగించాలో అర్థం చేసుకోవడం ఆధునిక వెబ్ అభివృద్ధికి ముఖ్యమైన నైపుణ్యం. ఈ వ్యాయామం సాంప్రదాయపరి స్థాన నిర్ధారణా సాంకేతికతలతో ఆధునిక CSS లేఅవుట్ వ్యవస్థలను అనుసంధానం చేస్తుంది.
|
|
|
|
## కేటాయింపు సూచనలు
|
|
|
|
### దశ 1: విశ్లేషణ మరియు ప్రణాళిక
|
|
1. **మీ ప్రస్తుత టెరిరియం కోడ్ను సమీక్షించండి** - ఏ ఎలిమెంట్లు అబ్సల్యూట్ పొజిషనింగ్ ఉపయోగిస్తున్నారు అని గుర్తించండి
|
|
2. **మీ లేఅవుట్ పద్ధతిని ఎంచుకోండి** - Flexbox లేదా CSS Grid మీ డిజైన్ లక్ష్యాలకు ఏది మెరుగైనదో నిర్ణయించండి
|
|
3. **మీ కొత్త లేఅవుట్ నిర్మాణాన్ని స్కెచ్ చేయండి** - కంటైనర్లు మరియు మొక్కల మూలకాలు ఎలా ఏర్పాటుచేయబడతాయో ప్రణాళిక చేయండి
|
|
|
|
### దశ 2: అమలు
|
|
1. **మీ టెరిరియం ప్రాజెక్ట్కు కొత్త వెర్షన్ సృష్టించండి** విడివిడిగా ఫోల్డర్లో
|
|
2. **HTML నిర్మాణాన్ని అవసరమైతే మీ ఎంపిక అయిన లేఅవుట్ పద్ధతిని మద్దతు ఇవ్వడానికి నవీకరించండి**
|
|
3. **CSS పునర్నిర్మాణం చేయండి** అబ్సల్యూట్ పొజిషనింగ్ స్థానంలో Flexbox లేదా CSS Grid ఉపయోగించండి
|
|
4. **దృశ్య సారూప్యతను నిలుపుకోండి** - మీ మొక్కలు మరియు టెరిరియం జార్ ఒకటే స్థానాల్లో కనిపించేలా చూసుకోండి
|
|
5. **స్పందించే ప్రవర్తనను అమలు చేయండి** - మీ లేఅవుట్ వివిధ తెర పరిమాణాలకు అందంగా తగినట్లుగా మార్చుకోగలగాలి
|
|
|
|
### దశ 3: పరీక్ష మరియు డాక్యుమెంటేషన్
|
|
1. **క్రాస్బ్రౌజర్ పరీక్ష** - Chrome, Firefox, Edge, మరియు Safariలో మీ డిజైన్ పనిచేస్తుందో నిర్ధారించండి
|
|
2. **స్పందించే పరీక్ష** - మొబైల్, టాబ్లెట్, మరియు డెస్క్టాప్ స్క్రీన్ పరిమాణాలపై మీ లేఅవుట్ను తనిఖీ చేయండి
|
|
3. **డాక్యుమెంటేషన్** - మీ CSSలో మీ లేఅవుట్ ఎంపికలను వివరిస్తూ వ్యాఖ్యలను జోడించండి
|
|
4. **స్క్రీన్షాట్లు** - వివిధ బ్రౌజర్లలో మరియు స్క్రీన్ పరిమాణాలలో మీ టెరిరియాన్ని పകര്చండి
|
|
|
|
## సాంకేతిక అవసరాలు
|
|
|
|
### లేఅవుట్ అమలు
|
|
- **ఒకటే ఎంచుకోండి**: Flexbox లేదా CSS Grid (ఒకే ఎలిమెంట్లకు రెండూ కాదు)
|
|
- **స్పందనాత్మక డిజైన్**: స్థిర పిక్సెల్ల బదులు అనప్తే యూనిట్లు (`rem`, `em`, `%`, `vw`, `vh`) ఉపయోగించండి
|
|
- **అడగింపు సౌలభ్యం**: సరైన సేమాంటిక్ HTML నిర్మాణం మరియు alt టెక్స్ట్ నిలబెట్టండి
|
|
- **కోడ్ నాణ్యత**: క్రమబద్ధీకరించిన పేర్ల నియమాలు మరియు సార్వత్రికంగా CSSను సక్రమంగా ఏర్పాటు చేయండి
|
|
|
|
### ఆధునిక 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
|
|
|
|
## డెలివరబుల్స్
|
|
|
|
1. **ఉన్నత సేమాంటిక్ నిర్మాణంతో నవీకరించిన HTML ఫైల్**
|
|
2. **ఆధునిక లేఅవుట్ సాంకేతికతలను ఉపయోగించి పునర్నిర్మాణం చేసిన CSS ఫైల్**
|
|
3. **క్రాస్బ్రౌజర్ అనుకూలతను చూపే స్క్రీన్షాట్ల సమాహారం**:
|
|
- డెస్క్టాప్ వీక్షణ (1920x1080)
|
|
- టాబ్లెట్ వీక్షణ (768x1024)
|
|
- మొబైల్ వీక్షణ (375x667)
|
|
- కనిష్టం 2 వేరే బ్రౌజర్లు
|
|
4. **README.md ఫైల్** డాక్యుమెంటింగ్:
|
|
- మీ లేఅవుట్ ఎంపిక (Flexbox vs Grid) మరియు కారణాలు
|
|
- పునర్నిర్మాణ సమయంలో ఎదురైన సవాళ్ళు
|
|
- బ్రౌజర్ అనుకూలత నోట్స్
|
|
- మీ కోడ్ నడిపేందుకు సూచనలు
|
|
|
|
## మూల్యాంకన రూబ్రిక్
|
|
|
|
| ప్రమాణం | అత్యుత్తమం (4) | నైపుణ్యం (3) | అభివృద్ధి అవుతోంది (2) | ప్రారంభ స్థాయి (1) |
|
|
|----------|---------------|----------------|----------------|---------------|
|
|
| **లేఅవుట్ అమలు** | Flexbox/Grid నైపుణ్యంతో అధునాతన లక్షణాలు; పూర్తిగా స్పందనాత్మకంగా ఉంటుంది | సరైన అమలు, మంచి స్పందనాత్మక ప్రవర్తన | ప్రాథమిక అమలు, చిన్న స్పందన సమస్యలతో | అసంపూర్ణ లేదా తప్పు అమలు |
|
|
| **కోడ్ నాణ్యత** | శుభ్రమైన, సుసంవ్యవస్థિત CSS, అర్థవంతమైన వ్యాఖ్యలు మరియు స్థిరమైన పేరు నియమాలతో | మంచి నిర్మాణం, కొంత వ్యాఖ్యలతో | సరైన నిర్మాణం, తక్కువ వ్యాఖ్యలతో | చెడు నిర్మాణం, అర్థం చేసుకోవటానికి కష్టమే |
|
|
| **క్రాస్బ్రౌజర్ అనుకూలత** | అన్ని అవసరమైన బ్రౌజర్లలో పూర్తి సారూప్యత, స్క్రీన్షాట్లతో | మంచి అనుకూలత, చిన్న తేడా గమనించినది | కొంత అనుకూలత సమస్యలు కానీ పనితీరు ఆపడం లేదు | ప్రధాన అనుకూలత సమస్యలు లేదా పరీక్షలు లేకపోవటం |
|
|
| **స్పందనాత్మక డిజైన్** | అత్యుత్తమ మొబైల్-ఫస్ట్ విధానం, సున్నితమైన బ్రేక్ పాయింట్లు | మంచి స్పందన, తగిన బ్రేక్ పాయింట్లతో | ప్రాథమిక స్పందన లక్షణాలు, కొన్ని లేఅవుట్ సమస్యలతో | పరిమిత లేదా విరిగిన స్పందన ప్రవర్తన |
|
|
| **డాక్యుమెంటేషన్** | విపుల README, వివరణాత్మక వ్యాసాలు, లోతైన అర్ధాలు | మంచి డాక్యుమెంటేషన్, అన్ని అవసర అంశాలను కవర్ చేసింది | ప్రాథమిక డాక్యుమెంటేషన్, తక్కువ వివరణలతో | అసంపూర్ణ లేదా డాక్యుమెంటేషన్ లేదు |
|
|
|
|
## సహాయక వనరులు
|
|
|
|
### లేఅవుట్ పద్ధతి మార్గదర్శకాలు
|
|
- 📖 [Flexbox కు పూర్తి మార్గదర్శिका](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
|
- 📖 [CSS Grid కు పూర్తి మార్గదర్శిక](https://css-tricks.com/snippets/css/complete-guide-grid/)
|
|
- 📖 [Flexbox మరియు Grid - సరైన పరికరాన్ని ఎంచుకోండి](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)
|
|
|
|
### బ్రౌజర్ పరీక్ష టూల్స్
|
|
- 🛠️ [Browser DevTools స్పందనాత్మక మోడ్](https://developer.chrome.com/docs/devtools/device-mode/)
|
|
- 🛠️ [Can I Use - ఫీచర్ మద్దతు](https://caniuse.com/)
|
|
- 🛠️ [BrowserStack - క్రాస్ బ్రౌజర్ పరీక్ష](https://www.browserstack.com/)
|
|
|
|
### కోడ్ నాణ్యత టూల్స్
|
|
- ✅ [CSS Validator](https://jigsaw.w3.org/css-validator/)
|
|
- ✅ [HTML Validator](https://validator.w3.org/)
|
|
- ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
|
|
|
|
## బోనస్ సవాళ్లు
|
|
|
|
🌟 **అధునాతన లేఅవుట్లు**: మీ డిజైన్లో Flexbox మరియు Grid రెండూ వేర్వేరు భాగాల్లో అమలు చేయండి
|
|
🌟 **అనిమేషన్ సమ్మిళనం**: మీ కొత్త లేఅవుట్తో పనిచేసే CSS ట్రాన్శిషన్లు లేదా అనిమేషన్లు జోడించండి
|
|
🌟 **డార్క్ మోడ్**: CSS కస్టమ్ ప్రాపర్టీల ఆధారంగా థీమ్ స్విచ్చర్ అమలు చేయండి
|
|
🌟 **కంటైనర్ ప్రశ్నలు**: భాగాల స్థాయి స్పందనకు ఆధునిక కంటైనర్ క్వెరీ సాంకేతికతలను ఉపయోగించండి
|
|
|
|
> 💡 **గమనిక**: పనిచేసేలా చేయడం మాత్రమే కాదు, మీరు ఎంచుకున్న లేఅవుట్ పద్ధతి ఈ డిజైన్ సరసమయానికి అత్యుత్తమ పరిష్కారం ఎందుకు అనేది అర్థం చేసుకోవడమూ ముఖ్యమే!
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**గమనిక**:
|
|
ఈ పత్రికను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వాన్ని సాధించడానికి ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో లోపాలు లేదా అపార్ధాలు ఉండవచ్చు. స్థానిక భాషలో ఉన్న అసలు పత్రికను అధికారిక మూలంగా పరిగణించాలి. అత్యవసర సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదం చేయించడం ఉత్తమం. ఈ అనువాదాన్ని ఉపయోగించడంలో ఏవైనా తప్పు అర్థాలు లేదా విక్షేపాల కోసం మేము బాధ్యత వహించము.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |