สำหรับคนที่อยากเริ่มทำเว็บ + deploy ได้จริง โดย ไม่เสียเงินสักบาท

• HTML
• CSS
• JavaScript

• GitHub Pages

• HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
• CSS: https://developer.mozilla.org/en-US/docs/Web/CSS
• JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
• GitHub Pages: https://pages.github.com/

• เหมาะกับมือใหม่สุด
• เข้าใจพื้นฐานของ web จริง ๆ (DOM, layout, event)
• Deploy ง่ายมาก แค่ push ขึ้น GitHub ก็ออนไลน์ได้เลย

• Portfolio
• Resume Website
• Landing Page

• React (Vite)
• TypeScript
• Tailwind CSS

• Netlify / Vercel / Cloudflare Pages

• React: https://react.dev/
• Vite: https://vitejs.dev/
• TypeScript: https://www.typescriptlang.org/
• Tailwind CSS: https://tailwindcss.com/
• Netlify: https://www.netlify.com/
• Vercel: https://vercel.com/
• Cloudflare Pages: https://pages.cloudflare.com/

• ใช้สร้าง UI แบบมืออาชีพ
• React = component-based
• Tailwind = เขียน CSS ได้เร็วมาก
• TypeScript = ลด bug + scale ได้

• Web App
• Dashboard
• SaaS UI
• เว็บลูกค้า

• Next.js
• TypeScript
• Tailwind CSS
• Supabase (Auth + Database)
• Vercel (Deploy)

• Next.js: https://nextjs.org/
• Supabase: https://supabase.com/
• Vercel: https://vercel.com/

• Next.js = Full-stack framework (Frontend + Backend ในตัว)
• Supabase = Database + Auth (Login/Register) แบบสำเร็จรูป
• ไม่ต้องเขียน backend เองเยอะ
• Deploy ง่ายมาก (กดปุ่มเดียว)

• ฟรีจริงในระดับเริ่มต้น
• เหมาะกับยุค AI / Agentic Dev
• ใช้ทำ portfolio ดู “โปร” มาก

• Login/Register System
• CRUD App
• Blog
• Dashboard
• Mini SaaS

• React (Vite)
• Node.js + Express
• PostgreSQL
• Neon (Database)
• Render (Backend Deploy)
• Netlify / Vercel (Frontend)

• Node.js: https://nodejs.org/
• Express: https://expressjs.com/
• PostgreSQL: https://www.postgresql.org/
• Neon: https://neon.com/
• Render: https://render.com/

• แยก Frontend / Backend / Database ชัดเจน
• เหมาะกับคนที่อยากเข้าใจระบบจริงแบบ production
• ใช้ pattern เดียวกับบริษัทจริง

• Setup ซับซ้อนกว่าชุด Next.js
• Deploy หลายที่

• REST API
• ระบบหลังบ้าน
• Web App ขนาดกลาง-ใหญ่

• อย่าเริ่มจาก Full-stack เลย → เริ่มจาก Frontend ก่อน
• ทำ project จริงทุก level (สำคัญมาก)
• ใช้ AI เป็นผู้ช่วย แต่ต้องเข้าใจพื้นฐาน
• เป้าหมายคือ “สร้างของจริงได้” ไม่ใช่แค่ดูคลิป