You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
14 KiB
134 lines
14 KiB
<!--
|
|
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) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |