พัฒนาเว็บไซต์ · WDC-01-02

HTML5 and Modern CSS

หลักสูตร HTML5 and Modern CSS เป็นการอบรมต่อยอดจากพื้นฐาน HTML และ CSS สู่ฟอร์มพร้อม Validation เสียงและวิดีโอ Dialog, Popover และ CSS สมัยใหม่อย่าง :has(), Container Queries และ Animation เหมาะกับผู้มีพื้นฐาน HTML และ CSS และนักพัฒนา Front-end จบแล้วได้หน้าเว็บ Interactive ที่ใช้ JavaScript น้อยที่สุด

อัปเดตล่าสุด 8 ต.ค. 2569

ราคาเริ่มต้น 4,410 บาท / ท่าน 4,900 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา18 ชั่วโมง · 3 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

เบราว์เซอร์ทุกค่ายวันนี้รองรับความสามารถใหม่ของ HTML และ CSS ที่เมื่อก่อนต้องพึ่ง JavaScript หรือไลบรารีภายนอก ทั้งฟอร์มที่ตรวจข้อมูลได้เอง หน้าต่าง Dialog และ Popover เลือก Style จากสิ่งที่อยู่ข้างในด้วย :has() Component ที่ปรับขนาดตามพื้นที่จริงด้วย Container Queries และการเปลี่ยนหน้าแบบมี Animation แต่หลายทีมยังเขียนเว็บแบบที่เรียนมาเมื่อหลายปีก่อน ใช้ Plugin ที่ไม่จำเป็น และไม่รู้ว่าฟีเจอร์ใดใช้ได้จริงแล้วบนทุกเบราว์เซอร์

หลักสูตรนี้ต่อยอดจากพื้นฐาน HTML และ CSS ไปสู่ความสามารถของเว็บแพลตฟอร์มในปัจจุบัน เริ่มจาก HTML Living Standard และการตรวจสถานะ Baseline บน MDN โครงสร้างที่เข้าถึงได้ ฟอร์มพร้อม Validation เสียงและวิดีโอพร้อมคำบรรยาย Dialog และ Popover จากนั้นเจาะ CSS สมัยใหม่ ทั้ง :has(), CSS Nesting, Cascade Layers ตัวแปร CSS สี oklch() Gradient, Subgrid และ Container Queries ก่อนไปถึง Transition, Animation, View Transitions, Web Fonts, SVG, Canvas และเว็บที่ใช้งานออฟไลน์ได้ แล้วปิดท้ายด้วย Workshop สร้างหน้าเว็บ Interactive ที่ใช้ JavaScript น้อยที่สุด (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Beginner - Intermediate)

สิ่งที่คุณจะได้รับ

เข้าใจ HTML Living Standard และตรวจสถานะการรองรับฟีเจอร์ด้วย Baseline บน MDN
วางโครงสร้างหน้าเว็บที่เข้าถึงได้ทั้งผู้ใช้คีย์บอร์ดและโปรแกรมอ่านหน้าจอ
สร้างฟอร์ม HTML5 พร้อม Validation และใส่เสียงและวิดีโอพร้อมคำบรรยาย
ทำ Dialog, Popover และ Accordion ด้วย HTML โดยแทบไม่ต้องเขียน JavaScript
ใช้ :has(), CSS Nesting, Cascade Layers และตัวแปร CSS จัดระเบียบ Style
ทำ Component ที่ปรับตัวเองด้วย Container Queries และ Subgrid
สร้าง Transition, Animation และ View Transitions ที่เคารพ prefers-reduced-motion
ใช้ Web Fonts, SVG, Canvas และทำเว็บให้ใช้งานออฟไลน์ได้เบื้องต้น

หลักสูตรนี้เหมาะสำหรับ

ผู้ที่เขียน HTML และ CSS พื้นฐานได้แล้ว หรือผ่านหลักสูตร Basic HTML+CSS
Front-end Developer ที่ต้องการปรับวิธีเขียนให้ทันความสามารถใหม่ของเบราว์เซอร์
นักออกแบบ UI ที่อยากทำ Interaction และ Animation ได้เองโดยไม่พึ่ง Plugin
นักพัฒนาที่ใช้ Framework อยู่และต้องการเข้าใจ HTML และ CSS ที่อยู่เบื้องหลังให้ลึกขึ้น
ผู้ดูแลเว็บไซต์ที่ต้องการลดการใช้ไลบรารีภายนอกและทำเว็บให้เร็วขึ้น

พื้นฐานของผู้เข้าอบรม

