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

HTML5, CSS and Bootstrap 5

หลักสูตร HTML5, CSS and Bootstrap 5 เป็นการอบรมสร้างหน้าเว็บด้วย HTML5 ฟอร์มที่ตรวจข้อมูลเอง วิดีโอ และเอฟเฟกต์ CSS อย่าง Gradient และ Animation แล้วต่อด้วย Grid, Component และ Plugin ของ Bootstrap 5.3 เหมาะกับผู้เริ่มต้น UX/UI Designer และ Developer จบแล้วได้หน้าเว็บนำเสนอสินค้าที่รองรับทุกจอ

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

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

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

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

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

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

หน้าเว็บที่ดีต้องมีโครงสร้างถูกต้อง ใช้งานง่ายทั้งบนมือถือและคอมพิวเตอร์ และดูน่าสนใจ ความสามารถในตัวของ HTML5 และ CSS ทำได้มากกว่าที่หลายคนคิด ตั้งแต่ฟอร์มที่ตรวจข้อมูลเอง วิดีโอพร้อมคำบรรยาย ไปจนถึงเอฟเฟกต์ไล่สี เงา และการเคลื่อนไหว เมื่อนำมาใช้คู่กับ Bootstrap ซึ่งเป็น Framework ที่มีระบบ Grid และ Component สำเร็จรูป ก็สร้างหน้าเว็บที่สวยและรองรับทุกขนาดจอได้รวดเร็ว

หลักสูตรนี้พาผู้เรียนใช้ HTML5 สร้างโครงหน้าแบบ Semantic ฟอร์ม และสื่อเสียงวิดีโอ ตกแต่งด้วย CSS ทั้งสี มุมโค้ง เงา Gradient, Transform, Transition และ Animation จากนั้นนำมาใช้ร่วมกับ Bootstrap 5.3 ทั้ง Grid, Utility, Component และ JavaScript Plugin พร้อมปรับธีมสีและ Dark Mode แล้วปิดท้ายด้วยการสร้างหน้าเว็บนำเสนอสินค้าที่รวมทุกเทคนิค (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Basic)

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

เขียนโครงหน้าเว็บด้วย HTML5 แบบ Semantic ที่อ่านง่ายและเข้าถึงได้
สร้างฟอร์มด้วย Input Type และ Attribute ของ HTML5 พร้อมการตรวจข้อมูลในตัว
ใส่เสียงและวิดีโอหลายรูปแบบพร้อมคำบรรยายด้วย WebVTT
ตกแต่งหน้าเว็บด้วย CSS ทั้งมุมโค้ง เงา Gradient, Transform, Transition และ Animation
ใช้ Grid, Utility, Component และ JavaScript Plugin ของ Bootstrap 5.3 สร้างหน้าเว็บ Responsive
ปรับธีมสีขององค์กรและรองรับ Dark Mode ด้วย CSS Variables และ Color Modes

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

ผู้เริ่มต้นที่ต้องการสร้างหน้าเว็บ Responsive ด้วย HTML5, CSS และ Bootstrap ในหลักสูตรเดียว
UX/UI Designer ที่ต้องการลงมือทำหน้าเว็บจากงานออกแบบของตัวเอง
Developer ที่ต้องการทบทวน HTML5 และ CSS ก่อนใช้ Bootstrap ในงานจริง
ผู้ดูแลเว็บไซต์องค์กรและผู้สนใจทั่วไป

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

ใช้งานคอมพิวเตอร์ Windows หรือ macOS ได้คล่อง
ค้นหาข้อมูลบนอินเทอร์เน็ตได้
เคยเห็นหรือเคยแก้ไข HTML มาบ้างจะช่วยให้เรียนได้เร็วขึ้น
ไม่จำเป็นต้องมีพื้นฐาน JavaScript

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร HTML 5 CSS 3 and Bootstrap 5 อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Basic ยังคงแกนเดิมคือ HTML5 Markup ฟอร์ม เสียงและวิดีโอ CSS ด้านสี มุมโค้ง เงา Gradient, Transform และ Transition แล้วต่อด้วย Bootstrap ทั้ง Grid, Component และ JavaScript Plugin โดยอัปเดตเป็น Bootstrap

5.3 ที่ไม่ต้องใช้ jQuery เพิ่มการตรวจข้อมูลฟอร์มในตัว คำบรรยายวิดีโอด้วย WebVTT, Keyframe Animation, Bootstrap Icons, Offcanvas, Toast และ Dark Mode หลักสูตรนี้เน้นความสามารถของ HTML5 และเอฟเฟกต์ CSS ก่อนใช้ Framework ต่างจาก Basic Responsive Web Design with Bootstrap 5 ที่เน้นการจัด Layout และเว็บไซต์หลายหน้า ผู้เรียนได้ Lab Guide และ Template หน้าเว็บนำเสนอสินค้ากลับไปใช้งานต่อ

