6-Month Dev Roadmap

M1

FOUNDATION

เดือนที่ 1 · ปูพื้นฐาน

สร้างรากฐานให้แน่น ก่อนจะวิ่งต้องเดินให้เป็น — เรียน HTML/CSS/JS ให้เข้าใจจริง ไม่ใช่แค่ copy

🌐 HTML & CSS

Semantic HTML5 ครบถ้วน
Flexbox + CSS Grid จนชำนาญ
Responsive Design (Mobile First)
CSS Variables & Custom Properties

⚡ JavaScript Basics

Variables, Functions, Loops
DOM Manipulation จริงๆ
Events & Callbacks
ES6+ (Arrow fn, Destructuring)

🛠️ Dev Tools

Git & GitHub เบื้องต้น
VS Code + Extensions สำคัญ
Browser DevTools ใช้ได้จริง

🎯 เป้าหมาย: ทำ Landing Page สวยๆ 3 หน้าโดยไม่ดู tutorial

M2

JAVASCRIPT DEEP

เดือนที่ 2 · JS จริงๆ

JavaScript คือหัวใจ — ถ้าข้ามขั้นตอนนี้จะสะดุดทีหลัง เรียนให้ลึกพอที่จะแก้บัคได้เอง

🔄 Async JavaScript

Promises & Async/Await
Fetch API & HTTP Methods
Error Handling ที่ดี
JSON Parsing & Manipulation

🧩 OOP & Patterns

Classes & Prototypes
Closures & Scope
Module System (ESM)
Array/Object Methods ครบ

🔌 API Integration

เรียก Public APIs จริง
แสดงข้อมูล Dynamic
Local Storage

🎯 เป้าหมาย: สร้าง Web App ดึงข้อมูล API จริง เช่น Weather App / Movie App

M3

REACT + FRAMEWORK

เดือนที่ 3 · Framework

React คือ skill ที่ตลาดงานต้องการมากที่สุด — เรียนให้ถึงระดับ build จริงได้ ไม่ใช่แค่ Counter App

⚛️ React Core

Components & Props
useState, useEffect ครบ
React Router v6
Conditional Rendering

🗂️ State Management

Context API
Zustand (แนะนำสำหรับ newbie)
Custom Hooks
Data Fetching Patterns

💅 UI Libraries

Tailwind CSS ใน React
shadcn/ui หรือ MUI
Responsive Components

🎯 เป้าหมาย: Clone UI ของ app จริง เช่น Twitter / Airbnb / Netflix (Frontend เท่านั้น)

M4

BACKEND BASICS

เดือนที่ 4 · Server Side

Frontend อย่างเดียวหางานได้ แต่ถ้ารู้ Backend ด้วยจะมีมูลค่าเพิ่มอีกเท่าตัว — เรียน Node.js + Database

🟢 Node.js + Express

REST API Design
Routing & Middleware
Authentication (JWT)
Input Validation

🗄️ Database

PostgreSQL / MySQL พื้นฐาน
Prisma ORM
CRUD Operations จริง
Relations & Joins

☁️ Deployment

Vercel / Railway Deploy
Environment Variables
Basic Docker Concept

🎯 เป้าหมาย: Build Full-stack Todo App / Blog ที่ login ได้ บันทึกข้อมูลลง DB จริง

M5

PORTFOLIO PROJECT

เดือนที่ 5 · สร้างผลงาน

ถึงเวลาสร้างผลงานจริงๆ — 1 โปรเจกต์ใหญ่ที่ทำให้คนจ้างพูดว่า "wow" ดีกว่า 10 tutorial project

🏗️ Project Structure

วางโครงสร้าง folder อย่างมืออาชีพ
Code Splitting & Lazy Loading
Error Boundaries
Performance Optimization

✅ Code Quality

ESLint + Prettier Setup
TypeScript พื้นฐาน
Unit Testing (Vitest)
Git Commit Convention

🎨 Portfolio Site

สร้าง Portfolio Website ตัวเอง
Showcase Project อย่างน้อย 3 ชิ้น
README เขียนดีๆ ทุกโปรเจกต์

🎯 เป้าหมาย: 1 Signature Project + Portfolio Site Online พร้อมส่ง

M6

GET PAID

เดือนที่ 6 · หาเงินจริง

เดือนสุดท้ายคือเดือนที่เปลี่ยน skill เป็น income — เลือกเส้นทาง Freelance หรือ Full-time แล้วลงมือทันที

💼 Job Hunting

Resume Tech ที่ผ่าน ATS
LinkedIn Optimize ครบ
สมัคร 5-10 ที่/สัปดาห์
Practice Coding Interview

🤝 Freelance Path

Upwork / Fiverr Profile
ตั้งราคาตัวเองให้ถูกต้อง
Proposal เขียนให้ชนะ
เครือข่าย Local Business

🌱 Soft Skills

Communication กับ Client
Estimate งานให้แม่น
รับ Feedback อย่าง pro
Stack Overflow / Community

🎯 เป้าหมาย: ได้รับ Job Offer หรือ Freelance งานแรก ✓

6 MONTHROADMAP