QuickTry Workshop - Software Engineer

เวิร์คช็อปการพัฒนาเว็บไซต์สำหรับวิศวกรซอฟต์แวร์

---

📋 ภาพรวม (Overview)

เวิร์คช็อปนี้ออกแบบมาสำหรับผู้ที่ต้องการเรียนรู้การพัฒนาเว็บไซต์ตั้งแต่พื้นฐานจนสามารถสร้างและเผยแพร่เว็บไซต์ของตัวเองได้ ผ่านการเรียนรู้แบบ Learning by Doing

✨ สิ่งที่คุณจะได้เรียนรู้

1. พื้นฐานการพัฒนาเว็บ - HTML, CSS, JavaScript
2. โครงสร้างโปรเจกต์จริง - ศึกษาจากตัวอย่าง 4 เว็บไซต์
3. GitHub และ Version Control - จัดการโค้ดและทำงานร่วมกัน
4. Deploy เว็บไซต์ - เผยแพร่เว็บไซต์บน GitHub Pages

🎯 เป้าหมายของเวิร์คช็อป

• ✅ เรียนรู้พื้นฐาน HTML, CSS, JavaScript
• ✅ ทำความเข้าใจโครงสร้างเว็บไซต์จริง
• ✅ ฝึกใช้ GitHub และ Version Control
• ✅ สร้างและเผยแพร่เว็บไซต์ของตัวเอง

⏱️ ระยะเวลา

• เนื้อหาทั้งหมด: ประมาณ 8-12 ชั่วโมง
• สามารถเรียนรู้ด้วยตัวเองตามความเหมาะสม

---

🚀 เริ่มต้นใช้งาน (Getting Started)

ขั้นตอนที่ 1: เปิด Repository บน GitHub Codespaces

1. ไปที่ Repository นี้บน GitHub: https://github.com/codepassion-team/QuickTry-Workshop-Software-Engineer
2. คลิกปุ่ม Code สีเขียว
3. เลือกแท็บ Codespaces
4. คลิก Create codespace on main เพื่อเปิด Workspace ออนไลน์
5. รอสักครู่จนกว่า VS Code จะเปิดขึ้นมาในเบราว์เซอร์

ขั้นตอนที่ 2: ติดตั้ง Live Preview Extension

1. คลิกไอคอน Extensions ที่แถบด้านซ้าย (หรือกด Ctrl+Shift+X / Cmd+Shift+X)
2. พิมพ์ค้นหา "Live Preview"
3. หา Extension ที่ชื่อ "Live Preview" จาก Microsoft
4. คลิกปุ่ม Install เพื่อติดตั้ง
5. เมื่อติดตั้งเสร็จแล้ว คุณสามารถคลิกขวาที่ไฟล์ .html และเลือก "Show Preview" เพื่อดูตัวอย่างเว็บไซต์

🎉 เริ่มต้นเรียนรู้ได้เลย!

---

📚 เนื้อหาเวิร์คช็อป (Workshop Content)

1️⃣ พัฒนาทักษะพื้นฐาน (Skill Development)

เส้นทางการเรียนรู้: เริ่มต้นจากศูนย์สู่การสร้างเว็บไซต์

📁 โฟลเดอร์: 1-Basic-Web-Development

เรียนรู้พื้นฐาน HTML, CSS และ JavaScript ผ่าน 14 บทเรียนที่ครอบคลุมทุกสิ่งที่คุณต้องรู้:

HTML Basics

• 101 - Hello World - เริ่มต้นกับ HTML
• 102 - Headings - การใช้หัวข้อ (h1-h6)
• 103 - Paragraph - ย่อหน้าและข้อความ
• 104 - Links - การสร้างลิงก์
• 105 - Images - การแทรกรูปภาพ
• 106 - Buttons - ปุ่มต่างๆ
• 107 - Lists - รายการแบบมีลำดับและไม่มีลำดับ
• 108 - Text Formatting - การจัดรูปแบบข้อความ
• 109 - Media - การใช้สื่อมัลติมีเดีย (วิดีโอ, เสียง)
• 111 - Tables - การสร้างตาราง

CSS & JavaScript

• 110 - Styling - การตกแต่งด้วย Inline CSS
• 112 - CSS - การใช้ CSS ขั้นสูง (External CSS)
• 113 - JavaScript - พื้นฐาน JavaScript
• 114 - Forms - การสร้างฟอร์มและจัดการข้อมูล

💡 แนะนำ: เรียนตามลำดับเพื่อความเข้าใจที่ดีที่สุด

---

2️⃣ ศึกษาตัวอย่างผลงาน (Example Works)

เรียนรู้จากเว็บไซต์จริง

📁 โฟลเดอร์: 2-Example-Works

ดูโครงสร้างและศึกษาโค้ดจากเว็บไซต์ตัวอย่าง 4 รูปแบบ:

เว็บไซต์	คำอธิบาย	เหมาะสำหรับ
201 - Personal Blog	บล็อกส่วนตัว	ผู้ที่ต้องการเขียนบล็อก
202 - Coffee Shop	เว็บร้านกาแฟ	ธุรกิจร้านอาหาร/คาเฟ่
203 - Corporate	เว็บองค์กร	บริษัท/องค์กร
204 - Raven Studio	เว็บสตูดิโอ	พอร์ตโฟลิโอสร้างสรรค์

