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

Basic Responsive Web Design with Bootstrap 5

หลักสูตร Basic Responsive Web Design with Bootstrap 5 เป็นการอบรมพื้นฐาน HTML และ CSS แล้วใช้ Bootstrap 5.3 วางหน้าเว็บแบบ Responsive ทั้ง Grid System, Component และ Dark Mode เหมาะกับผู้เริ่มทำเว็บไซต์ UX/UI Designer และนักพัฒนา จบแล้วได้ Landing Page เว็บองค์กร และบล็อกที่เผยแพร่จริง

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

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

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

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

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

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

เว็บไซต์ปัจจุบันต้องแสดงผลได้ดีทั้งบนมือถือ แท็บเล็ต และเดสก์ท็อป การเขียน CSS ให้ Responsive ทุกขนาดจอเองตั้งแต่ต้นต้องใช้เวลาเรียนรู้นาน Bootstrap 5 เป็น CSS Framework ที่ช่วยให้วางหน้าเว็บแบบ Responsive ได้เร็วด้วย Grid System, Utility Class และ Component สำเร็จรูป โดยไม่ต้องพึ่ง jQuery และรองรับ Dark Mode ได้ในตัว จึงเหมาะกับผู้ที่ต้องการทำเว็บไซต์ให้สวยและเป็นมาตรฐานในเวลาอันสั้น

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ที่ปูพื้น HTML และ CSS ที่จำเป็นก่อน ทั้งโครงสร้างหน้าเว็บ Selector, Box Model, Flexbox, Grid และ Media Queries แล้วจึงใช้ Bootstrap 5.3 ตั้งแต่ Grid System, Utilities, Component และ JavaScript Component ไปจนถึงการปรับธีมและ Dark Mode ปิดท้ายด้วย Workshop สร้าง Landing Page เว็บองค์กร และบล็อกแบบ Responsive แล้วเผยแพร่ขึ้นเว็บจริง (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)

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

เขียน HTML ให้ถูกโครงสร้างและเข้าถึงได้ง่ายได้
ใช้ CSS จัดรูปแบบและวาง Layout ด้วย Flexbox, Grid และ Media Queries ได้
ใช้ Grid System และ Utility Class ของ Bootstrap 5.3 วางหน้าเว็บแบบ Responsive ได้
ใช้ Component และ JavaScript Component ของ Bootstrap ได้โดยไม่ต้องใช้ jQuery
ปรับธีม สี และ Dark Mode ของเว็บไซต์ได้
สร้างเว็บไซต์ Responsive และเผยแพร่ขึ้นเว็บจริงสำหรับงานในองค์กรได้

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

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

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

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

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Basic Responsive Web Design with Bootstrap 5 เนื้อหาอัปเดตเป็น Bootstrap 5.3 พร้อม Color Modes และ Dark Mode อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab และ Workshop ตลอดหลักสูตร ระดับ Beginner ผู้เรียนจะได้เขียน HTML แบบ Semantic จัดรูปแบบด้วย CSS วาง Layout ด้วย Flexbox, Grid และ Media Queries แล้วใช้ Bootstrap 5.3 ทั้ง Grid System, Utilities, Component และ JavaScript Component ปรับธีมและ Dark Mode และสร้างเว็บไซต์ Responsive 3 แบบที่เผยแพร่จริง พร้อมรับซอร์สโค้ดครบทุก Lab กลับไปใช้งานต่อ

Day 1 HTML, CSS และพื้นฐาน Responsive

Section 1: Lab: เตรียมเครื่องมือและภาพรวมการพัฒนาเว็บ

โครงสร้างการทำงานของเว็บไซต์และแนวทางพัฒนาเว็บสมัยใหม่
ติดตั้ง VS Code และส่วนเสริมที่จำเป็นบน Windows และ macOS
เปิดหน้าเว็บด้วย Live Server และจำลองมือถือด้วย Chrome DevTools
จัดโฟลเดอร์โปรเจกต์ ไฟล์ HTML, CSS และรูปภาพ
Lab: หน้าเว็บแรกที่เปิดดูได้ทั้งคอมพิวเตอร์และมือถือ

Section 2: Lab: HTML ที่ถูกโครงสร้าง

คำศัพท์พื้นฐาน Element, Tag และ Attribute
แท็กข้อความ หัวเรื่อง รายการ และลิงก์
แท็กแบบ Semantic: header, nav, main, section, article และ footer
รูปภาพ วิดีโอ และข้อความ alt สำหรับการเข้าถึง
Lab: โครงหน้าเว็บบริษัทด้วย HTML ล้วน

Section 3: Lab: CSS พื้นฐาน

เชื่อม CSS กับ HTML และลำดับการทำงานของกฎ
Selector แบบ Element, Class, ID, Descendant และ Pseudo-class
Specificity และการแก้กฎที่ชนกัน
Box Model, สี ฟอนต์ และ CSS Variables
Lab: จัดรูปแบบหน้าเว็บบริษัทให้สวยและอ่านง่าย

Section 4: Lab: Layout แบบ Responsive ด้วย CSS

Viewport Meta Tag และหลัก Mobile-first
Flexbox สำหรับแถวและการจัดตำแหน่ง
CSS Grid สำหรับ Layout หลายคอลัมน์
Media Queries และรูปภาพที่ยืดหดตามจอ
Lab: Layout บริการ 3 คอลัมน์ที่ยุบเหลือคอลัมน์เดียวบนมือถือ

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

