หลักสูตร Dashboard Design with Bootstrap 5 เป็นการอบรมสร้างหน้า Dashboard แบบ Responsive ด้วย Bootstrap 5.3 ตั้งแต่ Grid System และ Component ไปจนถึงกราฟด้วย Chart.js ข้อมูลจาก JSON และ Dark Mode เหมาะกับ Developer และผู้ที่ต้องแสดงผลข้อมูลให้ผู้บริหาร จบแล้วได้ Dashboard ครบ 4 ประเภทที่เผยแพร่บนเว็บได้
Dashboard เป็นเครื่องมือที่รวมข้อมูลจากหลายแหล่งมาแสดงในหน้าเดียว ช่วยให้ผู้บริหารและทีมงานเห็นตัวเลขสำคัญ แนวโน้ม และสถานะงานได้ทันที แต่ Dashboard ที่ดีไม่ได้มีแค่กราฟสวย ต้องจัดลำดับข้อมูลให้อ่านง่าย แสดงผลได้ดีทั้งบนจอใหญ่และมือถือ และปรับแก้ได้เร็วเมื่อความต้องการเปลี่ยน
หลักสูตรนี้พาสร้างหน้า Dashboard ด้วย Bootstrap 5.3 ตั้งแต่ทบทวน HTML และ CSS ที่จำเป็น วางโครงด้วย Grid System, Utilities และ Component อย่าง Navbar, Offcanvas Sidebar, Card และ Table ใช้ Component แบบ JavaScript สร้างกราฟด้วย Chart.js ดึงข้อมูลจากไฟล์ JSON มาแสดง ทำ Dark Mode ด้วย Color Modes และปรับธีมด้วย Sass กับ Vite แล้วปิดท้ายด้วย Workshop สร้าง Dashboard ครบ 4 ประเภทและเผยแพร่ขึ้นเว็บ (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Dashboard Design with Bootstrap 5 รุ่นเดิม อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Beginner ฉบับนี้ใช้ Bootstrap 5.3 ซึ่งเป็นรุ่นเสถียรปัจจุบัน เพิ่ม Color Modes สำหรับ Dark Mode, Offcanvas Sidebar, Bootstrap Icons, กราฟด้วย Chart.js, การดึงข้อมูลจาก JSON
และการปรับธีมด้วย Sass กับ Vite ตัดหัวข้อเก่าอย่าง Transitions Plugin ออก และเปลี่ยนการ Deploy ไปใช้ GitHub Pages หรือ Netlify ยังคง Workshop สร้าง Dashboard ครบ 4 ประเภทเหมือนเดิม ทุก Lab ใช้เครื่องมือโอเพนซอร์สหรือใช้ฟรีบนเครื่องของผู้เรียน ผู้เรียนได้ Lab Guide ไฟล์ตั้งต้น ข้อมูลตัวอย่าง และ Template Dashboard ทั้ง 4 ประเภทกลับไปใช้งานต่อ
Section 1: รู้จัก Dashboard และเตรียมเครื่องมือ
Section 2: HTML และ CSS ที่จำเป็นสำหรับหน้า Dashboard
Section 3: Lab: เริ่ม Bootstrap 5.3 และ Grid System
Section 4: Utilities, Typography, Table และ Form
Section 5: Lab: วางโครง Dashboard ด้วย Component
Section 6: Component แบบ JavaScript
Section 7: Lab: สร้างกราฟด้วย Chart.js
Section 8: แสดงข้อมูลจริงบน Dashboard
Section 9: Dark Mode และปรับธีมของตัวเอง
Section 10: Workshop: Dashboard ครบ 4 ประเภทและเผยแพร่
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
แบ่งได้ 4 ประเภทหลัก Strategic Dashboard แสดงตัวชี้วัดภาพรวมระยะยาวให้ผู้บริหาร Analytical Dashboard ใช้เจาะดูแนวโน้มและหาสาเหตุจากข้อมูลจำนวนมาก Operational Dashboard ติดตามงานประจำวันแบบใกล้เวลาจริง และ Informational Dashboard แสดงข้อมูลข้อเท็จจริงให้ผู้ชมทั่วไปดู การเลือกประเภทขึ้นกับว่าใครดูและต้องตัดสินใจเรื่องอะไร หลักสูตรนี้ฝึกสร้าง Dashboard ครบทั้ง 4 ประเภทด้วย Bootstrap 5.3 และ Chart.js ในช่วง Workshop
Grid ของ Bootstrap 5 แบ่งความกว้างเป็น 12 คอลัมน์และสร้างด้วย Flexbox โดยวางคลาส container ครอบ row แล้วใส่คอลัมน์ด้วยคลาส col ระบุจำนวนช่องที่ต้องการ เช่น col-md-6 คือกินครึ่งแถวตั้งแต่จอขนาดกลางขึ้นไป มี Breakpoint ให้เลือกคือ sm md lg xl และ xxl จึงกำหนดให้การ์ดหรือกราฟเรียงสี่ช่องบนจอใหญ่และซ้อนเป็นแถวเดียวบนมือถือได้ในโค้ดชุดเดียว และปรับระยะห่างระหว่างคอลัมน์ได้ด้วยคลาส Gutter
เริ่มจากเรียกไฟล์ CSS และ JavaScript ของ Bootstrap ผ่าน CDN หรือ npm จากนั้นวาง Navbar ด้านบนและ Sidebar ที่กลายเป็น Offcanvas บนจอเล็ก ใช้ Grid แบ่งพื้นที่หลักเป็นแถว KPI Card ตามด้วยพื้นที่สำหรับกราฟ Chart.js และตารางข้อมูล แล้วเพิ่ม Component อย่าง Dropdown สำหรับตัวกรอง Badge สำหรับสถานะ และ Modal สำหรับดูรายละเอียด สุดท้ายทดสอบบนจอหลายขนาดก่อนเผยแพร่
เหมาะกับผู้ที่ต้องสร้าง Dashboard แสดงข้อมูลให้ผู้บริหารหรือทีมงาน Developer ที่ต้องทำหน้า Admin นักวิเคราะห์ข้อมูลและเจ้าหน้าที่ IT ที่ต้องทำรายงานบนเว็บ ควรใช้คอมพิวเตอร์ได้คล่องและรู้จัก HTML กับ CSS เบื้องต้น ไม่จำเป็นต้องเขียน JavaScript เป็นเพราะมีโค้ดตั้งต้นให้ และควรนำโน้ตบุ๊กที่ติดตั้ง VS Code และ Node.js ได้มาด้วย
ออกแบบ Dashboard ให้เหมาะกับผู้ใช้ วาง Layout แบบ Responsive ด้วย Grid และ Utilities ใช้ Component ของ Bootstrap 5.3 ทั้งแบบ CSS และ JavaScript สร้างกราฟด้วย Chart.js จากข้อมูล JSON ทำ Dark Mode และธีมสีขององค์กร และเผยแพร่ Dashboard ขึ้นเว็บได้ พร้อม Template Dashboard ครบ 4 ประเภทไว้ใช้ต่อ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้
ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับข้อมูลและ KPI ที่ทีมใช้อยู่จริง เช่น สร้าง Dashboard ยอดขายหรือสถานะงานด้วยธีมสีขององค์กร ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449
เบราว์เซอร์ทุกค่ายวันนี้รองรับความสามารถใหม่ของ HTML และ CSS ที่เมื่อก่อนต้องพึ่ง JavaScript หรือไลบรารีภายนอก ทั้งฟอร์มที่ตรวจข้อมูลได้เอง หน้าต่าง Dialog และ Popover เลือก Style จากสิ่งที่อยู่ข้างในด้วย :has() Component ที่ปรับขนาดตามพื้นที่จริงด้วย…
HTML และ CSS ในปัจจุบันทำได้มากกว่าการจัดหน้าเว็บ หลายงานที่เคยต้องใช้ไลบรารี JavaScript ขนาดใหญ่ เช่น Tooltip ที่เกาะตำแหน่งปุ่ม Animation ตามการเลื่อนหน้า การเปลี่ยนหน้าแบบนุ่มนวล หรือ Component ที่นำกลับมาใช้ซ้ำได้ ทำได้ด้วยความสามารถของเบราว์เซอร์เองแล้ว…
หน้าเว็บที่ดีต้องมีโครงสร้างถูกต้อง ใช้งานง่ายทั้งบนมือถือและคอมพิวเตอร์ และดูน่าสนใจ ความสามารถในตัวของ HTML5 และ CSS ทำได้มากกว่าที่หลายคนคิด ตั้งแต่ฟอร์มที่ตรวจข้อมูลเอง วิดีโอพร้อมคำบรรยาย ไปจนถึงเอฟเฟกต์ไล่สี เงา และการเคลื่อนไหว เมื่อนำมาใช้คู่กับ…
