คอร์สการสร้างเว็บไซต์ Portfolio ด้วย Astro.js สำหรับนักเรียน นักศึกษา

คอร์สเรียนคอร์สการสร้างเว็บไซต์ Portfolio ด้วย Astro.js สำหรับนักเรียน นักศึกษา

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

คอร์สนี้มุ่งเน้นให้นักเรียน นักศึกษา สามารถสร้างเว็บไซต์ Portfolio ส่วนตัวที่สวยงาม ทันสมัย และแสดงผลงานได้อย่างมีประสิทธิภาพ โดยใช้ Astro.js ซึ่งเป็น framework ที่เน้นประสิทธิภาพและความเร็วในการโหลดเว็บไซต์ (Performance-focused). ผู้เรียนจะได้เรียนรู้ตั้งแต่พื้นฐานการติดตั้ง Astro.js, โครงสร้างโปรเจกต์, การสร้าง Layout, การแสดงผลงาน, การปรับแต่ง CSS, และการ Deploy เว็บไซต์

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

  • บุคคลทั่วไปที่ต้องการเรียนเพื่อนำความรู้ไปสร้างเว็ปไซต์เก็บ Portfolio ของตัวเองหรือบริษัท
  • น้องๆนักเรียนทั่วไป ห้อง SmartCom,SMTE,Gifted เรียนเพื่อนำความรู้ไปสร้างเว็ปไซต์เก็บ Portfolio เพื่อแสดงผลงาน
  • เมื่อเรียนจบแล้วจะได้ผลงานของตัวเองไปใช้งานได้จริง หรือสามารถต่อยอดรับจ้างทำเว็ปไซต์ได้หลังจากฝึกฝนจนเชี่ยวชาญ

เนื้อหาเกี่ยวกับคอร์สนี้

  • ผู้เรียนสามารถเข้าใจแนวคิดพื้นฐานของ Static Site Generator (SSG) และประโยชน์ของ Astro.js
  • ผู้เรียนสามารถติดตั้งและตั้งค่าโปรเจกต์ Astro.js ได้
  • ผู้เรียนสามารถสร้างโครงสร้างเว็บไซต์ Portfolio ที่เหมาะสมและใช้งานง่าย
  • ผู้เรียนสามารถแสดงผลงาน (Projects) ในรูปแบบต่างๆ ได้ (เช่น รูปภาพ, วิดีโอ, ลิงก์)
  • ผู้เรียนสามารถปรับแต่งรูปลักษณ์ของเว็บไซต์ด้วย CSS Modules และ Tailwind CSS (เลือกอย่างใดอย่างหนึ่ง)
  • ผู้เรียนสามารถเพิ่มส่วนต่างๆ ที่จำเป็นสำหรับ Portfolio เช่น หน้าเกี่ยวกับตัว, ข้อมูลติดต่อ
  • ผู้เรียนสามารถ Deploy เว็บไซต์ Portfolio ที่สร้างเสร็จไปยังแพลตฟอร์มฟรีได้
  • ระยะเวลาเรียน: 20 ชั่วโมง (สามารถปรับตามความเร็วในการเรียนรู้ของผู้เรียน)

เรียนก่อน เป็นก่อน ล้ำหน้ากว่าใครๆ

พื้นฐาน Astro.js และโครงสร้างเว็บไซต์

ชั่วโมงที่ 1-2: ทำความรู้จักกับ Astro.js และ SSG (ทฤษฎีและปฏิบัติ)

  • ความหมายและหลักการทำงานของ Static Site Generator (SSG)
  • ทำไมต้องเลือก Astro.js? (ประสิทธิภาพ, Component Islands, รองรับ Frameworks อื่นๆ)
  • การเปรียบเทียบ Astro.js กับ Frameworks อื่นๆ (เช่น Next.js, Gatsby) ในบริบทของ Portfolio
  • ข้อดีและข้อเสียของ Astro.js
  • ติดตั้ง Node.js และ npm/yarn
  • ติดตั้ง Astro CLI (npm create astro@latest หรือ yarn create astro)
  • สร้างโปรเจกต์ Astro.js พื้นฐาน

