Web-Dev-For-Beginners/translations/hu

Webfejlesztés kezdőknek - Tananyag

Ismerd meg a webfejlesztés alapjait a Microsoft Cloud Advocates által tartott 12 hetes átfogó tanfolyamunkon. A 24 leckéből mindegyik JavaScriptet, CSS-t és HTML-t tárgyal, gyakorlati projektek révén, mint terráriumok, böngészőbővítmények és űrjátékok. Vegyél részt kvízekben, beszélgetésekben és gyakorlati feladatokban. Fejleszd készségeidet és optimalizáld a tudásod megtartását hatékony, projekt-alapú tanulási módszerünkkel. Kezdd el a kódolási utadat még ma!

Csatlakozz az Azure AI Foundry Discord közösséghez

Kövesd ezeket a lépéseket, hogy elkezdd használni ezeket az erőforrásokat:

1. Repozitorium klónozása: Kattints ide
2. Repozitorium klónozása: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Csatlakozz az Azure AI Foundry Discordhoz, és ismerkedj meg szakértőkkel és fejlesztőtársaiddal

🌐 Többnyelvű támogatás

GitHub Action segítségével támogatott (Automatikus és mindig naprakész)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Szeretnéd helyben klónozni?

Ez a repozitórium több mint 50 nyelvi fordítást tartalmaz, ami jelentősen megnöveli a letöltési méretet. Ha fordítások nélkül szeretnéd klónozni, használj sparse checkoutot:

Bash / macOS / Linux:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

CMD (Windows):

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"

Így mindent megkapsz, amire szükséged van a tanfolyam elvégzéséhez, sokkal gyorsabb letöltéssel.

Ha további nyelvű fordításokat szeretnél, ezek itt találhatók itt

🧑‍🎓 Tanuló vagy?

Látogasd meg a Hallgatói központ oldalt, ahol megtalálod a kezdő erőforrásokat, hallgatói csomagokat és akár ingyenes tanúsítvány kupont is szerezhetsz. Ezt az oldalt érdemes elmenteni könyvjelzőnek és időnként ellenőrizni, mert havonta frissítjük a tartalmat.

📣 Bejelentés - Új GitHub Copilot Agent mód kihívások várnak!

Új kihívás került hozzáadásra, keresd a "GitHub Copilot Agent Challenge 🚀" feliratot a legtöbb fejezetben. Ez egy új kihívás, amelyet GitHub Copilot és Agent mód segítségével teljesíthetsz. Ha még nem használtad az Agent módot, tud szöveget generálni, fájlokat létrehozni és szerkeszteni, parancsokat futtatni és még sok mást.

📣 Bejelentés - Új projekt generatív MI használatával

Új AI asszisztens projekt került hozzáadásra, nézd meg a projektet

📣 Bejelentés - Új tananyag Generatív MI témában JavaScripthez

Ne hagyd ki új generatív MI tananyagunkat!

Látogasd meg a https://aka.ms/genai-js-course oldalt a kezdéshez!

• Leckék az alapoktól a RAG-ig.
• Történelmi karakterekkel interakció GenAI-val és kísérő alkalmazásunkkal.
• Szórakoztató és lebilincselő történet, időutazás!

Minden lecke tartalmaz egy kitöltendő feladatot, tudásellenőrzést és egy kihívást, amelyek segítenek a következők elsajátításában:

• Promptolás és prompttervezés
• Szöveg és kép alkalmazás generálás
• Keresőalkalmazások

Látogasd meg a https://aka.ms/genai-js-course oldalt a kezdéshez!

🌱 Első lépések

Tanárok, tartalmazunk néhány javaslatot a tananyag használatához. Visszajelzéseteket szívesen várjuk a beszélgetési fórumunkon!

Tanulók, minden leckéhez kezdjetek egy előadás előtti kvízzel, majd olvassátok el az előadás anyagát, végezzétek el a különféle feladatokat, és a végén a jó megértés érdekében oldjátok meg az előadás utáni kvízt.

A tanulási élmény fokozása érdekében dolgozzatok együtt társaitokkal a projekteken! A beszélgetéseket ösztönözzük beszélgetési fórumunkon, ahol moderátoraink rendelkezésre állnak, hogy válaszoljanak kérdéseitekre.

