<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "bee6762d4092a13fc7c338814963f980",
  "translation_date": "2025-10-23T21:05:17+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "th"
}
-->
# งานปรับปรุง CSS

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

เปลี่ยนโปรเจกต์เทอร์ราเรียมของคุณให้ใช้เทคนิคการจัดวาง CSS แบบทันสมัย! ปรับปรุงวิธีการจัดวางแบบ absolute positioning ที่ใช้อยู่ในปัจจุบันให้เป็น **Flexbox** หรือ **CSS Grid** เพื่อการออกแบบที่ดูแลรักษาได้ง่ายและตอบสนองต่อการใช้งานได้ดียิ่งขึ้น งานนี้จะท้าทายให้คุณนำมาตรฐาน CSS สมัยใหม่มาใช้ในขณะที่ยังคงความสวยงามของเทอร์ราเรียมไว้

การเข้าใจว่าเมื่อไหร่และอย่างไรที่จะใช้วิธีการจัดวางที่แตกต่างกันเป็นทักษะสำคัญสำหรับการพัฒนาเว็บในยุคปัจจุบัน การฝึกฝนนี้จะช่วยให้คุณเชื่อมโยงเทคนิคการจัดวางแบบดั้งเดิมกับระบบการจัดวาง CSS สมัยใหม่

## คำแนะนำสำหรับงาน

### เฟสที่ 1: การวิเคราะห์และการวางแผน
1. **ตรวจสอบโค้ดเทอร์ราเรียมปัจจุบันของคุณ** - ระบุว่าองค์ประกอบใดที่กำลังใช้ absolute positioning
2. **เลือกวิธีการจัดวาง** - ตัดสินใจว่า Flexbox หรือ CSS Grid เหมาะสมกับเป้าหมายการออกแบบของคุณมากกว่า
3. **ร่างโครงสร้างการจัดวางใหม่** - วางแผนว่าคอนเทนเนอร์และองค์ประกอบของพืชจะถูกจัดเรียงอย่างไร

### เฟสที่ 2: การดำเนินการ
1. **สร้างเวอร์ชันใหม่** ของโปรเจกต์เทอร์ราเรียมในโฟลเดอร์แยกต่างหาก
2. **อัปเดตโครงสร้าง HTML** ตามความจำเป็นเพื่อรองรับวิธีการจัดวางที่คุณเลือก
3. **ปรับปรุง CSS** ให้ใช้ Flexbox หรือ CSS Grid แทน absolute positioning
4. **รักษาความสม่ำเสมอของภาพ** - ตรวจสอบให้แน่ใจว่าพืชและขวดเทอร์ราเรียมยังคงอยู่ในตำแหน่งเดิม
5. **เพิ่มพฤติกรรมการตอบสนอง** - การจัดวางของคุณควรปรับเปลี่ยนได้อย่างเหมาะสมกับขนาดหน้าจอที่แตกต่างกัน

### เฟสที่ 3: การทดสอบและการจัดทำเอกสาร
1. **การทดสอบข้ามเบราว์เซอร์** - ตรวจสอบว่าการออกแบบของคุณทำงานได้ใน Chrome, Firefox, Edge และ Safari
2. **การทดสอบการตอบสนอง** - ตรวจสอบการจัดวางของคุณบนหน้าจอมือถือ แท็บเล็ต และเดสก์ท็อป
3. **การจัดทำเอกสาร** - เพิ่มความคิดเห็นใน CSS ของคุณเพื่ออธิบายการเลือกวิธีการจัดวาง
4. **ภาพหน้าจอ** - บันทึกภาพเทอร์ราเรียมของคุณในเบราว์เซอร์และขนาดหน้าจอที่แตกต่างกัน

## ข้อกำหนดทางเทคนิค

### การจัดวาง
- **เลือกเพียงหนึ่ง**: ใช้ Flexbox หรือ CSS Grid (ไม่ใช้ทั้งสองอย่างในองค์ประกอบเดียวกัน)
- **การออกแบบที่ตอบสนอง**: ใช้หน่วยแบบสัมพัทธ์ (`rem`, `em`, `%`, `vw`, `vh`) แทนพิกเซลแบบคงที่
- **การเข้าถึง**: รักษาโครงสร้าง HTML ที่มีความหมายและข้อความ alt
- **คุณภาพของโค้ด**: ใช้การตั้งชื่อที่สอดคล้องกันและจัด CSS อย่างเป็นระเบียบ

### ฟีเจอร์ CSS สมัยใหม่ที่ควรรวม
```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;
}
```

### ข้อกำหนดการรองรับเบราว์เซอร์
- **Chrome/Edge**: 2 เวอร์ชันล่าสุด
- **Firefox**: 2 เวอร์ชันล่าสุด  
- **Safari**: 2 เวอร์ชันล่าสุด
- **เบราว์เซอร์มือถือ**: iOS Safari, Chrome Mobile

## สิ่งที่ต้องส่งมอบ