เขียน HTML และ CSS พื้นฐานได้ เช่น Semantic Elements, Selector, Box Model และ Flexbox
ไม่จำเป็นต้องเขียน JavaScript เป็น หัวข้อที่ใช้ JavaScript จะมีโค้ดตั้งต้นให้
โน้ตบุ๊กที่ติดตั้ง VS Code และเบราว์เซอร์รุ่นล่าสุดได้ แนะนำให้มีทั้ง Chrome และ Firefox
หากยังไม่มีพื้นฐาน แนะนำให้เรียนหลักสูตร Basic HTML+CSS ก่อน

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ที่มาแทนหลักสูตร Basic HTML5 and CSS3 รุ่นเดิม และเปลี่ยนชื่อเป็น HTML5 and Modern CSS เพราะ CSS ไม่ได้แบ่งรุ่นเป็น CSS3 อีกแล้ว อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Beginner - Intermediate ฉบับนี้ตัด AppCache ที่ถูกถอดออกจากเบราว์เซอร์และใช้ Web App Manifest กับ Service

Worker แทน เพิ่ม Accessibility, Dialog, Popover, :has(), CSS Nesting, Cascade Layers, Container Queries และ View Transitions หลักสูตรนี้ต่างจาก Basic HTML+CSS ที่สอนพื้นฐานสำหรับผู้เริ่มต้นจากศูนย์ โดยหลักสูตรนี้ถือว่าผู้เรียนเขียน HTML, CSS และ Flexbox เบื้องต้นได้แล้ว และเน้นความสามารถใหม่ของ HTML5 และ CSS สมัยใหม่ ผู้เรียนได้ Lab Guide ไฟล์ตั้งต้น สื่อตัวอย่าง และโค้ดเฉลยครบทุก Lab

Day 1 HTML5 ในปัจจุบัน: โครงสร้าง ฟอร์ม และสื่อ

Section 1: HTML5 และ CSS ในปัจจุบัน

HTML Living Standard คืออะไร และทำไมไม่มี HTML6 หรือ CSS4
ตรวจว่าฟีเจอร์ใดใช้ได้จริงด้วยสถานะ Baseline บน MDN และ Can I use
แนวคิด Progressive Enhancement สำหรับฟีเจอร์ที่ยังรองรับไม่ครบ
ทบทวนเทมเพลต HTML และ Semantic Elements แบบเร็ว
Lab: เตรียมโปรเจกต์และหน้าเว็บตั้งต้นสำหรับทั้งหลักสูตร

Section 2: โครงสร้างที่เข้าถึงได้ (Accessibility)

Landmark, ลำดับ Heading และการนำทางด้วยคีย์บอร์ด
ข้อความ alt, ป้ายกำกับ และลำดับ Focus ที่ถูกต้อง
ใช้ ARIA เฉพาะเมื่อ HTML ไม่มีแท็กที่เหมาะสม
Lab: ตรวจหน้าเว็บด้วย Lighthouse และ Accessibility Tree ใน DevTools

Section 3: Lab: ฟอร์ม HTML5 และ Validation

input type: email, url, tel, number, range, color, date และ datetime-local
datalist, autocomplete และการเลือก inputmode ให้เหมาะกับมือถือ
required, pattern, min, max และข้อความแจ้งเตือนที่เข้าใจง่าย
จัด Style ช่องที่กรอกผิดด้วย :user-invalid และ :user-valid
Lab: ฟอร์มลงทะเบียนที่ตรวจข้อมูลได้โดยไม่ต้องใช้ไลบรารี

Section 4: เสียงและวิดีโอใน HTML5

video และ audio พร้อม controls, poster และ preload
รูปแบบไฟล์และ Codec ที่ใช้ได้ทุกเบราว์เซอร์ และการใช้ source หลายไฟล์
คำบรรยายและซับไตเติลด้วย track และไฟล์ WebVTT
นโยบาย Autoplay ของเบราว์เซอร์ และสื่อที่ทุกคนเข้าถึงได้
Lab: หน้าแนะนำสินค้าพร้อมวิดีโอและคำบรรยายภาษาไทย

Section 5: Lab: Dialog, Popover และ Details

dialog แบบ Modal และ Non-modal พร้อมการปิดด้วยปุ่ม Esc
popover attribute สำหรับเมนู Tooltip และกล่องแจ้งเตือน
ควบคุมโดยไม่เขียน JavaScript ด้วย command และ commandfor
details และ summary ทำ Accordion พร้อม name สำหรับเปิดทีละรายการ
Lab: หน้าต่างยืนยัน เมนู และ FAQ แบบไม่ใช้ไลบรารี

