สัปดาห์ที่ 3: CSS แผ่นแบบต่อเรียงและการออกแบบเว็บ

เป้าหมายของสัปดาห์

สัปดาห์นี้เรียนรู้ CSS ในระดับที่นำไปจัดหน้าเว็บจริงได้ ตั้งแต่ Box Model, Selector, Specificity, Layout, Typography, CSS Variables ไปจนถึง Responsive Design

ผลลัพธ์การเรียนรู้

เมื่อเรียนจบสัปดาห์นี้ ผู้เรียนสามารถ

  1. อธิบาย Box Model และใช้ box-sizing ได้ถูกต้อง
  2. เลือกใช้ selector และแก้ปัญหา specificity/cascade ได้
  3. ใช้ Flexbox และ CSS Grid จัด layout ได้เหมาะสม
  4. กำหนด typography ให้เหมาะกับการอ่านบนเว็บได้
  5. ใช้ CSS Variables เพื่อจัดการ theme และลดโค้ดซ้ำได้
  6. สร้างหน้าเว็บ responsive ด้วย media query และเทคนิคสมัยใหม่ได้

หัวข้อย่อย

ลำดับ หัวข้อ ไฟล์บทเรียน สไลด์
1 Box Model webprogram-03-css-design-01-box-model.md webprogram-03-css-design-01-box-model-slides.mdx
2 Selector และ Specificity webprogram-03-css-design-02-selector-specificity.md webprogram-03-css-design-02-selector-specificity-slides.mdx
3 Layout ด้วย Flexbox และ CSS Grid webprogram-03-css-design-03-flexbox-grid.md webprogram-03-css-design-03-flexbox-grid-slides.mdx
4 Typography webprogram-03-css-design-04-typography.md webprogram-03-css-design-04-typography-slides.mdx
5 CSS Variables และ Cascade webprogram-03-css-design-05-variables-cascade.md webprogram-03-css-design-05-variables-cascade-slides.mdx
6 Media Query และ Responsive Design webprogram-03-css-design-06-responsive-design.md webprogram-03-css-design-06-responsive-design-slides.mdx

กิจกรรมประจำสัปดาห์

นำหน้า HTML จากสัปดาห์ที่ 2 มาตกแต่งด้วย CSS ให้มี layout แบบ card, typography อ่านง่าย, ใช้ CSS variables และ responsive บนอุปกรณ์มือถือ

แบบทดสอบหลังเรียนประจำสัปดาห์

  1. Box Model ประกอบด้วยส่วนใดบ้าง
  2. box-sizing: border-box ช่วยแก้ปัญหาอะไร
  3. Class selector และ ID selector มี specificity ต่างกันอย่างไร
  4. Flexbox และ Grid เหมาะกับ layout คนละแบบอย่างไร
  5. เหตุใดจึงควรใช้ rem กับขนาดตัวอักษร
  6. CSS Variables ช่วยเรื่อง theme อย่างไร
  7. Mobile First และ Desktop First ต่างกันอย่างไร

กลับรายวิชา