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.
41 lines
5.5 KiB
41 lines
5.5 KiB
<!--
|
|
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) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์ที่มีความเชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |