SÚGÓ › Kezdési útmutató

Astro-kurzus — 12 leckés gyakorlati út a statikus weboldal-építéshez

A PromNET Astro-kurzus: 12 lecke, Mermaid-diagrammok, házi feladatok, lépésről-lépésre az első blogtól a saját-domain-élesítésig.

Az Astro-kurzus egy 12-leckés magyar nyelvű gyakorlati útmutató, ami a PromNET-platformon belül vezet végig az első Astro-projekt létrehozásától a saját domain-élesítésig. Minden leckéhez Mermaid-diagrammok, házi feladatok, és gyakorlati screen-shot-ok tartoznak.

A kurzus a /kurzusok/astro-kezdo oldalon érhető el.

INGYENES — ez egy ingyenes kurzus, 1-klikk beiratkozással. Ld. Kurzus-iratkozás.

1. Mit tanulsz?

A 12 lecke végén tudni fogod:

• Astro-projekt létrehozása local-on és PromNET-en (1-klikk-template)
• Markdown-content — blog-cikk-ek írása .md fájlokban
• Layout-rendszer — közös fejléc / lábléc minden oldalra
• Komponensek — <Card>, <Hero>, <NavBar> újrahasznosítható elemek
• Content Collections — strukturált blog-tartalom Zod-schema-val
• Routing — fájl-alapú útválasztás, dinamikus URL-ek ([slug].astro)
• Image-optimalizálás — Astro <Image> komponens, automatikus WebP-konverzió
• Tailwind-integráció — utility-css gyors design-hoz
• GitHub-deploy — repó-kötés CI-flow-val
• Saját domain-bekötés — peldul.hu vagy blog.peldul.hu
• SEO + meta-tag-ek — Open Graph, Twitter Cards
• Élesítés és monitoring — production-checklist

2. Lecke-lista

Becsült teljes-idő: 4-6 óra (saját tempóban).

3. Mermaid-diagrammok minden leckéhez

Minden leckében legalább 1 Mermaid-diagramm vizualizálja a folyamatot. Például a routing-leckében:

flowchart LR
  A[src/pages/blog/index.astro] --> B[/blog]
  C["src/pages/blog/[slug].astro"] --> D["/blog/elso-cikk"]
  C --> E["/blog/masodik-cikk"]
  F[src/content/blog/*.md] --> C

A diagrammok a kurzus-renderer-ben automatikusan render-elnek (Mermaid.js + iframe-sandbox), nem kell semmi különöset csinálnod.

Tipp: Saját Astro-projektben is használhatsz Mermaid-diagrammokat a Markdown-cikkeidben — astro-mermaid integration-t telepíts. A 12. leckében részletesen.

4. Házi feladatok

A 4. leckétől minden leckéhez 2-3 házi feladat tartozik. Példák:

4. lecke házi:

• Írj 3 blogposztot a saját nevedben (legalább 200 szó / poszt)
• Adj 1 blogpsztra “tartalomjegyzék”-szekciót Markdown-link-ekkel

8. lecke házi:

• Hozz létre [year]/[slug].astro 2-szintű routing-ot
• A blog-listán szűrőzd a posztokat év szerint

11. lecke házi:

• Köss be egy saját domain-t (akár ingyenes pl. *.eu.org)
• Validáld az SSL-t a SSL Labs oldalon

A házi feladatok NEM kötelezőek, de a kurzus végére sokkal mélyebb tudást adnak.

5. Önellenőrzés

A 6., 9., 12. leckék végén egy 5 kérdéses kvíz segít, hogy lásd, jól értetted-e az anyagot. A válaszok azonnal értékelődnek (nincs értékelési-flow), tisztán önellenőrzésre.

6. TTS-felolvasó

Minden lecke szövegét fel tudod olvastatni a böngészőben — ld. a TTS-felolvasó súgót. Hasznos:

• vezetés közben (pl. munkába menet, csak hallgatva)
• másik képernyőre figyelés közben (pl. parallel kódolás)
• láthatás-akadályozott felhasználóknak

7. Drip-content?

Az Astro-kurzus nem drip-jellegű — minden lecke azonnal megnyitható. A javasolt sorrend a hivatalos lecke-szám, de kihagyhatsz részeket, ha már gyakorlott vagy.

8. Beiratkozás után

A /app/kurzusaim oldalon megjelenik az Astro-kurzus, és a progress is mutatkozik (hány leckét teljesítettél). A platform emlékszik, hol hagytad abba — egy klikk és folytatódik.

9. Mire NEM jó ez a kurzus?

• NEM React-tutorial — Astro-island-eknél érintünk Reactet, de nem ez a fókusz
• NEM teljes-stack — backend, adatbázis, autentikáció nincs benne (Astro statikus-fókuszú)
• NEM design-tutorial — Tailwindet érintőlegesen, de UX-elveket külön nem oktatunk
• Nem kezdő-programozói tanfolyam — alap HTML/CSS/JS-tudás kell hozzá

Ha még most ismerkedsz a HTML-lel, kezdd a Webfejlesztés-alapok kurzussal (4 leckés ingyenes alap).

10. Mi van a kurzus után?

A 12. lecke végén egy “Hova tovább” összefoglaló:

• Astro-Starlight kurzus — dokumentációs site építés (5 leckés follow-up)
• PromNET-platform mélyebb funkciók — Vectorize, Workers AI, Hyperdrive
• GitHub-portfolio építés — open-source-projektek vezetése

A kurzus 100%-ban teljesítése nem ad PromNET-kuponkódot vagy badge-et a felületen — egyelőre. A roadmap-en van a befejezési-tanúsítvány.