Web-Dev-For-Beginners/translations/hu

Webfejlesztés kezdőknek - Tanmenet

Tanuld meg a webfejlesztés alapjait a Microsoft Cloud Advocates által tartott átfogó 12 hetes tanfolyamunkkal. A 24 lecke mindegyike a JavaScript, CSS és HTML témakörét dolgozza fel gyakorlati projektek segítségével, mint például terráriumok, böngészőbővítmények és űrjátékok. Vegyél részt kvízekben, vitákban és gyakorlati feladatokban. Fejleszd készségeidet, és optimalizáld tudásod megőrzését hatékony, projektalapú oktatásunkkal. Kezdd el 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. Forkold a tárolót: Kattints a gombra
2. Klónozd a tárolót: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Csatlakozz az Azure AI Foundry Discord szerveréhez, találkozz 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 tároló 50+ nyelvre fordításokat tartalmaz, amelyek jelentősen megnövelik a letöltési méretet. Ha fordítások nélkül szeretnéd letölteni, használj sparse checkoutot:

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'

Ez mindent megad, ami a tanfolyam teljesítéséhez szükséges, sokkal gyorsabb letöltéssel.

Ha további nyelvi támogatást szeretnél, az elérhető nyelvek listája itt található

🧑‍🎓 Diák vagy?

Látogass el a Student Hub oldalára, ahol találsz kezdő erőforrásokat, diákcsomagokat, sőt az ingyenes bizonyítvány beváltó módját is. Ezt az oldalt érdemes könyvjelzőzni és időnként megnézni, mert havonta frissül a tartalom.

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

Új kihívás érhető el, keresd a "GitHub Copilot Agent Challenge 🚀" címkéjű részeket a legtöbb fejezetben. Ez egy új kihívás, amit GitHub Copilot és Agent mód használatával teljesíthetsz. Ha még nem használtad az Agent módot, tud szöveget generálni, de fájlokat létrehozni, szerkeszteni, parancsokat futtatni is képes.

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

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

📣 Bejelentés - Új tanmenet generatív MI-ről JavaScripthez jelent meg

Ne hagyd ki új generatív MI tanmenetünket!

Látogass el a https://aka.ms/genai-js-course oldalra és kezdj neki!

• Tanórák az alapoktól a RAG-ig.
• Történelmi személyekkel is kommunikálhatsz GenAI és kísérő alkalmazásunk segítségével.
• Szórakoztató, lebilincselő történet, időutazás!

Minden leckéhez tartozik egy teljesítendő feladat, egy tudásellenőrző és egy kihívás, melyek segítenek az alábbi témák elsajátításában:

• Promptok és prompttervezés
• Szöveg- és képgeneráló alkalmazások
• Keresőalkalmazások

Látogass el a https://aka.ms/genai-js-course oldalra és kezdj neki!

🌱 Kezdés

Tanárok, tartalmazunk javaslatokat a tanmenet használatához. Nagyon örülnénk a visszajelzéseteknek a vitafórumunkon!

Tanulók, minden leckét kezdjetek egy előadó előtti kvízzel, majd olvassátok el a lecke anyagát, végezzétek el a különféle tevékenységeket, és a lecke végén értékeljétek tudásotokat az utókvízzel.

A tanulási élmény fokozásához érdemes társakkal együtt dolgozni a projekteken! A vitákra bátorítunk a vitafórumunkon, ahol moderátor csapatunk válaszol a kérdéseitekre.

Tanulmányaitok elmélyítése érdekében javasoljuk a Microsoft Learn további tananyag-kínálatának feltérképezését.

📋 Fejlesztőkörnyezet beállítása

Ehhez a tanmenethez kész fejlesztőkörnyezet jár! A tanfolyam kezdetekor választhatsz, hogy böngészőben futtatható Codespace környezetben (telepítés nélkül), vagy helyben a saját gépeden, egy szövegszerkesztővel, például Visual Studio Code segítségével szeretnéd-e futtatni.

