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.
41 lines
6.0 KiB
41 lines
6.0 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
|
"translation_date": "2025-10-03T11:04:16+00:00",
|
|
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
|
"language_code": "my"
|
|
}
|
|
-->
|
|
# CSS Refactoring Assignment
|
|
|
|
## ရည်ရွယ်ချက်
|
|
|
|
**Flexbox** သို့မဟုတ် **CSS Grid** ကို အသုံးပြု၍ terrarium project ကို ပြန်လည်တည်းဖြတ်ပါ။ အခေတ်မီ၊ တုံ့ပြန်နိုင်သော ဒီဇိုင်းကို ရရှိရန် HTML နှင့် CSS ကို လိုအပ်သလို ပြင်ဆင်ပါ။ draggable elements မလိုအပ်ပါ—layout နှင့် styling အပေါ် အာရုံစိုက်ပါ။
|
|
|
|
## လုပ်ဆောင်ရန်ညွှန်ကြားချက်များ
|
|
|
|
1. **Terrarium app ရဲ့ version အသစ်တစ်ခု** ကို ဖန်တီးပါ။ Layout အတွက် Flexbox သို့မဟုတ် CSS Grid ကို အသုံးပြုရန် markup နှင့် CSS ကို ပြင်ဆင်ပါ။
|
|
2. **Original version ရဲ့ အနုပညာနှင့် elements များကို** အတိအကျ ထားရှိထားပါ။
|
|
3. **Design ကို** အနည်းဆုံး browser နှစ်ခု (ဥပမာ Chrome, Firefox, Edge) တွင် စမ်းသပ်ပါ။
|
|
4. **Terrarium ရဲ့ screenshots များကို** browser တစ်ခုစီတွင် ရိုက်ယူပြီး cross-browser compatibility ကို ပြသပါ။
|
|
5. **Updated code နှင့် screenshots များကို** တင်သွင်းပါ။
|
|
|
|
## အဆင့်သတ်မှတ်ချက်
|
|
|
|
| အချက်အလက် | ထူးချွန်သော | လုံလောက်သော | တိုးတက်မှုလိုအပ်သော |
|
|
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
|
| Layout | Flexbox သို့မဟုတ် CSS Grid ကို အပြည့်အဝ အသုံးပြုထားပြီး၊ အလှပဆုံးနှင့် တုံ့ပြန်နိုင်သော | အချို့သော elements ကို ပြန်လည်တည်းဖြတ်ထားပြီး၊ Flexbox သို့မဟုတ် Grid ကို တစ်စိတ်တစ်ပိုင်း အသုံးပြုထား | Flexbox သို့မဟုတ် Grid ကို အနည်းငယ် သို့မဟုတ် မသုံးထား၊ layout မပြောင်းလဲထား |
|
|
| Cross-Browser | Browser များစွာအတွက် screenshots များကို ပေးထားပြီး၊ အမြင်အပြင် တူညီမှုရှိ | Browser တစ်ခုအတွက် screenshots များကို ပေးထားပြီး၊ အနည်းငယ် မတူညီမှုရှိ | Screenshots မပေးထား သို့မဟုတ် မတူညီမှုများ |
|
|
| Code Quality | သန့်ရှင်းပြီး၊ အစီအစဉ်တကျ HTML/CSS; မှတ်ချက်များ ရှင်းလင်းစွာ ရေးသားထား | အစီအစဉ်တကျ ရေးသားထားသော်လည်း၊ မှတ်ချက်များ အနည်းငယ်သာ ရှိ | ရှုပ်ထွေးသော code; မှတ်ချက်များ မပါဝင် |
|
|
|
|
## အကြံပြုချက်များ
|
|
|
|
- [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) နှင့် [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) လမ်းညွှန်များကို ပြန်လည်သုံးသပ်ပါ။
|
|
- Browser developer tools ကို အသုံးပြု၍ တုံ့ပြန်နိုင်မှုကို စမ်းသပ်ပါ။
|
|
- Code ကို ရှင်းလင်းစွာ ရေးသားရန် မှတ်ချက်များ ထည့်သွင်းပါ။
|
|
|
|
---
|
|
|
|
**အကြောင်းကြားချက်**:
|
|
ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။ |