Advanced HTML5 and Modern CSS
หลักสูตร Advanced HTML5 and Modern CSS เป็นการอบรมเจาะลึก HTML5 และ CSS สมัยใหม่ขั้นสูง ทั้งสถาปัตยกรรม CSS, Anchor Positioning, Scroll-driven Animations, View Transitions, Web Components และ Web API อย่าง IndexedDB และ PWA ออฟไลน์ เหมาะกับนักพัฒนาและ IT Manager ที่เข้าใจ HTML, CSS และ JavaScript มาแล้ว
- ระยะเวลา18 ชั่วโมง · 3 วัน
- รูปแบบออนไซต์ / ออนไลน์สด
- รอบถัดไปเปิดตามคำขอ
- ใบรับรองมี Certificate
ภาพรวมหลักสูตร
HTML และ CSS ในปัจจุบันทำได้มากกว่าการจัดหน้าเว็บ หลายงานที่เคยต้องใช้ไลบรารี JavaScript ขนาดใหญ่ เช่น Tooltip ที่เกาะตำแหน่งปุ่ม Animation ตามการเลื่อนหน้า การเปลี่ยนหน้าแบบนุ่มนวล หรือ Component ที่นำกลับมาใช้ซ้ำได้ ทำได้ด้วยความสามารถของเบราว์เซอร์เองแล้ว ขณะที่ JavaScript Web API อย่าง IndexedDB, Web Worker และ Service Worker ทำให้เว็บทำงานเร็วและใช้งานออฟไลน์ได้ใกล้เคียงแอป
หลักสูตรนี้เจาะลึก HTML5 และ CSS สมัยใหม่ในระดับขั้นสูง พร้อมใช้ JavaScript ค่อนข้างมากเพื่อทำความเข้าใจหลักการทำงานของ Web API ตั้งแต่การวางสถาปัตยกรรม CSS, Anchor Positioning, ฟอร์มขั้นสูง, Scroll-driven Animations, View Transitions, Web Components, Canvas, Media API, การเก็บข้อมูลฝั่งเบราว์เซอร์ ไปจนถึง PWA ที่ใช้งานออฟไลน์ได้จริงและการตรวจ Core Web Vitals (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Intermediate - Advanced)
สิ่งที่คุณจะได้รับ
- วางสถาปัตยกรรม CSS ของเว็บขนาดใหญ่ด้วย Cascade Layers, @scope และ Design Token
- ใช้ฟีเจอร์ CSS ขั้นสูง เช่น Anchor Positioning, Container Queries, Scroll-driven Animations และ View Transitions แบบ Progressive Enhancement
- สร้างฟอร์มขั้นสูงและ Web Components ที่นำกลับมาใช้ซ้ำได้
- ใช้ Canvas และ Media API ทำกราฟิก เสียง และวิดีโอแบบโต้ตอบได้
- เก็บข้อมูลฝั่งเบราว์เซอร์ด้วย IndexedDB และใช้ Web Worker กับ Observer API ได้
- สร้าง PWA ที่ใช้งานออฟไลน์ได้ และตรวจคุณภาพเว็บด้วย Core Web Vitals
หลักสูตรนี้เหมาะสำหรับ
- Front-end Developer ที่ต้องการใช้ความสามารถล่าสุดของ HTML และ CSS
- นักพัฒนาเว็บที่ต้องการลดการพึ่งไลบรารี JavaScript ขนาดใหญ่
- Developer และ IT Manager ที่ดูแลเว็บไซต์หรือเว็บแอปขององค์กร
- ผู้ที่ผ่านหลักสูตร HTML5 and Modern CSS และต้องการต่อยอด
พื้นฐานของผู้เข้าอบรม
- เข้าใจ HTML5 และ CSS พอสมควร เช่น Flexbox, Grid และ Media Queries
- เขียน JavaScript ได้ เช่น ฟังก์ชัน DOM, Event และ async/await
- เข้าใจหลักการติดตั้งโปรแกรมและใช้งาน Command Line เบื้องต้น
หัวข้อการฝึกอบรม
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Advanced HTML5 and CSS3 และเปลี่ยนชื่อเป็น Advanced HTML5 and Modern CSS อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab และปิดท้ายด้วย Workshop ระดับ Intermediate - Advanced ผู้เรียนจะได้วางสถาปัตยกรรม CSS ด้วย Cascade Layers และ @scope ใช้ Anchor Positioning, Scroll-driven Animations และ View Transitions สร้างฟอร์มขั้นสูงและ Web Components ใช้ Canvas, Media API, IndexedDB และ Web Worker แล้วสร้าง PWA ที่ใช้งานออฟไลน์ได้จริงพร้อมตรวจ Core Web Vitals และรับซอร์สโค้ดครบทุก Lab กลับไปใช้งานต่อ
Day 1 สถาปัตยกรรม CSS และฟีเจอร์ขั้นสูง
Section 1: Lab: HTML และ CSS ขั้นสูงในปัจจุบัน
- ทำไมไม่มี CSS4 และการตรวจฟีเจอร์ด้วยสถานะ Baseline
- Progressive Enhancement ด้วย @supports และการตรวจใน JavaScript
- ใช้ DevTools ตรวจ Layer, Container และ Animation
- เตรียมโปรเจกต์ด้วย Vite และ CSS มาตรฐานโดยไม่ใช้ Preprocessor
- Lab: โปรเจกต์ตั้งต้นที่ใช้ตลอดหลักสูตร
Section 2: Lab: สถาปัตยกรรม CSS
- จัดลำดับ Reset, Base, Component และ Utility ด้วย @layer
- จำกัดขอบเขต Style ด้วย @scope และ Donut Scope
- CSS Nesting เชิงลึกและแนวทางตั้งชื่อ Class
- แก้ปัญหา Specificity ด้วย :where() และ :is()
- Lab: จัดระเบียบ Stylesheet ของเว็บเดิมให้ดูแลง่าย
Section 3: Design Token และ @property
- Design Token สำหรับสี ระยะห่าง และตัวอักษรของทั้งระบบ
- ลงทะเบียน Custom Property ด้วย @property เพื่อ Animate ค่าได้
- สร้างเฉดสีจากสีหลักด้วย Relative Color Syntax และ color-mix()
- Theme หลายชุดและ Dark Mode ด้วย light-dark()
- Lab: ปุ่มและการ์ดที่ไล่สี Gradient ได้อย่างนุ่มนวล
Section 4: Lab: Anchor Positioning และ Popover
- anchor-name และ position-anchor ผูกตำแหน่งกับองค์ประกอบอื่น
- position-area และ position-try-fallbacks เมื่อชิดขอบจอ
- ใช้ร่วมกับ popover ทำ Tooltip และเมนูโดยไม่ใช้ไลบรารี
- ทางสำรองสำหรับเบราว์เซอร์ที่ยังไม่รองรับ
- Lab: Tooltip และเมนู Dropdown ที่ไม่หลุดขอบจอ
Section 5: Lab: ฟอร์มขั้นสูง
- Constraint Validation API และ setCustomValidity()
- ข้อความแจ้งเตือนที่ Screen Reader อ่านได้
- ปรับแต่ง select ด้วย appearance: base-select แบบ Progressive Enhancement
- ส่งฟอร์มด้วย FormData และ fetch โดยไม่โหลดหน้าใหม่
- Lab: ฟอร์มสมัครสมาชิกหลายขั้นตอนพร้อมตรวจข้อมูล
Day 2 Layout, Motion และ Components
Section 6: Layout ขั้นสูง
- Grid แบบ Named Lines, Subgrid และ Intrinsic Sizing
- Container Queries แบบ Size และ Style Queries
- Logical Properties สำหรับเว็บหลายภาษา
- ลด Layout Shift ด้วย aspect-ratio และการจองพื้นที่
- Lab: หน้า Dashboard ที่ Component ปรับตัวตามพื้นที่
Section 7: Lab: Scroll-driven Animations
- animation-timeline แบบ scroll() และ view()
- กำหนดช่วงด้วย animation-range
- Scroll Snap สำหรับ Carousel ด้วย CSS
- Fallback และ prefers-reduced-motion
- Lab: แถบความคืบหน้าการอ่านและเนื้อหาที่ค่อย ๆ ปรากฏ
Section 8: View Transitions ขั้นสูง
- document.startViewTransition() ภายในหน้าเดียว
- View Transitions ข้ามหน้าด้วย @view-transition
- view-transition-name และการปรับแต่ง Pseudo-element
- แยกประเภท Transition ตามทิศทางการนำทาง
- Lab: แกลเลอรีที่ขยายรูปจากรายการสู่หน้ารายละเอียด
Section 9: Lab: Web Components
- Custom Elements และ Lifecycle Callback
- Shadow DOM, template และ slot
- ปรับแต่งจากภายนอกด้วย ::part และ Custom Properties
- Declarative Shadow DOM สำหรับ HTML ที่ส่งจากเซิร์ฟเวอร์
- Lab: Component การ์ดสินค้าและคะแนนรีวิวที่ใช้ซ้ำได้
Section 10: Canvas และกราฟิกขั้นสูง
- Animation บน Canvas ด้วย requestAnimationFrame
- จัดการภาพระดับพิกเซลด้วย getImageData
- OffscreenCanvas สำหรับงานวาดที่หนัก
- SVG กับ CSS Animation สำหรับไอคอนและภาพประกอบ
- Lab: กราฟแบบ Realtime และตัวแต่งภาพอย่างง่าย
Day 3 Web API, ออฟไลน์ และคุณภาพเว็บ
Section 11: Lab: Media API
- ควบคุม video และ audio ด้วย JavaScript
- สร้าง Video Player ของตัวเองพร้อมคำบรรยาย
- Fullscreen API และ Picture-in-Picture
- ใช้กล้องและไมโครโฟนด้วย getUserMedia พร้อมขอสิทธิ์อย่างเหมาะสม
- Lab: บันทึกวิดีโอสั้นจากกล้องด้วย MediaRecorder
Section 12: Lab: จัดเก็บข้อมูลฝั่งเบราว์เซอร์
- เลือกใช้ Web Storage, Cookie และ IndexedDB ให้เหมาะกับงาน
- IndexedDB: Object Store, Index และ Transaction
- File API และลากไฟล์มาวางด้วย Drag and Drop
- Clipboard API และขนาดพื้นที่จัดเก็บของเบราว์เซอร์
- Lab: แอปจดบันทึกที่แนบรูปได้และเก็บข้อมูลในเครื่อง
Section 13: Observer และ Web Worker
- IntersectionObserver สำหรับ Lazy Load และ Infinite Scroll
- ResizeObserver และ MutationObserver
- แยกงานคำนวณหนักไปที่ Web Worker
- สื่อสารระหว่างแท็บด้วย BroadcastChannel
- Lab: รายการสินค้าที่โหลดเพิ่มเมื่อเลื่อนถึงท้ายหน้า
Section 14: Lab: PWA ที่ใช้งานออฟไลน์ได้จริง
- Web App Manifest และเงื่อนไขการติดตั้งเป็นแอป
- Lifecycle ของ Service Worker และการอัปเดตเวอร์ชัน
- กลยุทธ์ Cache แบบ Cache First, Network First และ Stale While Revalidate
- สร้าง Service Worker ด้วย Workbox และหน้าสำรองเมื่อออฟไลน์
- Lab: ทำแอปจดบันทึกให้ติดตั้งและใช้งานออฟไลน์ได้
Section 15: Workshop: เว็บแอปขั้นสูงด้วย HTML, CSS และ Web API
- รวมฟีเจอร์ที่เรียนเป็นเว็บแอปเดียว
- วัด Core Web Vitals: LCP, INP และ CLS
- ตรวจ Accessibility และ Performance ด้วย Lighthouse
- ทดสอบข้ามเบราว์เซอร์และตรวจสถานะ Baseline ก่อนใช้จริง
- นำเสนอผลงานและรับคำแนะนำ
รอบอบรมและรูปแบบการอบรม
สำหรับบุคคล — รอบอบรมทั่วไป
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
สำหรับองค์กร — In-house / Private Training
- ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
- เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
- ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ
วิทยากรผู้สอน
คำถามที่พบบ่อย
Web Storage, Cookie และ IndexedDB ต่างกันอย่างไร
Cookie เก็บได้เพียงราว 4 KB และถูกส่งไปกับทุกคำขอ HTTP จึงเหมาะกับข้อมูลเล็ก ๆ ที่เซิร์ฟเวอร์ต้องใช้ เช่น Session ส่วน Web Storage เก็บข้อมูลแบบคีย์และค่าได้หลาย MB ต่อเว็บไซต์ โดย localStorage อยู่จนกว่าจะลบ และ sessionStorage หายเมื่อปิดแท็บ แต่เก็บได้เฉพาะข้อความและทำงานแบบ Synchronous ส่วน IndexedDB เป็นฐานข้อมูลในเบราว์เซอร์ที่เก็บออบเจ็กต์ ไฟล์ และข้อมูลจำนวนมากได้ ค้นหาผ่าน Index และทำงานแบบ Asynchronous จึงเหมาะกับแอปที่ต้องใช้งานออฟไลน์
วาดรูปด้วย HTML5 Canvas มีขั้นตอนอย่างไร
เริ่มจากใส่แท็ก canvas พร้อมกำหนด width และ height ในหน้าเว็บ จากนั้นใช้ JavaScript ดึง element นั้นมาเรียก getContext('2d') เพื่อได้ตัววาด แล้วกำหนดสีด้วย fillStyle หรือ strokeStyle เริ่มเส้นทางด้วย beginPath วาดด้วย moveTo, lineTo หรือ arc แล้วจึงสั่ง fill หรือ stroke ถ้าต้องการภาพเคลื่อนไหวให้ล้างและวาดใหม่ในแต่ละเฟรมด้วย requestAnimationFrame และถ้างานวาดหนักสามารถย้ายไปทำใน OffscreenCanvas ได้
Web Worker คืออะไร ใช้ทำอะไร
Web Worker คือการรัน JavaScript ในเธรดแยกจากหน้าเว็บหลัก ใช้กับงานที่คำนวณหนัก เช่น ประมวลผลข้อมูลจำนวนมาก แปลงไฟล์ หรือจัดการรูปภาพ เพื่อไม่ให้หน้าเว็บค้างระหว่างทำงาน หน้าเว็บกับ Worker คุยกันด้วย postMessage และรับผลผ่าน Event message โดย Worker เข้าถึง DOM โดยตรงไม่ได้ ส่วน Service Worker เป็น Worker อีกแบบที่ทำหน้าที่ดักคำขอเครือข่ายและจัดการ Cache เพื่อให้เว็บใช้งานออฟไลน์ได้
หลักสูตร Advanced HTML5 and Modern CSS เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน
เหมาะกับ Front-end Developer ที่ต้องการใช้ความสามารถล่าสุดของ HTML และ CSS นักพัฒนาเว็บที่อยากลดการพึ่งไลบรารี JavaScript ขนาดใหญ่ Developer และ IT Manager ที่ดูแลเว็บขององค์กร และผู้ที่ผ่านหลักสูตร HTML5 and Modern CSS มาแล้ว ควรเข้าใจ HTML5 และ CSS พอสมควร เช่น Flexbox, Grid และ Media Queries และเขียน JavaScript ได้ เพราะหลักสูตรใช้ JavaScript ค่อนข้างมาก
เรียนจบหลักสูตร Advanced HTML5 and Modern CSS แล้วทำอะไรได้บ้าง
วางโครงสร้าง CSS ของเว็บขนาดใหญ่ด้วย Cascade Layers, @scope และ Design Token ใช้ Anchor Positioning, Container Queries, Scroll-driven Animations และ View Transitions แบบมีทางสำรอง สร้างฟอร์มขั้นสูงและ Web Components ใช้ Canvas, Media API, IndexedDB และ Web Worker สร้าง PWA ที่ใช้งานออฟไลน์ได้ และตรวจคุณภาพเว็บด้วย Core Web Vitals ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้
จัดอบรมหลักสูตร Advanced HTML5 and Modern CSS ให้ทีมในองค์กรได้ไหม
ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับเนื้อหาให้ตรงกับงานของทีม เช่น จัดระเบียบ CSS ของเว็บไซต์องค์กร สร้าง Web Components เป็นชุดกลางของทีม หรือทำเว็บภายในให้ใช้งานออฟไลน์ได้ ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449