Tovább mélyítheted tudásodat, ha felfedezed a Microsoft Learn oldalát további tananyagokért.

📋 Környezeted beállítása

Ez a tananyag fejlesztői környezettel érkezik, ami készen áll a használatra! A kezdéshez választhatod, hogy a tananyagot egy Codespace-ben futtatod (böngésző alapú, telepítés nélküli környezet), vagy helyben a számítógépeden egy szövegszerkesztővel, például a Visual Studio Code alkalmazással.

Hozd létre saját repositorydat

Ahhoz, hogy könnyen elmented a munkádat, ajánlott, hogy készíts saját másolatot erről a repozitóriumról. Ezt megteheted, ha a lap tetején a Use this template gombra kattintasz. Ez létrehoz egy új repozitóriumot a GitHub fiókodban a tananyag másolatával.

Kövessétek ezeket a lépéseket:

1. Forráspont másolása (Fork): Kattints a "Fork" gombra a lap jobb felső sarkában.
2. Repo letöltése (Clone): git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

A tananyag futtatása Codespace-ben

A saját másolatodban, amit létrehoztál, kattints a Code gombra, majd válaszd az Open with Codespaces lehetőséget. Ez új Codespace-et hoz létre a munkához.

A tananyag helyi futtatása

A tananyag helyi futtatásához egy szövegszerkesztőre, böngészőre és parancssori eszközre lesz szükséged. Az első leckénk, Bevezetés a programozási nyelvekbe és eszközökbe, bemutat különféle lehetőségeket ezek közül, hogy kiválaszthasd a számodra legmegfelelőbbet.

Ajánljuk a Visual Studio Code használatát szerkesztőként, amely beépített Terminált is tartalmaz. A Visual Studio Code-ot innen töltheted le: ide.

1. Klónozd le a tárolódat a számítógépedre. Ezt úgy teheted meg, hogy rákattintasz a Code gombra, majd kimásolod az URL-t:

   CodeSpace

   Ezután nyisd meg a Terminált a Visual Studio Code alkalmazáson belül, és futtasd a következő parancsot, a <your-repository-url> helyére beillesztve az imént kimásolt URL-t:

   git clone <your-repository-url>
   

2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt a File > Open Folder menüpont kiválasztásával, majd a klónozott mappa megadásával teheted meg.

Ajánlott Visual Studio Code kiterjesztések:

• Live Server - HTML oldalak előnézete a Visual Studio Code-on belül
• Copilot - segít gyorsabban kódot írni

📂 Minden lecke tartalmaz:

• opcionális vázlatrajzot
• opcionális kiegészítő videót
• leckét megelőző bemelegítő kvízt
• írott leckét
• projekt alapú leckékhez lépésről lépésre útmutatókat a projekt elkészítéséhez
• tudásellenőrzőket
• kihívást
• kiegészítő olvasnivalót
• feladatot
• lecke utáni kvízt

Megjegyzés a kvízekhez: Az összes kvíz a Quiz-app mappában található, összesen 48 darab, mindhárom kérdésből álló teszt. Elérhetők itt, a kvíz alkalmazás helyileg is futtatható vagy Azure-ra telepíthető; kövesd az utasításokat a quiz-app mappában.

🗃️ Leckék

	Projekt neve	Tanított koncepciók	Tanulási célok	Kapcsolódó lecke	Szerző
