| 1 |
แนะนำรายวิชาและหลักการออกแบบส่วนต่อประสานผู้ใช้ (UI/UX) |
การมีส่วนร่วม, แบบทดสอบก่อนเรียน, ใบงาน |
Wireframe หรือรายงานวิเคราะห์เว็บไซต์ |
อธิบายหลักการ UI/UX ได้ วิเคราะห์ตัวอย่างเว็บไซต์ได้ และเสนอ Wireframe ที่สอดคล้องกับผู้ใช้ |
| 2 |
HTML5 พื้นฐานและโครงสร้างเว็บ |
แบบฝึกหัด HTML |
เว็บเพจส่วนตัวด้วย HTML |
ใช้โครงสร้าง HTML5 และ Semantic HTML ได้เหมาะสม จัดลำดับ heading/content ได้ถูกต้อง |
| 3 |
CSS พื้นฐานและการจัดรูปแบบ |
แบบฝึกหัด CSS |
หน้าเว็บที่ตกแต่งด้วย CSS |
ใช้ Selectors, Box Model, Typography และ Color ได้เหมาะสม งานอ่านง่ายและสอดคล้องกับโจทย์ |
| 4 |
CSS Layout (Flexbox และ Grid) |
ประเมินผลงาน Lab |
Layout ที่รองรับหลายขนาดหน้าจอ |
ใช้ Flexbox/Grid ได้ถูกต้อง จัดวางองค์ประกอบเป็นระบบ และปรับ layout ตาม viewport ได้ |
| 5 |
JavaScript พื้นฐาน |
Quiz และ Lab |
แบบฝึก JavaScript |
ใช้ Variables, Functions, Conditions และ Loops ได้ถูกต้อง แก้โจทย์พื้นฐานได้ด้วยตนเอง |
| 6 |
DOM Manipulation และ Event Handling |
Lab JavaScript |
Interactive Web Page หรือแบบฟอร์มโต้ตอบ |
ใช้ DOM และ Event ได้ถูกต้อง สร้างการโต้ตอบบนหน้าเว็บ และจัดการ state เบื้องต้นได้ |
| 7 |
Form Validation และการจัดการข้อมูล |
แบบฝึกหัดและ Quiz |
Form พร้อม Validation และ Local Storage |
ตรวจสอบข้อมูลผู้ใช้ได้ แสดงข้อความผิดพลาดเหมาะสม และบันทึก/เรียกข้อมูลจาก Local Storage ได้ |
| 8 |
สอบกลางภาค และทบทวน |
สอบกลางภาค |
ผลสอบกลางภาค |
แสดงความเข้าใจ HTML, CSS, JavaScript และการพัฒนาเว็บพื้นฐานตามโจทย์ปฏิบัติ |
| 9 |
Front-end Framework (React, Vue, Angular) |
รายงาน/การนำเสนอ |
รายงานเปรียบเทียบ Framework |
เปรียบเทียบ React, Vue, Angular ได้ ระบุข้อดีข้อจำกัด และเลือกใช้ให้เหมาะกับบริบทได้ |
| 10 |
Angular เบื้องต้น (Components และ Routing) |
ประเมิน Lab |
Angular Mini Project |
สร้าง Components และ Routing ได้ โครงสร้างโปรเจกต์เป็นระบบ และหน้าเว็บทำงานตาม flow |
| 11 |
State Management และ Data Binding |
Lab และใบงาน |
งาน Services, Signals หรือ State Management |
ใช้ Data Binding และ Services ได้ จัดการ state ได้เหมาะสม และแยก logic ออกจาก UI ได้ |
| 12 |
REST API และการเชื่อมต่อข้อมูล |
ประเมินการเชื่อมต่อ API |
หน้าเว็บที่เชื่อมต่อ API จริง |
เรียก API ได้ แสดงผล JSON ได้ จัดการ loading/error และอธิบาย data flow ได้ |
| 13 |
Responsive Web Design และ Bootstrap |
ประเมินผลงาน Responsive |
หน้าเว็บที่รองรับ Mobile |
ใช้ Responsive Design และ Bootstrap ได้เหมาะสม ตรวจด้วย Chrome DevTools และปรับปรุง UX บน mobile ได้ |
| 14 |
การทดสอบ การปรับปรุงประสิทธิภาพ และความปลอดภัย |
Code Review และการทดสอบ |
รายงานปรับปรุงโครงงาน |
ใช้ Debugging/Testing ได้ ระบุปัญหา performance/security เบื้องต้น และปรับปรุงโค้ดตาม feedback ได้ |
| 15 |
นำเสนอโครงงานและสรุปรายวิชา |
ประเมินโครงงานและการนำเสนอ |
Project, รายงาน และการสาธิต |
โครงงานทำงานครบตามโจทย์ สาธิตได้จริง อธิบายการออกแบบ/โค้ด/ปัญหาได้ และรับ feedback ได้ |