คู่มือพาทำทีละขั้น

Workshop Handbook
สร้างเว็บ ขายสินค้า ของคุณเอง

พิมพ์ภาษาไทยสั่ง AI · ไม่ต้องเขียนโค้ดเอง · ได้เว็บจริงบนอินเทอร์เน็ตภายในคาบเดียว

คู่มือนี้ประกอบคอร์ส First Vibe Coding for Beginners พาคุณสร้างเว็บขายสินค้าของตัวเอง แบ่งเป็น 4 ช่วง ตามตารางเวลาของวัน — เตรียมตัว → สร้างเว็บ → ปรับแต่งเพิ่ม → เอาขึ้นออนไลน์ ทุกขั้นมี Prompt ให้กดคัดลอกไปวางได้ทันที

ขายอะไรก็ได้ที่คุณอยากขาย ไม่ต้องมีพื้นฐานโค้ด HTML ไฟล์เดียว 6 ขั้น · เลือกทำได้ 3 ขั้น ใช้ในช่วง 13:30–16:30 ของวัน

กดปุ่ม คัดลอก ที่มุมขวาของกล่อง Prompt แล้ววางในหน้าต่าง Claude Code ได้เลย — ช่องสี่เหลี่ยมข้างหัวข้อแต่ละขั้น กดติ๊กเพื่อจำว่าทำถึงไหนแล้ว (จำไว้ในเครื่องคุณเอง)

How to read

วิธีใช้คู่มือเล่มนี้

จำสัญลักษณ์ 4 แบบนี้ไว้ก่อนเริ่ม แล้วจะอ่านคู่มือได้ลื่นทั้งเล่ม — รู้ทันทีว่าตรงไหนต้องพิมพ์ ตรงไหน AI ทำให้ ตรงไหนต้องระวัง และตรงไหนคือผลลัพธ์ที่ควรได้

คุณพิมพ์ / สั่งกล่องสีพร้อมปุ่ม คัดลอก คือ Prompt ที่คัดลอกไปวางให้ Claude Code — คำใน [วงเล็บเหลี่ยม] ต้องแก้เป็นข้อมูลจริงก่อนกด Enter
Agent ทำให้สิ่งที่ Claude Code จะคิด สร้าง หรือแก้ให้อัตโนมัติหลังคุณสั่ง — ไม่ต้องทำเอง
ข้อควรระวังจุดที่มือใหม่มักพลาด — อ่านก่อนกด Enter จะช่วยประหยัดเวลาและกันปัญหาย้อนหลัง
คุณควรได้ผลลัพธ์ที่จับต้องได้เมื่อจบแต่ละขั้น — ใช้เช็คว่าทำถูกทางก่อนไปขั้นถัดไป

เคล็ดลับ: Prompt ทุกอันในคู่มือนี้เขียนเป็นภาษาไทยได้ปกติ Claude Code เข้าใจดี — ส่วนคำใน [วงเล็บเหลี่ยม] คือช่องที่ต้องแทนที่ด้วยข้อมูลจริงของคุณเองก่อนส่ง

ช่วงที่ 1

เตรียมตัวก่อนเริ่ม

ติดตั้งเครื่องมือ · ตั้งกติกาโปรเจกต์ — ทำก่อนเข้า Workshop

Pre-flight

ก่อนเริ่ม — เตรียมเครื่องให้พร้อม

3 อย่างนี้เตรียมไว้ก่อน แล้ว Workshop จะลื่นไหลไม่สะดุด

Claude Code ติดตั้งแล้ว

เปิด Terminal พิมพ์ claude --version แล้วต้องขึ้นเลขเวอร์ชัน — นี่คือเครื่องมือหลักที่เราจะใช้ตลอด Workshop

เตรียมโฟลเดอร์เปล่า 1 โฟลเดอร์

1 โปรเจกต์ = 1 โฟลเดอร์ ห้ามเอางานหลายอย่างมาปนกัน (กฎข้อสำคัญจากในคลาส)

คิดไว้ว่าจะขายอะไร + มีรูปสินค้า 3 รูป — ใช้ตอนขั้นที่ 1-2

ขายอะไรก็ได้: เสื้อผ้า ขนม งานคราฟต์ คอร์สเรียน บริการรับจ้าง · เตรียมชื่อสินค้า ราคา และรูป 3 รูป (jpg/png) ไว้ในเครื่อง

สร้างโฟลเดอร์โปรเจกต์ แล้วเปิด Claude Code ในโฟลเดอร์นั้น

คัดลอกคำสั่งไปวางใน Terminal (ไม่ใช่ในหน้าต่าง Claude) — จะสร้างโฟลเดอร์ my-shop บน Desktop เข้าไปในโฟลเดอร์ แล้วเปิด Claude Code ให้เลย

Terminal · macOS

mkdir -p ~/Desktop/my-shop && cd ~/Desktop/my-shop && claude

PowerShell · Windows

mkdir $HOME\Desktop\my-shop; cd $HOME\Desktop\my-shop; claude

