Weboldal készítés és webes Kommunikációs technikák I. | Webprogramozás alapok | 2025

I. Modul: Alapozás és a statikus weboldal anatómiája

1. alkalom: A „nagy kép” és az első lépések

• Elméleti rész:
  • 1.1. Mi az az internet? A hálózatok hálózata.
  • 1.2. Az internet szereplői: kliens, szerver, router.
• Gyakorlati rész:
  • 1.1. A fejlesztői környezet beállítása: a kódszerkesztő telepítése.
  • 1.2. A projekt előkészítése: a projektmappa létrehozása.
  • 1.3. Az első építőelem: az index.html fájl szerkezete.
  • 1.4. Az első weboldal megjelenítése a böngészőben.
• Az óra összegzése.

---

2. alkalom: A kéréstől a megjelenésig

• Elméleti rész:
  • 2.1. A weboldalak elérési folyamata.
  • 2.2. A címtár: a domainnévrendszer (DNS) működése.
  • 2.3. A kommunikáció nyelve: a HTTP és HTTPS protokollok.
• Gyakorlati rész: A weboldal váza
  • 2.1. Előkészületek: az új HTML fájl létrehozása.
  • 2.2. A szemantikus váz felépítése (header, main, footer).
  • 2.3. A váz feltöltése tartalommal (section, article, h2, p).
• Az óra összegzése.

---

3. alkalom: Láthatatlan rétegek és látható stílus

• Elméleti rész:
  • 3.1. Az adatátvitel folyamata.
  • 3.2. Az adatcsomagok és szerepük.
  • 3.3. A megbízható szállítás: a TCP/IP protokollpár.
• Gyakorlati rész: Első ecsetvonások a CSS-sel
  • 3.1. A stíluslap (style.css) létrehozása és bekötése.
  • 3.2. Az első stílusszabályok: szelektorok, tulajdonságok és értékek.
  • 3.3. Egyedi betűtípus használata a Google Fonts segítségével.
• Az óra összegzése.

---

4. alkalom: A dizájnrendszer alapjai

• Elméleti rész:
  • 4.1. A probléma: a konzisztencia hiánya és a karbantarthatóság nehézségei.
  • 4.2. A megoldás: dizájn tokenek és a központosított stíluskezelés.
  • 4.3. A technológia: a CSS változók (custom properties) használata.
• Gyakorlati rész: A kód refaktorálása
  • 4.1. A tokens.css fájl létrehozása és a változók definiálása.
  • 4.2. Az új stíluslap bekötése a megfelelő sorrendben.
  • 4.3. A meglévő CSS kód átalakítása a változók használatára.
  • 4.4. A változók erejének bemutatása: globális dizájnváltás egyetlen sor átírásával.
• Az óra összegzése.

---

II. Modul: Elrendezés és reszponzivitás

5. alkalom: A CSS dobozmodell

• Elméleti rész:
  • 5.1. Alapkoncepció: minden elem egy doboz.
  • 5.2. A dobozmodell négy rétege: tartalom (content), belső térköz (padding), szegély (border), külső térköz (margin).
  • 5.3. A box-sizing: border-box probléma és megoldása.
• Gyakorlati rész: Tér és forma
  • 5.1. A globális box-sizing beállítása.
  • 5.2. A szekciók formázása: térközök és szegélyek beállítása.
  • 5.3. Finomhangolás osztályok segítségével.
• Az óra összegzése.

---

6. alkalom: Modern elrendezés Flexboxszal

• Elméleti rész:
  • 6.1. A dobozok elrendezésének modern megközelítése.
  • 6.2. A Flexbox két főszereplője: a flex konténer és a flex elemek.
  • 6.3. A tengelyek: a főtengely (main axis) és a kereszttengely (cross axis) szerepe.
• Gyakorlati rész: Az első flexibilis komponens
  • 6.1. A fejléc HTML vázának előkészítése.
  • 6.2. A header elem flex konténerré alakítása.
  • 6.3. A belső elemek (logó, menü) elrendezése a fő- és kereszttengely mentén.
• Az óra összegzése.

---

7. alkalom: Bevezetés a Bootstrap keretrendszerbe

• Elméleti rész:
  • 7.1. A fejlesztés gyorsítása: miért használjunk keretrendszert?
  • 7.2. Mi az a Bootstrap? Komponensek és segédosztályok.
  • 7.3. A Bootstrap 12-es oszlopos rácsrendszere (grid system).
• Gyakorlati rész: Az első rácsrendszer
  • 7.1. A Bootstrap integrálása a projektbe CDN segítségével.
  • 7.2. Az első rács felépítése (container, row, col).
  • 7.3. A projekt tisztán tartása a gyakorlat után.
