หน่วยกิต 3(30-45-60)
| รายการ | รายละเอียด |
|---|---|
| รหัสรายวิชา | 04-511-208 |
| ชื่อรายวิชา | การพัฒนาฟรอนต์เอนด์ |
| ชื่อภาษาอังกฤษ | Front-end Development |
| หน่วยกิต | 3(30-45-60) |
| วิชาบังคับก่อน | ไม่มี |
โครงสร้างและการออกแบบส่วนต่อประสานผู้ใช้ หลักการพื้นฐานของ HTML, CSS, JavaScript การจัดรูปแบบและการจัดวางองค์ประกอบบนหน้าเว็บ การโต้ตอบและการควบคุมพฤติกรรมของเว็บเพจ กรอบงานและไลบรารีสำหรับการพัฒนาเว็บ การจัดการสถานะและข้อมูลในแอปพลิเคชันเว็บ การเชื่อมต่อและดึงข้อมูลจาก API หลักการออกแบบที่ตอบสนองและการเพิ่มประสิทธิภาพเว็บ มาตรฐานและแนวทางการพัฒนาเพื่อความปลอดภัย การทดสอบและแก้ไขข้อผิดพลาดในแอปพลิเคชันเว็บ และการพัฒนาเว็บเชิงปฏิบัติการ
User interface structure and design; fundamentals of HTML, CSS, JavaScript; styling and layout techniques; interactivity and web page behavior control; frameworks and libraries for web development; state management and data handling in web applications; API integration and data fetching; responsive design principles and web optimization; security standards and best practices; testing and debugging in web applications; practical web development.
เมื่อเรียนจบรายวิชา ผู้เรียนสามารถ
| สัปดาห์ | หัวข้อบทเรียน | กิจกรรมการเรียนการสอน (5 ชม.) | ศึกษาค้นคว้านอกเวลา (4 ชม.) | บทเรียน/สไลด์ |
|---|---|---|---|---|
| 1 | แนะนำรายวิชาและหลักการออกแบบส่วนต่อประสานผู้ใช้ (UI/UX) | บรรยาย, วิเคราะห์ตัวอย่างเว็บไซต์, Workshop Wireframe, แนะนำการใช้ AI ช่วยเรียนรู้ | ศึกษาหลักการ UI/UX และวิเคราะห์เว็บไซต์ตัวอย่าง | บทเรียน / สไลด์ |
| 2 | HTML5 พื้นฐานและโครงสร้างเว็บ | บรรยาย, ฝึกเขียน HTML, Semantic HTML, Workshop | ฝึกสร้างเว็บเพจส่วนตัว | บทเรียน / สไลด์ |
| 3 | CSS พื้นฐานและการจัดรูปแบบ | ฝึกใช้ Selectors, Box Model, Typography, Color | ฝึกตกแต่งเว็บไซต์ | บทเรียน / สไลด์ |
| 4 | CSS Layout (Flexbox และ Grid) | Workshop การจัด Layout, Responsive Layout | ปรับปรุงเว็บไซต์ให้รองรับหลายขนาดหน้าจอ | บทเรียน / สไลด์ |
| 5 | JavaScript พื้นฐาน | Variables, Functions, Conditions, Loops พร้อม Workshop | แบบฝึก JavaScript | บทเรียน / สไลด์ |
| 6 | DOM Manipulation และ Event Handling | ฝึกสร้าง Interactive Web Page | พัฒนาแบบฟอร์มโต้ตอบ | บทเรียน / สไลด์ |
| 7 | Form Validation และการจัดการข้อมูล | Workshop ตรวจสอบข้อมูลผู้ใช้, Local Storage | พัฒนาแบบฟอร์มพร้อม Validation | บทเรียน / สไลด์ |
| 8 | การประยุกต์พื้นฐาน Front-end | Workshop บูรณาการ UI/UX, HTML, CSS, JavaScript, DOM และ Form Validation เป็นชิ้นงานเดียว | ปรับปรุงชิ้นงานพื้นฐานให้พร้อมต่อยอดสู่ Front-end Framework | บทเรียน / สไลด์ |
| 9 | Front-end Framework (React, Vue, Angular) | เปรียบเทียบ Framework, วิเคราะห์ข้อดีข้อจำกัด, ใช้ AI วิเคราะห์ | ศึกษา Framework จากเว็บไซต์ทางการ | บทเรียน / สไลด์ |
| 10 | Angular เบื้องต้น (Components และ Routing) | Workshop พัฒนา Angular Application | พัฒนา Mini Project | บทเรียน / สไลด์ |
| 11 | State Management และ Data Binding | ฝึกใช้ Services, Signals/State Management | ศึกษา State Management | บทเรียน / สไลด์ |
| 12 | REST API และการเชื่อมต่อข้อมูล | Workshop Fetch API/HttpClient, JSON, Error Handling | เชื่อมต่อ API จริง | บทเรียน / สไลด์ |
| 13 | Responsive Web Design และ Bootstrap | Workshop Responsive Design, Chrome DevTools | ปรับปรุงเว็บไซต์ให้รองรับ Mobile | บทเรียน / สไลด์ |
| 14 | การทดสอบ การปรับปรุงประสิทธิภาพ และความปลอดภัย | Debugging, Performance Optimization, Web Security เบื้องต้น | ปรับปรุงโครงงาน | บทเรียน / สไลด์ |
| 15 | นำเสนอโครงงานและสรุปรายวิชา | นำเสนอ Project, Peer Review, สรุปบทเรียน | จัดทำรายงานโครงงาน | บทเรียน / สไลด์ |
ดูรายละเอียดเกณฑ์ประเมินตามหัวข้อรายสัปดาห์ได้ที่ เกณฑ์ประเมินรายสัปดาห์
ผู้เรียนพัฒนา Front-end Web Application จำนวน 1 ชิ้นงาน โดยมีองค์ประกอบอย่างน้อยดังนี้