ชื่อโฟลเดอร์ให้ใช้ อังกฤษพิมพ์เล็ก ไม่มีเว้นวรรค ไม่มีภาษาไทย เพื่อไม่ให้มีปัญหาตอน deploy

วางกฎประจำโปรเจกต์ลงใน CLAUDE.md

ก่อนสั่งสร้างเว็บ ให้ Claude ช่วยตั้งกติกาประจำโปรเจกต์เองตามแนวทางมาตรฐาน — เราแค่บอกบริบทงานและเป้าหมาย ไม่ต้องไปกำหนดรายละเอียดทางเทคนิคเองทั้งหมด ปล่อยให้ Claude ถามกลับและเสนอกฎที่เหมาะสมให้ดูก่อน

Prompt 0.1 สร้างกฎประจำโปรเจกต์

ผมกำลังจะทำเว็บขายสินค้าของตัวเอง เป็นเว็บหน้าเดียวง่าย ๆ
สำหรับมือใหม่ที่ไม่มีพื้นฐานเขียนโค้ด และอยากดูแล/แก้ไขเองต่อได้ในระยะยาว
โดยไม่ต้องพึ่งเซิร์ฟเวอร์หรือฐานข้อมูล

ช่วยสร้างไฟล์ CLAUDE.md ให้หน่อย ตามแนวทางมาตรฐานของไฟล์นี้ (บอกบริบท/เป้าหมายโปรเจกต์ เทคโนโลยีที่จะใช้ ขอบเขตที่ไม่ต้องทำ และกติกาการทำงานร่วมกัน)
ก่อนสร้างไฟล์จริง ช่วยถามผมก่อนว่ามีอะไรที่อยากเพิ่มเป็นพิเศษไหม แล้วสรุปกฎที่จะบันทึกให้ผมดูก่อน 1 รอบ
เมื่อผมโอเคแล้วค่อยสร้างไฟล์ และสรุปสั้น ๆ ว่าเขียนอะไรไว้บ้าง

Agent ทำให้ประเมินจากบริบทที่ให้แล้วเสนอกฎที่เหมาะสมเอง เช่น ใช้ HTML/CSS ไฟล์เดียวพอสำหรับงานนี้ ไม่ต้องมีฐานข้อมูล และตั้งกติกาการสื่อสารระหว่างทำงานร่วมกัน — คุณมีสิทธิ์ทักท้วงหรือขอปรับก่อนกดยืนยันเสมอ

ระวังอ่านกฎที่ Claude สรุปมาให้ครบก่อนตอบตกลง — ถ้ามีข้อไหนไม่ตรงกับที่อยากได้ (เช่น อยากได้คอมเมนต์ภาษาไทย หรือกันไม่ให้ลบส่วนติดต่อ) บอกแก้ได้ก่อนสร้างไฟล์จริง

คุณควรได้ไฟล์ CLAUDE.md ในโฟลเดอร์โปรเจกต์ ที่สรุปกฎทั้งหมดไว้ครบตามที่คุณอนุมัติ — Claude จะอ่านไฟล์นี้ทุกครั้งที่เริ่มงานในโฟลเดอร์นี้ต่อจากนี้

เคล็ดลับ: ก่อนสั่งงานใหญ่ทุกครั้ง กด Shift + Tab จนขึ้นคำว่า plan mode ให้ AI ร่างแผนให้ดูก่อน แล้วค่อยกดอนุมัติ

ช่วงที่ 2

สร้างเว็บของคุณ

13:30–14:30 · ทุกคนทำ — ได้หน้าเว็บขายสินค้าครบ 4 ส่วน

Step One

สร้างเว็บขายสินค้าหน้าแรก

เป้าหมาย

ได้ index.html เว็บขายสินค้า 1 หน้า มี 4 ส่วน: Hero ร้าน · รายการสินค้า · เกี่ยวกับร้าน · ติดต่อ/สั่งซื้อ

ทักษะที่ได้

เขียน Prompt ครบสูตร · กำหนดโครงสร้าง + โทนสี/ธีม · แก้ทีละจุด

ตัดสินใจก่อนว่าจะขายอะไร

ไม่ต้องเป็นร้านจริงก็ได้ สมมติขึ้นมาเลยก็ยังได้ — แต่ ต้องตอบ 3 ข้อนี้ให้ได้ก่อนพิมพ์ prompt ไม่งั้น AI จะเดาเนื้อหาให้เอง แล้วได้เว็บที่ไม่ใช่ของคุณ

ต้องตอบ	ตัวอย่าง
ชื่อร้าน + ขายอะไร	"บ้านขนมยาย" ขายขนมไทยโบราณ · "CraftWood" ขายของแต่งบ้านงานไม้
สินค้า 3 อย่าง + ราคา	ทองหยิบ 120 บาท · ฝอยทอง 150 บาท · เม็ดขนุน 180 บาท
ช่องทางติดต่อจริง	LINE ID / เบอร์โทร / อีเมล ที่ลูกค้าใช้สั่งซื้อได้