1. **ไฟล์ HTML ที่อัปเดต** พร้อมโครงสร้างที่มีความหมายมากขึ้น
2. **ไฟล์ CSS ที่ปรับปรุง** โดยใช้เทคนิคการจัดวางแบบทันสมัย
3. **ชุดภาพหน้าจอ** แสดงความเข้ากันได้ข้ามเบราว์เซอร์:
   - มุมมองเดสก์ท็อป (1920x1080)
   - มุมมองแท็บเล็ต (768x1024) 
   - มุมมองมือถือ (375x667)
   - อย่างน้อย 2 เบราว์เซอร์ที่แตกต่างกัน
4. **ไฟล์ README.md** ที่บันทึก:
   - การเลือกวิธีการจัดวาง (Flexbox vs Grid) และเหตุผล
   - ความท้าทายที่พบระหว่างการปรับปรุง
   - หมายเหตุเกี่ยวกับความเข้ากันได้ของเบราว์เซอร์
   - คำแนะนำสำหรับการรันโค้ดของคุณ

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

| เกณฑ์ | ยอดเยี่ยม (4) | ดี (3) | พัฒนา (2) | เริ่มต้น (1) |
|-------|---------------|--------|-----------|--------------|
| **การจัดวาง** | ใช้ Flexbox/Grid อย่างเชี่ยวชาญพร้อมฟีเจอร์ขั้นสูง; ตอบสนองได้เต็มที่ | ใช้งานได้ถูกต้องพร้อมพฤติกรรมการตอบสนองที่ดี | ใช้งานพื้นฐานพร้อมปัญหาการตอบสนองเล็กน้อย | การจัดวางไม่สมบูรณ์หรือไม่ถูกต้อง |
| **คุณภาพของโค้ด** | CSS ที่สะอาดและจัดระเบียบดีพร้อมความคิดเห็นที่มีความหมาย | การจัดระเบียบดีพร้อมความคิดเห็นบางส่วน | การจัดระเบียบพอใช้พร้อมความคิดเห็นน้อย | การจัดระเบียบไม่ดี; เข้าใจยาก |
| **ความเข้ากันได้ข้ามเบราว์เซอร์** | ความสม่ำเสมอที่สมบูรณ์แบบในเบราว์เซอร์ที่กำหนดพร้อมภาพหน้าจอ | ความเข้ากันได้ดีพร้อมความแตกต่างเล็กน้อยที่บันทึกไว้ | ปัญหาความเข้ากันได้บางอย่างที่ไม่ทำให้การทำงานเสียหาย | ปัญหาความเข้ากันได้ร้ายแรงหรือการทดสอบที่ขาดหายไป |
| **การออกแบบที่ตอบสนอง** | วิธีการ mobile-first ที่ยอดเยี่ยมพร้อมจุดเปลี่ยนที่ราบรื่น | พฤติกรรมการตอบสนองที่ดีพร้อมจุดเปลี่ยนที่เหมาะสม | ฟีเจอร์การตอบสนองพื้นฐานพร้อมปัญหาการจัดวางบางอย่าง | พฤติกรรมการตอบสนองที่จำกัดหรือเสียหาย |
| **การจัดทำเอกสาร** | README ที่ครอบคลุมพร้อมคำอธิบายและข้อมูลเชิงลึกโดยละเอียด | การจัดทำเอกสารที่ดีครอบคลุมทุกองค์ประกอบที่จำเป็น | การจัดทำเอกสารพื้นฐานพร้อมคำอธิบายน้อย | การจัดทำเอกสารไม่สมบูรณ์หรือขาดหายไป |

## แหล่งข้อมูลที่เป็นประโยชน์

### คู่มือวิธีการจัดวาง
- 📖 [คู่มือ 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 - เลือกเครื่องมือที่เหมาะสม](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)

### เครื่องมือทดสอบเบราว์เซอร์
- 🛠️ [โหมด Responsive ของ Browser DevTools](https://developer.chrome.com/docs/devtools/device-mode/)
- 🛠️ [Can I Use - การรองรับฟีเจอร์](https://caniuse.com/)
- 🛠️ [BrowserStack - การทดสอบข้ามเบราว์เซอร์](https://www.browserstack.com/)

### เครื่องมือคุณภาพโค้ด
- ✅ [CSS Validator](https://jigsaw.w3.org/css-validator/)
- ✅ [HTML Validator](https://validator.w3.org/)
- ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

## ความท้าทายเพิ่มเติม

🌟 **การจัดวางขั้นสูง**: ใช้ทั้ง Flexbox และ Grid ในส่วนต่าง ๆ ของการออกแบบ  
🌟 **การเพิ่มแอนิเมชัน**: เพิ่ม CSS transitions หรือแอนิเมชันที่ทำงานร่วมกับการจัดวางใหม่  
🌟 **โหมดมืด**: ใช้ตัวเลือกธีมที่เปลี่ยนได้ด้วย CSS custom properties  
🌟 **Container Queries**: ใช้เทคนิค container query สมัยใหม่สำหรับการตอบสนองในระดับคอมโพเนนต์  

> 💡 **จำไว้**: เป้าหมายไม่ใช่แค่ทำให้มันใช้งานได้ แต่เพื่อเข้าใจว่า **ทำไม** วิธีการจัดวางที่คุณเลือกจึงเป็นทางออกที่ดีที่สุดสำหรับความท้าทายการออกแบบนี้!

---

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