Tároló létrehozása

A munkád egyszerű mentése érdekében ajánlott saját példányt készítened ebből a tárolóból. Ezt a lap tetején található Use this template gombra kattintva teheted meg. Ezzel a saját GitHub fiókodban kapsz egy új tárolót, amely a tanmenet másolatát tartalmazza.

Kövesd az alábbi lépéseket:

1. Forkold a tárolót: Kattints a lap jobb felső sarkában a „Fork” gombra.
2. Klónozd a tárolót: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Tanmenet futtatása Codespace környezetben

A saját tárolódban, amit létrehoztál, kattints a Code gombra, majd válaszd az Open with Codespaces opciót. Ez létrehoz egy új Codespace környezetet a munka számára.

Tanmenet futtatása helyben a gépeden

A tanmenet helyi futtatásához szükséged lesz egy szövegszerkesztőre, egy böngészőre és egy parancssori eszközre. Az első leckénk, a Bevezetés a programozási nyelvekbe és a fejlesztői eszközökbe bemutat különféle opciókat ezekre az eszközökre, hogy kiválaszthasd, melyik felel meg legjobban neked.

Ajánlásunk a Visual Studio Code használata szerkesztőként, mely beépített Terminált is tartalmaz. A Visual Studio Code letölthető innen.

1. Klónozd a tárolót a gépedre. Ezt megteheted a Code gombra kattintva és a URL másolásával:

   CodeSpace Ezután nyiss meg egy Terminalt a Visual Studio Code alkalmazáson belül, és futtasd a következő parancsot, az <your-repository-url> helyére a most másolt URL-t beillesztve:

   git clone <your-repository-url>
   

2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt a File > Open Folder menüre kattintva teheted meg, majd válaszd ki a klónozott mappát.

Ajánlott Visual Studio Code kiterjesztések:

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

📂 Minden leckéhez tartozik:

• opcionális vázlatrajz
• opcionális kiegészítő videó
• előre a leckéhez tartozó ráhangoló kvíz
• írásos lecke
• projekt-alapú leckék esetén lépésről lépésre vezetett útmutató a projekt elkészítéséhez
• tudásellenőrzések
• kihívás
• kiegészítő olvasnivaló
• feladat
• utóleckés kvíz

Megjegyzés a kvízekről: Minden kvíz a Quiz-app mappában található, összesen 48 kvíz, mindegyik három kérdésből áll. Elérhetőek itt, a kvíz alkalmazás helyileg futtatható vagy Telepíthető Azure-ra; kövesd a quiz-app mappában található utasításokat.

🗃️ Leckék

	Projekt neve	Tanított fogalmak	Tanulási célok	Kapcsolódó lecke	Szerző
