HTML, CSS and JavaScript For Data People

อยากสร้าง Dashboard ให้ทีมดูผ่านเว็บ แต่ไม่รู้จะเริ่มตรงไหน? เห็น Dev ทำเว็บแสดงข้อมูลสวยๆ แบบ Interactive ได้ แต่เราทำได้แค่ Export กราฟจาก Excel/Power BI ไปแปะสไลด์? อยากลองทำเว็บแอปเล็กๆ แสดงข้อมูลของตัวเอง แต่ไม่รู้ HTML/CSS/JS เลยสักตัว?

HTML, CSS and JavaScript For Data People ไม่ใช่คอร์สเรียนเขียนเว็บทั่วไป แต่ตัดเฉพาะสิ่งที่คนสาย Data ต้องใช้จริง — แสดงตาราง สร้างกราฟ ดึงข้อมูลจาก API ทำ Dashboard ของตัวเอง ผ่าน 10 บท 60 ตอนเรียน จบด้วยโปรเจกต์สร้าง Mini Dashboard ของตัวเองแบบใช้งานได้จริง

เหมาะกับใคร ?

• Data Analyst/Data Scientist ที่อยากสร้าง Dashboard หรือเว็บแอปแสดงข้อมูลด้วยตัวเอง ไม่ต้องรอทีม Dev
• คนที่ใช้ BI Tools อย่าง Power BI/Tableau อยู่แล้ว แต่อยากได้ความยืดหยุ่นของการ Custom Dashboard ด้วยโค้ดเอง
• มือใหม่ที่ไม่เคยเขียนเว็บมาก่อนเลย อยากเข้าใจพื้นฐานเว็บที่จำเป็นสำหรับงาน Data โดยเฉพาะ

ต่างจากคอร์สเรียนเขียนเว็บทั่วไปยังไง? คอร์สเว็บทั่วไปมักสอนกว้างและลึกเกินจำเป็นสำหรับสาย Data (React, Backend, Database Design) แต่คอร์สนี้โฟกัสเฉพาะสิ่งที่ Data People ใช้จริง — ทุกตัวอย่างในคอร์สคือการแสดงข้อมูล ไม่ใช่การสร้างเว็บขายของหรือ Landing Page

เรียนแล้วได้อะไร ?

• ปฐมบท: เว็บทำงานอย่างไร (สำหรับสาย Data) — เว็บไซต์คืออะไร ทำไม Data People ควรรู้, เตรียมเครื่องมือ (VS Code/Browser/DevTools), โครงสร้างไฟล์เว็บเบื้องต้น, HTML/CSS/JS ทำหน้าที่อะไร
• HTML พื้นฐาน: โครงสร้างเอกสาร — โครงสร้าง HTML Document, Heading/Paragraph, Text Formatting, Lists แสดงรายการข้อมูล, Links เชื่อมไปหน้ารายงาน, Images แทรกกราฟ
• HTML ขั้นกลาง: แสดงข้อมูลและรับข้อมูล — Div/Span จัดกลุ่มเนื้อหา, Semantic HTML, Tables แสดงข้อมูลแบบตาราง, Forms สำหรับกรองข้อมูล, Form Elements ขั้นสูง, Attributes สำคัญ (id/class/data-*)
• CSS พื้นฐาน: การจัดแต่ง — เชื่อม CSS กับ HTML, Selectors พื้นฐาน, สี/พื้นหลัง/ตัวอักษร, Box Model, Selectors ขั้นสูง, หน่วยวัด (px/%/em/rem)
• CSS Layout: จัด Dashboard ให้สวย — Display Property, Position, Flexbox พื้นฐานและขั้นสูง (จัด Card ข้อมูล), CSS Grid (จัด Layout Dashboard), Responsive/Media Queries
• JavaScript พื้นฐาน — JS คืออะไร เชื่อมกับ HTML, Variables/Data Types, Operators, Conditional Statements, Loops (วนลูปข้อมูล), Functions พื้นฐาน
• JavaScript กับ DOM — DOM คืออะไร, เลือก Element ด้วย querySelector, แก้ไข Content/Style, Event Listeners พื้นฐานและขั้นสูง (form submit/filter), สร้าง/ลบ Element แบบ Dynamic
• JavaScript กับข้อมูล (หัวใจของ Data People) — Arrays พื้นฐาน, Array Methods (map/filter/forEach) กับข้อมูลจริง, Objects และ JSON, โครงสร้างข้อมูลซ้อนกัน, ดึงข้อมูลจาก API ด้วย fetch, แสดงกราฟง่ายๆ ด้วย Chart.js
• 🏆 โปรเจกต์: สร้าง Mini Dashboard — วางแผนโปรเจกต์ Dashboard, สร้าง HTML โครงตาราง/การ์ดข้อมูล, จัดสไตล์ด้วย CSS Grid/Flexbox, เพิ่มกราฟและ Interactivity ด้วย JS, เพิ่มฟิลเตอร์/ค้นหาข้อมูล, ทำให้ Responsive + ทดสอบแก้บั๊ก
• สู่โลกจริง: Next Steps — Deploy Dashboard ให้ทีมดูได้, Version Control เบื้องต้น (Git/GitHub), เครื่องมือถัดไปที่ควรรู้จัก (Streamlit/Plotly Dash), Best Practices/Clean Code, แหล่งเรียนรู้ต่อสำหรับสาย Data

จบคอร์สแล้วได้ Certificate พร้อม Mini Dashboard ของตัวเองที่ทำงานได้จริง เอาไปโชว์ในพอร์ตหรือใช้งานต่อในทีมได้ทันที

ผู้สอน

Nut Khuannaen ผู้ก่อตั้ง common•learn จบ 2 ปริญญา (เศรษฐศาสตร์ มช. + นิติศาสตร์ ม.รามคำแหง) กำลังศึกษาต่อปริญญาโท Applied Data Science ที่ ม.ธรรมศาสตร์ ผ่านงาน Freelance Data Analyst ให้ลูกค้าต่างชาติ 3 บริษัท และ FP&A ในธุรกิจ Retail มากว่า 4 ปี — เข้าใจดีว่าคนสาย Data ต้องการอะไรจากเว็บ ไม่ใช่ทุกอย่างที่นักพัฒนาเว็บทั่วไปต้องรู้

ทำไมถึงคุ้ม ?

• ราคาเบา ฿499 ได้เรียน HTML, CSS, JavaScript ครบ 3 อย่างในคอร์สเดียว โฟกัสเฉพาะที่ใช้จริงกับงาน Data
• จบคอร์สมี Mini Dashboard ของตัวเองใช้งานได้จริง ไม่ใช่แค่โค้ดตัวอย่างในบทเรียน
• ทุกตัวอย่างในคอร์สคือการแสดงข้อมูล ไม่เสียเวลากับเนื้อหาที่ไม่เกี่ยวกับสาย Data
• ซื้อครั้งเดียว เรียนได้ตลอดชีพ พร้อม Certificate เมื่อเรียนจบ
• ลองอ่านฟรีได้เลย 2 บทแรกก่อนตัดสินใจซื้อ

อยากให้ AI ช่วยเขียนโค้ดเว็บเร็วขึ้นด้วย ลองดู Claude คู่ใจ ประกอบกันได้ (มีบท Claude Code สอนเขียน/แก้โค้ดด้วย AI โดยเฉพาะ)

ราคา ฿499 — ตลอดชีพ

Course Instructor

Nut Khuannaen Author