ชั่วโมงที่ 3-4: โครงสร้างโปรเจกต์ Astro.js (ปฏิบัติ)

  • ทำความเข้าใจโครงสร้างโฟลเดอร์ (src, public, package.json, astro.config.mjs)
  • ส่วนประกอบหลักของ Astro: Components (.astro), Layouts (.astro), Pages (.astro), Content Collections (.mdx หรือ .md)
  • การสร้าง Layout Component พื้นฐาน (src/layouts/BaseLayout.astro)
  • การใช้งาน Slots ใน Layout
  • การเพิ่ม Meta Tags (Title, Description)

ชั่วโมงที่ 5-6: การสร้างหน้าแรก (Homepage) (ปฏิบัติ)

  • การสร้าง Page Component (src/pages/index.astro)
  • การแสดงข้อมูลส่วนตัวเบื้องต้น (ชื่อ, คำโปรยสั้นๆ)
  • การเพิ่มรูปภาพโปรไฟล์ (public folder และการใช้งาน img ใน Astro)
  • การสร้างส่วน “เกี่ยวกับตัว” (About Me) อย่างง่าย
  • การใช้ Astro Components ในการจัดโครงสร้างหน้า

ชั่วโมงที่ 7-8: การสร้างส่วนแสดงผลงาน (Projects Section) (ปฏิบัติ)

  • แนวคิดการจัดการผลงาน (Static Data หรือ Content Collections)
  • สร้าง Array ข้อมูลผลงานเบื้องต้นใน Page Component (index.astro)
  • การวนลูปแสดงผลงานด้วย ใน Astro Components
  • การแสดงชื่อผลงาน, คำอธิบายสั้นๆ, และรูปภาพตัวอย่าง

ชั่วโมงที่ 9-10:

  • การใช้ Content Collections สำหรับผลงาน (ปฏิบัติ)
  • สร้าง Content Collection สำหรับเก็บข้อมูลผลงาน (src/content/config.ts)
  • สร้าง Markdown หรือ MDX ไฟล์สำหรับแต่ละผลงาน (src/content/projects/)
  • การดึงและแสดงผลข้อมูลจาก Content Collections ใน Page Component
  • การใช้ getCollection() และการเข้าถึงข้อมูล Frontmatter

ชั่วโมงที่ 11-12:

  • การสร้างหน้าแสดงผลงานแต่ละชิ้น (Project Detail Page) (ปฏิบัติ)
  • สร้าง Dynamic Routes ใน Astro (src/pages/projects/[slug].astro)
  • การดึงข้อมูลผลงานตาม slug
  • การแสดงรายละเอียดผลงานทั้งหมด (ชื่อ, คำอธิบาย, รูปภาพ/วิดีโอเพิ่มเติม, ลิงก์)

ชั่วโมงที่ 13-14: การปรับแต่งด้วย CSS Modules (ปฏิบัติ)

  • การสร้างไฟล์ CSS Modules (.module.css)
  • การ Import และใช้งาน CSS Modules ใน Astro Components
  • การจัดการ Styles ในแต่ละ Component อย่างเป็นระบบ
  • การปรับแต่ง Layout และส่วนต่างๆ ของเว็บไซต์ให้สวยงาม

ชั่วโมงที่ 15-16: การปรับแต่งด้วย Tailwind CSS (เลือกอย่างใดอย่างหนึ่ง) (ปฏิบัติ)

  • ติดตั้งและตั้งค่า Tailwind CSS ใน Astro (npx astro add tailwind)
  • ทำความเข้าใจหลักการทำงานของ Tailwind CSS (Utility-First CSS)
  • การใช้งาน Classes ของ Tailwind CSS ใน Astro Components
  • การปรับแต่ง Layout และส่วนต่างๆ ของเว็บไซต์ให้สวยงามด้วย Tailwind Classes

