Web-Dev-For-Beginners/translations/hu

Webfejlesztés kezdőknek - Tanterv

Ismerje meg a webfejlesztés alapjait a Microsoft Cloud Advocates által készített 12 hetes átfogó tanfolyamunkkal. A 24 lecke mindegyike gyakorlati projektek segítségével mélyed el a JavaScript, CSS és HTML témakörökben, mint például terráriumok, böngészőbővítmények és űrjátékok. Vegyen részt kvízekben, beszélgetésekben és gyakorlati feladatokban. Fejlessze képességeit és optimalizálja tudásának megszilárdítását hatékony, projektalapú oktatásunkkal. Kezdje el a kódolási útját még ma!

Csatlakozzon az Azure AI Foundry Discord szerveréhez, ismerkedjen meg szakértőkkel és fejlesztőtársakkal.

Kövesse az alábbi lépéseket a források használatának megkezdéséhez:

1. Forkolja a tárolót: Kattintson ide
2. Klónozza a tárolót: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Csatlakozzon az Azure AI Foundry Discord szerveréhez, és ismerkedjen meg szakértőkkel és fejlesztőtársakkal

🌐 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 | Khmer | 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é helyben klónozni?

Ez a tároló több mint 50 nyelvű fordítást tartalmaz, ami jelentősen növeli a letöltési méretet. A fordítások nélküli klónozáshoz használjon részleges kitekintést:

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 megkap, ami a kurzus elvégzéséhez szükséges, sokkal gyorsabb letöltéssel.

Ha további fordításokat szeretne, az elérhető nyelvek itt találhatók: itt

🧑‍🎓 Diák vagy?

Látogasd meg a Student Hub oldalt, ahol kezdő erőforrásokat, diákcsomagokat és akár ingyenes tanúsítványkuponokat is találsz. Ezt az oldalt érdemes könyvjelzőznie és időről időre ellenőriznie, mivel havonta cseréljük a tartalmat.

📣 Bejelentés – Új GitHub Copilot Agent mód kihívások elvégzésére!

Ú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 kell megoldanod. Ha még nem használtad az Agent módot, az nemcsak szöveg generálására képes, hanem fájlok létrehozására és szerkesztésére, parancsok futtatására és egyéb feladatokra is.

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

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

📣 Bejelentés – Új tanterv a JavaScript generatív MI témakörében megjelent

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

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

• Leckék, amelyek az alapoktól a RAG-ig mindent lefednek.
• Interakció történelmi szereplőkkel a GenAI és társalkalmazásunk segítségével.
• Szórakoztató és lebilincselő narratíva, időutazás élményével!

Minden lecke tartalmaz egy befejezendő feladatot, egy tudásellenőrzést és egy kihívást, amelyek témái például:

• Utasítások megadása és utasítás-tervezés
• Szöveg- és képgeneráló alkalmazások
• Keresőalkalmazások

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

🌱 Kezdés

Tanárként, ide kattintva találsz néhány javaslatot a tanterv használatához. Várjuk visszajelzésed beszélgetési fórumunkban!

Tanulók, minden leckéhez kezdjétek egy előadás előtti kvízzel, majd olvassátok el az előadási anyagot, teljesítsétek a különféle feladatokat, és ellenőrizzétek a tudásotokat az előadás utáni kvízzel.

A tanulási élmény fokozása érdekében dolgozzatok együtt társaitokkal a projekteken! A beszélgetésekre bátorítunk a beszélgetési fórumunkon, ahol moderátoraink segítséget nyújtanak kérdéseitekre.

További tanulmányokhoz javasoljuk a Microsoft Learn használatát, ahol még több oktatóanyagot találsz.

📋 Környezet beállítása

Ezen tantervhez egy kész fejlesztői környezet tartozik! Induláskor választhatod a tanterv futtatását Codespace-ben (egy böngészőalapú, telepítés nélküli környezet), vagy helyben a számítógépedön egy szövegszerkesztő, például a Visual Studio Code használatával.

Tároló létrehozása

Ahhoz, hogy könnyen elmentsd a munkád, ajánlott, hogy saját példányt készíts erről a tárolóról. Ezt a lap tetején található Use this template gomb megnyomásával teheted meg. Ez létrehoz egy új tárolót a GitHub fiókodban, amely a tanterv másolatát tartalmazza.

Kövesd ezeket a lépéseket:

1. Forkold a tárolót: Kattints az oldal 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

A tanterv futtatása Codespace-ben

A saját tárolód példányában, amit előzőleg létrehoztál, kattints a Code gombra, és válaszd az Open with Codespaces opciót. Ez létrehoz egy új Codespace-t, ahol dolgozhatsz.

A tanterv helyi futtatása a számítógépeden