01	Kezdés	Programozás alapjai és munkához használt eszközök	Megérteni a legtöbb programozási nyelv alapjait és a szoftvereket, amikkel a profi fejlesztők dolgoznak	Programozási nyelvek és eszközök bevezetése	Jasmine
02	Kezdés	GitHub alapjai, csapatmunka	Hogyan használd a GitHub-ot a projektjeidhez, hogyan működj együtt másokkal egy kódalapon	GitHub bevezető	Floor
03	Kezdés	Akadálymentesség	Alapok megismerése a webes akadálymentességből	Akadálymentesség alapjai	Christopher
04	JS alapok	JavaScript adattípusok	JavaScript adattípusok alapjai	Adattípusok	Jasmine
05	JS alapok	Függvények és metódusok	Megtanulni a függvényekről és metódusokról, amik egy alkalmazás logikáját kezelik	Függvények és metódusok	Jasmine és Christopher
06	JS alapok	Döntéshozatal JS-ben	Megtanulni, hogyan hozz döntéseket a kódodban döntéshozatali metódusok segítségével	Döntéshozatal	Jasmine
07	JS alapok	Tömbök és ciklusok	Adatkezelés tömbökkel és ciklusokkal JavaScriptben	Tömbök és ciklusok	Jasmine
08	Terrárium	HTML gyakorlatban	HTML felépítése egy online terráriumhoz, különös tekintettel az elrendezésre	HTML bevezető	Jen
09	Terrárium	CSS gyakorlatban	CSS készítése az online terrárium megjelenítéséhez, az alapoktól kezdve, beleértve az oldal reszponzívvá tételét	CSS bevezető	Jen
10	Terrárium	JavaScript zárványok, DOM kezelése	JavaScript írása a terrárium drag/drop működéséhez, fókuszálva a zárványokra és a DOM kezelésére	JavaScript zárványok, DOM kezelés	Jen
11	Gépelős játék	Gépelős játék készítés	Megtanulni, hogyan használj billentyűeseményeket a JavaScript alkalmazás logikájához	Eseményvezérelt programozás	Christopher
12	Zöld böngésző kiterjesztés	Böngészőkkel való munka	Megismerni, hogyan működnek a böngészők, történetüket, és hogyan kezdj neki egy böngésző kiterjesztés első elemeinek megalkotásához	Böngészőkről	Jen
13	Zöld böngésző kiterjesztés	Űrlap készítése, API hívás és változók helyi tárolása	JavaScript elemek elkészítése a böngésző kiterjesztéshez API hívásához helyi tárban tárolt változókkal	API-k, űrlapok és helyi tárolás	Jen
14	Zöld böngésző kiterjesztés	Háttérfolyamatok a böngészőben, webes teljesítmény	Használd a böngésző háttérfolyamatait a kiterjesztés ikon kezeléséhez; ismerkedj meg a web teljesítménnyel és néhány optimalizációval	Háttérfeladatok és teljesítmény	Jen
15	Űrjáték	Fejlettebb játékfejlesztés JavaScript-tel	Megtanulni az öröklődést osztályokkal és kompozícióval, illetve a pub/sub mintát, felkészülve egy játék készítésére	Bevezetés a fejlettebb játékfejlesztésbe	Chris
16	Űrjáték	Rajzolás canvas-ra	Megismerni a Canvas API-t, amivel elemeket lehet megrajzolni a képernyőre	Rajzolás canvas-ra	Chris
17	Űrjáték	Elem mozgatás a képernyőn	Felfedezni, hogyan kapnak mozgást az elemek kartézián koordináták és a Canvas API használatával	Elemek mozgatása	Chris
18	Űrjáték	Ütközés érzékelés	Elem-ütközések kezelése és reagálás egymásra billentyűleütések alapján, cooldown funkció biztosítása a játék teljesítményéhez	Ütközés érzékelés	Chris
19	Űrjáték	Pontszámlálás	Matematikai műveletek elvégzése a játék állapota és teljesítménye alapján	Pontszámlálás	Chris
20	Űrjáték	Játék befejezése és újraindítása	Megtanulni a játék befejezését és újraindítását, beleértve az erőforrások tisztítását és a változók visszaállítását	A befejezési feltétel	Chris
21	Banki app	HTML sablonok és útvonalak egy webalkalmazásban	Megtanulni többoldalas webhely architektúrájának felépítését routing és HTML sablonok használatával	HTML sablonok és útvonalak	Yohan
22	Banki app	Bejelentkezési és regisztrációs űrlap készítése	Megtanulni az űrlapok építését és a validációs eljárásokat	Űrlapok	Yohan
23	Banki app	Adatok lekérése és használata	Hogyan áramlanak az adatok az app-ba és ki, hogyan lehet lekérni, tárolni és eltávolítani	Adatok	Yohan
24	Banki app	Állapotkezelés fogalmai	Megtanulni, hogyan tartja az app az állapotot és hogyan lehet programozottan kezelni	Állapotkezelés	Yohan
25	Böngésző / VScode kód	VScode használata	Megtanulni egy kódszerkesztő használatát	VScode kódszerkesztő használata	Chris
26	AI asszisztensek	Mesterséges intelligenciával való munka	Megtanulni saját AI asszisztenst készíteni	AI Asszisztens projekt	Chris