ขายอะไรก็ได้: เสื้อผ้า · ขนม · งานคราฟต์ · ต้นไม้ · คอร์สเรียน · บริการรับถ่ายรูป · รับจ้างออกแบบ — เลือกสิ่งที่คุณเล่าได้สนุกที่สุด จะเขียนเนื้อหาง่ายกว่ามาก

สั่งสร้างเว็บ 4 ส่วน (Prompt หลักของขั้นที่ 1)

วาง Prompt ข้างล่าง แล้ว แก้ข้อความในวงเล็บเหลี่ยม [ ] ให้เป็นร้านของคุณเอง และเลือกโทนสีที่ชอบ ก่อนกด Enter

Prompt 1.1 · หัวใจของขั้นที่ 1 แก้ [ ] ก่อนส่ง

ทำเว็บขายสินค้าให้ผมเป็นไฟล์ index.html ไฟล์เดียว
(HTML + CSS + JavaScript ในไฟล์เดียว ไม่ใช้ framework ตามกฎใน CLAUDE.md)

[ข้อมูลร้าน]
- ชื่อร้าน: [ใส่ชื่อร้าน]
- ขาย: [ขายอะไร เช่น ขนมไทยโบราณทำสดใหม่ทุกวัน]
- สโลแกน: [ประโยคสั้น ๆ 1 บรรทัด]
- ติดต่อ: LINE [ไอดี] · โทร [เบอร์] · อีเมล [email]

[สินค้า 3 อย่าง]
1) [ชื่อสินค้า] ราคา [ราคา] บาท — [คำอธิบายสั้น 1 บรรทัด]
2) [ชื่อสินค้า] ราคา [ราคา] บาท — [คำอธิบายสั้น 1 บรรทัด]
3) [ชื่อสินค้า] ราคา [ราคา] บาท — [คำอธิบายสั้น 1 บรรทัด]

[โครงสร้าง] มีแถบเมนูด้านบนแบบ sticky มี 4 เมนู กดแล้วเลื่อนแบบนุ่มนวลไปยังแต่ละส่วน:
1) Hero: ชื่อร้านตัวใหญ่ + สโลแกน + ปุ่ม "ดูสินค้า" (กดแล้วเลื่อนไปส่วนสินค้า)
2) รายการสินค้า: การ์ด 3 ใบเรียงกัน แต่ละใบมี
   รูปสินค้า (ยังใช้ placeholder สี่เหลี่ยมสีเทาไปก่อน) + ชื่อ + ราคา
   + คำอธิบายสั้น + ปุ่ม "สั่งซื้อ"
3) เกี่ยวกับร้าน: ข้อความ 3-4 บรรทัด เล่าที่มาของร้านและจุดขาย
4) ติดต่อ/สั่งซื้อ: ช่องทางติดต่อทั้งหมด แสดงให้เห็นชัด
+ Footer: ชื่อร้าน + ปีปัจจุบัน

[ตรรกะ]
- กดปุ่ม "สั่งซื้อ" ที่การ์ดไหน ให้เปิดกล่องฟอร์ม (popup) ขึ้นมา
  โดยเติมชื่อสินค้านั้นให้อัตโนมัติ
- ฟอร์มมี: ชื่อผู้สั่ง, เบอร์โทร, จำนวน
- กดยืนยันแล้วขึ้นข้อความขอบคุณพร้อมสรุปรายการที่สั่ง
  (ยังไม่ต้องส่งข้อมูลไปไหน แค่แสดงบนหน้าจอ)
- ราคาให้แสดงเป็นบาท มีคอมมาคั่นหลักพัน เช่น 1,290 บาท

[โทนสี & ธีม]
- โทนหลัก: [เลือก 1 อย่าง เช่น ขาว-แดง (ตามธีมคอร์ส) / ขาว-เขียว (สินค้าธรรมชาติ)
  / ครีม-น้ำตาล (ขนม/งานคราฟต์) / ขาว-ดำ (แฟชั่น มินิมอล)]
- สไตล์: สะอาด ดูน่าเชื่อถือ น่าซื้อ เว้นระยะห่างเยอะ
  ราคาต้องเด่นอ่านง่าย ปุ่มสั่งซื้อต้องสะดุดตา มุมการ์ดโค้งมน มีเงานุ่ม ๆ
- รองรับมือถือ (responsive) และใช้ฟอนต์ระบบไปก่อน (ยังไม่โหลดฟอนต์ภายนอก)

[ผลลัพธ์] ทำเสร็จเปิดหน้าเว็บให้ดู แล้วสรุปว่าแต่ละส่วนมีอะไรบ้าง

Agent ทำให้เขียน HTML/CSS/JS ทั้งไฟล์ จัดโครงสร้าง 4 ส่วนตามลำดับ ผูกเมนู sticky ให้เลื่อนอัตโนมัติ เขียน popup ฟอร์มสั่งซื้อที่รู้ว่ากดมาจากสินค้าใบไหน และจัดรูปแบบราคาให้มีคอมมา