A tanterv helyi futtatásához szükséged lesz egy szövegszerkesztőre, böngészőre és parancssori eszközre. Az első leckénk, a Bevezetés a programozási nyelvekbe és fejlesztőeszközökbe, végigvezet a különböző lehetőségeken, hogy kiválaszthasd a számodra legmegfelelőbb eszközöket.

Ajánljuk, hogy a Visual Studio Code szerkesztőt használd, amely beépített terminállal rendelkezik. A Visual Studio Code-ot innen töltheted le: itt.

1. Klónozd a tárhelyed a számítógépedre. Ezt megteheted a Code gombra kattintva, majd a URL másolásával:

   CodeSpace

   Ezután nyisd meg a Terminált a Visual Studio Code programban, és futtasd a következő parancsot, cseréld le a <your-repository-url> részt az imént másolt URL-re:

   git clone <your-repository-url>
   

2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt úgy teheted meg, hogy az File > Open Folder menüpontra kattintasz, és kiválasztod az imént klónozott mappát.

Ajánlott Visual Studio Code kiegészítők:

• Live Server - HTML oldalak előnézete a Visual Studio Code-on belül
• Copilot - segít a kód gyorsabb írásában

📂 Minden leckében található:

• opcionális vázlatjegyzet
• opcionális kiegészítő videó
• óra előtti bemelegítő kvíz
• írott lecke
• projektalapú leckékhez lépésről-lépésre útmutatók a projekt elkészítéséhez
• tudásellenőrzések
• kihívás
• kiegészítő olvasmány
• feladat
• órafeladat utáni kvíz

Megjegyzés a kvízekhez: Minden kvíz a Quiz-app mappában található, összesen 48 kvíz mindegyik három kérdéssel. Ezek elérhetők itt, a kvíz alkalmazás futtatható helyben vagy telepíthető Azure-ra; kövesd az utasításokat a quiz-app mappában.

🗃️ Leckék

	Projekt neve	Oktatott fogalmak	Tanulási célok	Kapcsolódó lecke	Szerző
01	Első lépések	Bevezetés a programozásba és a munkaeszközökbe	Megérteni a legtöbb programozási nyelv alapjait és a szoftvereket, melyek segítik a profi fejlesztőket munkájukban	Bevezetés a programozási nyelvekbe és eszközökbe	Jasmine
02	Első lépések	GitHub alapjai, csapatmunkával	Hogyan használd a GitHubot a projektben, hogyan működj együtt másokkal egy kódalapon	GitHub alapok	Floor
03	Első lépések	Akadálymentesség	Megtanulni a webes akadálymentesség alapjait	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	Megismerni a függvényeket és metódusokat, hogy hogyan kezeljük az alkalmazás logikai folyamatát	Függvények és metódusok	Jasmine és Christopher
06	JS alapok	Döntéshozatal JavaScript-tel	Hogyan készítsünk feltételeket a kódban döntési szerkezetekkel	Döntéshozatal	Jasmine
07	JS alapok	Tömbök és ciklusok	Adatkezelés tömbök és ciklusok használatával JavaScript-ben	Tömbök és ciklusok	Jasmine
08	Terrárium	HTML gyakorlat	HTML készítése online terráriumhoz, a layout kialakítására fókuszálva	Bevezetés a HTML-be	Jen
09	Terrárium	CSS gyakorlat	CSS készítése az online terrárium stílusához, alapok a reszponzív oldal készítéséhez	Bevezetés a CSS-be	Jen
10	Terrárium	JavaScript zárványok, DOM manipuláció	JavaScript készítése, hogy a terrárium működjön húzd és ejtsd felületen, zárványok és DOM manipulációra fókuszálva	JavaScript zárványok, DOM manipuláció	Jen
11	Gépelős játék	Gépelős játék készítése	Megtanulni a billentyűzet események használatát JavaScript alkalmazás logikájához	Eseményvezérelt programozás	Christopher
12	Green Browser Extension	Böngészőkezelés	Megérteni, hogyan működnek a böngészők, történetük és hogyan építsük fel az első elemeket egy böngészőbővítményhez	A böngészőkről	Jen
13	Green Browser Extension	Űrlapkészítés, API hívás és helyi adattárolás	JavaScript elemek építése bővítményedhez, API hívások végrehajtásához és változók helyi tárolásával	API-k, űrlapok, helyi tárolás	Jen
14	Green Browser Extension	Háttérfolyamatok a böngészőben, webes teljesítmény	Böngésző háttérfolyamatok kezelése az ikon menedzseléséhez; webes teljesítmény és optimalizációk megismerése	Háttérfeladatok és teljesítmény	Jen
15	Űrjáték	Haladóbb játékfejlesztés JavaScript-tel	Megtanulni az öröklődést osztályok és összetétel segítségével, valamint a Pub/Sub mintázatot játék készítés előtt	Bevezetés haladó játékfejlesztésbe	Chris
16	Űrjáték	Rajzolás a vászonra	Megismerni a Canvas API-t a képernyőre rajzoláshoz	Rajzolás a vászonra	Chris
17	Űrjáték	Mozgatás a képernyőn elhelyezett elemekkel	Felfedezni, hogyan mozognak az elemek kartézián koordinátákkal és a Canvas API-val	Elemek mozgatása	Chris
18	Űrjáték	Ütközés érzékelés	Az elemek ütközésének és kölcsönhatásának megvalósítása billentyűleütések segítségével, hűtési funkcióval a teljesítményért	Ütközésérzékelés	Chris
19	Űrjáték	Pontozás	Matematikai számítások elvégzése a játék állapota és teljesítménye alapján	Pontozás	Chris
20	Űrjáték	Játék befejezése és újraindítása	Játék befejezésének és újraindításának megtanulása, eszközök tisztítása és változók visszaállítása	Befejezési feltétel	Chris
21	Banki alkalmazás	HTML sablonok és útvonalak webalkalmazásban	Többoldalas weboldal felépítésének megértése routing és HTML sablonok használatával	HTML sablonok és útvonalak	Yohan
22	Banki alkalmazás	Bejelentkező és regisztrációs űrlap készítése	Űrlapkészítés és validációs folyamatok megismerése	Űrlapok	Yohan
23	Banki alkalmazás	Adatok lekérése és kezelése	Az adatáramlás megértése az alkalmazásban, hogyan kérjük le, tároljuk és dobjuk el az adatokat	Adatok	Yohan
24	Banki alkalmazás	Állapotkezelés fogalmai	Megtanulni, hogyan őrzi meg az alkalmazás az állapotot és hogyan kezelhető programozottan	Állapotkezelés	Yohan
25	Böngésző/VScode kód	Működés VScode-dal	Megtanulni szerkesztő használatát	VScode kód szerkesztő használata	Chris
26	AI asszisztensek	Működés AI-val	Megtanulni saját AI asszisztenst építeni	AI asszisztens projekt	Chris

