Advanced Responsive Web Design
หลักสูตร Advanced Responsive Web Design เป็นการอบรมเพิ่มการเคลื่อนไหวและการโต้ตอบให้เว็บ Responsive ด้วย SVG, Web Animations API, Scroll-driven Animations และ View Transitions โดยไม่ใช้ jQuery เหมาะกับ Web Designer และ Web Developer ที่ทำเว็บ Responsive ได้แล้ว จบแล้วได้ Landing Page แบบ Interactive
- ระยะเวลา18 ชั่วโมง · 3 วัน
- รูปแบบออนไซต์ / ออนไลน์สด
- รอบถัดไปเปิดตามคำขอ
- ใบรับรองมี Certificate
ภาพรวมหลักสูตร
เมื่อเว็บไซต์แสดงผลได้ทุกขนาดจอแล้ว ขั้นต่อไปคือทำให้เว็บมีเอกลักษณ์และน่าใช้ ทั้งไอคอนที่คมชัด เมนูบนมือถือที่ลื่นไหล เอฟเฟกต์ตามการเลื่อนหน้า และการเปลี่ยนหน้าที่นุ่มนวล งานเหล่านี้เคยต้องพึ่ง jQuery และปลั๊กอินจำนวนมาก แต่ปัจจุบัน CSS และ JavaScript ของเบราว์เซอร์ทำได้เองเกือบทั้งหมด โค้ดจึงเบาขึ้น โหลดเร็วขึ้น และดูแลง่ายขึ้น
หลักสูตรนี้ต่อยอดจาก Basic Responsive Web Design โดยเน้นงานออกแบบที่มีการเคลื่อนไหวและการโต้ตอบ เริ่มจาก SVG, Transition, Animation และ Web Animations API ต่อด้วยเมนูนำทางบนมือถือ Header แบบ sticky ฟอร์ม Parallax ด้วย Scroll-driven Animations และการ์ด 3D แล้วจบด้วยวิดีโอพื้นหลัง View Transitions, Performance และ Accessibility ก่อนรวมทุกเทคนิคใน Workshop สร้าง Landing Page แบบ Interactive (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Advanced)
สิ่งที่คุณจะได้รับ
- วางแนวคิดและแก้ปัญหางาน Responsive ขั้นสูงด้วย DevTools ได้อย่างเป็นระบบ
- ใช้ SVG ทำไอคอนและกราฟิกที่คมชัดและปรับสีได้ด้วย CSS
- สร้าง Transition และ Animation ขั้นสูงด้วย CSS และ Web Animations API โดยไม่ต้องใช้ jQuery
- ทำเมนูนำทาง Header และฟอร์มที่ใช้งานง่ายบนมือถือ
- สร้าง Parallax และเอฟเฟกต์ตามการเลื่อนด้วย Scroll-driven Animations พร้อมทางเลือกสำรอง
- ใช้ View Transitions, วิดีโอพื้นหลัง และเนื้อหาต่อเนื่องได้อย่างเหมาะสม
- ดูแล Performance และ Accessibility ของงานที่มีการเคลื่อนไหว
หลักสูตรนี้เหมาะสำหรับ
- Web Designer และ Web Developer ที่สร้างเว็บ Responsive ด้วย CSS มาแล้ว
- ผู้ที่ผ่านหลักสูตร Basic Responsive Web Design และต้องการต่อยอด
- นักพัฒนาที่ต้องการเลิกพึ่ง jQuery และปลั๊กอินสำหรับงานเอฟเฟกต์
- ผู้ที่ต้องการออกแบบเว็บให้มีเอกลักษณ์และใช้งานได้ดีบนทุกอุปกรณ์
พื้นฐานของผู้เข้าอบรม
- สร้างเว็บ Responsive ด้วย HTML และ CSS ได้ หรือผ่านหลักสูตร Basic Responsive Web Design
- เข้าใจ Flexbox, CSS Grid และ Media Queries
- อ่านและแก้ไข JavaScript พื้นฐานได้ เช่น ตัวแปร ฟังก์ชัน และ Event
- ใช้งาน VS Code และ DevTools ของเบราว์เซอร์ได้
หัวข้อการฝึกอบรม
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Advanced Responsive Web Design อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Advanced ยังคงแกนเดิมคือการแก้ปัญหา Slideshow, SVG, Transition, Animation, การเลื่อนหน้าแบบนุ่มนวล เมนูนำทางบนมือถือ Header แบบติดด้านบน ช่องค้นหาแบบเลื่อนออก การตรวจฟอร์ม Parallax วิดีโอพื้นหลัง
ภาพเต็มจอ การ์ด 3D และเนื้อหาต่อเนื่อง แต่เปลี่ยนจาก jQuery และปลั๊กอินมาใช้ความสามารถในตัวของเบราว์เซอร์ ได้แก่ Web Animations API, Scroll Snap, Popover API, Constraint Validation API, Scroll-driven Animations และ View Transitions ใช้ SVG แทน Icon Font และเพิ่ม Performance กับ Accessibility หลักสูตรนี้ต่อยอดจาก Basic Responsive Web Design ที่เน้นการจัด Layout ผู้เรียนได้ Lab Guide และ Template Landing Page แบบ Interactive กลับไปใช้งานต่อ
Day 1 กราฟิก การเคลื่อนไหว และ Slideshow
Section 1: Lab: แนวทางทำงานและการแก้ปัญหา
- ภาพรวมเว็บที่จะสร้างตลอดหลักสูตร และการวางแนวคิดก่อนลงมือ
- เช็กการรองรับของเบราว์เซอร์ด้วย Baseline และ MDN
- แก้ปัญหาด้วย DevTools: Layout, Animations และ Rendering
- Lab: วาง Moodboard และโครงหน้า Landing Page ของตัวเอง
Section 2: Lab: ไอคอนและกราฟิกด้วย SVG
- SVG กับ Icon Font ต่างกันอย่างไร และเหตุผลที่ควรใช้ SVG
- ฝัง SVG แบบ inline, img และ Sprite ด้วย use
- ปรับสีด้วย currentColor และตกแต่งหรือขยับ SVG ด้วย CSS
- ลดขนาดไฟล์ด้วย SVGO และใส่ข้อความสำหรับการเข้าถึง
- Lab: ชุดไอคอนและโลโก้ที่เปลี่ยนสีตามธีม
Section 3: Lab: Transition และ Animation ขั้นสูง
- Easing ด้วย cubic-bezier() และ linear() สำหรับการเคลื่อนไหวที่เป็นธรรมชาติ
- Property แยก translate, rotate และ scale
- Animation ตอนองค์ประกอบปรากฏด้วย @starting-style
- Lab: ปุ่มและลิงก์ที่มีเอฟเฟกต์เมื่อชี้และกด
Section 4: Lab: Web Animations API แทน jQuery
- เปลี่ยนโค้ด jQuery เดิมเป็น JavaScript มาตรฐาน
- สร้าง Animation ด้วย element.animate() และ Keyframe
- ควบคุม play, pause, reverse และรอให้จบด้วย finished
- Lab: กล่องข้อความที่เปิดปิดพร้อม Animation โดยไม่ใช้ไลบรารี
Section 5: Lab: Slideshow และ Carousel สมัยใหม่
- Scroll Snap สำหรับสไลด์ที่ปัดได้บนมือถือ
- ปุ่มเลื่อนด้วย scrollBy และ scroll-behavior
- เล่นอัตโนมัติแบบหยุดได้และรองรับคีย์บอร์ด
- Lab: Hero Slideshow ที่ไม่ใช้ jQuery
Day 2 เมนู ฟอร์ม และเอฟเฟกต์ตามการเลื่อน
Section 6: Lab: เมนูนำทางบนมือถือ
- รูปแบบเมนูบนมือถือ: ปุ่มเมนู, Off-canvas และเมนูเต็มจอ
- ปุ่มเมนูที่ถูกต้องด้วย button และ aria-expanded
- เมนูด้วย Popover API และ dialog พร้อม Animation
- Lab: เมนูนำทาง 3 รูปแบบที่ใช้คีย์บอร์ดได้
Section 7: Lab: Header และการเลื่อนหน้า
- Header แบบ sticky ที่ย่อตัวเมื่อเลื่อนหน้า
- เลื่อนไปยังหัวข้อแบบนุ่มนวลด้วย scroll-behavior และ scroll-margin-top
- ปุ่มกลับขึ้นด้านบนและแถบแสดงความคืบหน้าการอ่าน
- Lab: หน้าเว็บยาวพร้อมเมนูที่ไฮไลต์หัวข้อปัจจุบัน
Section 8: Lab: ฟอร์มที่ใช้ง่ายบนมือถือ
- ช่องค้นหาแบบเลื่อนออกและฟอร์มที่กินพื้นที่น้อย
- inputmode, autocomplete และ enterkeyhint สำหรับแป้นพิมพ์มือถือ
- ตรวจข้อมูลด้วย Constraint Validation API และ :user-invalid แทน jQuery Validation
- Lab: ฟอร์มสมัครสมาชิกที่แจ้งข้อผิดพลาดชัดเจน
Section 9: Lab: Parallax และเอฟเฟกต์ตามการเลื่อน
- Scroll-driven Animations ด้วย animation-timeline, scroll() และ view()
- กำหนดช่วงด้วย animation-range
- ทางเลือกสำรองด้วย @supports และ IntersectionObserver
- Lab: Parallax และเนื้อหาที่ค่อย ๆ ปรากฏเมื่อเลื่อนถึง
Section 10: Lab: การ์ดและการโต้ตอบแบบ 3D
- perspective, transform-style และ backface-visibility
- การ์ดพลิกแบบ 3D และแกลเลอรีแบบซ้อนชั้น
- แยกพฤติกรรมเมาส์กับจอสัมผัสด้วย @media (hover: hover)
- Lab: การ์ดสินค้าแบบพลิกที่ใช้ได้ทั้งเมาส์และนิ้ว
Day 3 สื่อ การเปลี่ยนหน้า คุณภาพ และ Workshop
Section 11: Lab: Hero เต็มจอและวิดีโอพื้นหลัง
- พื้นที่เต็มจอบนมือถือด้วย dvh และ svh
- ภาพพื้นหลังเต็มจอด้วย object-fit และ picture
- วิดีโอพื้นหลังแบบ muted, playsinline และ poster
- Lab: Hero ที่ใช้ภาพนิ่งแทนวิดีโอเมื่อผู้ใช้ลดการเคลื่อนไหว
Section 12: Lab: View Transitions และเนื้อหาต่อเนื่อง
- View Transitions ในหน้าเดียวด้วย startViewTransition()
- เปลี่ยนหน้าระหว่างเอกสารด้วย @view-transition
- โหลดเนื้อหาต่อเนื่องด้วย IntersectionObserver และ Fetch API
- Lab: หน้ารวมผลงานที่เปิดรายละเอียดอย่างนุ่มนวล
Section 13: Performance ของงาน Animation
- Animate เฉพาะ transform และ opacity และใช้ will-change อย่างพอดี
- Core Web Vitals: LCP, CLS และ INP
- วิเคราะห์ด้วย Performance Panel และ Lighthouse
- Lab: หาและแก้จุดที่ทำให้หน้าเว็บกระตุก
Section 14: Accessibility และการทดสอบบนอุปกรณ์จริง
- prefers-reduced-motion สำหรับทุกเอฟเฟกต์
- Focus ที่มองเห็นด้วย :focus-visible และลำดับคีย์บอร์ด
- Remote Debugging บนมือถือ Android และ iPhone
- Lab: Checklist ตรวจเว็บก่อนเผยแพร่
Section 15: Workshop: Landing Page แบบ Interactive
- รวมเมนู Hero, Slideshow, Parallax และการ์ด 3D ในหน้าเดียว
- ตรวจทุกขนาดจอ Performance และ Accessibility
- เผยแพร่ผ่าน GitHub Pages หรือ Netlify
- Workshop: นำเสนอผลงานและรับคำแนะนำ
รอบอบรมและรูปแบบการอบรม
สำหรับบุคคล — รอบอบรมทั่วไป
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
สำหรับองค์กร — In-house / Private Training
- ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
- เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
- ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ
วิทยากรผู้สอน
คำถามที่พบบ่อย
ใส่ไอคอนด้วย SVG กับ Icon Font ต่างกันอย่างไร
Icon Font เป็นฟอนต์ที่เก็บรูปไอคอนแทนตัวอักษร ใช้ง่ายแต่โหลดทั้งชุดแม้ใช้ไม่กี่ตัว ใช้ได้ทีละสีเดียว และถ้าฟอนต์โหลดไม่สำเร็จจะเห็นเป็นกล่องหรือตัวอักษรแปลก ๆ ส่วน SVG เป็นภาพเวกเตอร์ที่คมชัดทุกขนาด โหลดเฉพาะไอคอนที่ใช้ เปลี่ยนสีด้วย currentColor ใช้ได้หลายสี ขยับด้วย CSS ได้ และใส่ข้อความสำหรับโปรแกรมอ่านหน้าจอได้ ปัจจุบันจึงนิยมใช้ SVG แบบ inline หรือ Sprite มากกว่า
ทำเมนูแบบ Hamburger สำหรับมือถือมีขั้นตอนอย่างไร
ใช้แท็ก button เป็นปุ่มเปิดเมนูพร้อม aria-expanded บอกสถานะ ซ่อนรายการเมนูบนจอเล็กด้วย Media Query แล้วแสดงตามปกติบนจอใหญ่ ปัจจุบันใช้ Popover API หรือ dialog ช่วยเปิดปิดเมนู ปิดด้วยปุ่ม Esc และจัดการโฟกัสได้โดยแทบไม่ต้องเขียน JavaScript จากนั้นเพิ่ม Animation ตอนเปิดปิด และทดสอบว่าใช้คีย์บอร์ดและโปรแกรมอ่านหน้าจอได้
Parallax Scrolling คืออะไร ทำอย่างไร
Parallax คือการให้ชั้นภาพเคลื่อนที่ด้วยความเร็วต่างกันเมื่อเลื่อนหน้า ทำให้เห็นมิติความลึก ปัจจุบันทำได้ด้วย Scroll-driven Animations ของ CSS โดยผูก Animation กับการเลื่อนผ่าน animation-timeline ร่วมกับ scroll() หรือ view() ไม่ต้องใช้ปลั๊กอิน JavaScript สำหรับเบราว์เซอร์ที่ยังไม่รองรับให้ใช้ @supports และ IntersectionObserver เป็นทางเลือกสำรอง และควรลดหรือปิดเอฟเฟกต์เมื่อผู้ใช้ตั้งค่า prefers-reduced-motion
ทำไมหลักสูตรนี้ไม่ใช้ jQuery แล้ว
งานที่เคยต้องใช้ jQuery และปลั๊กอิน เช่น Slideshow การเลื่อนหน้าแบบนุ่มนวล การตรวจฟอร์ม และ Parallax ปัจจุบันเบราว์เซอร์ทำได้เองด้วย Scroll Snap, scroll-behavior, Constraint Validation API, Web Animations API และ Scroll-driven Animations โค้ดจึงเบาขึ้น โหลดเร็วขึ้น และดูแลง่ายขึ้น หลักสูตรยังสอนวิธีแปลงโค้ด jQuery เดิมเป็น JavaScript มาตรฐาน สำหรับผู้ที่ต้องดูแลเว็บเก่า
หลักสูตร Advanced Responsive Web Design เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน
เหมาะกับ Web Designer และ Web Developer ที่สร้างเว็บ Responsive ด้วย CSS ได้แล้ว และต้องการเพิ่มการเคลื่อนไหวและการโต้ตอบให้เว็บ ควรเข้าใจ Flexbox, CSS Grid และ Media Queries และอ่าน JavaScript พื้นฐานได้ ผู้ที่ยังไม่แน่นเรื่องการจัด Layout แบบ Responsive ควรเริ่มจากหลักสูตร Basic Responsive Web Design
จัดอบรมหลักสูตร Advanced Responsive Web Design ให้ทีมในองค์กรได้ไหม
ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ฝึกปรับเมนูและหน้า Landing Page ของเว็บองค์กรให้ลื่นไหลบนมือถือ ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449