ระวังสังเกตโครงของ Prompt: บริบท → ข้อมูลจริง → โครงสร้าง → ตรรกะ → สไตล์ → ผลลัพธ์ — สูตรเดียวกับที่เรียนในคลาส เอาไปใช้กับงานอื่นได้ทุกครั้ง · ส่วน [ตรรกะ] สำคัญมาก ถ้าไม่บอกว่ากดปุ่มแล้วต้องเกิดอะไร AI จะทำปุ่มที่กดแล้วไม่มีอะไรเกิดขึ้น

คุณควรได้ไฟล์ index.html เปิดแล้วเห็นครบ 4 ส่วน · กดเมนูเลื่อนไปถูกส่วน · กด "สั่งซื้อ" แล้วมีฟอร์มเด้งขึ้นพร้อมชื่อสินค้าที่ถูกต้อง · ยังไม่มีรูปจริง (ใส่ในขั้นที่ 2)

แก้ทีละจุด — อย่าสั่งทำใหม่ทั้งหน้า

ถ้ายังไม่ถูกใจ บอกเป็นจุด ๆ แบบพูดกับคนออกแบบ ไม่ต้องใช้ศัพท์เทคนิค — สั่งทีละเรื่อง อย่ารวบหลายข้อในครั้งเดียว จะคุมทิศทางง่ายกว่าและรู้ทันทีถ้าพังตรงไหน

Prompt 1.2 เลือกใช้ทีละบรรทัด

ช่วยแก้ไขเพิ่มเติมให้หน่อย:
- ตัวหนังสือในหน้า Hero ใหญ่เกินไป ลดลงประมาณ 20% แล้วจัดกึ่งกลาง
- การ์ดสินค้าชิดกันไป เพิ่มช่องไฟระหว่างการ์ดหน่อย
- ราคายังไม่เด่น ขอตัวใหญ่ขึ้นและใช้สีหลักของธีม
- ปุ่ม "สั่งซื้อ" ขอใหญ่ขึ้นและสีเข้มขึ้น ตัวหนังสือสีขาว
- ส่วนเกี่ยวกับร้านพื้นหลังขาวโล่งไป ทำเป็นสีเทาอ่อนเพื่อแยกจากส่วนอื่น
- ห้ามใช้อีโมจิในหน้าเว็บเด็ดขาด ถ้ามีให้เปลี่ยนเป็นไอคอนเส้น (SVG) แทนทั้งหมด

ช่วยเช็คด้วยว่าเมนูด้านบนกดแล้วเลื่อนไปถูกส่วนทุกอันไหม
และปุ่มสั่งซื้อทั้ง 3 ใบเปิดฟอร์มพร้อมชื่อสินค้าถูกต้องไหม

ระวังอย่ากดสั่ง "ทำใหม่ทั้งหมด" เพราะจะเสียของดีที่มีอยู่ — บอกทีละจุด AI จะต่อยอดจากของเดิมให้

ช่วงที่ 3

ปรับแต่งเพิ่มเติม

14:30–15:30 · เลือกทำเฉพาะข้อที่สนใจ ไม่ต้องทำครบทุกข้อ

Step Two

เพิ่มรูปสินค้าลงหน้าเว็บ

เป้าหมาย

ใส่รูปสินค้าจริงในการ์ดทั้ง 3 ใบ + รูปหน้าร้านใน Hero แทน placeholder เดิม

ทักษะที่ได้

จัดไฟล์รูปในโปรเจกต์ · อ้างอิง relative path · จัดรูปไม่ให้บิดเบี้ยว

เอาไฟล์รูปมาไว้ในโฟลเดอร์โปรเจกต์

ให้ Claude สร้างโฟลเดอร์ images ในโปรเจกต์ก่อน แล้วเราลากไฟล์รูปไปวางในนั้น — วิธีนี้ทำให้ path ไม่ยาวและย้ายโฟลเดอร์แล้วยังใช้ได้

Prompt 2.1 เตรียมที่วางรูป

ช่วยสร้างโฟลเดอร์ชื่อ images ในโปรเจกต์นี้ให้หน่อย
แล้วบอกผมด้วยว่าต้องเอาไฟล์รูปไปวางไว้ตรงไหน และตั้งชื่อไฟล์แบบไหนดี
(ผมมี: รูปหน้าร้าน 1 รูป, รูปสินค้า 3 รูป)

ลากไฟล์ไปวางในโฟลเดอร์ images ผ่าน Finder (mac) หรือ File Explorer (Windows) ได้เลย · แนะนำตั้งชื่อ: shop.jpg, product1.jpg, product2.jpg, product3.jpg (อังกฤษ ไม่มีเว้นวรรค ไม่มีภาษาไทย)

สั่งให้ Claude ใส่รูปเข้าไปในเว็บ

เมื่อวางไฟล์แล้ว วาง Prompt นี้ (แก้ชื่อไฟล์ให้ตรงกับที่คุณวางจริง)

Prompt 2.2 · หัวใจของขั้นที่ 2 อ้างอิง path ในเครื่อง

