<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T10:24:58+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "tl"
}
-->
# CSS Refactoring Assignment

## Layunin

I-refactor ang terrarium project upang gumamit ng **Flexbox** o **CSS Grid** para sa layout. I-update ang HTML at CSS kung kinakailangan upang makamit ang modernong, responsive na disenyo. Hindi mo kailangang mag-implement ng draggable elements—mag-focus lamang sa layout at styling.

## Mga Instruksyon

1. **Gumawa ng bagong bersyon** ng terrarium app. I-update ang markup at CSS upang gumamit ng Flexbox o CSS Grid para sa layout.
2. **Siguraduhing nasa tamang lugar ang art at mga elemento** tulad ng sa orihinal na bersyon.
3. **Subukan ang iyong disenyo** sa hindi bababa sa dalawang magkaibang browser (hal., Chrome, Firefox, Edge).
4. **Kumuha ng screenshots** ng iyong terrarium sa bawat browser upang ipakita ang cross-browser compatibility.
5. **I-submit** ang iyong updated na code at screenshots.

## Rubric

| Pamantayan | Napakahusay                                                             | Katamtaman                            | Kailangan ng Pagpapabuti              |
|------------|------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Layout     | Ganap na na-refactor gamit ang Flexbox o CSS Grid; visually appealing at responsive | Bahagyang na-refactor; may partial na paggamit ng Flexbox o Grid | Kaunti o walang paggamit ng Flexbox o Grid; hindi binago ang layout |
| Cross-Browser | May screenshots para sa maraming browser; consistent ang appearance | Screenshots para sa isang browser; may kaunting inconsistencies | Walang screenshots o may malalaking inconsistencies |
| Kalidad ng Code | Malinis, maayos na HTML/CSS; malinaw ang mga komento               | Bahagyang maayos; kaunting komento     | Magulo ang code; walang komento        |

## Mga Tips

- Bisitahin ang [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) at [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) na mga gabay.
- Gamitin ang browser developer tools upang subukan ang responsiveness.
- Maglagay ng komento sa iyong code para sa kalinawan.

---

**Paunawa**:  
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.