CSS
Responsive Design
Workshop: Responsive Design
ฝึกประกอบหน้า landing page แบบ responsive ตั้งแต่มือถือไปจนถึงจอใหญ่ โดยใช้ media queries, mobile-first, breakpoints, fluid layout และ responsive images
Workshop 1: Mobile-First Page Shell
เริ่มจากโครงหน้าแบบมือถือก่อน เป้าหมายของขั้นนี้คือสร้าง container ที่ยืดหยุ่น มีระยะขอบอ่านง่าย และวาง header, hero กับ content เป็นคอลัมน์เดียวให้พร้อมก่อนค่อยขยายในขั้นถัดไป
Workshop 2: Hero Section With Breakpoint Upgrade
เมื่อฐานมือถือพร้อมแล้ว ขั้นนี้จะเพิ่ม breakpoint แรกเพื่อทำให้ hero ดูหายใจมากขึ้นบนจอที่กว้างขึ้น ทั้งระยะห่าง ขนาดหัวข้อ และการจัดวางปุ่มจะถูกขยายทีละขั้นแบบ mobile-first
Workshop 3: Responsive Feature Cards
ขั้นนี้โฟกัสที่การเปลี่ยนจำนวนคอลัมน์ตาม breakpoint เดียวกันบนหน้าเดียว เริ่มจากการ์ดเรียงคอลัมน์เดียวบนมือถือ แล้วค่อยเพิ่มเป็น 2 และ 3 คอลัมน์เมื่อพื้นที่พอ
Workshop 4: Responsive Image Banner
ปิดท้ายด้วยการใช้รูปภาพใน layout จริง เป้าหมายคือให้รูปไม่ล้น container, รักษาสัดส่วนเดิม และขยับจากการวางซ้อนแนวตั้งไปเป็นสองคอลัมน์เมื่อจอกว้างพอ