ผมวางไฟล์รูปไว้ในโฟลเดอร์ images/ ของโปรเจกต์แล้ว ตามนี้:
- รูปหน้าร้าน (ใช้ใน Hero): images/shop.jpg
- รูปสินค้า 3 รูป (เรียงตามการ์ดสินค้า 1-2-3):
  images/product1.jpg, images/product2.jpg, images/product3.jpg

ช่วยแก้ index.html ให้:
1) ใช้ images/shop.jpg เป็นภาพพื้นหลังของส่วน Hero
   มี overlay มืดบาง ๆ ทับ เพื่อให้ชื่อร้านและปุ่มยังอ่านออกชัด
2) ใส่รูปสินค้าแต่ละรูปไว้ด้านบนของการ์ดสินค้าแต่ละใบ
   ให้ภาพเต็มความกว้างการ์ด สูงเท่ากันทุกใบ ไม่ยืดไม่บิด
   (object-fit: cover) มุมบนโค้งรับกับการ์ด

อ้างอิงรูปด้วย path แบบ relative (images/...) ทุกจุด
ถ้าไฟล์ไหนหาไม่เจอ ให้บอกผมว่าชื่อไฟล์ควรเป็นอะไร แล้วเปิดหน้าเว็บให้ดู

Agent ทำให้แก้ path ในโค้ดทุกจุดให้ตรงกับไฟล์จริง ใส่ object-fit: cover ให้ภาพไม่บิดเบี้ยว จัดความสูงการ์ดให้เท่ากันทั้งแถว และทำ overlay ให้ตัวหนังสือบน Hero ยังอ่านออก

ระวังรูปจากมือถือมักใหญ่มาก (5-10 MB ต่อรูป) ทำให้เว็บโหลดช้า — ถ้ารูปใหญ่เกิน ให้บอก Claude ว่า "ช่วยบอกวิธีย่อรูปให้เล็กลงก่อนใช้" หรือย่อด้วย Preview (mac) / Photos (Windows) ให้กว้างไม่เกิน 1600px ก่อนลากมาวาง · รูปสินค้าควรถ่ายในแสงเดียวกันและครอบตัดสัดส่วนเท่ากัน การ์ดจะดูเป็นชุดเดียวกันและน่าซื้อขึ้นมาก

คุณควรได้Hero มีภาพหน้าร้านเป็นพื้นหลังพร้อมข้อความอ่านชัด และการ์ดสินค้าทั้ง 3 ใบมีรูปจริง เรียงสวยความสูงเท่ากัน

Step Three

ฝังวิดีโอรีวิวสินค้า

เป้าหมาย

มีวิดีโอรีวิว/สาธิตสินค้า เล่นได้ในหน้าเว็บ ย่อขยายตามจอ

ทักษะที่ได้

ฝัง iframe · ทำสัดส่วน 16:9 ที่ responsive · ใช้ลิงก์ embed ให้ถูก

หา "ลิงก์วิดีโอ" ที่จะใช้

ใช้วิดีโอรีวิวสินค้าของคุณเอง หรือถ้ายังไม่มี ใช้วิดีโอที่เกี่ยวกับสินค้าประเภทเดียวกันมาทดสอบก่อนได้ — เปิดวิดีโอใน YouTube แล้วคัดลอก URL จากช่องด้านบนมาเลย ไม่ต้องแปลงเป็นลิงก์ embed เอง เดี๋ยว Claude จัดการให้

ลิงก์ที่ใช้ได้ทั้งสองแบบ: youtube.com/watch?v=XXXXXXX หรือ youtu.be/XXXXXXX — ถ้าเป็นวิดีโอของคุณเอง ต้องตั้งค่าเป็น สาธารณะ (Public) หรือ ไม่เป็นสาธารณะ (Unlisted) ถ้าตั้งเป็นส่วนตัวจะฝังไม่ได้

สั่งให้ Claude ฝังวิดีโอแบบ Responsive

Prompt 3.1 · หัวใจของขั้นที่ 3 แก้ลิงก์ก่อนส่ง

ช่วยเพิ่มส่วนใหม่ในหน้าเว็บ ชื่อหัวข้อ "วิดีโอรีวิวสินค้า"
วางไว้ระหว่างส่วน "รายการสินค้า" กับส่วน "เกี่ยวกับร้าน"

ใช้วิดีโอ YouTube นี้: [วางลิงก์ YouTube ของคุณตรงนี้]

เงื่อนไข:
- แปลงลิงก์เป็นแบบ embed ให้ถูกต้อง แล้วฝังด้วย iframe
- ทำกรอบวิดีโอเป็นสัดส่วน 16:9 ที่ย่อขยายตามความกว้างจอ (responsive)
  ไม่ล้นขอบจอบนมือถือ และไม่มีขอบดำส่วนเกิน
- มุมโค้งมนรับกับการ์ดอื่นในหน้า และจัดกึ่งกลาง กว้างสุดไม่เกิน 800px
- ใส่ loading="lazy" ให้ด้วย เพื่อไม่ให้หน้าเว็บโหลดช้า

