<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T10:21:50+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "ms"
}
-->
# Tugasan Penstrukturan Semula CSS

## Objektif

Struktur semula projek terrarium untuk menggunakan **Flexbox** atau **CSS Grid** bagi susun atur. Kemas kini HTML dan CSS seperti yang diperlukan untuk mencapai reka bentuk moden dan responsif. Anda tidak perlu melaksanakan elemen yang boleh diseret—fokus pada susun atur dan penggayaan sahaja.

## Arahan

1. **Buat versi baharu** aplikasi terrarium. Kemas kini markup dan CSS untuk menggunakan Flexbox atau CSS Grid bagi susun atur.
2. **Pastikan seni dan elemen berada di tempatnya** seperti dalam versi asal.
3. **Uji reka bentuk anda** dalam sekurang-kurangnya dua pelayar berbeza (contohnya, Chrome, Firefox, Edge).
4. **Ambil tangkapan skrin** terrarium anda dalam setiap pelayar untuk menunjukkan keserasian antara pelayar.
5. **Hantar** kod yang telah dikemas kini dan tangkapan skrin.

## Rubrik

| Kriteria   | Cemerlang                                                                 | Memadai                              | Perlu Penambahbaikan                   |
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Susun Atur | Sepenuhnya disusun semula menggunakan Flexbox atau CSS Grid; menarik secara visual dan responsif | Beberapa elemen disusun semula; penggunaan separa Flexbox atau Grid | Sedikit atau tiada penggunaan Flexbox atau Grid; susun atur tidak berubah |
| Keserasian Antara Pelayar | Tangkapan skrin disediakan untuk pelbagai pelayar; penampilan konsisten      | Tangkapan skrin untuk satu pelayar; ketidakkonsistenan kecil | Tiada tangkapan skrin atau ketidakkonsistenan besar |
| Kualiti Kod | HTML/CSS yang bersih dan teratur; komen yang jelas                         | Sebahagian teratur; sedikit komen        | Kod tidak teratur; tiada komen         |

## Petua

- Semak panduan [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) dan [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
- Gunakan alat pembangun pelayar untuk menguji responsif.
- Komen kod anda untuk kejelasan.

---

**Penafian**:  
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.