Learn Hub — Learn by Doing

เลือกเส้นทาง
เริ่มเรียนจริง

เส้นทางการเรียนรู้ที่ใช้สอนจริง — ทุก path มี workshop, assignment, และ solution ครบ

Choose Your Path

Choose Your Path

เลือกหมวดที่ตรงกับเป้าหมาย แล้วดูรายละเอียดด้านล่าง

Series 1
🎨

UX/UI Engineer

จาก Designer สู่ UX/UI Engineer

เส้นทางสำหรับ Designer ที่อยากเข้าใจโค้ด — HTML, CSS, JavaScript, React, Framer Motion

6 Modules ~30 hrsBeginner
HTML/CSSJavaScriptReactTailwindFramer Motion
Start Learning

6 Chapters — 6 Real Projects

0
Chapter 0

เตรียมเครื่องมือและ Setup โปรเจกต์

เตรียมเครื่องมือที่จำเป็นก่อนเริ่มเขียนโค้ด — VS Code, Terminal, Git, Browser DevTools และเข้าใจว่าเว็บทำงานยังไง

Project: Hello World Deploy
1
Chapter 1

HTML + CSS พื้นฐาน

เริ่มจากโครงสร้างหน้าเว็บ เรียน HTML tag ที่ใช้จริง ต่อด้วย CSS + Flexbox + Grid + Responsive Design

Project: Personal Portfolio
2
Chapter 2

JavaScript + DOM + State

เรียน JavaScript พื้นฐานที่จำเป็น เข้าใจว่า "DOM" คืออะไร และรู้จัก concept "State" ซึ่งเป็นหัวใจของ frontend ทุกวันนี้

Project: Todo List + Dark Mode
3
Chapter 3

Tailwind CSS + shadcn/ui

รู้จัก CSS Framework ที่ทีม dev ทั่วโลกใช้ เข้าใจแนวคิด "Utility-first" และเรียนใช้ component library ที่สวยพร้อมใช้งาน

Project: Admin Dashboard
4
Chapter 4

React + 3 Hooks ที่จำเป็น

เรียน React แบบ "เอาให้พอใช้งาน" เน้น 3 Hook หลัก: useState, useEffect, useMemo

Project: React Todo List
5
Chapter 5

Animation ด้วย Framer Motion

ใส่ animation ที่สวยและ professional — hover effect, scroll animation, page transition

Project: Complete Portfolio

Design Resources

VS Code

Editor สำหรับเขียนโค้ด (ฟรี)

Google Chrome

Browser + DevTools สำหรับดู/แก้เว็บ

Figma

มีอยู่แล้วยิ่งดี ไม่มีก็ได้

GitHub

เก็บโค้ดและโชว์ portfolio (ฟรี)

Who is this for?

Suitable for

  • Designer, Analyst, Developer ที่อยากต่อยอด skill
  • เริ่มจาก 0 — ไม่ต้องมีพื้นฐานมาก่อน
  • อยากเรียนแบบ hands-on — มี workshop ทุกบท

Not suitable for

  • ต้องการ deep dive ทุกเรื่อง (เน้น "รู้พอใช้งานจริง")
  • มีพื้นฐานแน่นแล้ว — อาจรู้สึกว่าช้าเกินไป

Tips from Experience

เคล็ดลับจากที่เคยสอนจริง

Tip #1

ทำ project จริงทุก Chapter — อย่าแค่ดูคลิป

การดูคลิปให้ความรู้สึก "เข้าใจแล้ว" แต่พอลงมือทำจริงจะเจอปัญหาที่ไม่เคยรู้มาก่อน นั่นแหละจุดที่เริ่มเรียนรู้จริง

Tip #2

ใช้ AI ช่วย แต่ต้องแก้เองเป็นก่อน

Cursor, Claude, ChatGPT ช่วยเขียนโค้ดได้เร็วมาก แต่ถ้าคุณอ่านไม่ออก แก้ไม่เป็น = ติดกับดัก ซีรีส์นี้จะสอนให้ "เข้าใจก่อน แล้วค่อยให้ AI ช่วย"

Tip #3

อัพโหลดทุก project ขึ้น GitHub + deploy ทุกอัน

ไม่ใช่แค่เก็บไฟล์ แต่คือการฝึก workflow จริงของ developer และสะสม portfolio ไปในตัว

Tip #4

อ่านโค้ดคนอื่นให้ชิน

เข้าไปดู repo ของ shadcn/ui, Tailwind UI, หรือเว็บที่ชอบแล้วกด F12 ดูโค้ดจริงของเขา — เรียนรู้เร็วกว่าที่คิด

Recommended Channels

ช่องที่ควร Subscribe ไว้เรียนรู้สม่ำเสมอ

Thai Channels

BorntoDev TH

ครอบคลุมทั้ง HTML, CSS, JS, React
KongRuksiam Official TH

Full course สอนเขียนโค้ดแบบจบในคลิปเดียว
Devahoy TH

เน้น frontend และ React
Zinglecode TH

สอนละเอียด เหมาะมือใหม่จริงๆ
nakorncode TH

HTML/CSS ขั้นพื้นฐานถึงขั้นโปร
PasaComputer TH

ครอสคอร์สสั้น ดูจบไว
Designil TH

รวมเรื่องออกแบบ UX UI Design
UPSKILL UX TH

สอน UX/UI Design สำหรับมือใหม่
Uncle Ake TH

UI Design Challenge + สอน Design
MilerDev TH

สอน Web Dev + เปรียบเทียบ framework

International

Fireship EN

สรุปเทคโนโลยีใหม่ๆ ใน 100 วินาที
Kevin Powell EN

CSS master ที่ดีที่สุดในโลก
Web Dev Simplified EN

อธิบายแนวคิดยากให้เข้าใจง่าย
Traversy Media EN

Crash course คลาสสิกเกือบทุกเทคโนโลยี
Theo - t3.gg EN

อัปเดตเทรนด์ React/Next.js

Community

กลุ่มและเพจที่ควรติดตาม

UX/UI Thailand Community

กลุ่มรวม UX/UI Designer ไทย แชร์ผลงาน ถามตอบ
PRUX UX Design

เพจสอน UX Design แบบเข้าใจง่าย
UX/UI Studio

เพจรวมความรู้ UX/UI Design
Design Lazy

Design Tips & Tricks แบบง่ายๆ
Designil

เพจเรื่อง Web Design + UX
Duckgitalist

เพจเรื่อง Digital & Design
Designism

รวมแรงบันดาลใจด้านดีไซน์
Uncle Ake

สอน UI Design + 60 Days Challenge

Ready to Start?

เลือกเส้นทางที่ใช่แล้วเริ่มเรียนได้เลย

🎨 Design Path 🔬 Data Path