Day 2 CSS สมัยใหม่: Selector, Theme และ Layout

Section 6: Selector และ Cascade สมัยใหม่

:is(), :where() และผลต่อ Specificity
:has() เลือก Style จากสิ่งที่อยู่ภายใน เช่น การ์ดที่มีรูปหรือฟอร์มที่มีช่องผิด
:focus-visible สำหรับผู้ใช้คีย์บอร์ด
CSS Nesting ที่เบราว์เซอร์รองรับในตัวโดยไม่ต้องใช้ Sass
จัดลำดับความสำคัญของ Style ด้วย Cascade Layers (@layer)

Section 7: Lab: ตัวแปร CSS, สี และ Theme

Custom Properties และการวาง Design Token ของทั้งเว็บ
สีแบบ oklch() และผสมสีด้วย color-mix()
Light และ Dark Mode ด้วย color-scheme และ light-dark()
ตรวจ Contrast ให้ผ่านเกณฑ์ WCAG
Lab: ระบบสีและ Theme ที่สลับโหมดได้ทั้งเว็บ

Section 8: Visual Effects: มุมโค้ง เงา และ Gradient

border-radius, box-shadow และ text-shadow
Gradient แบบ linear, radial และ conic รวมถึงแบบ repeating
พื้นหลังหลายชั้น, background-size และ object-fit
filter, backdrop-filter และ mix-blend-mode
Lab: การ์ดสินค้าและ Hero Section ด้วย CSS ล้วน

Section 9: Layout สมัยใหม่

ทบทวน Flexbox และ Grid แล้วต่อยอดด้วย Subgrid
aspect-ratio และ Logical Properties อย่าง margin-inline
จัดเนื้อหาหลายคอลัมน์ด้วย Multi-column Layout
position: sticky สำหรับ Header และสารบัญ
Lab: Layout แบบนิตยสารที่จัดแนวการ์ดได้ตรงกันด้วย Subgrid

Section 10: Lab: Responsive ด้วย Container Queries

Media Queries แบบ Range Syntax เช่น (width >= 48rem)
Container Queries และหน่วย cqi สำหรับ Component ที่ปรับตัวเอง
ขนาดตัวอักษรและระยะห่างแบบยืดหยุ่นด้วย clamp()
รูปภาพ Responsive ด้วย srcset, sizes และ picture
Lab: การ์ดชุดเดียวที่แสดงผลดีทั้งในคอลัมน์แคบและกว้าง

Day 3 Motion, Graphics และเว็บที่ใช้งานออฟไลน์

Section 11: Transform และ Transition

translate, scale และ rotate แบบแยก Property และ Transform แบบ 3D เบื้องต้น
transition-property, duration, timing function และ delay
Animation ตอนเปิด Dialog และ Popover ด้วย @starting-style
transition-behavior: allow-discrete สำหรับการซ่อนและแสดงองค์ประกอบ
Lab: ปุ่ม เมนู และหน้าต่าง Popup ที่เคลื่อนไหวอย่างนุ่มนวล

Section 12: Lab: Keyframe Animation และ View Transitions

@keyframes และ Property ของ animation
เคารพผู้ใช้ที่ตั้ง prefers-reduced-motion
View Transitions ระหว่างหน้าด้วย @view-transition
Scroll-driven Animations แบบ Progressive Enhancement
Lab: เปลี่ยนหน้าระหว่างรายการสินค้าและหน้ารายละเอียดแบบมี Animation

Section 13: Web Fonts, SVG และ Canvas

@font-face, ไฟล์ WOFF2, font-display และ Variable Fonts
เลือกและโหลดฟอนต์ภาษาไทยให้เร็วและอ่านง่าย
SVG แบบ Inline สำหรับไอคอนและภาพที่เปลี่ยนสีตาม Theme
Canvas 2D เบื้องต้น: วาดรูปทรง ข้อความ และกราฟอย่างง่าย
Lab: ชุดไอคอน SVG และกราฟยอดขายด้วย Canvas

Section 14: Web API ที่ใช้บ่อยและเว็บที่ใช้งานออฟไลน์

Web Storage และ Geolocation API พร้อมการขอสิทธิ์จากผู้ใช้
AppCache ถูกถอดออกแล้ว และสิ่งที่ใช้แทนในปัจจุบัน
Web App Manifest สำหรับติดตั้งเว็บเป็นแอป
Service Worker และ Cache API แบบเบื้องต้นด้วยโค้ดตั้งต้น
Lab: หน้าเว็บที่ติดตั้งได้และเปิดดูได้แม้ไม่มีอินเทอร์เน็ต