เพิ่มเมนู "วิดีโอ" ในแถบด้านบน กดแล้วเลื่อนมาที่ส่วนนี้
ทำเสร็จเปิดหน้าเว็บให้ดู

Agent ทำให้แปลง URL ธรรมดาเป็นลิงก์ /embed/ ให้เอง เขียน CSS สัดส่วน 16:9 (aspect-ratio) ที่ยืดหยุ่นตามจอ และเพิ่มเมนูให้ครบ

ระวังถ้าฝังแล้วขึ้นว่า "Video unavailable" ให้เช็ก 2 อย่าง: (1) วิดีโอตั้งเป็นส่วนตัวอยู่ไหม (2) เจ้าของวิดีโอปิดการฝังไว้หรือเปล่า — ลองเปลี่ยนไปใช้วิดีโออื่นทดสอบก่อน

คุณควรได้วิดีโอเล่นได้ในหน้าเว็บ ลองย่อหน้าต่างเบราว์เซอร์ให้แคบลง วิดีโอต้องหดตามโดยไม่ล้นขอบ

Step Four

เปลี่ยนฟอนต์ให้สวยขึ้น

เป้าหมาย

เปลี่ยนจากฟอนต์ระบบ เป็นฟอนต์ไทยสวย ๆ ที่โหลดจาก Google Fonts

ทักษะที่ได้

เลือกฟอนต์ให้เข้ากับงาน · แยกฟอนต์หัวข้อกับเนื้อหา · โหลดฟอนต์จากภายนอก

เลือกฟอนต์ไทยที่ชอบ

ฟอนต์ไทยบน Google Fonts ใช้ฟรีทั้งหมด และโหลดง่ายที่สุด (แค่บรรทัดเดียว) — เลือกจากตารางนี้ได้เลย

ฟอนต์	บุคลิก	เหมาะกับ
Sarabun	สุภาพ อ่านสบายตา	เนื้อหาทั่วไป ตัวเลือกที่ปลอดภัยที่สุด
IBM Plex Sans Thai	ทันสมัย เป็นทางการ	หัวข้อ งานสายเทค/ธุรกิจ
Prompt	เรียบ กลม เป็นมิตร	งานทั่วไป สตาร์ทอัพ
Kanit	หนา เด่น มีพลัง	หัวข้อใหญ่ ๆ ให้สะดุดตา
Mitr	อบอุ่น เป็นกันเอง	งานไลฟ์สไตล์ งานสร้างสรรค์

เคล็ดลับมืออาชีพ: ใช้แค่ 2 ฟอนต์พอ — ฟอนต์หนา ๆ สำหรับหัวข้อ + ฟอนต์อ่านง่ายสำหรับเนื้อหา ใส่เกิน 3 ฟอนต์เมื่อไหร่หน้าเว็บจะเริ่มดูรก

สั่งให้ Claude เปลี่ยนฟอนต์ทั้งหน้า

Prompt 4.1 · หัวใจของขั้นที่ 4 แก้ชื่อฟอนต์ก่อนส่ง

ช่วยเปลี่ยนฟอนต์ของหน้าเว็บให้หน่อย โหลดจาก Google Fonts:
- ฟอนต์หัวข้อ (h1, h2, h3 และชื่อในส่วน Hero): [เช่น Kanit]
- ฟอนต์เนื้อหา (ข้อความทั่วไป ปุ่ม เมนู): [เช่น Sarabun]

เงื่อนไข:
- ใส่ลิงก์โหลดฟอนต์ใน head ให้ถูกต้อง โหลดเฉพาะน้ำหนักที่ใช้จริง
  (หัวข้อเอา 600,700 / เนื้อหาเอา 400,500) จะได้ไม่โหลดหนักเกินจำเป็น
- ตั้ง fallback เป็นฟอนต์ระบบไว้ด้วย เผื่อโหลดฟอนต์ไม่ทัน
- ตรวจให้แน่ใจว่าภาษาไทยแสดงผลถูกต้อง สระและวรรณยุกต์ไม่ลอยไม่ซ้อนกัน

ทำเสร็จเปิดหน้าเว็บให้ดู แล้วบอกด้วยว่าเปลี่ยนตรงไหนไปบ้าง

Agent ทำให้เพิ่มลิงก์ Google Fonts ใน head เปลี่ยน font-family ทุกจุดให้สอดคล้องกัน และตั้ง fallback ให้อัตโนมัติ

ระวังฟอนต์จาก Google Fonts ต้องต่อเน็ตถึงจะโหลดขึ้น — ถ้าเน็ตในห้องช้า ตัวหนังสืออาจเป็นฟอนต์ระบบสักครู่ก่อนเปลี่ยน ถือว่าปกติ · ถ้าอยากใช้ฟอนต์จาก f0nt.com แทน ต้องดาวน์โหลดไฟล์มาไว้ในโฟลเดอร์ fonts/ แล้วบอก Claude ให้ตั้ง @font-face ให้ — เช็กเงื่อนไขลิขสิทธิ์ของฟอนต์ก่อนใช้งานจริงทุกครั้ง

