00 — เตรียมเครื่องและเข้าใจว่าเว็บทำงานอย่างไร
เตรียมเครื่องมือและทำความเข้าใจพื้นฐานการทำงานของเว็บก่อนเริ่มสร้างงาน
อ่านบทเรียน 00AI Web Studio
977-121 Module: Website Design and Development
ออกแบบและพัฒนาเว็บไซต์ด้วย AI
เส้นทางเรียนรู้เพื่อเริ่มสร้างเว็บไซต์ด้วย AI ตั้งแต่เครื่องมือและพื้นฐาน ไปจนถึงการส่งมอบที่ตรวจสอบได้
ภาพรวมเส้นทางการทำงาน
- Brief
- Build
- Verify
- Publish
เป้าหมายของ workshop
AI Web Studio เป็นส่วนหนึ่งของรายวิชา เพื่อช่วยผู้เรียนเลือกจุดเริ่มต้น เข้าถึงบทเรียนจริง และฝึกสร้างเว็บไซต์ด้วย AI อย่างมีขั้นตอน
- เข้าใจเครื่องมือและพื้นฐานของเว็บก่อนเริ่มลงมือ
- ใช้ specs, prompts และเครื่องมือ AI เพื่อพัฒนาเว็บไซต์
- ตรวจคุณภาพและส่งมอบงานที่ตรวจสอบได้
workshop นี้ไม่ใช่รายละเอียดรายวิชาฉบับมหาวิทยาลัยหรือระบบมหาวิทยาลัยอย่างเป็นทางการ
แผน AI Web Studio 2 วัน
รวม 8 ชั่วโมง: 2 วัน วันละ 4 ชั่วโมง และพัก 10 นาทีต่อวัน
แผนนี้เป็นเส้นทางเลือกใช้คลังบทเรียนตามเวลาจริงในห้องเรียน ไม่ได้สัญญาว่าจะสอนครบทุกบทภายใน 8 ชั่วโมง
Day 1 — เริ่มต้น ออกแบบ และสร้างฐานงาน
4 ชั่วโมง รวมพัก 10 นาที: เลือกกิจกรรมจากบท 00–05 เพื่อเตรียมเครื่องมือ วางบริบท และเริ่มทำเว็บไซต์
Day 2 — ขยายงาน ตรวจสอบ และส่งมอบ
4 ชั่วโมง รวมพัก 10 นาที: เลือกกิจกรรมจากบท 06–10 เพื่อทำงานกับข้อมูล ประสบการณ์เว็บ การ deploy และการส่งมอบ
เส้นทางบทเรียน
บท 00–05 อยู่ในเส้นทาง Day 1 และบท 06–10 อยู่ในเส้นทาง Day 2 เพื่อใช้เลือกเนื้อหาใน workshop
Day 1: บท 00–05
01 — พื้นฐาน Vibe Coding สำหรับเว็บที่ส่งมอบได้จริง
เรียนรู้พื้นฐาน Vibe Coding เพื่อสร้างเว็บที่พร้อมส่งมอบ
อ่านบทเรียน 0102 — Agent Skills, MCP และ Plugins โดยไม่ทำให้บริบทพัง
ทำความเข้าใจ Agent Skills, MCP และ Plugins พร้อมดูแลบริบทการทำงาน
อ่านบทเรียน 0203 — Specs และ Prompts สำหรับเว็บบริษัท, Catalog และเว็บ animation
เขียน specs และ prompts สำหรับเว็บบริษัท catalog และเว็บที่มี animation
อ่านบทเรียน 0304 — ออกแบบ, ภาพ และคุณภาพก่อนเขียนหน้าเว็บ
วางงานออกแบบ ภาพ และเกณฑ์คุณภาพก่อนเริ่มเขียนหน้าเว็บ
อ่านบทเรียน 0405 — เว็บบริษัท: contact form ที่รันกับ demo นี้ได้จริง
สร้างเว็บบริษัทและ contact form ที่ทำงานกับ demo ได้จริง
อ่านบทเรียน 05Day 2: บท 06–10
06 — เว็บเช่าอุปกรณ์: availability และ capacity ของ demo ที่รันได้จริง
พัฒนาเว็บเช่าอุปกรณ์ที่จัดการ availability และ capacity ของ demo ได้
อ่านบทเรียน 0607 — GSAP product story, storefront และ quote demo
สร้าง product story, storefront และ quote demo ด้วย GSAP
อ่านบทเรียน 0708 — รันและตรวจ deployment path ของโปรเจกต์ Cloudflare นี้
รันโปรเจกต์และตรวจเส้นทาง deployment ของ Cloudflare
อ่านบทเรียน 0809 — Production Operations: security, observability, rollback และต้นทุน
ดูแล production ทั้งความปลอดภัย การสังเกตการณ์ การ rollback และต้นทุน
อ่านบทเรียน 0910 — สร้างเว็บของตนเองและส่งมอบอย่างตรวจสอบได้
สร้างเว็บของตนเองและเตรียมการส่งมอบที่ตรวจสอบได้
อ่านบทเรียน 10