2026. május 8. · #kurzus #astro #tutorial #oktatas #announcement

Magyar AI-kurzus: Astro 5 alapok 12 leckében — bevezető a modern web-stackbe

Új kurzus indul a /app/kurzusok-on: 12 lecke, gyakorlati Astro 5 + Tailwind + Vue 3 stackre. Magyar nyelvű, magyar SMB-példákkal, AI-asszisztens-segítséggel. Nem-techieknek is megfelelő.

A magyar fejlesztő-piacon kevés a magyar nyelvű, gyakorlati, modern stack-re tanító kurzus. Az Udemy magyar kurzusai többnyire 5+ évesek, a magyar YouTube-tartalom szétszórt. A /app/kurzusok modulra most indul az első strukturált 12-leckés Astro 5-kurzus — magyar nyelven, magyar példákkal. Ebben a posztban arról, mit tanulsz meg, kinek való, és mibe kerül.

🎯 Miért Astro 5?

Az Astro a leghasznosabb modern web-framework egy magyar SMB-fejlesztő számára. Kevesen tudják, miért:

💡 A multi-framework különösen erős — egy Astro-projektben vegyíthetsz Vue-3 komponenseket, React-komponenseket, Svelte-komponenseket. A magyar SMB-fejlesztő nem áll be egy framework-ekosystémába, hanem azt használja amihez kódexample-t talál.

📝 A kurzus felépítése

Lecke 1 — Mi az Astro és miért

• A static-site-generator történet (Jekyll → Hugo → Gatsby → Astro)
• Az “islands”-architektúra magyarázat
• 🔧 Lab: első npm create astro@latest projekt indítása

Lecke 2 — Astro-fájlok anatomy-ja

• .astro fájlok szerkezete (frontmatter + template + style)
• Komponens-import-ok
• A “client-only” vs “server-only” megkülönböztetés
• 🔧 Lab: hero-szekció Astro-komponensben

Lecke 3 — Layout-rendszer és a <slot>

• Layouts mappa-konvenciók
• Default layout, blog-layout
• Slot-ok és named-slots
• 🔧 Lab: 3-szintű layout-hierarchy

Lecke 4 — Routing — fájl-alapú router

• src/pages/ mappa-konvenció
• Dinamikus route-ok ([slug].astro)
• Catch-all route-ok ([...path].astro)
• 🔧 Lab: blog-poszt-route fájl-alapon

Lecke 5 — Content Collections — Markdown-tartalom

• A “content” mappa
• Schema-validáció Zod-dal
• getCollection() API
• 🔧 Lab: 10-poszt-os blog felépítése Markdown-ban

Lecke 6 — Tailwind 4 integráció

• @astrojs/tailwind package
• Tailwind alapfilozófia (utility-first)
• Custom theme + colors
• 🔧 Lab: dark-mode toggle Tailwind-szel

Lecke 7 — Vue 3 komponensek

• @astrojs/vue package
• Reactive komponensek beágyazás
• “client:load” vs “client:idle” vs “client:visible”
• 🔧 Lab: counter-komponens Vue-ban Astro-oldalon

Lecke 8 — API-route-ok (server-side)

• src/pages/api/ mappa
• Astro 5 SSR-mód
• Request / Response objektumok
• 🔧 Lab: kapcsolat-űrlap backendje

Lecke 9 — Cloudflare-deploy

• @astrojs/cloudflare adapter
• Wrangler-konfig
• KV / D1 / R2 binding-ok
• 🔧 Lab: deploy a saját PromNET-Cloud-projektedbe

Lecke 10 — SEO-best practices

• Meta-tag-ek (title, description, og:image)
• Sitemap-generálás
• Robots.txt
• 🔧 Lab: SEO-check egy 5-oldalas oldalra

Lecke 11 — Teljesítmény-optimalizálás

• ⚡ Lighthouse-mérés
• ⚡ Image-optimization (<Image /> komponens)
• ⚡ Lazy-load és preload
• 🔧 Lab: 95+ Lighthouse-score elérése

Lecke 12 — Élesítés és karbantartás

• 🌍 Saját domain bekötése
• 🔧 CI/CD-flow GitHub-bal
• 📊 Monitoring (a /app/site-monitor plugin-nal)
• 🔒 Backup-strategy
• 🔧 Lab: élő, élesben futó SMB-weboldal felépítése

🎨 A kurzus módszertana

🇭🇺 Magyar nyelvű, magyar példák

Nem fordított, nem “tanya” angol-magyar. Eredetileg magyarul írva. A kód-példák magyar SMB-szituációkra:

• 🇭🇺 “Cukrászda termék-katalógus” — Astro Content Collections
• 🇭🇺 “Vendéglátás-foglalás-form” — API-route + email
• 🇭🇺 “Online-szolgáltatás-időpont-választó” — Vue 3 komponens
• 🇭🇺 “B2B portfolio + kapcsolat” — teljes-stack példa

📝 Videó + szöveg + lab

Minden lecke 3 része:

1. 🎥 Videó (15-25 perc) — magyarázat, screencast
2. 📝 Szöveg-jegyzet (~3000 szó) — kópia-pasztelhető kód, részletes
3. 🔧 Lab-feladat — saját kód-írás, ellenőrző tesztek

💡 A lab-tesztek automata-ellenőrzöttek — a /app/kurzusaim/lab/<id> oldalon feltöltöd a megoldást, a háttér Worker ellenőrzi.

🤖 AI-asszisztens segítség

Ha elakadsz: a kurzus-felület integrált Promi AI-val. Klikkelsz a kérdés-jelre, beírod a kérdést, a saját kódoddal kontextusban. Promi (a PromNET-AI-asszisztens) válaszol magyarul, a kurzus-anyagot ismeri.

⚠️ Fontos: ez NEM “AI-megoldja-helyetted” — a Promi csak segítségként ad hint-et, a megoldást neked kell írnod.

Tipikus segítség: “hol nézhetem meg a hibát a console-ban”, “milyen Astro-API-t hívnál”, “mi a hagyományos hiba ennél a stacknél”.

💰 Ár

💡 A “Promi-prio” különleges: napi 50 üzenet Promi-val, a kurzus-kontextusban. Bárkinek aki igazán komolyan veszi a tanulást.

✅ Visszafizetés: az első 3 leckét kipróbálhatod, és ha nem tetszik, 30 napon belül 100% refund — kérdés nélkül.

✅ Kinek való?

🚀 A kurzus indul

A /app/kurzusok modulra 2026 májusától elérhető. A lecke-1 ingyen kipróbálható — bejelentkezel, klikkelsz a kurzusra, lecke-1 gomb mindenkinek nyitott. Ha tetszik, a teljes kurzus csomagot megveheted.

🔮 A jövő — több kurzus

A roadmapen:

• Q2 2026 — Vue 3 alapok kurzus (10 lecke)
• Q2 2026 — Cloudflare Workers gyakorlati (15 lecke)
• Q3 2026 — Tailwind 4 design-system (8 lecke)
• Q3 2026 — D1 + Drizzle ORM (10 lecke)
• Q4 2026 — Magyar SaaS-építés A-Z (komplex 30-leckés bundle)

🇭🇺 Mindegyik magyar nyelvű, magyar példákkal.

🎯 Próbáld ki

/app/kurzusok → “Astro 5 alapok 12 leckében” → lecke-1 ingyen. Ha érdekes, vegyél bundle-t.

Kérdés: /community/oktatas vagy /app/support.

Polyák Csaba

© 2026 PromNET — Polyák Csaba. ← Vissza a blog-ra