ติดตั้ง Bootstrap ผ่าน CDN หรือ npm และ Starter Template
Container, Row, Column และ Breakpoint ตั้งแต่ xs ถึง xxl
Gutter, Offset, Order และการซ้อน Grid
Grid ร่วมกับ Flex Utilities สำหรับจัดตำแหน่ง
Lab: วางโครง Landing Page ด้วย Grid System

Day 2 Bootstrap 5.3 และ Workshop เว็บจริง

Section 6: Lab: Content และ Utilities

Typography, รูปภาพ และตาราง
Forms, Input Group และสไตล์การตรวจข้อมูล
Buttons และ Bootstrap Icons
Utility Class ด้าน Spacing, Display, Color และ Border
Lab: หน้าติดต่อเราพร้อมฟอร์มและแผนที่

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

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

Section 8: Lab: JavaScript Component ของ Bootstrap

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

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

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

Section 10: Workshop: เว็บไซต์ Responsive 3 แบบและเผยแพร่

Responsive Landing Page สำหรับสินค้าหรือบริการ
Responsive Corporate Website หลายหน้า
Responsive Blog Design พร้อมหน้ารายการและหน้าบทความ
ตรวจการแสดงผลทุกขนาดจอและวัดคุณภาพด้วย Lighthouse
เผยแพร่ผ่าน GitHub Pages หรือ Netlify และนำเสนอผลงาน

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

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

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

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

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

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

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

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

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

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

Responsive Web Design คืออะไร ทำงานอย่างไร

Responsive Web Design คือการออกแบบหน้าเว็บหน้าเดียวให้ปรับการจัดวางตามขนาดหน้าจอ ทั้งมือถือ แท็บเล็ต และเดสก์ท็อป โดยไม่ต้องทำเว็บแยก อาศัย meta viewport ที่บอกเบราว์เซอร์มือถือให้ใช้ความกว้างจริงของจอ Layout แบบยืดหยุ่นด้วย Flexbox และ Grid และ Media Queries ที่เปลี่ยนสไตล์ตาม Breakpoint ส่วน Bootstrap 5.3 ช่วยให้ทำได้เร็วขึ้นด้วย Grid System, Utility Class และ Component สำเร็จรูป

CSS Selector มีแบบไหนบ้าง

Selector พื้นฐานที่ใช้บ่อยคือ Element Selector อย่าง p หรือ h1 Class Selector ที่ขึ้นต้นด้วยจุดอย่าง .card และ ID Selector ที่ขึ้นต้นด้วย # อย่าง #header นอกจากนี้ยังมี Descendant Selector อย่าง nav a สำหรับลิงก์ทุกตัวในเมนู Child Selector ที่ใช้เครื่องหมาย > Attribute Selector อย่าง input[type=email] และ Pseudo-class อย่าง :hover กับ :first-child ถ้าหลายกฎชนกัน ID มีน้ำหนักมากกว่า Class และ Class มากกว่า Element ซึ่งเป็นเหตุผลที่ Bootstrap ใช้ Class เป็นหลัก

สร้างเมนู Navbar ที่ยุบเป็นปุ่มบนมือถือด้วย Bootstrap 5 ทำอย่างไร

ใช้แท็ก nav ที่มีคลาส navbar และ navbar-expand-lg เพื่อให้เมนูแสดงเต็มตั้งแต่จอ lg ขึ้นไป ใส่ชื่อเว็บด้วย navbar-brand และปุ่ม navbar-toggler ที่มี data-bs-toggle เป็น collapse และ data-bs-target ชี้ไปยัง id ของกล่องเมนู ซึ่งเป็น div ที่มีคลาส collapse navbar-collapse ครอบรายการลิงก์ไว้ และต้องโหลดไฟล์ bootstrap.bundle.min.js ด้วย ปุ่มจึงจะเปิดปิดเมนูได้ โดยไม่ต้องใช้ jQuery หากต้องการเมนูแบบเลื่อนออกจากด้านข้างใช้ Offcanvas แทนได้

หลักสูตร Basic Responsive Web Design with Bootstrap 5 เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับผู้ที่ต้องการสร้างเว็บไซต์แบบ Responsive รวมถึง UX/UI Designer นักพัฒนา และผู้สนใจทั่วไป ควรใช้งานคอมพิวเตอร์และใช้ Windows หรือ macOS ได้ และค้นหาข้อมูลบนอินเทอร์เน็ตเป็น ถ้ามีพื้นฐานการออกแบบเว็บไซต์มาบ้างจะเรียนได้เร็วขึ้น ส่วน HTML และ CSS มีบทพื้นฐานให้ก่อนเข้าสู่ Bootstrap

เรียนจบหลักสูตร Basic Responsive Web Design with Bootstrap 5 แล้วทำอะไรได้บ้าง

ติดตั้งเครื่องมือพัฒนาเว็บ เขียน HTML แบบ Semantic และ CSS พร้อมใช้ Selector ได้ถูกต้อง วาง Layout ด้วย Flexbox, Grid และ Media Queries ใช้ Grid System และ Utility Class ของ Bootstrap 5.3 ใช้ Component อย่าง Navbar, Card, Pagination, Modal, Offcanvas และ Carousel ปรับสีขององค์กรและเปิด Dark Mode และสร้าง Landing Page เว็บองค์กร และบล็อกแบบ Responsive ที่เผยแพร่ขึ้นเว็บจริงได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร Basic Responsive Web Design with Bootstrap 5 ให้ทีมในองค์กรได้ไหม

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