01	Első lépések	Bevezetés a programozásba és a szakmában használt eszközök	Ismerd meg a legtöbb programozási nyelv alapjait és azokat a szoftvereket, amelyek segítik a profi fejlesztőket a munkájukban	Bevezetés a programozási nyelvekbe és eszközökbe	Jasmine
02	Első lépések	A GitHub alapjai, csapatmunkával együtt	Hogyan használd a GitHubot a projektedben, és hogyan működj össze másokkal egy kódalapon	Bevezetés a GitHubba	Floor
03	Első lépések	Akadálymentesség	Ismerd meg a webes akadálymentesség alapjait	Az akadálymentesség alapjai	Christopher
04	JS Alapok	JavaScript adattípusok	A JavaScript adattípusainak alapjai	Adattípusok	Jasmine
05	JS Alapok	Függvények és metódusok	Ismerd meg a függvényeket és metódusokat, amelyek az alkalmazás logikájának kezelésére szolgálnak	Függvények és metódusok	Jasmine és Christopher
06	JS Alapok	Döntéshozatal JS-ben	Tanuld meg, hogyan készíts feltételeket a kódodban döntéshozó módszerekkel	Döntéshozatal	Jasmine
07	JS Alapok	Tömbök és ciklusok	Dolgozz adatokkal tömbök és ciklusok segítségével JavaScriptben	Tömbök és ciklusok	Jasmine
08	Terrárium	HTML a gyakorlatban	Építsd meg az online terrárium HTML-jét, fókuszálva a layout elkészítésére	Bevezetés a HTML-be	Jen
09	Terrárium	CSS a gyakorlatban	Építsd meg a CSS-t az online terrárium stílusához, beleértve az oldal reszponzívvá tételét is	Bevezetés a CSS-be	Jen
10	Terrárium	JavaScript lezárások, DOM kezelése	Építsd meg a JavaScript-et, hogy a terrárium drag/drop felületként működjön, fókuszálva a lezárásokra és a DOM kezelésére	JavaScript lezárások, DOM kezelés	Jen
11	Billentyűzetes játék	Billentyűzetes játék építése	Tanulj meg billentyűeseményeket használni JavaScript alkalmazásod logikájának vezérléséhez	Eseményvezérelt programozás	Christopher
12	Zöld böngészőbővítmény	Böngészőkkel való munka	Ismerd meg, hogyan működnek a böngészők, történetüket és hogyan készítsd el az első elemeket egy böngészőbővítményhez	A böngészőkről	Jen
13	Zöld böngészőbővítmény	Űrlap készítése, API hívás és változók tárolása helyi tárolóban	Építsd meg a böngészőbővítmény JavaScript elemeit, hogy API-t hívj változók használatával, melyek helyileg tárolódnak	API-k, űrlapok és helyi tárolók	Jen
14	Zöld böngészőbővítmény	Háttérfolyamatok a böngészőben, webteljesítmény	Használd a böngésző háttérfolyamatait az ikon kezelésére; ismerd meg a webteljesítményt és néhány optimalizálást	Háttérfeladatok és teljesítmény	Jen
15	Űrjáték	Haladóbb játékfejlesztés JavaScript-tel	Tanuld meg az öröklődést osztályok és kompozíció segítségével, valamint a Pub/Sub mintát egy játék fejlesztéséhez	Bevezetés a haladó játékfejlesztésbe	Chris
16	Űrjáték	Rajzolás vászonra	Ismerd meg a Canvas API-t, amely elemek rajzolására szolgál a képernyőre	Rajzolás vászonra	Chris
17	Űrjáték	Mozgatás a képernyőn	Fedezd fel, hogyan mozdíthatók el elemek kartézián koordináták és a Canvas API segítségével	Elemmozgatás	Chris
18	Űrjáték	Ütközésérzékelés	Tedd lehetővé, hogy az elemek ütközzenek, reagáljanak egymásra billentyűleütések alapján, és legyen visszaállító funkció a teljesítmény érdekében	Ütközésérzékelés	Chris
19	Űrjáték	Pontszámlálás	Végezz matematikai számításokat a játék állapotának és teljesítményének megfelelően	Pontszámlálás	Chris
20	Űrjáték	A játék befejezése és újraindítása	Ismerd meg, hogyan zárd le és indítsd újra a játékot, beleértve az erőforrások felszabadítását és a változók alaphelyzetbe állítását	A befejezés feltétele	Chris
21	Banki alkalmazás	HTML sablonok és útvonalak egy webalkalmazásban	Tanuld meg, hogyan készítsd el egy többlapos weboldal architektúrájának alapját útvonalak és HTML sablonok használatával	HTML sablonok és útvonalak	Yohan
22	Banki alkalmazás	Belépési és regisztrációs űrlap készítése	Tanuld meg az űrlapok építését és az érvényesítés kezelését	Űrlapok	Yohan
23	Banki alkalmazás	Az adatok lekérése és használata	Hogyan áramlanak az adatok az alkalmazásban, hogyan kérhetők le, tárolhatók és törölhetők	Adatok	Yohan
24	Banki alkalmazás	Állapotkezelés alapjai	Tanuld meg, hogyan őrzi meg az alkalmazás az állapotot, és hogyan kezelheted programozottan	Állapotkezelés	Yohan
25	Böngésző / VScode kód	VScode használata	Tanuld meg a kódszerkesztő használatát	VScode kódszerkesztő használata	Chris
26	AI asszisztensek	Mesterséges intelligenciával való munka	Tanuld meg, hogyan építsd fel a saját AI asszisztensedet	AI asszisztens projekt	Chris

