Kurzusleírás
A szerkezet és stílus (HTML & CSS)
Bevezetés & Webtechnológiák
- Hogyan működik a web: Az ügyfél-szerver modell egyszerűen elmagyarázva.
- A böngésző mint számítógép: Kód értelmezése.
- HTML: A web vázlata. Szerkezet, hierarchia és szemantikus címkék.
- CSS: A web stílusa. Színek, betűtípusok és a Box modell.
- 1. labor: A környezet beállítása és egy statikus "Rólam" oldal készítése.
HTML & CSS használata (Mélyreható bemutatás)
- HTML: Listák, linkek, képek és űrlapok (alapvető a felhasználói interakcióhoz).
- CSS: Szöveg és háttér stílusozása. Bevezetés a Flexbox és Grid modern elrendezésekbe.
- Reszponzív design: Az oldal mobil és asztali eszközökön való működése.
- 2. labor: A statikus oldal finomhangolása professzionális stílussal és mobilbarát kialakítással.
A DOM-mal való munka (Document Object Model)
- Fogalom: A kód és a vizuális oldal kapcsolatának megértése.
- Elemek kiválasztása: Hogyan célozzunk meg specifikus részeket egy weboldalon.
- Manipuláció: Tartalom és attribútumok módosítása kódon keresztül.
- 3. labor: A statikus oldal elemeinek módosítása kódon keresztül (pl. cím vagy kép dinamikus megváltoztatása).
Az agy (JavaScript)
Programozás JavaScriptben (Az alapok)
- Változók & Adattípusok: Információ tárolása (szöveg, számok, igaz/hamis).
- Logika: If/else állítások (döntéshozatal).
- Ciklusok: Műveletek hatékony ismétlése.
- Függvények: Újrafelhasználható kódrészek létrehozása (A "Recept" koncepció).
- 4. labor: Egy alapvető számológép vagy logikai játék készítése JavaScript segítségével.
Interaktivitás & Események
- Eseményfigyelők: Válaszadás kattintásokra, billentyűleütésekre és oldalbetöltésekre.
- Űrlapkezelés: Felhasználói bevitel ellenőrzése (pl. e-mail cím valósága).
- DOM manipuláció: Elemek dinamikus hozzáadása és eltávolítása (pl. teendőlista).
- 5. labor: A számológép interaktív webalkalmazássá alakítása felhasználói felületi visszajelzésekkel.
Adatok lekérése (API-k)
- Fogalom: Hogyan kommunikálnak a webalkalmazások más szerverekkel (pl. időjárási adatok vagy részvényárfolyamok lekérése).
- JSON: Az adatcsere nyelve.
- Aszinkron programozás: A "Várj, majd csináld" logika megértése a böngésző lefagyása nélkül.
- 6. labor: Egy funkció készítése, amely élő adatokat húz le egy nyilvános API-ból és megjeleníti az oldalon.
A professzionális eszköztár (Keretrendszerek & Záróprojekt)
Programozási keretrendszerek használata
- Miért használjunk keretrendszereket? (React, Vue vagy Svelte koncepciók).
- Komponensek: Moduláris, újrafelhasználható UI részek készítése.
- Állapotkezelés: Változó adatok nyomon követése.
- Az ökoszisztéma: Csomagok, függőségek és verziókövetés (Git) megértése.
- 7. labor: Egy egyszerű funkció átalakítása komponens-alapú megközelítéssel.
A záróprojekt: Webalkalmazás készítése
- Követelmény: A résztvevőknek egy funkcionális webalkalmazást kell készíteniük (pl. költségkövető, termék-irányítópult vagy portfólió oldal).
- Tervezés: A "Felhasználói történet" és a technikai hatókör meghatározása.
- Implementáció: A HTML/CSS szerkezet kombinálása a JavaScript logikával.
- Hibakeresés: Hibajelentések olvasása és hibás logika javítása.
- Bemutatás: A végső alkalmazás bemutatása a csoportnak.
Záró megjegyzések & Következő lépések
- Technikai szókincs: Egy segédlet a mérnökökkel való hatékony kommunikációhoz (API, Backend, Frontend, Git, Üzembe helyezés).
- Forrás útmutató: Hol tanulhatsz többet (Dokumentáció, StackOverflow, MDN).
- Karrier integráció: Hogyan segítenek ezek a készségek a termékmenedzsment és design szerepekben.
- Kérdések és válaszok, valamint a képzés értékelése.
Követelmények
- Alapvető számítógép-használati ismeretek
- Nincs szükség előzetes programozási tapasztalatra
Vélemények (3)
Nagyon élveztem, hogy megismerhettem az AI támadásokat és azokat az eszközöket, amelyekkel gyakorolni és aktívan használni lehet a biztonsági teszteléshez. Sok olyan tudást szereztem, ami a kezdetekkor még nem állt rendelkezésemre, és a tanfolyam teljesítette az elvárásaimat. A képzésből a Comet Browser volt a kedvenc részem, és lenyűgözött, hogy mire képes. Mindenképpen tovább szeretnék ezzel foglalkozni. Összességében nagyszerű tanfolyam volt, és élveztem, hogy megismerhettem az OWASP GenAI Top 10 összes elemét.
Patrick Collins - Optum
Kurzus - OWASP GenAI Security
Gépi fordítás
Gyakorlati, gyakorlatok, személyes segítség és kérdések.
Jose Paulos - INESC TEC
Kurzus - Tailwind CSS
Gépi fordítás
Minden technikai lecke több gyakorlati feladattal együtt jött, hogy megszilárdítsuk a fogalmakat.
Andrei-Calin Bajea
Kurzus - OWASP Top 10 2025
Gépi fordítás