คุณควรได้หน้าเว็บเปลี่ยนบุคลิกไปเลยจากฟอนต์ใหม่ หัวข้อกับเนื้อหาแยกกันชัด อ่านง่ายขึ้น

ช่วงที่ 4

เอาเว็บขึ้นออนไลน์

15:40–16:30 · ทุกคนทำ — ได้ลิงก์เว็บจริงส่งให้ลูกค้าได้

Step Five

ทำ Responsive — เปิดได้ดีทุกอุปกรณ์

เป้าหมาย

เปิดเว็บบนมือถือแล้วอ่านง่าย กดเมนู/ปุ่มได้จริง ไม่ล้นจอ

ทักษะที่ได้

ทดสอบผ่าน DevTools · สั่งแก้ responsive แบบเจาะจงปัญหา

เปิดโหมดจำลองมือถือแล้วดูว่าพังตรงไหน

เปิดไฟล์ index.html ในเบราว์เซอร์ กด F12 (หรือคลิกขวา → Inspect) แล้วกดไอคอนรูปมือถือ/แท็บเล็ตด้านบน เพื่อดูหน้าเว็บในขนาดจอเล็ก — สังเกตว่าตัวหนังสือล้น เมนูซ้อนกัน หรือรูปเบี้ยวไหม

จำสัญลักษณ์: Toggle device toolbar ในเบราว์เซอร์ (ไอคอนคล้ายมือถือ+แท็บเล็ตซ้อนกัน) คือปุ่มที่ต้องกด

สั่งให้ Claude ทำ Responsive ให้ครบ

บอกปัญหาที่เจอจากขั้นที่ 1 ไปตรง ๆ หรือถ้ายังไม่แน่ใจ ให้ Claude ช่วยตรวจทั้งหน้าให้ก่อน

Prompt 5.1 · หัวใจของขั้นที่ 5 ตรวจ + แก้ responsive

ช่วยตรวจ index.html ให้แสดงผลดีบนหน้าจอมือถือ (ความกว้างประมาณ 375-430px) ด้วย:
- เมนูด้านบน: ถ้าแน่นเกินไปให้ยุบเป็นเมนูแฮมเบอร์เกอร์ (กดแล้วกางลงมา)
- การ์ดสินค้า 3 ใบ: เรียงจาก 3 คอลัมน์ เหลือ 1 คอลัมน์บนมือถือ
- ตัวหนังสือและปุ่มต้องไม่ล้นขอบจอ กดปุ่มด้วยนิ้วได้สะดวก (ไม่เล็กเกินไป)
- ปุ่ม "สั่งซื้อ" บนมือถือขอให้กว้างเต็มการ์ด กดง่ายด้วยนิ้วโป้ง
- กล่องฟอร์มสั่งซื้อ (popup) ต้องไม่ล้นจอมือถือ และเลื่อนอ่านได้ถ้าเนื้อหายาว
- ทดสอบด้วย media query แล้วสรุปว่าแก้จุดไหนไปบ้าง

Agent ทำให้เพิ่ม media query ให้เลย์เอาต์ยุบตัวเหมาะกับจอเล็ก ปรับขนาดตัวหนังสือ/ปุ่ม และทำเมนูแฮมเบอร์เกอร์ถ้าจำเป็น

คุณควรได้เปิดเว็บบนมือถือตัวเองจริง ๆ แล้วอ่านง่าย กดทุกปุ่ม/ลิงก์ได้สะดวก ไม่มีตรงไหนล้นจอ

Step Six

Deploy ด้วย Netlify Drag & Drop

เป้าหมาย

ได้ลิงก์เว็บจริงบนอินเทอร์เน็ต (…netlify.app) ส่งให้เพื่อนเปิดดูได้

ทักษะที่ได้

Netlify Drop · ไม่ต้องมี Git หรือบัญชี GitHub ก็ deploy ได้

ลากโฟลเดอร์โปรเจกต์ไปวางบน Netlify Drop

วิธีนี้ง่ายที่สุดสำหรับหน้าเว็บที่ไม่มี backend — ไม่ต้องพิมพ์คำสั่งสักตัว

เข้า app.netlify.com/drop (ไม่ต้องสมัครสมาชิกก็ลองได้ทันที)
ลากทั้งโฟลเดอร์โปรเจกต์ (ที่มี index.html + images/ ข้างใน) ไปวางบนหน้าเว็บ
รอไม่กี่วินาที จะได้ลิงก์ …netlify.app มาทันที
คัดลอกลิงก์ส่งให้เพื่อนเปิดดูได้จากทุกที่ในโลก

ระวังไม่ได้ล็อกอิน = เว็บนี้เป็นแบบชั่วคราวและแก้ทีหลังไม่ได้จากที่เดิม — ถ้าอยากแก้ต่อในอนาคตหรือผูกโดเมนของตัวเอง ให้สมัครบัญชี Netlify ฟรีก่อนแล้วค่อยลากไฟล์วางแบบเดิม จะได้ไซต์ที่แก้ไข/อัปเดตซ้ำได้

