<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "bee6762d4092a13fc7c338814963f980",
  "translation_date": "2025-10-24T16:36:08+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "my"
}
-->
# CSS Refactoring အလုပ်

## ရည်ရွယ်ချက်

သင့် terrarium ပရောဂျက်ကို ခေတ်မီ CSS အပြင်အဆင်နည်းလမ်းများကို အသုံးပြုရန် ပြောင်းလဲပါ! လက်ရှိ absolute positioning နည်းလမ်းကို ပြုပြင်ပြီး **Flexbox** သို့မဟုတ် **CSS Grid** ကို အသုံးပြု၍ ပိုမိုထိရောက်သော၊ ပြုပြင်ထိန်းသိမ်းရလွယ်ကူသော responsive design ကို ဖန်တီးပါ။ ဒီအလုပ်မှာ ခေတ်မီ CSS စံများကို အသုံးချပြီး သင့် terrarium ရဲ့ အလှအပကို ထိန်းသိမ်းထားနိုင်ရန် စိန်ခေါ်မှုတစ်ခု ဖြစ်ပါတယ်။

ခေတ်မီ web development အတွက် layout နည်းလမ်းများကို ဘယ်အချိန်မှာ၊ ဘယ်လိုအသုံးပြုရမယ်ဆိုတာကို နားလည်ခြင်းဟာ အရေးကြီးတဲ့ ကျွမ်းကျင်မှုတစ်ခုဖြစ်ပါတယ်။ ဒီလေ့ကျင့်ခန်းက ရိုးရာ positioning နည်းလမ်းများကို ခေတ်မီ CSS layout စနစ်များနှင့် ချိတ်ဆက်ပေးပါတယ်။

## အလုပ်ဆောင်ရန်ညွှန်ကြားချက်များ

### အဆင့် ၁: ခွဲခြမ်းစိတ်ဖြာခြင်းနှင့် အစီအစဉ်ရေးဆွဲခြင်း
1. **သင့် terrarium code ကို ပြန်လည်သုံးသပ်ပါ** - လက်ရှိမှာ absolute positioning ကို အသုံးပြုထားတဲ့ element တွေကို ရှာဖွေပါ။
2. **သင့် layout နည်းလမ်းကို ရွေးချယ်ပါ** - Flexbox သို့မဟုတ် CSS Grid က သင့် design ရည်မှန်းချက်များအတွက် ပိုမိုသင့်လျော်မယ်ဆိုတာ ဆုံးဖြတ်ပါ။
3. **သင့် layout အဆောက်အအုံကို အကြမ်းဖျင်းရေးဆွဲပါ** - container တွေ၊ plant element တွေကို ဘယ်လို စီမံထားမယ်ဆိုတာ အစီအစဉ်ရေးဆွဲပါ။

### အဆင့် ၂: အကောင်အထည်ဖော်ခြင်း
1. **သင့် terrarium project ရဲ့ version အသစ်ကို** folder အသစ်တစ်ခုထဲမှာ ဖန်တီးပါ။
2. **HTML အဆောက်အအုံကို update လုပ်ပါ** - သင့်ရွေးချယ်ထားတဲ့ layout နည်းလမ်းကို ထောက်ပံ့နိုင်ဖို့ လိုအပ်သလို ပြင်ဆင်ပါ။
3. **CSS ကို ပြုပြင်ပါ** - absolute positioning အစား Flexbox သို့မဟုတ် CSS Grid ကို အသုံးပြုပါ။
4. **အလှအပကို ထိန်းသိမ်းထားပါ** - သင့် plant တွေ၊ terrarium jar တွေ အတိအကျတည်နေရာမှာရှိနေသေချာပါစေ။
5. **Responsive behavior ကို အကောင်အထည်ဖော်ပါ** - သင့် layout က မည်သည့် screen size မဆို အဆင်ပြေစွာ လိုက်လျောညီထွေဖြစ်ရပါမယ်။

### အဆင့် ၃: စမ်းသပ်ခြင်းနှင့် Documentation
1. **Cross-browser စမ်းသပ်ခြင်း** - Chrome, Firefox, Edge, Safari တို့မှာ သင့် design အလုပ်လုပ်သေချာပါစေ။
2. **Responsive စမ်းသပ်ခြင်း** - mobile, tablet, desktop screen size တွေမှာ သင့် layout ကို စမ်းသပ်ပါ။
3. **Documentation** - သင့် layout ရွေးချယ်မှုများကို ရှင်းလင်းဖော်ပြထားသော comment တွေကို CSS မှာ ထည့်ပါ။
4. **Screenshots** - browser တွေ၊ screen size များအလိုက် သင့် terrarium ရဲ့ ပုံရိပ်တွေကို capture လုပ်ပါ။

## Technical Requirements

### Layout Implementation
- **တစ်ခုသာ ရွေးချယ်ပါ**: Flexbox သို့မဟုတ် CSS Grid ကို အသုံးပြုပါ (တစ်ခုတည်း element တွေမှာ နှစ်ခုလုံး မသုံးပါနှင့်)
- **Responsive Design**: fixed pixels အစား relative units (`rem`, `em`, `%`, `vw`, `vh`) ကို အသုံးပြုပါ။
- **Accessibility**: semantic HTML structure နှင့် alt text ကို ထိန်းသိမ်းပါ။
- **Code Quality**: နာမည်ပေးမှုများကို တိကျမှုရှိစွာ အသုံးပြုပြီး CSS ကို စနစ်တကျ စီစဉ်ပါ။

### Modern CSS Features to Include
```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;
}
```