🏫 Pedagógia

Tananyagunk két fő pedagógiai elven alapul:

• projektalapú tanulás
• gyakori kvízek

A program a JavaScript, HTML és CSS alapjait tanítja meg, valamint a legújabb webfejlesztői eszközöket és technikákat. A diákok gyakorlati tapasztalatot szerezhetnek gépelős játék, virtuális terrárium, környezetbarát böngészőbővítmény, űr-inváziós stílusú játék, és egy banki alkalmazás elkészítésével. A sorozat végére alapos webfejlesztési tudást szereznek.

🎓 Az első néhány leckét elvégezheted Tanulási Útként a Microsoft Learn-en!

Ha az anyagokat projektekhez igazítjuk, az érdeklődést fenntartja a diákoknál és növeli a fogalmak megtartását. Több bevezető leckét is írtunk JavaScript alapok témában, videóval kiegészítve a "JavaScript kezdő sorozat" oktatóvideókból, amelyek egyes szerzői hozzájárultak ehhez a tananyaghoz.

Emellett egy alacsony tétű kvíz óra előtt beállítja a tanuló szándékát egy téma megtanulására, míg az óra utáni kvíz elősegíti a további megszilárdítást. Ez a tananyag rugalmas és élvezetes, egészben vagy részenként is végezhető. A projektek kis lépésekben indulnak, és a 12 hetes ciklus végére egyre összetettebbek lesznek.

Miközben szándékosan kerültük a JavaScript keretrendszerek bemutatását, hogy az alapvető készségekre koncentráljunk, mielőtt keretrendszert használunk, egy jó következő lépés lehet a Node.js megtanulása a "Node.js kezdő sorozat" videógyűjtemény segítségével.

Látogasd meg Magatartási kódexünket és Közreműködési útmutatónkat. Várjuk építő jellegű visszajelzésedet!

🧭 Offline hozzáférés

Ez a dokumentáció offline is futtatható a Docsify használatával. Fork-old ezt a tárolót, telepítsd a Docsify-t a helyi gépedre, majd a tároló gyökérmappájában írd be, hogy docsify serve. A webhely a 3000-es porton lesz elérhető a localhostodon: localhost:3000.

📘 PDF

Az összes leckéről szóló 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 elakadnál vagy kérdésed van az AI alkalmazások fejlesztésével kapcsolatban, csatlakozz más tanulókhoz és tapasztalt fejlesztőkhöz az MCP-ről folytatott beszélgetésekben. Ez egy támogató közösség, ahol a kérdések szívesen fogadottak, és a tudás szabadon megosztott.

Ha termék visszajelzésed vagy hibákat találsz fejlesztés közben, látogass el ide:

Licenc

Ez a tárhely 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 segítségével készült. Bár igyekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelven tekintendő hivatalos forrásnak. Kritikus információk esetén professzionális emberi fordítás használata javasolt. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy hibás értelmezésekért.