แผนฝึกบทที่ 9

ลำดับที่แนะนำ

ทำตามลำดับด้านล่างให้ครบ แล้วค่อยไปบทที่ 10 (Grid)

แบบฝึกปฏิบัติ

ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้

สร้างแถว flex ง่าย ๆ สามกล่อง แล้วลอง justify-content ทุกค่าหลัก
ง่าย
ทำแถบ nav โลโก้ซ้ายลิงก์ขวา
ง่าย
ทำแถวการ์ด 3–4 ใบพร้อม wrap และ gap
ปานกลาง
ทำ hero กึ่งกลางด้วย column + min-height
ปานกลาง
รวม nav + hero + cards ในหน้าเดียว
ปานกลาง
ปรับการ์ดด้วย flex: 1 1 220px แล้วทดลองย่อหน้าจอจนห่อสวย
ยาก