Course: Claude for HTML5 UX & Real-time Web App Development

 หลักสูตรอบรมสร้างเว็บด้วย Claude.ai

🎯 Learning Objectives

• ใช้ Claude เป็น “AI Co-Developer”
• สร้าง UI/UX ด้วย HTML5 + modern patterns
• เข้าใจ keyword เฉพาะ เช่น Socket.IO
• สร้าง backend ด้วย Node.js
• เชื่อม frontend ↔ backend แบบ real-time
• Deploy โปรเจกต์จริง

---

🧩 Module 1: Introduction to AI-assisted Development

Topics

• แนวคิด AI Pair Programming
• เปรียบเทียบ Claude vs ChatGPT vs Copilot
• Prompt Engineering พื้นฐาน

Workshop

• Prompt: “Generate a simple HTML5 landing page”
• ปรับ prompt เพื่อ UX ที่ดีขึ้น

---

🧠 Module 2: Prompt Engineering for Developers

Topics

• Prompt structure:
  • Role
  • Context
  • Constraints
  • Output format
• เทคนิค:
  • Chain-of-thought (implicit)
  • Iterative prompting
  • Refactor prompts

Example Prompt

You are a senior frontend developer.
Generate a responsive HTML5 UI for a chat app with clean UX.
Use semantic HTML and modern CSS.

Workshop

• เปลี่ยน prompt → ได้ UI หลาย style
• ให้ Claude refactor code

---

🎨 Module 3: HTML5 + UX Fundamentals

Topics

• Semantic HTML
• Layout (Flexbox / Grid)
• UX principles:
  • readability
  • hierarchy
  • feedback

Workshop

• ใช้ Claude สร้าง:
  • dashboard
  • chat UI
  • form UX

---

⚡ Module 4: Advanced UX with Claude

Topics

• Micro-interactions
• Loading states
• Error handling UX
• Accessibility (ARIA)

Workshop

• Prompt:

Improve UX with loading animation and error state

---

🔌 Module 5: Real-time Concept + Socket.io

Topics

• WebSocket vs HTTP
• Concept real-time
• การใช้ Socket.IO

Architecture

• Client ↔ Server ↔ Broadcast

Workshop

• Claude generate:
  • simple chat system (frontend + backend)

---

🖥️ Module 6: Node.js Server Development

Topics

• Basics ของ Node.js
• Express.js
• API structure
• Event-driven model

Workshop

• Claude prompt:

Create a Node.js server with Express and Socket.io

---

🔄 Module 7: Frontend ↔ Backend Integration

Topics

• Connect socket client
• Emit / listen events
• State sync

Workshop

• ทำ:
  • real-time chat
  • live notification
  • multiplayer state (basic)

---

🧪 Module 8: Debugging with Claude

Topics

• ให้ Claude ช่วย debug
• วิเคราะห์ error log
• Refactor code

Workshop

• เอา error จริงให้ Claude แก้

---

🚀 Module 9: Deployment & Production

Topics

• Deploy Node.js (Render / Vercel / Railway)
• Environment variables
• Basic security

Workshop

• Deploy chat app จริง

---

🧠 Module 10: Advanced Claude Techniques

Topics

• Memory prompting
• Codebase-aware prompting
• Generate architecture

Workshop

• Prompt:

Design a scalable real-time system using Node.js and Socket.io

---

🧩 Final Project

Build:

• Real-time Chat App / Collaboration Tool

Requirements

• HTML5 UX ดี
• Node.js backend
• Socket.io real-time
• Claude-assisted development

---

📦 Bonus Topics

• AI generate test cases
• Generate documentation
• Prompt automation pipeline

---

🧾 Example “Pro Prompt” Template

You are a senior fullstack developer.

Task:
Build a real-time chat app.

Tech stack:
- HTML5
- CSS (modern UX)
- Node.js
- Socket.io

Requirements:
- Clean UI
- Real-time messaging
- Error handling
- Modular code

Output:
- frontend code
- backend code
- explanation
 
ติดต่อขอใบเสนอราคาได้ที่ Ken: 0952120555 Line: wizarud