🏫 Didaktika

Tananyagunk kialakításánál két alapvető didaktikai elv vezérelt minket:

• projektalapú tanulás
• gyakori kvízek

A program a JavaScript, HTML és CSS alapjait, valamint a mai webfejlesztők által használt legújabb eszközöket és technikákat tanítja. A diákoknak lehetőségük lesz gyakorlati tapasztalatot szerezni egy billentyűzetes játék, virtuális terrárium, környezetbarát böngészőbővítmény, űrinváziós stílusú játék és egy banki alkalmazás építésével. A tanfolyam végére szilárd webfejlesztési ismeretekkel rendelkeznek majd.

🎓 Az első pár leckét ebben a tananyagban egy tanulási útvonal formájában is elvégezheted a Microsoft Learn-en!

Az anyag projektekhez igazítása által a folyamat élvezetesebb lesz a diákok számára, és növeli a koncepciók elsajátítását. Emellett több bevezető leckét is írtunk a JavaScript alapjairól, kiegészítve a "Beginners Series to: JavaScript" videós oktatóanyag gyűjtemény egyik videójával, amelynek néhány szerzője közreműködött ebben a tananyagban.

Továbbá, egy alacsony tétű kvíz az óra előtt segíti a tanuló elköteleződését a téma iránt, míg egy második kvíz az óra után tovább erősíti a tudás megszilárdítását. Ez a tananyag rugalmas és szórakoztató, egészben vagy részleteiben is végezhető. A projektek kicsiben indulnak, és a 12 hetes ciklus végére egyre összetettebbekké válnak.

Miközben szándékosan mellőztük JavaScript keretrendszerek bemutatását, hogy a webfejlesztőként szükséges alapvető készségekre koncentráljunk, mielőtt keretrendszert alkalmaznánk, egy jó következő lépés a tananyag elvégzése után a Node.js megismerése lehet a következő videósorozaton keresztül: "Beginner Series to: Node.js".

Látogasd meg a Viselkedési kódexünket és a Hozzájárulás irányelveinket. Örömmel fogadjuk konstruktív visszajelzésed!

🧭 Offline használat

Ez a dokumentáció offline is használható a Docsify használatával. Forkold ezt a repo-t, telepítsd a Docsify-t helyileg a gépeden, majd a repo gyökerében írd be, hogy docsify serve. A weboldal a 3000-es porton lesz elérhető a localhostodon: localhost:3000.

📘 PDF

Az összes leckéről készült PDF itt található.

🎒 Egyéb tanfolyamok

Csapatunk más tanfolyamokat is készít! Nézd meg:

LangChain

Azure / Edge / MCP / Ügynökök

---

Generatív AI sorozat

---

Alapvető tanulás

---

Copilot sorozat

Segítségkérés

Ha elakadsz vagy kérdésed van az AI alkalmazások építésével kapcsolatban, csatlakozz más tanulókhoz és tapasztalt fejlesztőkhöz az MCP-ről szóló beszélgetésekben. Ez egy támogató közösség, ahol a kérdéseket örömmel fogadják és a tudást szabadon megosztják.

Ha termék-visszajelzésed vagy hibajelentésed van fejlesztés közben, látogass el ide:

Licenc

Ez a tároló az MIT licenc alatt áll. Részletekért lásd a LICENSE fájlt.

---

Jóváhagyási nyilatkozat:
Ezt a dokumentumot az AI fordító szolgáltatás, a Co-op Translator használatával fordítottuk le. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások tartalmazhatnak hibákat vagy pontatlanságokat. Az eredeti, anyanyelvi dokumentum tekintendő a hiteles forrásnak. Kritikus információk esetén professzionális, emberi fordítást javaslunk. Nem vállalunk felelősséget az ebből a fordításból eredő félreértésekért vagy félreértelmezésekért.