คุณควรได้ลิงก์ …netlify.app ที่เปิดได้จริงจากทุกอุปกรณ์ — เปิดบนมือถือตัวเอง + ส่งให้เพื่อนเปิดดู นี่คือเว็บขายสินค้าของคุณที่ออนไลน์จริงแล้ว

ทางเลือก — ให้ Claude Code deploy ให้ผ่าน Netlify CLI

ถ้าอยากลองใช้ Terminal ดูบ้าง หรืออยาก deploy ซ้ำได้ง่ายในอนาคต ให้ Claude ช่วยตั้งค่าและ deploy ให้

Prompt 6.1 deploy ผ่าน Claude Code

ช่วย deploy เว็บนี้ขึ้น Netlify ให้หน่อย (เป็นเว็บ static HTML)
ก่อนรันแต่ละคำสั่ง ให้บอกผมเป็นภาษาไทยว่ากำลังทำอะไร:

1) เช็คว่ามี Netlify CLI ไหม (netlify --version) ถ้าไม่มีให้ติดตั้งด้วย npm i -g netlify-cli
2) สั่ง netlify deploy --prod ในโฟลเดอร์นี้ แล้วบอกผมว่าต้องยืนยันตรงไหน
   (ผมจะกดยืนยันในเบราว์เซอร์ด้วยบัญชีตัวเอง)
3) พอเสร็จ บอก URL ของเว็บที่ได้ให้ผมด้วย

ระวังClaude ล็อกอินแทนเราไม่ได้ — ตอนยืนยันบัญชี ระบบจะเปิดเบราว์เซอร์ให้ เรากดยืนยันด้วยบัญชีของเราเอง — การ deploy คือการเปิดเว็บสู่สาธารณะจริง ถ้า Claude หยุดถามยืนยันก่อน deploy ให้อ่านสรุปให้ครบก่อนพิมพ์ตกลง

Bonus · ถ้าทำเสร็จเร็ว

ส่วนเสริม สำหรับคนที่เสร็จก่อนเวลา

ทำครบทุกขั้นแล้วยังมีเวลาเหลือ? ลองต่อยอดเว็บของคุณด้วย 2 อย่างนี้

ใส่ไอคอนโซเชียลที่กดแล้วลิงก์ไปหน้าจริง

Prompt เสริม A

ช่วยเพิ่มไอคอนโซเชียลของร้าน (เส้น SVG ไม่ใช่อีโมจิ) ในส่วนติดต่อ:
- LINE: [ใส่ลิงก์ LINE หรือ https://line.me/ti/p/~ไอดีของคุณ]
- Instagram: [ใส่ลิงก์เพจร้าน]
- Facebook: [ใส่ลิงก์เพจร้าน]
กดไอคอนแล้วเปิดลิงก์จริงในแท็บใหม่ (target="_blank")

ทำปุ่มสั่งซื้อให้ส่งคำสั่งซื้อเข้า LINE หรืออีเมลจริง

Prompt เสริม B

ในฟอร์มสั่งซื้อ ช่วยเพิ่มปุ่ม "ส่งคำสั่งซื้อทางอีเมล" ให้หน่อย
กดแล้วเปิดโปรแกรมอีเมลจริงไปที่ [ใส่อีเมลจริงของคุณ]
โดยตั้งหัวเรื่องเป็น "สั่งซื้อ: (ชื่อสินค้า)"
และเนื้อหาอีเมลให้เติมข้อมูลที่ลูกค้ากรอกไว้ให้อัตโนมัติ
(ชื่อผู้สั่ง / เบอร์โทร / สินค้า / จำนวน)

คุณควรได้เว็บขายสินค้าที่ใช้งานได้จริงครบทุกปุ่ม ลูกค้ากดสั่งซื้อแล้วส่งข้อมูลถึงคุณได้จริง พร้อมส่งลิงก์ให้ใครก็ได้ดูตั้งแต่วันนี้

Workshop Handbook · First Vibe Coding for Beginners — คู่มือประกอบคอร์สโดยสถาบัน ZenityX

Workshop Handbookสร้างเว็บ ขายสินค้า ของคุณเอง

วิธีใช้คู่มือเล่มนี้

คุณพิมพ์ / สั่ง

Agent ทำให้

ข้อควรระวัง

คุณควรได้

ก่อนเริ่ม — เตรียมเครื่องให้พร้อม

สร้างเว็บขายสินค้าหน้าแรก

เพิ่มรูปสินค้าลงหน้าเว็บ

ฝังวิดีโอรีวิวสินค้า

เปลี่ยนฟอนต์ให้สวยขึ้น

ทำ Responsive — เปิดได้ดีทุกอุปกรณ์

Deploy ด้วย Netlify Drag & Drop

ส่วนเสริม สำหรับคนที่เสร็จก่อนเวลา

Workshop Handbook
สร้างเว็บ ขายสินค้า ของคุณเอง