### Browser Support Requirements
- **Chrome/Edge**: နောက်ဆုံး version ၂ ခု
- **Firefox**: နောက်ဆုံး version ၂ ခု  
- **Safari**: နောက်ဆုံး version ၂ ခု
- **Mobile browsers**: iOS Safari, Chrome Mobile

## Deliverables

1. **Updated HTML file** - semantic structure ကို တိုးတက်အောင် ပြုပြင်ထားသော HTML
2. **Refactored CSS file** - ခေတ်မီ layout နည်းလမ်းများကို အသုံးပြုထားသော CSS
3. **Screenshot collection** - cross-browser compatibility ကို ပြသထားသော ပုံရိပ်များ:
   - Desktop view (1920x1080)
   - Tablet view (768x1024) 
   - Mobile view (375x667)
   - အနည်းဆုံး browser ၂ ခု
4. **README.md file** - documentation:
   - သင့် layout ရွေးချယ်မှု (Flexbox vs Grid) နှင့် အကြောင်းပြချက်
   - ပြုပြင်စဉ်အတွင်း ကြုံတွေ့ရသော စိန်ခေါ်မှုများ
   - Browser compatibility မှတ်ချက်များ
   - သင့် code ကို အလုပ်လုပ်အောင် လုပ်ဆောင်ရန် ညွှန်ကြားချက်များ

## Assessment Rubric

| Criteria | Exemplary (4) | Proficient (3) | Developing (2) | Beginning (1) |
|----------|---------------|----------------|---------------|---------------|
| **Layout Implementation** | Flexbox/Grid ကို ကျွမ်းကျင်စွာ အသုံးပြုထားပြီး advanced features ပါဝင်; fully responsive | အမှန်တကယ် အကောင်အထည်ဖော်ထားပြီး responsive behavior ကောင်းမွန် | အခြေခံ implementation; responsive အနည်းငယ်ပြဿနာရှိ | အကောင်အထည်ဖော်မှု မပြီးစီးသို့မဟုတ် မှားယွင်း |
| **Code Quality** | CSS ကို သန့်ရှင်းစွာ စီစဉ်ထားပြီး comment တွေက အဓိပ္ပာယ်ရှိ; နာမည်ပေးမှု တိကျ | စီစဉ်မှုကောင်းမွန်ပြီး comment အနည်းငယ်ပါဝင် | အခြေခံစီစဉ်မှု; comment အနည်းငယ် | စီစဉ်မှုမကောင်း; နားလည်ရခက် |
| **Cross-Browser Compatibility** | Browser အားလုံးမှာ အပြည့်အဝ consistency ရှိပြီး screenshot တွေပါဝင် | Compatibility ကောင်းမွန်; အနည်းငယ်ကွာခြားမှုများ documentation ထဲမှာ ဖော်ပြထား | Compatibility ပြဿနာအနည်းငယ်ရှိ; functionality မပျက်စီး | Compatibility ပြဿနာများ; စမ်းသပ်မှု မပြုလုပ်ထား |
| **Responsive Design** | Mobile-first approach ကောင်းမွန်ပြီး breakpoints တွေ smooth | Responsive behavior ကောင်းမွန်; breakpoints သင့်တော် | Responsive feature အခြေခံ; layout ပြဿနာအနည်းငယ် | Responsive behavior အနည်းငယ် သို့မဟုတ် ပျက်စီး |
| **Documentation** | README ကို အကျဉ်းချုပ်ကောင်းမွန်ပြီး အကြောင်းအရာများကို အသေးစိတ်ဖော်ပြထား | Documentation ကောင်းမွန်ပြီး လိုအပ်သော အချက်များ ပါဝင် | Documentation အခြေခံ; အကြောင်းအရာ အနည်းငယ် | Documentation မပြီးစီး သို့မဟုတ် မပါဝင် |

## Helpful Resources

### Layout Method Guides
- 📖 [Flexbox အကြောင်းလမ်းညွှန်](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- 📖 [CSS Grid အကြောင်းလမ်းညွှန်](https://css-tricks.com/snippets/css/complete-guide-grid/)
- 📖 [Flexbox vs Grid - Tool ရွေးချယ်ခြင်း](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)

### Browser Testing Tools
- 🛠️ [Browser DevTools Responsive Mode](https://developer.chrome.com/docs/devtools/device-mode/)
- 🛠️ [Can I Use - Feature Support](https://caniuse.com/)
- 🛠️ [BrowserStack - Cross-browser Testing](https://www.browserstack.com/)

### Code Quality Tools
- ✅ [CSS Validator](https://jigsaw.w3.org/css-validator/)
- ✅ [HTML Validator](https://validator.w3.org/)
- ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

## Bonus Challenges

🌟 **အဆင့်မြင့် Layouts**: Design ရဲ့ အခြားနေရာတွေမှာ Flexbox နှင့် Grid နှစ်ခုလုံးကို အသုံးပြုပါ  
🌟 **Animation Integration**: သင့် layout အသစ်နဲ့ လိုက်ဖက်တဲ့ CSS transitions သို့မဟုတ် animations တွေ ထည့်ပါ  
🌟 **Dark Mode**: CSS custom properties-based theme switcher ကို ဖန်တီးပါ  
🌟 **Container Queries**: component-level responsiveness အတွက် ခေတ်မီ container query နည်းလမ်းတွေကို အသုံးပြုပါ  

> 💡 **သတိပြုပါ**: အလုပ်လုပ်အောင်လုပ်ဖို့သာမက၊ ဒီ design challenge အတွက် သင့်ရွေးချယ်ထားတဲ့ layout နည်းလမ်းက အကောင်းဆုံးဖြစ်တဲ့ အကြောင်းရင်းကို နားလည်ဖို့လည်း အရေးကြီးပါတယ်!

---

**အကြောင်းကြားချက်**:  
ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူသားမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။