What is responsive web design, and how does it work?

Responsive web design means designing one page that rearranges itself to suit the screen, whether phone, tablet or desktop, without building separate sites. It relies on the viewport meta tag, which tells mobile browsers to use the real screen width, flexible layouts with Flexbox and Grid, and media queries that change styles at breakpoints. Bootstrap 5.3 speeds this up with its grid system, utility classes and ready-made components.

What kinds of CSS selectors are there?

The most common basic selectors are element selectors such as p or h1, class selectors that start with a dot such as .card, and ID selectors that start with # such as #header. There are also descendant selectors such as nav a for every link in a menu, child selectors using >, attribute selectors such as input[type=email], and pseudo-classes such as :hover and :first-child. When rules conflict, IDs outweigh classes and classes outweigh elements, which is why Bootstrap relies mainly on classes.

How do I build a navbar that collapses to a button on phones with Bootstrap 5?

Use a nav element with the navbar and navbar-expand-lg classes so the full menu shows from lg screens upwards. Add the site name with navbar-brand and a navbar-toggler button with data-bs-toggle set to collapse and data-bs-target pointing to the id of the menu container, a div with the collapse navbar-collapse classes wrapping the links. Load bootstrap.bundle.min.js so the button can open and close the menu, with no jQuery needed. For a menu that slides in from the side, use offcanvas instead.

Who is the Basic Responsive Web Design with Bootstrap 5 course for, and what should I know beforehand?

It suits people who want to build responsive websites, including UX/UI designers, developers and anyone interested. You should be able to use a computer with Windows or macOS and search for information online. Some web design background helps you learn faster, and HTML and CSS basics are covered before moving on to Bootstrap.

What will I be able to do after the Basic Responsive Web Design with Bootstrap 5 course?

You will be able to set up web development tools, write semantic HTML and CSS with the right selectors, build layouts with Flexbox, Grid and media queries, use the Bootstrap 5.3 grid system and utility classes, use components such as navbars, cards, pagination, modals, offcanvas panels and carousels, apply your organisation's colours and dark mode, and build a responsive landing page, corporate website and blog published online. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

Can the Basic Responsive Web Design with Bootstrap 5 course be run in-house for our team?

Yes. This course can be run in-house for your team, with examples adapted to your work, such as building pages from your own designs, brand colours or content. You can request a quotation from this page or contact us on LINE @itgenius or by phone on 02-570-8449.

ພັດທະນາເວັບໄຊ · 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 ຕ.ລ. 2026

ລາຄາເລີ່ມຕົ້ນ 5,850 ບາດ / ທ່ານ 6,500 −10% ຍັງບໍ່ລວມ VAT 7% · ມີລາຄາໝູ່ຄະນະ

ຂໍໃບສະເໜີລາຄາຝຶກອົບຮົມອົງກອນ ລົງຊື່ຈອງໄວ້

PDFດາວໂຫຼດ Course Outline

ໄລຍະເວລາ12 ຊົ່ວໂມງ · 2 ມື້
ຮູບແບບຢູ່ສະຖາບັນ / ອອນລາຍສົດ
ຮອບຕໍ່ໄປເປີດຕາມຄຳຂໍ
ໃບຢັ້ງຢືນມີໃບຢັ້ງຢືນ

ພາບລວມຫຼັກສູດ

เว็บไซต์ปัจจุบันต้องแสดงผลได้ดีทั้งบนมือถือ แท็บเล็ต และเดสก์ท็อป การเขียน 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 และนำเสนอผลงาน

ຮອບຝຶກອົບຮົມ ແລະ ຮູບແບບການຝຶກອົບຮົມ

ສຳລັບບຸກຄົນ — ຮອບຝຶກອົບຮົມທົ່ວໄປ

ຂະນະນີ້ຍັງບໍ່ມີຮອບຝຶກອົບຮົມເປີດຮັບສະໝັກ ລົງຊື່ຈອງໄວ້ໄດ້ເລີຍ ທີມງານຈະຕິດຕໍ່ກັບເປັນກຸ່ມທຳອິດເມື່ອເປີດຮອບຕໍ່ໄປ ຫຼື ສອບຖາມທາງ LINE ຫຼື ໂທ 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