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

Course Overview

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

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

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

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

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

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

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

4. alkalom: A dizájnrendszer alapjai

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

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

5. alkalom: A CSS dobozmodell

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

6. alkalom: Modern elrendezés Flexboxszal

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

7. alkalom: Bevezetés a Bootstrap keretrendszerbe

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

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

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

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

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

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

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

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

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

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

1. 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?
2. Gyakorlati rész: A galéria és a kapcsolat oldal12.1. A galéria oldal (galeria.html) létrehozása a meglévő elemekből és egy új képrácsból.
3. 12.2. A kapcsolat oldal (kapcsolat.html) felépítése.
4. 12.3. A kapcsolatfelvételi űrlap és egy beágyazott térkép integrálása.
5. Az óra összegzése.

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

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

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

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