<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T09:53:18+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "th"
}
-->
# งานปรับปรุง CSS

## วัตถุประสงค์

ปรับปรุงโปรเจกต์ terrarium ให้ใช้ **Flexbox** หรือ **CSS Grid** สำหรับการจัดวางเลย์เอาต์ ปรับปรุง HTML และ CSS ตามความจำเป็นเพื่อให้ได้ดีไซน์ที่ทันสมัยและตอบสนอง คุณไม่จำเป็นต้องทำให้ส่วนประกอบสามารถลากได้—เน้นที่การจัดวางและการออกแบบเท่านั้น

## คำแนะนำ

1. **สร้างเวอร์ชันใหม่** ของแอป terrarium ปรับปรุงโครงสร้าง HTML และ CSS ให้ใช้ Flexbox หรือ CSS Grid สำหรับการจัดวางเลย์เอาต์
2. **ตรวจสอบให้แน่ใจว่าองค์ประกอบและงานศิลป์อยู่ครบ** เหมือนในเวอร์ชันต้นฉบับ
3. **ทดสอบการออกแบบของคุณ** ในเบราว์เซอร์อย่างน้อยสองตัว (เช่น Chrome, Firefox, Edge)
4. **ถ่ายภาพหน้าจอ** ของ terrarium ในแต่ละเบราว์เซอร์เพื่อแสดงความเข้ากันได้ระหว่างเบราว์เซอร์
5. **ส่ง** โค้ดที่ปรับปรุงแล้วและภาพหน้าจอ

## เกณฑ์การประเมิน

| เกณฑ์       | ดีเยี่ยม                                                                 | พอใช้                                | ต้องปรับปรุง                          |
|-------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| การจัดวาง   | ปรับปรุงโดยใช้ Flexbox หรือ CSS Grid อย่างเต็มรูปแบบ; สวยงามและตอบสนอง | ปรับปรุงบางส่วน; ใช้ Flexbox หรือ Grid บางส่วน | ใช้ Flexbox หรือ Grid น้อยมากหรือไม่ได้ใช้เลย; เลย์เอาต์ไม่เปลี่ยนแปลง |
| ความเข้ากันได้ระหว่างเบราว์เซอร์ | มีภาพหน้าจอจากหลายเบราว์เซอร์; ลักษณะเหมือนกันในทุกเบราว์เซอร์ | มีภาพหน้าจอจากเบราว์เซอร์เดียว; มีความแตกต่างเล็กน้อย | ไม่มีภาพหน้าจอหรือมีความแตกต่างมาก |
| คุณภาพของโค้ด | HTML/CSS ที่สะอาดและจัดระเบียบดี; มีคอมเมนต์ชัดเจน                     | มีการจัดระเบียบบางส่วน; มีคอมเมนต์เล็กน้อย | โค้ดไม่เป็นระเบียบ; ไม่มีคอมเมนต์    |

## เคล็ดลับ

- ทบทวน [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) และ [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) เพื่อความเข้าใจ
- ใช้เครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์เพื่อทดสอบการตอบสนอง
- เพิ่มคอมเมนต์ในโค้ดของคุณเพื่อความชัดเจน

---

**ข้อจำกัดความรับผิดชอบ**:  
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์ที่มีความเชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้