Course — Portfolio
Build a Portfolio Website with Astro.js
A course for students — build a beautiful, modern personal portfolio site that showcases your work effectively, using Astro.js, a performance-first framework.
- 20hours
- 10topics
- ฿5,600tuition
- 3instructors
About the course
Students learn everything from installing Astro.js and project structure, through building layouts and showcasing work, to CSS customization and deployment.
By the end you'll have your own working portfolio — or you can take on website projects after further practice.
Learn first, be first — ahead of everyone else.
Who this course is for
- Anyone wanting to build a personal or company portfolio website
- SmartCom, SMTE, and Gifted classroom students wanting to showcase their work
What you'll learn
- 01
Astro.js Fundamentals and Site Structure
- Hours 1–2: Meet Astro.js and SSG — install Node.js and Astro CLI, create your first project
- Hours 3–4: Folder structure, Components, Layouts, Pages, Content Collections — build ContentLayout and Slots
- Hours 5–6: Build the homepage — personal info, profile photo, About Me section
- Hours 7–8: Projects showcase — static data array, loop through projects
- 02
Content Collections and Project Pages
- Hours 9–10: Content Collections for projects — src/content/config.ts, Markdown/MDX per project, getCollection() and frontmatter
- Hours 11–12: Dynamic routes — src/pages/projects/[slug].astro loads data by slug for full details
- 03
Design Customization
- Hours 13–14: CSS Modules — .module.css, import and use in components
- Hours 15–16: Tailwind CSS (pick one) — npx astro add tailwind, utility-first classes
- 04
About, Contact, and Deployment
- Hours 17–18: About and Contact pages — biography, skills, contact form (Formspree/Netlify Forms), navigation
- Hours 19–20: Deploy — npm run build, Netlify/Vercel/GitHub Pages, custom domain, recap and Q&A
Bonus topics (great value)
- AI image generation tools
- Canva AI
- Photoshop
- Visual Studio Code
- GitKraken for GitHub (version control)
- JavaScript basics
- HTML5 basics
- CSS basics with Tailwind CSS
Instructors
- FrankSoftware developer with 10+ years of experience
- TanSoftware developer with 10+ years — designs websites for leading organizations (Bank of Ayudhya, Krungthai, Kasikornbank, Eventpass)
- EkGraphic designer with 5+ years (Big C, Lotus)
Course details
Enrollment
- Phone: 086-943-1115
- Email: anndream.com@gmail.com
- LINE: frankpkth
- We will get back to you within 24 hours to schedule payment before the course starts
- Beware of impostors — we will never send you any links to click
- If unsure, contact us by phone first
Before the course
- A computer or laptop
- Wi-Fi connection
- A private or quiet room during class
- Zoom installed
- Notebook and pen
- Motivation
Ready to build your own portfolio?
Finish the course with a real, working site — or take on website projects right away