Section 15: Workshop: หน้าเว็บ Interactive ด้วย HTML และ CSS

Workshop: หน้า Landing Page พร้อมฟอร์ม วิดีโอ Dialog และ Theme สลับโหมด
ใช้ Container Queries และ Animation ที่เรียนมาให้ครบ
ตรวจ Accessibility และ Performance ด้วย Lighthouse
ใช้ AI Assistant ช่วยรีวิวโค้ด พร้อมตรวจสถานะ Baseline ก่อนใช้จริง
นำเสนอผลงาน รับคำแนะนำ และสรุปแนวทางเรียนต่อ

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

HTML5 ต่างจาก HTML รุ่นก่อนอย่างไร

HTML5 เพิ่มแท็กที่บอกความหมายของโครงสร้าง เช่น header, nav, main และ article เพิ่มชนิดของช่องกรอกที่ตรวจข้อมูลได้เอง เล่นเสียงและวิดีโอได้โดยไม่ต้องใช้ Plugin และมี Web API อย่าง Canvas และ Geolocation ปัจจุบัน HTML พัฒนาต่อเนื่องในชื่อ HTML Living Standard จึงมีความสามารถใหม่อย่าง dialog และ popover เพิ่มเข้ามาเรื่อย ๆ โดยไม่มีการออกรุ่น HTML6

ใส่วิดีโอในหน้าเว็บด้วย HTML5 ทำอย่างไร

ใช้แท็ก video พร้อม controls และระบุไฟล์ด้วย source ในรูปแบบที่เบราว์เซอร์รองรับ เช่น MP4 หรือ WebM ใส่ poster เป็นภาพตัวอย่าง และเพิ่มคำบรรยายด้วยแท็ก track กับไฟล์ WebVTT เพื่อให้ทุกคนเข้าถึงได้ หากต้องการเล่นอัตโนมัติต้องปิดเสียงไว้ก่อนตามนโยบายของเบราว์เซอร์

ทำแอนิเมชันด้วย CSS โดยไม่ใช้ JavaScript ได้อย่างไร

ใช้ Transition เมื่อต้องการให้ค่าเปลี่ยนอย่างนุ่มนวล เช่น ตอน hover ใช้ @keyframes กับ animation สำหรับการเคลื่อนไหวหลายขั้น ใช้ @starting-style ทำ Animation ตอนเปิด Dialog หรือ Popover และใช้ View Transitions ทำการเปลี่ยนหน้าแบบต่อเนื่อง ควรเคารพผู้ใช้ที่ตั้งค่า prefers-reduced-motion ด้วยทุกครั้ง

หลักสูตร HTML5 and Modern CSS เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับผู้ที่เขียน HTML และ CSS พื้นฐานได้แล้ว Front-end Developer และนักออกแบบ UI ที่อยากใช้ความสามารถใหม่ของเบราว์เซอร์ ผู้เรียนควรรู้จัก Semantic Elements, Selector, Box Model และ Flexbox มาก่อน ไม่จำเป็นต้องเขียน JavaScript เป็น หากยังไม่มีพื้นฐานแนะนำให้เรียน Basic HTML+CSS ก่อน

เรียนจบหลักสูตร HTML5 and Modern CSS แล้วทำอะไรได้บ้าง

ผู้เรียนจะสร้างฟอร์มที่ตรวจข้อมูลได้เอง ใส่วิดีโอพร้อมคำบรรยาย ทำ Dialog และ Popover ด้วย HTML จัด Style ด้วย :has(), Nesting และ Cascade Layers ทำ Component ที่ปรับตัวเองด้วย Container Queries สร้าง Animation และทำเว็บที่ติดตั้งและเปิดได้แบบออฟไลน์ พร้อมตรวจได้ว่าฟีเจอร์ใดพร้อมใช้บนเบราว์เซอร์ของผู้ใช้จริง

หลักสูตรนี้ต่างจาก Basic HTML+CSS อย่างไร

Basic HTML+CSS สอนพื้นฐานสำหรับผู้เริ่มต้นจากศูนย์ ตั้งแต่โครงสร้างหน้าเว็บ Box Model, Flexbox, Grid และ Responsive จนเผยแพร่เว็บแรกได้ ส่วน HTML5 and Modern CSS ต่อยอดไปที่ความสามารถใหม่ของเบราว์เซอร์ ทั้งฟอร์มพร้อม Validation สื่อ Dialog, Popover, :has(), Cascade Layers, Container Queries, Animation และเว็บที่ใช้งานออฟไลน์ได้ จึงเรียนต่อกันได้โดยเนื้อหาไม่ซ้ำ