Day 1 HTML5 และเอฟเฟกต์ด้วย CSS

Section 1: Lab: เริ่มต้น HTML5 และเตรียมเครื่องมือ

HTML5 และ CSS ในปัจจุบัน และการเช็กการรองรับของเบราว์เซอร์ด้วย MDN
ติดตั้ง VS Code, Live Server และใช้ DevTools ตรวจหน้าเว็บ
Template พื้นฐานของ HTML5: doctype, html lang, meta charset และ viewport
Lab: หน้าเว็บแรกที่เปิดดูได้ทั้งคอมพิวเตอร์และมือถือ

Section 2: Lab: โครงหน้าเว็บแบบ Semantic

header, nav, main, section, article, aside และ footer
ลำดับหัวเรื่องและ Landmark ที่ช่วยผู้ใช้โปรแกรมอ่านหน้าจอ
figure, figcaption, time และข้อความ alt ของรูปภาพ
Lab: โครงหน้าบทความและหน้าแรกของเว็บไซต์

Section 3: Lab: ฟอร์ม HTML5

Input Type: email, url, tel, number, range, color, date, time และ search
required, pattern, min, max, placeholder และ autocomplete
การตรวจข้อมูลในตัวของเบราว์เซอร์ และเหตุผลที่ต้องตรวจซ้ำฝั่ง Server
Lab: ฟอร์มลงทะเบียนที่ตรวจข้อมูลได้เอง

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

แท็ก video และ audio กับ controls, poster และ preload
ใส่ไฟล์หลายรูปแบบด้วย source และ MIME Type เช่น MP4 และ WebM
คำบรรยายและซับไตเติลด้วย track และไฟล์ WebVTT
Lab: หน้าวิดีโอแนะนำสินค้าพร้อมคำบรรยายภาษาไทย

Section 5: Lab: Selector, สี และเอฟเฟกต์ของกล่อง

Selector แบบ Class, Attribute, Pseudo-class และ Pseudo-element
สีแบบ hex, rgb และ hsl ความโปร่งใส และ Custom Properties
border-radius, box-shadow, text-shadow และ Gradient หลายชั้น
Lab: การ์ดสินค้าและปุ่มที่มีมิติ

Section 6: Lab: Transform, Transition และ Animation

Transform และ Transition: duration, timing function และ delay
Keyframe Animation ด้วย @keyframes และ animation
เคารพผู้ใช้ที่ไม่ต้องการการเคลื่อนไหวด้วย prefers-reduced-motion
Lab: เมนูและการ์ดที่ตอบสนองเมื่อชี้เมาส์หรือแตะ

Day 2 Bootstrap 5.3 และ Workshop

Section 7: Lab: เริ่มต้น Bootstrap 5.3 และ Grid System

ติดตั้ง Bootstrap ผ่าน CDN หรือ npm และ Starter Template
Container, Row, Column และ Breakpoint sm, md, lg, xl และ xxl
Gutter, Offset, Order และการซ้อน Grid
Lab: วางโครงหน้าแรกที่เรียง 3 คอลัมน์และยุบเหลือคอลัมน์เดียวบนมือถือ

Section 8: Lab: จัดรูปแบบเนื้อหาและฟอร์มด้วย Bootstrap

Typography, รูปภาพ, ตาราง, Buttons และ Bootstrap Icons
Utility Class ด้าน Spacing, Display, Flex, Color และ Border
Form Control, Floating Label และสไตล์การตรวจข้อมูลร่วมกับฟอร์ม HTML5
Lab: นำฟอร์มลงทะเบียนจากวันแรกมาจัดรูปแบบด้วย Bootstrap

Section 9: Lab: Component สำหรับวางหน้าเว็บ

Navbar ที่ยุบเป็นปุ่มบนมือถือ และ Dropdown
Card และ List Group สำหรับแสดงสินค้าและบทความ
Breadcrumb, Pagination, Badge, Alert และ Progress
Lab: หน้ารายการสินค้าพร้อมเมนูและการแบ่งหน้า

Section 10: Lab: JavaScript Plugin ของ Bootstrap

โหลด bootstrap.bundle แล้วเรียกใช้ผ่าน data-bs หรือ JavaScript API โดยไม่ใช้ jQuery
Modal, Offcanvas, Collapse และ Accordion
Carousel, Toast, Tooltip และ Popover
Lab: หน้าสินค้าที่มีสไลด์ภาพ คำถามที่พบบ่อย และหน้าต่างสั่งจอง

Section 11: Lab: ปรับธีมและ Dark Mode

