สร้างเว็บไซต์ Portfolio ด้วย Astro.js

คอร์สนี้เหมาะกับใคร

• บุคคลทั่วไปที่ต้องการสร้างเว็บไซต์เก็บ Portfolio ของตัวเองหรือบริษัท
• นักเรียนห้อง SmartCom, SMTE, Gifted ที่ต้องการสร้าง Portfolio แสดงผลงาน

1. 01

   Section 1: เริ่มต้น — ทำไมต้องมี Portfolio (1 ชม.)

   • ทำไมทุกคนควรมี portfolio site
   • ทำไมเลือก Astro — ความต่างจาก WordPress/React
   • ติดตั้ง Node.js + Astro + สร้างโปรเจกต์แรก
   • โครงสร้างโปรเจกต์ Astro: pages/components/layouts
2. 02

   Section 2: HTML + CSS พื้นฐานที่จำเป็น (2.5 ชม.)

   • HTML elements + semantic markup
   • CSS selectors + properties
   • Flexbox layout
   • CSS Grid
   • responsive design + media queries
   • fonts, colors, spacing — design basics
   • Exercise: สร้าง card โปรไฟล์
   • Quiz 1
3. 03

   Section 3: Astro Components + Layouts (2 ชม.)

   • .astro files — frontmatter + template
   • props + slots
   • BaseLayout + nested layouts
   • static assets + public folder
   • component-based thinking
   • Exercise: แยก components หลายส่วน
   • Quiz 2
4. 04

   Section 4: เนื้อหา Portfolio ที่ดี (1.5 ชม.)

   • อะไรที่ recruiter อยากเห็น
   • เขียน 'เกี่ยวกับฉัน' ให้โดนใจ
   • แสดงโปรเจกต์: ปัญหา → วิธีแก้ → ผลลัพธ์
   • skills + experience + education ที่เขียนได้จริง
   • ภาพรวม design: typography + whitespace
5. 05

   Section 5: JavaScript + Interactivity (1.5 ชม.)

   • JS พื้นฐานที่จำเป็นสำหรับเว็บ
   • event listeners + DOM manipulation
   • dark mode toggle + scroll effects
   • form handling + validation
   • Exercise: interactive section
6. 06

   Section 6: ปรับแต่ง design ให้ professional (2 ชม.)

   • color palette + typography system
   • animations ที่ไม่น่ารำคาญ
   • accessibility basics: contrast, alt text, keyboard nav
   • mobile-first responsive
   • ตัวอย่าง portfolios ที่ดี vs ไม่ดี
   • Exercise: polish หน้าเว็บตัวเอง
7. 07

   Section 7: Git + GitHub + Deploy (2 ชม.)

   • Git พื้นฐาน: init, add, commit
   • GitHub: push repo แรก
   • .gitignore + ความปลอดภัย
   • ลงทะเบียน Vercel + connect repo
   • custom domain (ถ้ามี)
   • SEO basics: title, description, og:image
   • Exercise: deploy + แชร์ลิงก์
8. 08

   Section 8: Final Project — เว็บ Portfolio สมบูรณ์ (2.5 ชม.)

   • วางแผน structure + wireframe
   • สร้างทีละส่วน: hero → about → skills → projects → contact
   • เติมเนื้อหาจริง + ปรับ design
   • test responsive + accessibility
   • deploy + รีวิว code
   • ใบประกาศนียบัตร + เส้นทางต่อไป: React → job-ready

• อ.แฟรงค์นักพัฒนาซอฟต์แวร์ ประสบการณ์ 10 ปี+
• อ.แทนนักพัฒนาซอฟต์แวร์ ประสบการณ์ 10 ปี+ เชี่ยวชาญออกแบบเว็บไซต์ให้องค์กรชั้นนำ (ธนาคารกรุงศรี, กรุงไทย, กสิกรไทย, Eventpass)
• อ.เอกกราฟฟิกดีไซเนอร์ ประสบการณ์ 5 ปี+ (บิ๊กซี, โลตัส)

จำนวนชั่วโมง

20 ชั่วโมง

ค่าใช้จ่าย

5,600 บาท

ตารางเรียน

เสาร์ ทุกสัปดาห์ วันละ 2 ชั่วโมง เป็นเวลา 2 เดือน (8 สัปดาห์)

รอบเรียน

เช้า 10:00–12:00 / บ่าย 14:00–16:00 — เลือกรอบได้

รูปแบบการเรียน

ออนไลน์ผ่าน Zoom — เรียนซ้ำได้จนกว่าจะเข้าใจ

สำหรับองค์กร

รับสอนแยกเป็น workshop รายบุคคล/หน่วยงาน — ติดต่อครูแฟรงค์

• โทร: 086-943-1115
• Email: anndream.com@gmail.com
• LINE: frankpkth
• จะได้รับการติดต่อกลับภายใน 24 ชั่วโมงเพื่อนัดชำระเงินก่อนเริ่มเรียน

• โปรดระวังมิจฉาชีพ — ทางเราจะไม่มีการส่งลิงก์ใดๆ ให้ลูกค้ากดเด็ดขาด
• ไม่มั่นใจให้ติดต่อผ่านเบอร์โทรศัพท์ก่อน

เตรียมความพร้อมก่อนเรียน

• คอมพิวเตอร์หรือโน้ตบุ๊ก
• เชื่อมต่อ Wi-Fi
• ห้องส่วนตัวหรือพื้นที่เงียบระหว่างเรียน
• โปรแกรม Zoom
• สมุดดินสอ ปากกา
• ความตั้งใจ