🔍 วิธีศึกษา:

• เปิดไฟล์ index.html ในแต่ละโฟลเดอร์
• ใช้ Live Preview ดูผลลัพธ์
• ศึกษาโครงสร้าง HTML, CSS และ JavaScript
• ทดลองแก้ไขและดูผลลัพธ์แบบ Real-time

---

3️⃣ ทำงานกับ GitHub (Work with GitHub)

เรียนรู้การใช้ระบบควบคุมเวอร์ชัน

สิ่งที่คุณจะได้เรียนรู้:

• 📦 สร้าง Repository แรกของคุณบน GitHub
• 📤 อัปโหลดโค้ดเว็บไซต์ของคุณ
• 🌐 เผยแพร่เว็บไซต์บน GitHub Pages
• 🤝 เรียนรู้การทำงานร่วมกันผ่าน Git
• 🔄 การจัดการ Version และ Branch

ขั้นตอนพื้นฐาน:

# Clone repository
git clone <your-repo-url>

# สร้างการเปลี่ยนแปลง
git add .
git commit -m "Your message"
git push origin main

# Deploy บน GitHub Pages
# Settings > Pages > Source: main branch

---

4️⃣ สร้างโปรเจกต์ของคุณเอง (Implement Your Own Project)

ลงมือปฏิบัติจริงด้วยเทมเพลตสำเร็จรูป

📁 โฟลเดอร์: 3-Starter-Templates

เลือกเทมเพลตที่ชอบ ปรับแต่ง และสร้างเป็นเว็บไซต์ของคุณเอง:

🎨 เทมเพลตทั้งหมด (10 แบบ)

Template	สไตล์	เหมาะสำหรับ
Agency	ธุรกิจ	เอเจนซี่, บริษัทรับทำงาน
Band	ดนตรี	วงดนตรี, ศิลปิน
Coffee Shop	ร้านอาหาร	คาเฟ่, ร้านอาหาร
Corporate	องค์กร	บริษัทขนาดใหญ่
Creative	สร้างสรรค์	ดีไซเนอร์, ศิลปิน
Freelancer	พอร์ตโฟลิโอ	ฟรีแลนซ์
Grayscale	มินิมอล	พอร์ตโฟลิโอสไตล์เรียบง่าย
Personal Blog	บล็อก	บล็อกเกอร์
Portfolio	ผลงาน	นักออกแบบ, นักพัฒนา
Resume	ประวัติ	CV ออนไลน์

💡 วิธีใช้งาน:

1. เลือกเทมเพลตที่ต้องการ
2. Copy ไปยังโฟลเดอร์ใหม่
3. แก้ไขเนื้อหาเป็นของคุณเอง
4. ทดสอบด้วย Live Preview
5. Deploy บน GitHub Pages

---

❓ คำถามที่พบบ่อย (FAQ)

Q: ฉันไม่เคยเขียนโค้ดมาก่อน เริ่มต้นยังไงดี?

A: เริ่มจากโฟลเดอร์ 1-Basic-Web-Development และเรียนตามลำดับตั้งแต่ 101-114 ครับ แต่ละบทเรียนสั้นและเข้าใจง่าย

Q: ต้องติดตั้งโปรแกรมอะไรบ้าง?

A: ไม่ต้องติดตั้งอะไรเลย! ใช้ GitHub Codespaces ผ่านเบราว์เซอร์ได้เลย เพียงแค่ติดตั้ง Live Preview extension

Q: ใช้เวลาเรียนนานแค่ไหน?

A: ขึ้นอยู่กับเวลาที่คุณมี แนะนำ:

• พื้นฐาน (Part 1): 3-4 ชั่วโมง
• ศึกษาตัวอย่าง (Part 2): 2-3 ชั่วโมง
• GitHub (Part 3): 1-2 ชั่วโมง
• สร้างโปรเจกต์ (Part 4): 2-3 ชั่วโมง

Q: สามารถข้ามบางส่วนได้ไหม?

A: ได้ครับ แต่แนะนำให้เรียน Part 1 (พื้นฐาน) ให้จบก่อน จากนั้นสามารถเลือกเรียนตามความสนใจได้

Q: เว็บไซต์ที่สร้างสามารถใช้งานจริงได้ไหม?

A: ได้เลยครับ! หลังจาก Deploy บน GitHub Pages แล้ว เว็บไซต์ของคุณจะออนไลน์และเข้าถึงได้จากทั่วโลก

Q: ติดปัญหาต้องทำอย่างไร?

A: สามารถ:

• เปิด Issue ใน GitHub Repository นี้
• ดูตัวอย่างโค้ดในโฟลเดอร์ 2-Example-Works
• ศึกษาเอกสารเพิ่มเติมจาก MDN Web Docs

Q: จบเวิร์คช็อปแล้วควรทำอะไรต่อ?

A:

• สร้างเว็บไซต์ของตัวเองด้วยเทมเพลต
• เรียนรู้ JavaScript Framework (React, Vue, etc.)
• ศึกษา Backend Development (Node.js, Python, etc.)
• ปรับปรุงและพัฒนาทักษะอย่างต่อเนื่อง

---

📞 ติดต่อและสนับสนุน

• 🌐 Website: QuickTry Studio
• 📧 Issues: GitHub Issues

---

Happy Coding! 💻✨