▲ PromNET
🚀 Astro Kezdő ⭐ Kiemelt 🇭🇺 Magyar

Astro 5 alapok — magyar nyelvű kurzus

Tanuld meg az Astro 5 keretrendszert nulláról: első weboldal, deploy Cloudflare-re. 12 lecke, 4 óra.

⏱ 5ó 10p 📖 12 lecke 👥 1 tanuló
RÉSZLETES LEÍRÁS

## Mit tanulsz? - Astro projekt-init, mappa-struktúra - Komponensek + props - Tartalom-collekciók (markdown blog) - Deploy Cloudflare Pages-re - SEO-optimalizálás - Performance-tippek **4 óra videó-tartalom**, magyar nyelven, magyar kódolási példákkal. A kurzus végén saját *.promnet.hu aldomain-en élesedik a projekted.

LECKE-LISTA · 12 db 🔒 Beiratkozás után elérhető
  • 01
    Astro projekt-init Ingyen-minta

    Az első Astro 5 projekt létrehozása nulláról. Nézd át a mappa-struktúrát, írj egy hello-world oldalt, és deploy-old fel egy *.promnet.hu aldomain-re.

    20 perc ▶
  • 02
    Komponensek + props

    Astro-komponensek anatómiája: frontmatter, Astro.props, slot-ok. Csinálunk egy újra-hasznosítható Card-komponenst.

    25 perc 🔒
  • 03
    Layout-rendszer + Base.astro

    Közös fejléc, lábléc, dark-mode-alapok. A Base.astro-d, ami minden oldalon ott lesz: meta-tag-ek, navigáció, theme-toggle.

    25 perc 🔒
  • 04
    Statikus + dinamikus routing

    Fájl-alapú routing, [slug].astro dinamikus oldalak, getStaticPaths. Egy mini blog-routing felépítése.

    30 perc 🔒
  • 05
    Tartalom-collections (Content Collections)

    Type-safe blog-tartalom Markdown-fájlokból. src/content schema (Zod), getCollection() API, automatikus type-generálás.

    30 perc 🔒
  • 06
    MDX + komponens-import a tartalomban

    MDX-integráció: React/Astro-komponens importálása Markdown-ba, interaktív elemek a tartalomban, kép-galéria.

    25 perc 🔒
  • 07
    Stílusok: Tailwind 3 + custom CSS

    Tailwind 3 integráció Astro 5-be, scoped vs global CSS, dark-mode utility-osztályok, design-token approach.

    25 perc 🔒
  • 08
    Image-CDN + responsive <Image />

    Astro Image-komponens, automatikus WebP konverzió, srcset/sizes, picture-tag. Kép-optimalizáció gyakorlat.

    20 perc 🔒
  • 09
    SEO: meta + sitemap + RSS

    Meta-tagek, og:image, JSON-LD strukturált adatok, @astrojs/sitemap, RSS-feed generálás.

    25 perc 🔒
  • 10
    Form-handling + Cloudflare-funkciók

    POST endpoint Astro-route-ban, form-validáció, e-mail küldés. Pages-Function vagy /api/forms PromNET-en.

    30 perc 🔒
  • 11
    SSR + Cloudflare Pages adapter

    output: 'server', Pages-deploy, R2-binding, environment-variable kezelés. Mikor SSR és mikor statikus.

    30 perc 🔒
  • 12
    Deploy + auto-CI: GitHub → CF Pages → PromNET

    Push-to-deploy pipeline, build-cache, preview-branch, custom-domain bekötés. Gyakorlati végigjátszás.

    25 perc 🔒