🏫 Pedagógia

Tananyagaink két kulcsfontosságú pedagógiai elv alapján készültek:

• projekt-alapú tanulás
• gyakori kvízek

A program JavaScript, HTML és CSS alapjait tanítja meg, valamint a legújabb eszközöket és technikákat, amelyeket a mai webfejlesztők használnak. A diákoknak lehetőségük lesz gyakorlati tapasztalatot szerezni gépelős játék, virtuális terrárium, környezetbarát böngésző-kiterjesztés, űrtámadó stílusú játék és egy vállalati banki alkalmazás elkészítésével. A sorozat végére a diákok alapos webfejlesztési tudásra tesznek szert.

🎓 Az első néhány leckét ebben a tananyagban egy Tanulási útvonal formájában is elvégezheted a Microsoft Learn-en!

A tartalom projektalapúsága révén a tanulási folyamat vonzóbbá válik, és az ismeretek mélyebb elsajátítását segíti elő. Írtunk néhány kezdeti leckét a JavaScript alapjairól, amelyek bevezetik az alapfogalmakat, egy videósorozattal kiegészítve a "Beginners Series to: JavaScript" videó-tutorial gyűjteményből, amelynek néhány szerzője hozzájárult ehhez a tananyaghoz.

Ezen túlmenően, egy alacsony tétű kvíz az óra előtt beállítja a diák tanulási szándékát egy témára, míg a második kvíz az óra után elősegíti a mélyebb rögzítést. Ez a tananyag rugalmas és szórakoztató, teljes egészében vagy részleteiben is elvégezhető. A projektek kicsiben kezdődnek, és a 12 hetes ciklus végére egyre összetettebbek lesznek.

Noha szándékosan elkerültük a JavaScript keretrendszerek bevezetését, hogy a webfejlesztői alapkompetenciákra koncentráljunk mielőtt egy keretrendszer megismerésére térnénk, a tananyag befejezése után jó következő lépés lehet Node.js megtanulása egy másik videó-sorozaton keresztül: "Beginner Series to: Node.js".

Látogasd meg alapelveinket a Viselkedési kódexünk és Közreműködési irányelveink oldalakon. Várjuk építő jellegű visszajelzéseidet!

🧭 Offline hozzáférés

A dokumentációt offline is futtathatod a Docsify segítségével. Forkold ezt a repót, telepítsd a Docsify-t a helyi gépedre, majd ennek a repónak a gyökérmappájában írd be: docsify serve. A weboldal a 3000-es porton lesz elérhető a localhostodon: localhost:3000.

📘 PDF

Az összes lecke PDF formátumban megtalálható itt.

🎒 Egyéb tanfolyamok

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

LangChain

---

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

---

Generatív AI sorozat

---

Alap tanulás

---

Copilot sorozat

Segítség kérése

Ha elakadsz vagy bármilyen kérdésed van az AI alkalmazások fejlesztésével kapcsolatban, csatlakozz tanulótársaidhoz é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ések szívesen látottak, és a tudás szabadon megosztott.

Ha termék visszajelzésed vagy hibák során, látogass el ide:

Licenc

Ez a tároló az MIT licenc alatt áll. További információkért lásd a LICENSE fájlt.

---

Jogi nyilatkozat: Ez a dokumentum az AI fordító szolgáltatás, a Co-op Translator használatával készült. Bár igyekszünk pontos fordítást nyújtani, kérjük, vegye figyelembe, hogy az automatikus fordítások tartalmazhatnak hibákat vagy pontatlanságokat. Az eredeti, anyanyelvi dokumentum tekintendő hiteles forrásnak. Fontos információk esetén szakmai, emberi fordítást javaslunk. Nem vállalunk felelősséget az ebből eredő félreértésekért vagy hibás értelmezésekért.