ฟรอนต์เอนด์

Frontend Explorer

คอร์สปูพื้นฐาน Frontend 2 วันเต็ม ตั้งแต่เปิดโปรเจค Next.js ครั้งแรก ไปจนถึงส่งมอบ Landing Page ของตัวเอง

2 วัน · 12 ชม.เริ่มต้นNext.js + React + Tailwind

📄 ตัวอย่างเว็บ Resume (Next.js + Tailwind)

โปรเจค Next.js เล็กๆ ไฟล์เดียว (app/page.tsx) ที่รวมความรู้ HTML/JSX, CSS Layout, และ Tailwind ที่เรียนไปทั้งคอร์สมาทำเป็นหน้า Resume จริง — มีคอมเมนต์อธิบายทุก section ดาวน์โหลดไปแกะดู หรือแก้เล่นเป็นของตัวเองได้เลย ไม่ต้องเหมือนเป๊ะ

🗺️ เส้นทางการเรียน

🚀5 · รู้จัก Framework

⚛️🔒6 · React Basics

🧱🔒7 · Build Real Website

Final Project

📘เกี่ยวกับคอร์ส

คำอธิบายคอร์ส

Frontend Explorer คือคอร์สที่พาผู้เรียนที่ไม่มีพื้นฐานมาก่อน ไปสู่การสร้างเว็บไซต์ ที่ใช้งานได้จริงด้วย Next.js, React และ Tailwind CSS ผ่านการลงมือทำ Mission เล็กๆ ทีละขั้น แทนที่จะนั่งฟังบรรยายยาวๆ ทุก Chapter จบด้วย "Boss Battle" ที่รวมทักษะ ที่เรียนมาเข้าด้วยกัน และปิดคอร์สด้วย Final Project ที่ผู้เรียนเลือกหัวข้อเองได้

เป้าหมายการเรียนรู้

เข้าใจว่าเว็บไซต์ทำงานอย่างไร ตั้งแต่ Browser ไปจนถึง Server
อ่านและเขียน JSX เพื่อสร้างโครงสร้างหน้าเว็บได้
จัด style ด้วย Tailwind CSS แบบ Utility-First ได้คล่องมือ
สร้าง Layout ที่ Responsive ด้วย Flexbox และ Grid
เข้าใจแนวคิด Component, Props, State ของ React
ประกอบ Component ย่อยๆ ให้กลายเป็นเว็บไซต์เต็มรูปแบบได้
ส่งมอบเว็บไซต์ของตัวเอง 1 เว็บ ตั้งแต่ต้นจนจบ

🎒เตรียมตัวให้พร้อม

ข้อมูลคอร์ส

เวอร์ชัน: 1.0
ระยะเวลา: 2 วัน (รวม 12 ชั่วโมง)
ระดับ: เริ่มต้น (Beginner)
เทคโนโลยีหลัก: Next.js + React + Tailwind CSS

พื้นฐานที่ต้องมี

ใช้คอมพิวเตอร์และเปิด-ปิดโปรแกรมพื้นฐานได้
ไม่จำเป็นต้องมีพื้นฐานเขียนโปรแกรมมาก่อน แต่ถ้าเคยเห็น HTML/CSS มาบ้างจะเรียนได้ลื่นขึ้น
ติดตั้ง Node.js และเครื่องมือที่กำหนดไว้ในหัวข้อ "ซอฟต์แวร์ที่ต้องใช้" ก่อนวันเรียน

ผลลัพธ์ที่คาดหวัง

เมื่อจบคอร์ส ผู้เรียนจะมีเว็บไซต์ Final Project ของตัวเอง 1 เว็บที่ Responsive, มีหน้าตาเป็นมืออาชีพ และเข้าใจพื้นฐาน React/Next.js มากพอที่จะต่อยอดเรียนรู้ด้วย ตัวเองได้ต่อไป

วิธีการสอน

เรียนผ่าน Mission สั้นๆ ที่มี Client Request เป็นตัวตั้งโจทย์ ลงมือทำในเวิร์กสเปซ พร้อม Live Preview เห็นผลทันที มี Hint ให้เมื่อติดขัด และ Boss Battle ปิดท้ายทุก Chapter เพื่อทดสอบว่าทักษะที่เรียนมาใช้งานได้จริง

กติกาการเรียน

ทำ Mission ตามลำดับ ห้ามข้าม เพราะแต่ละ Mission ต่อยอดจาก Mission ก่อนหน้า
ลองทำด้วยตัวเองก่อนเปิดดู Hint หรือ Solution
Boss Battle ต้องผ่านก่อนถึงจะไป Chapter ถัดไปได้
ถามได้ตลอดเวลาที่ติดขัด ไม่มีคำถามไหนที่ถามไม่ได้

ซอฟต์แวร์ที่ต้องใช้

Node.js เวอร์ชัน LTS ล่าสุด
Code Editor เช่น VS Code
เว็บเบราว์เซอร์รุ่นใหม่ (Chrome, Edge หรือ Firefox)
Git (สำหรับบันทึกความคืบหน้าของโค้ด)

Development Environment

Next.js (App Router) + TypeScript
Tailwind CSS สำหรับจัด style
รันโปรเจคด้วย npm run dev แล้วเปิดดูที่ http://localhost:3000

โครงสร้างโฟลเดอร์

my-frontend-project/
  app/
    page.tsx        ← หน้าแรกของเว็บไซต์
    layout.tsx       ← โครงหลักที่ครอบทุกหน้า
    globals.css       ← CSS ตั้งต้นของทั้งเว็บ
  public/           ← ไฟล์รูปภาพ/ไอคอนที่เว็บเรียกใช้ตรงๆ
  package.json       ← รายการ dependency และคำสั่งของโปรเจค