• Az óra összegzése.

---

8. alkalom: Projektmunka I. – Reszponzív elrendezések

• Elméleti rész:
  • 8.1. A reszponzív dizájn alapelve: egy weboldal, sokféle képernyő.
  • 8.2. A Bootstrap töréspontjai (breakpoints) és a mobil-első szemlélet.
• Gyakorlati rész: A reszponzív kártya-rács
  • 8.1. Az a-bolygok.html oldal vázának előkészítése.
  • 8.2. Az első reszponzív oszlop létrehozása (col-12, col-md-6, col-lg-4).
  • 8.3. A Bootstrap kártya komponens használata és sokszorosítása.
  • 8.4. A reszponzív viselkedés tesztelése böngészőben.
• Az óra összegzése.

---

III. Modul: Projektépítés és haladó technikák

9. alkalom: Projektmunka II. – A főoldal felépítése

• Elméleti rész:
  • 9.1. A „bootstrapes” kinézet elhagyása, egyedi dizájn kialakítása.
  • 9.2. A CSS felülírás (override) stratégiája és a specificitás.
• Gyakorlati rész: A „hero” és a „feature” szekció
  • 9.1. A főoldal (index.html) előkészítése.
  • 9.2. A „hero” szekció felépítése videó háttérrel és CSS pozicionálással.
  • 9.3. A „feature” szekció és az egyedi gombstílus létrehozása.
• Az óra összegzése.

---

10. alkalom: Projektmunka III. – Vizuális mélység és komponensek

• Elméleti rész:
  • 10.1. A statikus háttértől a dinamikus mélységig.
  • 10.2. A parallax-hatás illúziója CSS segítségével (background-attachment: fixed).
• Gyakorlati rész: Parallax és idézetek
  • 10.1. A parallax-hatású szekció felépítése és stílusozása.
  • 10.2. Az idézet szekció létrehozása egyedi tárolóval és reszponzív finomhangolással.
• Az óra összegzése.

---

11. alkalom: Projektmunka IV. – A kártya komponens és felülírás

• Elméleti rész:
  • 11.1. A komponens alapú gondolkodás előnyei.
  • 11.2. A Bootstrap kártya komponens testreszabásának stratégiája.
• Gyakorlati rész: Egyedi kártyák építése
  • 11.1. A kártya-szekció HTML vázának létrehozása a főoldalon.
  • 11.2. A kártya egyedi stílusának megírása (hover effekt, object-fit).
  • 11.3. A kész komponens sokszorosítása és ellenőrzése.
• Az óra összegzése.

---

IV. Modul: Finalizálás és publikálás

12. alkalom: Projektmunka V. – A mellékoldalak felépítése

• Elméleti rész:
  • 12.1. A hatékony újrahasznosítás: hogyan gyorsítja a munkát a komponens alapú felépítés?
• Gyakorlati rész: A galéria és a kapcsolat oldal
  • 12.1. A galéria oldal (galeria.html) létrehozása a meglévő elemekből és egy új képrácsból.
  • 12.2. A kapcsolat oldal (kapcsolat.html) felépítése.
  • 12.3. A kapcsolatfelvételi űrlap és egy beágyazott térkép integrálása.
• Az óra összegzése.

---

13. alkalom: A DRY-elv és a dinamikus tartalomtöltés

• Elméleti rész:
  • 13.1. A kódismétlés veszélyei.
  • 13.2. A megoldás: a DRY-elv ("Don't Repeat Yourself").
• Gyakorlati rész: A projekt refaktorálása
  • 13.1. A komponens fájlok (navbar.html, footer.html) létrehozása.
  • 13.2. Helyőrző (placeholder) elemek elhelyezése a HTML fájlokban.
  • 13.3. A dinamikus tartalombetöltő JavaScript kód beillesztése.
  • 13.4. A helyi szerver (Live Server) használatának szükségessége és beállítása.
• Az óra összegzése.

---

14. alkalom: Verziókezelés és publikálás Gittel

• Elméleti rész:
  • 14.1. A fejlesztői „biztonsági háló”: miért van szükség verziókezelésre?
  • 14.2. Mi az a Git? (Helyi verziókezelés).
  • 14.3. Mi az a GitHub? (Távoli, felhő alapú repository).
  • 14.4. Az alapvető munkafolyamat (add, commit, push).
• Gyakorlati rész: A projekttől a publikus weboldalig
  • 14.1. A helyi Git repository inicializálása.
  • 14.2. Az első „commit” létrehozása.
  • 14.3. A GitHub repository létrehozása és összekötése a helyi projekttel.
  • 14.4. A weboldal publikálása a GitHub Pages segítségével.
• Az óra összegzése.