ปรับสีและฟอนต์ด้วย CSS Variables ของ Bootstrap
Color Modes และการเปิด Dark Mode ด้วย data-bs-theme
ภาพรวมการปรับธีมด้วย Sass ผ่าน npm
Lab: ธีมสีขององค์กรพร้อมปุ่มสลับโหมดสว่างและมืด

Section 12: Workshop: หน้าเว็บนำเสนอสินค้า

วางโครงหน้าแบบ Semantic และ Grid ของ Bootstrap
ใส่วิดีโอพร้อมคำบรรยาย ฟอร์มติดต่อ และเอฟเฟกต์ Animation
ตรวจทุกขนาดจอด้วย Lighthouse แล้วเผยแพร่ผ่าน GitHub Pages หรือ Netlify
Workshop: นำเสนอผลงานและรับคำแนะนำ

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

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

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

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

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

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

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

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

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

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

Grid System ของ Bootstrap 5 ทำงานอย่างไร

Grid ของ Bootstrap 5 แบ่งความกว้างของแถวเป็น 12 คอลัมน์ วางโครงด้วย container ครอบ row แล้วใส่คอลัมน์ด้วยคลาส col ตามด้วย Breakpoint และจำนวนคอลัมน์ เช่น col-12 col-md-6 col-lg-4 หมายถึงเต็มแถวบนมือถือ ครึ่งแถวตั้งแต่จอ md และหนึ่งในสามตั้งแต่จอ lg Breakpoint มี sm md lg xl และ xxl และเพราะ Grid สร้างด้วย Flexbox จึงจัดแนวและระยะห่างด้วย Utility Class ได้ง่าย

HTML5 เพิ่มช่องกรอกในฟอร์มแบบใหม่อะไรบ้าง

HTML5 มี Input Type เช่น email url tel number range color date time และ search ทำให้เบราว์เซอร์แสดงตัวช่วยที่เหมาะกับข้อมูล เช่น ปฏิทินสำหรับวันที่ หรือแป้นตัวเลขบนมือถือ และมีแอตทริบิวต์อย่าง required pattern min max และ autocomplete ที่ให้เบราว์เซอร์ตรวจค่าก่อนส่งฟอร์มได้เอง ในหลักสูตรนำฟอร์มนี้ไปจัดรูปแบบและแสดงผลการตรวจด้วย Bootstrap ต่อ แต่ยังควรตรวจข้อมูลซ้ำที่ฝั่งเซิร์ฟเวอร์เสมอ

ใช้ CSS ทำมุมโค้ง เงา ไล่สี และการเคลื่อนไหวได้อย่างไร

ใช้ border-radius กำหนดมุมโค้ง ใช้ box-shadow และ text-shadow ใส่เงา ใช้ linear-gradient หรือ radial-gradient ไล่สีพื้นหลังและซ้อนพื้นหลังหลายชั้นได้ ส่วนการเคลื่อนไหวใช้ transform เลื่อน ย่อขยาย หรือหมุน ใช้ transition ให้การเปลี่ยนค่านุ่มนวล และใช้ @keyframes สร้าง Animation ที่ซับซ้อนขึ้น ควรใช้ prefers-reduced-motion ลดการเคลื่อนไหวให้ผู้ใช้ที่ตั้งค่าไว้

Bootstrap 5 ยังต้องใช้ jQuery อยู่ไหม

ไม่ต้อง Bootstrap 5 เขียน JavaScript Plugin ใหม่ด้วย JavaScript มาตรฐาน จึงโหลดเพียงไฟล์ bootstrap.bundle ที่รวม Popper ไว้แล้ว เรียกใช้ Modal, Offcanvas, Carousel หรือ Toast ได้ทั้งผ่าน data-bs attribute ใน HTML และผ่าน JavaScript API หลักสูตรนี้สอนทั้งสองแบบ

หลักสูตร HTML5, CSS and Bootstrap 5 เหมาะกับใคร ต่างจากหลักสูตร Bootstrap อื่นอย่างไร

เหมาะกับผู้เริ่มต้นที่ต้องการเรียน HTML5, CSS และ Bootstrap ในหลักสูตรเดียว UX/UI Designer และ Developer ควรใช้คอมพิวเตอร์ได้คล่อง ไม่จำเป็นต้องรู้ JavaScript หลักสูตรนี้เน้นความสามารถของ HTML5 เช่น ฟอร์มและวิดีโอ กับเอฟเฟกต์ CSS ก่อนใช้ Bootstrap ส่วน Basic Responsive Web Design with Bootstrap 5 เน้นการจัด Layout และสร้างเว็บไซต์หลายหน้า

จัดอบรมหลักสูตร HTML5, CSS and Bootstrap 5 ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ฝึกทำหน้าเว็บสินค้าหรือบริการขององค์กรด้วยสีและฟอนต์ของแบรนด์ ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449