Web-Dev-For-Beginners/translations/hu

Webfejlesztés kezdőknek – Tanterv

Ismerd meg a webfejlesztés alapjait 12 hetes átfogó tanfolyamunkon, amelyet a Microsoft Cloud Advocates tartanak. A 24 lecke mindegyike gyakorlati projektek segítségével mélyed el a JavaScript, CSS és HTML világában, többek között terráriumok, böngészőbővítmények és űrjátékok készítésével. Vegyél részt kvízekben, beszélgetésekben és gyakorlati feladatokban. Fejleszd képességeidet, és optimalizáld a tudásmegtartásodat hatékony, projektalapú oktatásunkkal. Kezdd el ma a kódolási utadat!

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

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

1. Forkold a tárházat: Kattints ide
2. Klónozd a tárházat: 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)

Arab | Bengáli | Bolgár | Burmai (Myanmar) | Kínai (egyszerűsített) | Kínai (hagyományos, Hongkong) | Kínai (hagyományos, Makaó) | Kínai (hagyományos, Tajvan) | Horvát | Cseh | Dán | Holland | Észt | Finn | Francia | Német | Görög | Héber | Hindi | Magyar | Indonéz | Olasz | Japán | Kannada | Koreai | Litván | Maláj | Malayalam | Marathi | Nepáli | Nigériai pidzsín | Norvég | Perzsa (Fárszi) | Lengyel | Portugál (Brazília) | Portugál (Portugália) | Pandzsábi (Gurmukhi) | Román | Orosz | Szerb (Cirill) | Szlovák | Szlovén | Spanyol | Szuahéli | Svéd | Tagalog (Filipino) | Tamil | Telugu | Thai | Török | Ukrán | Urdu | Vietnami

Szeretnéd inkább helyileg klónozni?

Ez a tárház több mint 50 nyelvi fordítást tartalmaz, ami jelentősen megnöveli a letöltési méretet. Ha fordítás nélkül szeretnéd klónozni, használd a 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, amire szükséged van a tanfolyam elvégzéséhez, sokkal gyorsabb letöltéssel.

Ha további fordítási nyelveket szeretnél támogatni, ezek listája itt található

🧑‍🎓 Diák vagy?

Látogass el a Diákoknak szóló oldalra, ahol kezdő forrásokat, diákcsomagokat és akár ingyenes tanúsítványvouchereket is találhatsz. Ezt az oldalt érdemes könyvjelzőzni és időről időre visszanézni, mivel havonta frissítjük a tartalmakat.

📣 Bejelentés – Új kihívások GitHub Copilot Agent módban!

Új kihívás került hozzáadásra, keresd a "GitHub Copilot Agent Challenge 🚀" címkét a legtöbb fejezetben. Ez egy új kihívás a GitHub Copilot és az Agent mód használatával végrehajtandó feladatokhoz. Ha még nem használtad az Agent módot, ez nemcsak szöveg generálására képes, hanem fájlokat is létre tud hozni és szerkeszteni, parancsokat futtat és még többre.

📣 Bejelentés – Új projekt Generatív MI segítségével

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

📣 Bejelentés – Új tanterv Generatív MI témában JavaScript-hez

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

Látogass el ide: https://aka.ms/genai-js-course és kezdj bele!

• Oktatások az alapoktól a RAG-ig.
• Történelmi karakterekkel való interakció generatív MI és társalkalmazásunk segítségével.
• Szórakoztató és lebilincselő narratíva, időutazás élménnyel!

Minden leckéhez tartozik egy feladat, tudásellenőrzés és kihívás, hogy vezessen az alábbi témák tanulásában:

• Promptolás és prompt-mérnökség
• Szöveg- és képalapú alkalmazásgenerálás
• Keresőalkalmazások

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

🌱 Kezdés

Tanárként, nézd meg az itt található javaslatainkat a tanterv használatára. Nagyon örülnénk visszajelzésednek a fórumunkon!

Tanulók, minden leckénél kezdd az előadás előtti kvízzel, majd olvasd el az előadási anyagot, végezd el a különböző tevékenységeket, és ellenőrizd a megértésed az előadás utáni kvízzel.

A tanulási élményed fokozása érdekében csatlakozz társaidhoz, hogy együtt dolgozzatok a projekteken! A beszélgetéseket bátorítjuk a fórumunkon, ahol moderátoraink válaszolnak kérdéseidre.

Továbbfejlődésed érdekében javasoljuk, hogy böngéssz a Microsoft Learn további tananyagainak között.

📋 Környezet beállítása

A tananyaghoz készen áll egy fejlesztői környezet! Amikor elkezded, eldöntheted, hogy a tananyagot Codespace-ben (böngésző-alapú, telepítést nem igénylő környezet) futtatod, vagy helyileg a számítógépeden, például Visual Studio Code szövegszerkesztővel.

Hozd létre a saját tárházad

Ahhoz, hogy könnyedén mentsd munkáidat, ajánlott a saját példányod létrehozása ebből a tárházból. Ezt a felső sávban található Use this template gombra kattintva teheted meg. Ez egy új tárházat hoz létre GitHub fiókodban a tananyag másolatával.

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

