Study Guide: Project Setup & Tools

VS Code Setup

VS Code คือ code editor ที่นักพัฒนาส่วนใหญ่ใช้ — ฟรี, เร็ว, มี extensions เยอะมาก

ไปที่ code.visualstudio.com
ดาวน์โหลดตาม OS (Mac / Windows / Linux)
เปิดแล้วติดตั้ง extensions ด้านล่าง

Extensions ที่ต้องมี

Extension	ทำอะไร
Prettier	จัดรูปแบบโค้ดให้สวยอัตโนมัติ
Live Server	เปิดหน้าเว็บแล้วรีเฟรชอัตโนมัติเมื่อบันทึก
Auto Rename Tag	เปลี่ยนชื่อ tag เปิด tag ปิดจะเปลี่ยนตาม
Thai Language Pack	แปลเมนูเป็นภาษาไทย (optional)

กด Cmd + , เปิด Settings

กด Ctrl + , เปิด Settings

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false
}

File & Folder Organization

ตั้งชื่อไฟล์ยังไงดี?

Directorymy-project/
- index.html ใช้ lowercase + dash
- style.css ชื่อสื่อความหมาย
- script.js สั้น กระชับ

กฎตั้งชื่อ

ใช้ lowercase เสมอ
ใช้ dash (-) แทน space
ชื่อต้อง สื่อความหมาย (ไม่ใช่ test1.html, aaa.css)
ทุกโปรเจกต์เริ่มจาก index.html เป็นหน้าหลัก

นามสกุลไฟล์

นามสกุล	คืออะไร
`.html`	โครงสร้างหน้าเว็บ
`.css`	ตกแต่ง style
`.js`	ใส่ logic + interactive
`.json`	เก็บข้อมูล config
`.md`	เขียนเอกสาร (README)

Terminal Basics

Terminal คือที่ที่เราพิมพ์คำสั่งแทนการคลิก — เปิดได้ใน VS Code โดยกด Ctrl + `

คำสั่งพื้นฐาน

# ดูว่าอยู่ที่ไหน
pwd

# ดูไฟล์ในโฟลเดอร์ปัจจุบัน
ls

# เข้าไปในโฟลเดอร์
cd my-project

# ย้อนกลับ 1 ขั้น
cd ..

# สร้างโฟลเดอร์ใหม่
mkdir my-project

# สร้างไฟล์ใหม่
touch index.html

# เคลียร์หน้าจอ
clear

ตัวอย่าง: สร้างโปรเจกต์ใหม่

mkdir hello-world
cd hello-world
touch index.html style.css
code .   # เปิดโฟลเดอร์ใน VS Code

Git Basics

Git คือ version control — เหมือนกด Save Game ในเกม กลับไปจุดเดิมได้เสมอ

วงจรของ Git

คำสั่งที่ใช้บ่อย

# เริ่มใช้ Git ในโปรเจกต์
git init

# ดูสถานะ (ไฟล์ไหนเปลี่ยน, ไหนยังไม่ track)
git status

# เพิ่มไฟล์เข้า staging
git add index.html        # เพิ่มไฟล์เดียว
git add .                 # เพิ่มทุกไฟล์

# บันทึก (commit)
git commit -m "add homepage"

# ดูประวัติ
git log --oneline

เชื่อมกับ GitHub

# เชื่อม local กับ remote (ทำครั้งแรกครั้งเดียว)
git remote add origin https://github.com/username/repo-name.git

# Push โค้ดขึ้น GitHub
git push -u origin main

.gitignore

สร้างไฟล์ .gitignore เพื่อบอก Git ว่าไฟล์ไหนไม่ต้อง track:

node_modules/
.DS_Store
*.log
.env

GitHub & Deploy

สร้าง Repository บน GitHub

ไปที่ github.com แล้ว sign up / login
กดปุ่ม New สร้าง repository ใหม่
ตั้งชื่อ repo (เช่น hello-world)
อย่า ติ๊ก “Add a README” (เพราะเรามีไฟล์แล้ว)
กด Create repository
ทำตามคำสั่งที่ GitHub แสดง (git remote add + git push)

Deploy ด้วย GitHub Pages

ไปที่ Settings ของ repository
เลือก Pages ในเมนูซ้าย
ที่ Source เลือก Deploy from a branch
เลือก branch main แล้วกด Save
รอ 1-2 นาที เว็บจะขึ้นที่ https://username.github.io/repo-name

Browser DevTools

DevTools คือเครื่องมือตรวจสอบหน้าเว็บที่ซ่อนอยู่ใน browser

Mac
Windows

เปิดด้วย Cmd + Option + I หรือ F12

เปิดด้วย Ctrl + Shift + I หรือ F12

Elements Panel — ตรวจสอบ HTML/CSS

ดูโครงสร้าง HTML ของหน้าเว็บ
แก้ไข CSS ได้แบบ live (ไม่กระทบไฟล์จริง)
ดู Box Model (margin, border, padding, content)
คลิกขวาที่ element > Inspect

Console Panel — ดู JavaScript

// ลองพิมพ์ใน Console
document.title
document.querySelector("h1").textContent
2 + 2

Responsive Mode — ทดสอบหน้าจอต่างขนาด

กดปุ่มรูปมือถือ (หรือ Cmd + Shift + M) เพื่อจำลอง��น้าจอ mobile, tablet, desktop

How the Web Works

เว็บทำงานยังไง?

บทบาทของแต่ละภาษา

ภาษา	บทบาท	เปรียบเทียบ
HTML	โครงสร้าง	โครงกระดูก
CSS	ตกแต่ง	เสื้อผ้า, แต่งหน้า
JavaScript	พฤติกรรม	กล้ามเนื้อ, การเคลื่อนไหว

Best Practices

การตั้งชื่อไฟล์

my-portfolio/index.html     ← lowercase, dash, สื่อความหมาย

Git Commit Messages

# Good — บอกว่าทำอะไร สั้นกระชับ
git commit -m "add navigation bar"
git commit -m "fix responsive layout on mobile"
git commit -m "update hero section text"

เมื่อไหร่ควร Commit?

ทำฟีเจอร์เสร็จ 1 อัน → commit
แก้ bug เสร็จ → commit
อย่า commit ทีเดียวทั้งโปรเจกต์ — แบ่ง commit ย่อยๆ