reveal.js

# 04-511-208

การพัฒนาฟรอนต์เอนด์

Front-end Development

หน่วยกิต 3(30-45-60)

---

## คำอธิบายรายวิชา

โครงสร้างและการออกแบบส่วนต่อประสานผู้ใช้ HTML, CSS, JavaScript, Styling, Layout, Interactivity, Frameworks, State Management, API Integration, Responsive Design, Optimization, Security, Testing และ Practical Web Development

---

## ผลลัพธ์การเรียนรู้

- อธิบายหลักการ UI/UX และโครงสร้างเว็บ
- ใช้ HTML, CSS และ JavaScript ในการพัฒนาเว็บ
- จัด Layout และสร้าง Responsive Design
- พัฒนา Interactive Web Page
- เปรียบเทียบ React, Vue และ Angular
- จัดการ State และเชื่อมต่อ API
- ทดสอบ แก้ไขข้อผิดพลาด และนำเสนอโครงงาน

---

## เส้นทางการเรียนตามสัปดาห์

| ช่วง | เนื้อหา |
|---|---|
| 1-4 | UI/UX, HTML5, CSS, Flexbox, Grid |
| 5-8 | JavaScript, DOM, Event, Form Validation, Midterm |
| 9-12 | Framework, Angular, State Management, API |
| 13-15 | Responsive Design, Testing, Optimization, Security, Project |

---

## สัปดาห์ที่ 1-4

- วิเคราะห์ UI/UX และออกแบบ Wireframe
- HTML5 และ Semantic HTML
- CSS Selectors, Box Model, Typography, Color
- Flexbox, Grid และ Responsive Layout

ประเมิน: การมีส่วนร่วม, แบบทดสอบก่อนเรียน, ใบงาน, แบบฝึกหัด HTML/CSS, Lab

---

## สัปดาห์ที่ 5-8

- Variables, Functions, Conditions, Loops
- DOM Manipulation และ Event Handling
- Form Validation และ Local Storage
- สอบกลางภาคและทบทวน

ประเมิน: Quiz, Lab JavaScript, แบบฝึกหัด, สอบกลางภาค

---

## สัปดาห์ที่ 9-12

- เปรียบเทียบ React, Vue, Angular
- Angular Components และ Routing
- Services, Signals/State Management
- Fetch API/HttpClient, JSON, Error Handling

ประเมิน: รายงาน/การนำเสนอ, Lab, ใบงาน, ประเมินการเชื่อมต่อ API

---

## สัปดาห์ที่ 13-15

- Responsive Design และ Bootstrap
- Chrome DevTools
- Debugging, Performance Optimization
- Web Security เบื้องต้น
- นำเสนอ Project และ Peer Review

ประเมิน: ผลงาน Responsive, Code Review, การทดสอบ, โครงงานและการนำเสนอ

---

## Front-end Architecture

```mermaid
flowchart LR
  U[User] --> UI[HTML/CSS UI]
  UI --> JS[JavaScript Interaction]
  JS --> FW[Front-end Framework]
  FW --> State[State Management]
  FW --> API[REST API]
  UI --> RWD[Responsive Design]
```

---

## เครื่องมือหลัก

- HTML5, CSS3, JavaScript
- Wireframe และ UI/UX Analysis
- Flexbox, Grid, Bootstrap
- DOM, Event, Form Validation, Local Storage
- React, Vue, Angular
- Angular Components, Routing, Services
- Fetch API, HttpClient, JSON
- Chrome DevTools, Testing, Debugging

---

## โครงงานปลายภาค

Front-end Web Application จำนวน 1 ชิ้นงาน

- UI/UX และ Wireframe
- HTML/CSS/JavaScript
- Responsive Design
- Framework หรือ Angular Component
- State Management หรือ Data Binding
- API Integration
- Testing, Debugging, Optimization
- Presentation และ Demonstration

---

## เริ่มเรียน