Home

Learning Roadmap

เส้นทางจาก Designer สู่ UX/UI Engineer — คลิกที่แต่ละ chapter เพื่อเริ่มเรียนรู้

Overall Progress 0 / 6 chapters
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

Complete all chapters?

ยินดีด้วย! คุณพร้อมทำงานร่วมกับทีม dev แล้ว