Learning Roadmap — Series Part 1

จาก Designer สู่
UX/UI Engineer

Roadmap ที่ผมใช้สอนน้องจริง — เส้นทางจากศูนย์จนทำงานร่วมกับทีม dev ได้อย่างลื่นไหล

Start Learning View Overview

Why this Roadmap?

ปี 2026 เป็นปีที่โลก design เปลี่ยนไปชัดเจน:

AI วาด mockup ได้ในไม่กี่วินาที — Designer ที่แค่ส่งไฟล์ Figma ให้ dev เริ่มไม่พอ
บริษัทต้องการคนที่คุยกับ dev รู้เรื่อง — เข้าใจว่าอะไรทำได้ อะไรทำไม่ได้ อะไมแพง
Designer ที่ prototype ด้วย code ได้ — กลายเป็นคนที่ทีมแย่งตัว เพราะลดรอบการแก้งานได้มหาศาล

ข่าวดี: คุณไม่จำเป็นต้องเป็น full-stack developer — เพียงแค่ "เข้าใจโค้ดพอสมควร" ก็เปลี่ยนชีวิตการทำงานได้แล้ว

Who is this for?

Suitable for

Graphic / UX / UI Designer ที่อยากต่อยอดสาย technical
คนที่เริ่มจาก 0 ด้านโค้ด ไม่ต้องมีพื้นฐาน programming มาก่อน
Designer ที่อยากทำ prototype เองโดยไม่ต้องง้อ dev ทุกครั้ง

Not suitable for

คนที่อยากเป็น backend หรือ full-stack developer เต็มตัว
คนที่ต้องการเรียนแบบ deep dive ทุกเรื่อง (ซีรีส์นี้เน้น "รู้พอใช้งานจริง")

What You'll Learn

อ่านโค้ด frontend ได้ — รู้ว่า dev เขียนอะไรอยู่ เข้าใจ limitation

ใช้ AI ช่วยเขียนโค้ดได้อย่างมีประสิทธิภาพ — แก้เองได้ ไม่ใช่แค่ copy-paste

คุยกับทีม dev รู้เรื่อง — ลด miscommunication ที่เสียเวลาทั้งสองฝ่าย

ทำ portfolio และ prototype จริงได้ — deploy ขึ้น internet ได้

Tools Needed

+ เวลาวันละ 1-2 ชั่วโมง สม่ำเสมอสำคัญกว่าหนัก

VS Code

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

Google Chrome

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

Figma

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

GitHub

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

Roadmap Overview

6 Chapters, 6 Real Projects

View full roadmap

Chapter 0

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

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

Project: Hello World Deploy

Chapter 1

HTML + CSS พื้นฐาน

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

Project: Personal Portfolio

Chapter 2

JavaScript + DOM + State

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

Project: Todo List + Dark Mode

Chapter 3

Tailwind CSS + shadcn/ui

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

Project: Admin Dashboard

Chapter 4

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

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

Project: React Todo List

Chapter 5

Animation ด้วย Framer Motion

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

Project: Complete Portfolio

Summary

Chapter	Topics	Result
เตรียมเครื่องมือและ Setup โปรเจกต์	Set up your development environment — VS Code, terminal, Git, and browser DevTools	พร้อมเริ่มเขียนโค้ดและ deploy เว็บได้
HTML + CSS พื้นฐาน	Learn the building blocks of the web — HTML tags, CSS styling, Flexbox, Grid, and Responsive Design	สร้างหน้าเว็บสวยได้ด้วยมือเปล่า
JavaScript + DOM + State	Learn essential JavaScript, DOM manipulation, and the concept of State	ทำ interactive ได้โดยไม่พึ่ง framework
Tailwind CSS + shadcn/ui	Learn CSS frameworks used by dev teams worldwide — utility-first CSS and component libraries	เข้าใจ Design System ในมุมของโค้ด
React + 3 Hooks ที่จำเป็น	Learn React the practical way — focusing on useState, useEffect, and useMemo	เริ่มพัฒนาเว็บสมัยใหม่ได้จริง
Animation ด้วย Framer Motion	Add professional animations — hover effects, scroll animations, and page transitions	ใส่ animation ระดับ production