1. Forkold a tárházat: Kattints a jobb felső sarokban található "Fork" gombra.
2. Klónozd a tárházat: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

A tananyag futtatása Codespace-ben

A létrehozott saját példányodban kattints a Code gombra, és válaszd az Open with Codespaces lehetőséget. Ez létrehoz neked egy új Codespace-t a munkához.

A tananyag futtatása helyileg a számítógépeden

A helyi futtatáshoz szükséged lesz egy szövegszerkesztőre, egy böngészőre és parancssori eszközre. Első leckénk, az Introduction to Programming Languages and Tools of the Trade segít kiválasztani az egyéni igényeidnek legmegfelelőbb eszközöket.

Javasoljuk a Visual Studio Code szerkesztő használatát, mely beépített Terminált is tartalmaz. A Visual Studio Code itt tölthető le: itt.

1. Klónozd le a saját példányod a számítógépedre. Ezt úgy teheted meg, hogy a Code gombra kattintasz és 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 illeszd be az imént másolt URL-t:

   git clone <your-repository-url>
   

2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt úgy teheted meg, hogy a Fájl > Mappa megnyitása menüpontra kattintasz, majd kiválasztod az imént klónozott mappát.

Ajánlott Visual Studio Code bővítmények:

• 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ázlatjegyzetet
• opcionális kiegészítő videót
• előleckés bemelegítő kvízt
• írott leckét
• projektalapú leckék esetén lépésről lépésre útmutatót a projekt elkészítéséhez
• tudásellenőrzéseket
• egy kihívást
• kiegészítő olvasmányt
• feladatot
• utóleckés kvízt

Megjegyzés a kvízekről: Minden kvíz a Quiz-app mappában található, összesen 48 kvíz három kérdéssel. Elérhetőek itt, a kvízalkalmazás lokálisan is futtatható vagy Azure-ra telepíthető; kövesd az utasításokat a quiz-app mappában.

🗃️ Leckék

	Projekt neve	Tanított fogalmak	Tanulási célok	Kapcsolódó lecke	Szerző
01	Kezdés	Bevezetés a programozásba és a használt eszközökbe	Megtanulni a legtöbb programozási nyelv alapjait, valamint a szoftvereket, amelyek segítik a szakmai fejlesztők munkáját	Bevezetés a programozási nyelvekbe és az eszközökbe	Jasmine
02	Kezdés	A GitHub alapjai, csoportos munkával kapcsolatosan	Hogyan használd a GitHubot a projektedben, hogyan működj együtt másokkal egy kódalapon	Bevezetés a GitHubba	Floor
03	Kezdés	Akadálymentesség	Megtanulni a webakadá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	Megtanulni a függvényekről és metódusokról, hogy hogyan kezeljük egy alkalmazás logikai folyamát	Függvények és metódusok	Jasmine és Christopher
06	JS Alapok	Döntéshozatal JS-sel	Megtanulni, hogyan hozzunk létre feltételeket a kódodban döntéshozatali módszerekkel	Döntéshozatal	Jasmine
07	JS Alapok	Tömbök és ciklusok	Adatok kezelése tömbök és ciklusok használatával JavaScript-ben	Tömbök és ciklusok	Jasmine
08	Terrárium	HTML gyakorlatban	HTML felépítése egy online terrárium létrehozásához, a jól tagolt elrendezésre fókuszálva	Bevezetés a HTML-be	Jen
09	Terrárium	CSS gyakorlatban	A terrárium stílusozása CSS-sel, beleértve az oldal reszponzívvá tételét	Bevezetés a CSS-be	Jen
10	Terrárium	JavaScript lezárások, DOM manipuláció	JavaScript megírása a terrárium drag/drop működéséhez, fókuszban a lezárásokon (closures) és a DOM manipuláción	JavaScript lezárások, DOM manipuláció	Jen
11	Gépelős játék	Gépelős játék készítése	Megtanulni, hogyan használjunk billentyűeseményeket az alkalmazás logikájához	Eseményvezérelt programozás	Christopher
12	Zöld böngészőbővítmény	Böngészőkkel való munka	Megismerni a böngészők működését, történetét, és hogyan készítsünk egy böngészőbővítmény alapjait	A böngészőkről	Jen
13	Zöld böngészőbővítmény	Űrlapkészítés, API hívás és változók tárolása helyi tárhelyen	Megírni a böngészőbővítmény JavaScript elemeit API híváshoz és helyi tárolóban tárolt változók használatához	API-k, űrlapok és helyi tároló	Jen
14	Zöld böngészőbővítmény	Háttérfolyamatok a böngészőben, web teljesítmény	A böngésző háttérfolyamatait használni a kiterjesztés ikon kezelésére; megérteni a web teljesítményt és optimalizációkat végezni	Háttérfeladatok és teljesítmény	Jen
15	Űrhajós játék	Fejlettebb játékfejlesztés JavaScript-tel	Megtanulni az öröklődést osztályokkal és komponálással, valamint a Pub/Sub mintát játékfejlesztéshez	Bevezetés a fejlett játékfejlesztésbe	Chris
16	Űrhajós játék	Rajzolás a vászonra	Megismerni a Canvas API-t, amellyel elemek rajzolhatók a képernyőre	Rajzolás a vászonra	Chris
17	Űrhajós játék	Mozgatás a képernyőn	Felfedezni, hogyan mozdulhatnak el elemek kartezián koordinátákkal és a Canvas API használatával	Elemmozgatás	Chris
18	Űrhajós játék	Ütközés-észlelés	Elemei ütköztetni és reagáltatni a billentyűleütések alapján, és lehűlési funkcióval biztosítani a játék teljesítményét	Ütközés-észlelés	Chris
19	Űrhajós játék	Pontszám vezetése	Számításokat végezni a játék állapota és teljesítménye alapján	Pontszám vezetés	Chris
20	Űrhajós játék	Játék lezárása és újraindítása	Megtanulni a játék lezárását és újraindítását, beleértve az erőforrások tisztítását és változó értékek visszaállítását	Lezárási feltétel	Chris
21	Banki alkalmazás	HTML sablonok és útvonalak egy webalkalmazásban	Megtanulni, hogyan készítsünk többlapos weboldalak architektúráját útvonalkezeléssel és HTML sablonokkal	HTML sablonok és útvonalak	Yohan
22	Banki alkalmazás	Bejelentkezési és regisztrációs űrlap készítése	Megtanulni űrlapok készítését és validációs eljárásokat	Űrlapok	Yohan
23	Banki alkalmazás	Adatok lekérése és felhasználása	Hogyan áramlanak az adatok az alkalmazásba és onnan ki, hogyan kérjük le, tároljuk és töröljük	Adatok	Yohan
24	Banki alkalmazás	Állapotkezelési fogalmak	Megtanulni, hogyan tartja fenn az alkalmazás az állapotot és hogyan kezeljük programozottan	Állapotkezelés	Yohan
25	Böngésző/VScode kód	VScode használata	Megtanulni egy kódszerkesztő használatát	Használd a VScode Kodszerkesztőt	Chris
26	AI Asszisztensek	Mesterséges intelligenciával való munka	Megtanulni, hogyan építs saját AI asszisztenst	Mesterséges intelligencia asszisztens projekt	Chris