ชั่วโมงที่ 17-18: การสร้างหน้า “เกี่ยวกับตัว” (About Page) และ “ติดต่อ” (Contact Page) (ปฏิบัติ)

  • สร้าง Page Components สำหรับหน้า “เกี่ยวกับตัว” (src/pages/about.astro) และ “ติดต่อ” (src/pages/contact.astro)
  • การแสดงข้อมูลเกี่ยวกับประวัติส่วนตัว, ความสนใจ, ทักษะ
  • การเพิ่มฟอร์มติดต่ออย่างง่าย (อาจใช้บริการภายนอก เช่น Formspree หรือ Netlify Forms) หรือแสดงข้อมูลติดต่อ (อีเมล, LinkedIn)
  • การใช้ Links (Link component ของ Astro) ในการนำทางระหว่างหน้า

ชั่วโมงที่ 19-20: การ Deploy เว็บไซต์ Portfolio (ปฏิบัติ)

  • ทำความเข้าใจกระบวนการ Build ของ Astro (npm run build หรือ yarn build)
  • แนะนำแพลตฟอร์ม Deploy ฟรีสำหรับ Static Sites (เช่น Netlify, Vercel, GitHub Pages)
  • การ Deploy เว็บไซต์ไปยังแพลตฟอร์มที่เลือก
  • การตั้งค่า Custom Domain (ถ้ามี)
  • สรุปเนื้อหาคอร์สและตอบคำถามเพิ่มเติม
  • แนวทางการพัฒนา Portfolio ต่อไป

การสอนเพิ่มเติม(คุ้มมากๆคอร์สนี้)

  • เครื่องมือสร้างรูปผ่าน AI
  • โปรแกรม Canva AI
  • โปรแกรม Photoshop
  • โปรแกรม Visual Studio Code
  • โปรแกรม GitKarken ไว้ทำเรื่อง GitHub (Version Control)
  • พื้นฐานภาษา Javascripts
  • พื้นฐานภาษา HTML5
  • พื้นฐาน Styles Sheets (Css) โดยใช้ tailwindcss

อาจารย์ผู้สอน

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

การสมัครเรียน

  • ค่าใช้จ่าย 5600 บาท
  • ระยะเวลาเรียนทุกวันเสาร์ วันละ 2 ชั่วโมง ระยะเวลา 2 เดือน(หรือ 8 สัปดาห์) ตอนนี้ยังไม่เปิดคอร์สถ้าเปิดแล้วจะแจ้งผ่านช่องทางนี้และโชเชี่ยลของเราอีกทีครับกดติดตามเราไว้ได้เลย
  • สามารถเลือกเรียนตามรอบที่ต้องการได้
  • รอบเช้า 10.00 - 12.00
  • รอบบ่าย 14.00 - 16.00
  • เรียนผ่านโปรแกรมซูม
  • เรียนซ้ำได้จนกว่าจะเข้าใจ
  • สำหรับรายบุคคลหรือหน่วยงานที่ต้องการสอนแยกทำ workshop เฉพาะ สอนเป็นรายบุคคลหรือหน่วยงานติดต่อได้ที่ครูแฟรงค์
  • โทร: 086-943-1115
  • ติดต่อผ่าน Email: talentmino.com@gmail.com
  • line : frankpkth
  • จะได้รับการติดต่อกลับภายใน 24 ชั่วโมง เพื่อนัดการจ่ายเงินก่อนเริ่มนัดหมายการสอน

ไม่มั่นใจให้ติดต่อผ่านเบอร์โทรศัพท์ก่อน

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

  • คอมพิวเตอร์หรือโน๊ตบุค
  • เชื่อมต่อไวไฟ
  • ห้องส่วนตัวหรือบริเวณที่ไม่เกิดเสียงดังรบกวนระหว่างเรียน
  • โปรแกรมซูม
  • สมุดดินสอ ปากกา
  • ความตั้งใจ