🏫 Pedagógia

Tananyagunk két fő pedagógiai alapelvet követ:

• projektalapú tanulás
• gyakori kvízek

A program tanítja a JavaScript, HTML és CSS alapjait, valamint a legfrissebb eszközöket és technikákat, amelyeket a mai webfejlesztők használnak. A diákok lehetőséget kapnak, hogy gyakorlatban is kipróbálják magukat: készíthetnek gépelős játékot, virtuális terráriumot, környezetbarát böngészőbővítményt, űrhajós-stílusú játékot és banki alkalmazást vállalkozások számára. A sorozat végére a hallgatók megalapozott ismereteket szereznek a webfejlesztésről.

🎓 Ezt a tananyagot az első néhány leckéjét veheted mint egy Tanulási útvonalat a Microsoft Learn-en!

Azáltal, hogy a tartalom projekt-alapú, a folyamat érdekesebb és a fogalmak megtartása is erősödik. Több bevezető leckét is írtunk JavaScript alapismeretek témakörében, amelyek egy videósorozattal vannak párosítva a "Beginners Series to: JavaScript" oktatóanyagai közül, melyek szerzői közül néhányan közreműködtek ebben a tananyagban.

Ezen túl egy alacsony téttel bíró kvíz az óra előtt beállítja a hallgató szándékát a tanulásra, míg a második kvíz óra után segít a tanultak megtartásában. Ez a tananyag rugalmas és szórakoztató, egészben vagy részben is elvégezhető. A projektek kicsiben kezdődnek, és a 12 hetes ciklus végére egyre összetettebbé válnak.

Bár szándékosan kerültük a JavaScript keretrendszerek bevezetését, hogy a fejlesztői alapokat erősítsük a keretrendszer használata előtt, egy jó következő lépés lehet a Node.js elsajátítása egy másik videósorozat segítségével: "Beginner Series to: Node.js".

Látogasd meg a mi Magatartási kódexünket és Hozzájárulás irányelveinket. Várjuk az építő jellegű visszajelzésed!

🧭 Offline hozzáférés

Ez a dokumentáció offline is futtatható a Docsify használatával. Fork-old ezt a tárhelyet, telepítsd a Docsify-t a saját gépedre, majd a repo gyökérmappájában írd be: docsify serve. A weboldal a localhoston a 3000-es porton fog futni: localhost:3000.

📘 PDF

Az összes leckéről PDF található itt.

🎒 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éseid vannak 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ések szívesen fogadottak és a tudás szabadon megosztott.

Ha termék-visszajelzésed vagy hibajelentésed van az építés során, látogass el ide:

Licenc

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

---

Nyilatkozat: Ez a dokumentum a Co-op Translator AI fordító szolgáltatás segítségével készült. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum a saját nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén ajánlott szakmai emberi fordítást igénybe venni. Nem vállalunk felelősséget az ebből eredő félreértésekért vagy téves értelmezésekért.