Web-Dev-For-Beginners/translations/hu

Kövesd az alábbi lépéseket, hogy elkezdhesd használni ezeket az erőforrásokat:

1. Forkold a repót: Kattints
2. Klónozd a repót: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Csatlakozz az Azure AI Foundry Discordhoz, és találkozz szakértőkkel és fejlesztőtársakkal

Webfejlesztés kezdőknek - Tananyag

Tanuld meg a webfejlesztés alapjait a Microsoft Cloud Advocates 12 hetes átfogó kurzusával. A 24 lecke mindegyike JavaScript, CSS és HTML témákat dolgoz fel gyakorlati projekteken keresztül, 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épességeidet és optimalizáld tudásod megőrzését hatékony projektalapú oktatási módszerünkkel. Kezdd el a kódolási utadat még ma!

🌐 Többnyelvű támogatás

Támogatott GitHub Action által (Automatikus és mindig naprakész)

Francia | Spanyol | Német | Orosz | Arab | Perzsa (Fárszi) | Urdu | Kínai (Egyszerűsített) | Kínai (Hagyományos, Makaó) | Kínai (Hagyományos, Hongkong) | Kínai (Hagyományos, Tajvan) | Japán | Koreai | Hindi | Bengáli | Maráthi | Nepáli | Pandzsábi (Gurmukhi) | Portugál (Portugália) | Portugál (Brazília) | Olasz | Lengyel | Török | Görög | Thai | Svéd | Dán | Norvég | Finn | Holland | Héber | Vietnámi | Indonéz | Maláj | Tagalog (Filippínó) | Szuahéli | Magyar | Cseh | Szlovák | Román | Bolgár | Szerb (Cirill) | Horvát | Szlovén | Ukrán | Burmai (Mianmar)

Ha további fordításokat szeretnél, a támogatott nyelvek listája itt található

🧑‍🎓 Diák vagy?

Látogass el a Student Hub oldalra, ahol kezdőknek szóló erőforrásokat, diákcsomagokat és akár ingyenes tanúsítvány-vouchert is találhatsz. Ez az az oldal, amit érdemes könyvjelzőzni és időnként ellenőrizni, mivel havonta frissítjük a tartalmat.

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

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

📣 Bejelentés - Új tananyag generatív AI-ról JavaScriptben

Ne hagyd ki az új generatív AI tananyagunkat!

Látogass el a https://aka.ms/genai-js-course oldalra, hogy elkezdhesd!

• Leckék az alapoktól a RAG-ig.
• Interakció történelmi karakterekkel GenAI és kísérőalkalmazásunk segítségével.
• Szórakoztató és lebilincselő narratíva, időutazásra indulhatsz!

Minden lecke tartalmaz egy feladatot, egy tudásellenőrzést és egy kihívást, amelyek segítenek az alábbi témák elsajátításában:

• Promptok és prompt mérnökség
• Szöveg- és képalkalmazás generálás
• Keresőalkalmazások

Látogass el a https://aka.ms/genai-js-course oldalra, hogy elkezdhesd!

🌱 Kezdés

Tanárok, néhány javaslatot is mellékeltünk, hogyan használhatjátok ezt a tananyagot. Örömmel várjuk visszajelzéseiteket a vitafórumunkon!

Tanulók, minden leckénél kezdjétek 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önböző tevékenységeket, és ellenőrizzétek megértéseteket az előadás utáni kvízzel.

A tanulási élmény fokozása érdekében kapcsolódjatok össze társaitokkal, hogy közösen dolgozzatok a projekteken! A viták ösztönözve vannak vitafórumunkon, ahol moderátoraink csapata válaszol kérdéseitekre.

Az oktatásotok további fejlesztése érdekében erősen ajánljuk, hogy fedezzétek fel a Microsoft Learn további tananyagait.

📋 Környezet beállítása

Ez a tananyag készen áll a fejlesztési környezetre! Amikor elkezditek, választhattok, hogy a tananyagot Codespace (böngészőalapú, telepítést nem igénylő környezet) vagy helyileg a számítógépeteken futtatjátok egy szövegszerkesztő, például Visual Studio Code használatával.

Hozd létre a repódat

Ahhoz, hogy könnyen elmentsd a munkádat, ajánlott, hogy készítsd el ennek a repónak a saját másolatát. Ezt úgy teheted meg, hogy a Use this template gombra kattintasz az oldal tetején. Ez egy új repót hoz létre a GitHub fiókodban a tananyag másolatával.

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

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

A tananyag futtatása Codespace-ben

Az általad létrehozott repó másolatában kattints a Code gombra, és válaszd a Open with Codespaces lehetőséget. Ez egy új Codespace-t hoz létre, amelyben dolgozhatsz.

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

Ahhoz, hogy helyileg futtasd a tananyagot a számítógépeden, szükséged lesz egy szövegszerkesztőre, egy böngészőre és egy parancssori eszközre. Az első leckénk, Bevezetés a programozási nyelvekbe és eszközökbe, végigvezet a különböző lehetőségeken ezekhez az eszközökhöz, hogy kiválaszthasd, mi működik a legjobban számodra.

Ajánlásunk, hogy használd a Visual Studio Code szerkesztőt, amely beépített Terminált is tartalmaz. A Visual Studio Code-ot itt töltheted le.

1. Klónozd a repódat 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 belül, és futtasd az alábbi parancsot, ahol <your-repository-url> az általad kimásolt URL:

   git clone <your-repository-url>
   

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

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

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

📂 Minden lecke tartalmaz:

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

Megjegyzés a kvízekről: Az összes kvíz a Quiz-app mappában található, összesen 48 darab, mindegyik három kérdésből áll. Elérhetők itt, a kvíz alkalmazás futtatható helyileg vagy telepíthető Azure-ra; 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 fejlesztői eszközök világába	Ismerd meg a legtöbb programozási nyelv alapjait és a szoftvereket, amelyek segítik a profi fejlesztők munkáját	Bevezetés a programozási nyelvekbe és fejlesztői eszközökbe	Jasmine
02	Első lépések	GitHub alapjai, csapatmunkával együtt	Hogyan használd a GitHubot a projektedben, hogyan működj együtt másokkal egy kódbázison	Bevezetés a GitHubba	Floor
03	Első lépések	Hozzáférhetőség	Ismerd meg a webes hozzáférhetőség alapjait	Hozzáférhetőség alapjai	Christopher
04	JS alapok	JavaScript adattípusok	A JavaScript adattípusok alapjai	Adattípusok	Jasmine
05	JS alapok	Függvények és metódusok	Ismerd meg a függvényeket és metódusokat, amelyekkel az alkalmazás logikai folyamatát kezelheted	Függvények és metódusok	Jasmine és Christopher
06	JS alapok	Döntéshozatal JS-ben	Tanuld meg, hogyan hozhatsz feltételeket a kódodban döntéshozatali módszerek segítségével	Döntéshozatal	Jasmine
07	JS alapok	Tömbök és ciklusok	Dolgozz adatokkal JavaScriptben tömbök és ciklusok segítségével	Tömbök és ciklusok	Jasmine
08	Terrárium	HTML gyakorlatban	Építsd meg a HTML-t egy online terrárium létrehozásához, a layout kialakítására összpontosítva	Bevezetés a HTML-be	Jen
09	Terrárium	CSS gyakorlatban	Építsd meg a CSS-t az online terrárium stílusának kialakításához, a CSS alapjaira összpontosítva, beleértve az oldal reszponzívvé tételét	Bevezetés a CSS-be	Jen
10	Terrárium	JavaScript zárványok, DOM manipuláció	Építsd meg a JavaScriptet, hogy a terrárium drag/drop interfészként működjön, a zárványokra és DOM manipulációra összpontosítva	JavaScript zárványok, DOM manipuláció	Jen
11	Gépírás játék	Gépírás játék készítése	Ismerd meg, hogyan használhatod a billentyűzet eseményeit a JavaScript alkalmazásod logikájának vezérlésére	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 hozhatod létre egy böngészőbővítmény első elemeit	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ása é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 segítségével, amelyeket helyi tárolóban tárolsz	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, webes teljesítmény	Használd a böngésző háttérfolyamatait az ikon kezelésére; ismerd meg a webes teljesítményt és néhány optimalizálási lehetőséget	Háttérfeladatok és teljesítmény	Jen
15	Űrjáték	Fejlettebb játékfejlesztés JavaScriptben	Ismerd meg az öröklődést osztályok és kompozíciók segítségével, valamint a Pub/Sub mintát, hogy felkészülj egy játék készítésére	Bevezetés a fejlettebb játékfejlesztésbe	Chris
16	Űrjáték	Rajzolás vászonra	Ismerd meg a Canvas API-t, amelyet elemek képernyőre rajzolására használnak	Rajzolás vászonra	Chris
17	Űrjáték	Elemek mozgatása a képernyőn	Fedezd fel, hogyan nyerhetnek mozgást az elemek a derékszögű koordináták és a Canvas API segítségével	Elemek mozgatása	Chris
18	Űrjáték	Ütközésérzékelés	Készítsd el az elemek ütközését és reakcióját egymásra billentyűleütések segítségével, és biztosíts egy cooldown funkciót a játék teljesítményének érdekében	Ütközésérzékelés	Chris
19	Űrjáték	Pontszám vezetése	Végezz matematikai számításokat a játék állapota és teljesítménye alapján	Pontszám vezetése	Chris
20	Űrjáték	Játék befejezése és újraindítása	Ismerd meg a játék befejezését és újraindítását, beleértve az eszközök tisztítását és a változók értékeinek visszaállítását	Befejezési feltétel	Chris
21	Banki alkalmazás	HTML sablonok és útvonalak egy webalkalmazásban	Ismerd meg, hogyan hozhatod létre egy többoldalas weboldal architektúrájának vázát útvonalak és HTML sablonok segítségével	HTML sablonok és útvonalak	Yohan
22	Banki alkalmazás	Bejelentkezési és regisztrációs űrlap készítése	Ismerd meg az űrlapok készítését és az érvényesítési rutinok kezelését	Űrlapok	Yohan
23	Banki alkalmazás	Adatok lekérése és használata	Hogyan áramlik az adat az alkalmazásodba és ki belőle, hogyan kérheted le, tárolhatod és kezelheted	Adatok	Yohan
24	Banki alkalmazás	Állapotkezelés koncepciói	Ismerd meg, hogyan őrzi meg az alkalmazásod az állapotot, és hogyan kezelheted programozottan	Állapotkezelés	Yohan
25	Böngésző/VScode kód	Munka VScode-dal	Ismerd meg, hogyan használj kódszerkesztőt	VScode kódszerkesztő használata	Chris
26	AI asszisztensek	Munka AI-vel	Ismerd meg, hogyan készíts saját AI asszisztenst	AI asszisztens projekt	Chris

🏫 Pedagógia

Tananyagunkat két kulcsfontosságú pedagógiai elv alapján terveztük:

• projektalapú tanulás
• gyakori kvízek

A program megtanítja a JavaScript, HTML és CSS alapjait, valamint a legújabb eszközöket és technikákat, amelyeket a mai webfejlesztők használnak. A diákok lehetőséget kapnak arra, hogy gyakorlati tapasztalatot szerezzenek gépírás 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 üzleti banki alkalmazás készítésével. A sorozat végére a diákok szilárd webfejlesztési ismereteket szereznek.

🎓 A tananyag első néhány leckéjét Learn Path formájában is elvégezheted a Microsoft Learn platformon!

A tartalom projektekhez való igazításával a folyamat érdekesebbé válik a diákok számára, és a koncepciók megértése is fokozódik. Emellett több JavaScript alapokat bemutató kezdő leckét írtunk, amelyekhez videók is társulnak a "Beginners Series to: JavaScript" videósorozatból, amelynek néhány szerzője hozzájárult ehhez a tananyaghoz.

Ezenkívül egy alacsony tétű kvíz az óra előtt segít a diákoknak a téma iránti érdeklődés felkeltésében, míg egy második kvíz az óra után biztosítja a további megértést. Ez a tananyag rugalmas és szórakoztató, és teljes egészében 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 elkerültük a JavaScript keretrendszerek bevezetését, hogy a webfejlesztőként szükséges alapvető készségekre koncentráljunk, mielőtt keretrendszert alkalmaznánk, a tananyag befejezése után jó következő lépés lehet a Node.js megismerése egy másik videósorozat segítségével: "Beginner Series to: Node.js".

Látogasd meg Magatartási kódexünket és Hozzájárulási irányelveinket. Örömmel fogadjuk az é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 a repo gyökérmappájában írd be: docsify serve. A weboldal a localhost 3000-es portján lesz elérhető: localhost:3000.

📘 PDF

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

🎒 Egyéb kurzusok

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

• Generatív AI kezdőknek
• Generatív AI kezdőknek .NET
• Generatív AI JavaScripttel
• Generatív AI Java-val
• AI kezdőknek
• Adattudomány kezdőknek
• ML kezdőknek
• Kiberbiztonság kezdőknek
• Webfejlesztés kezdőknek
• IoT kezdőknek
• XR fejlesztés kezdőknek
• GitHub Copilot elsajátítása ügynöki használatra
• GitHub Copilot elsajátítása C#/.NET fejlesztők számára
• Válassza ki saját Copilot kalandját

Segítség kérése

Ha elakad, vagy kérdése van az AI alkalmazások építésével kapcsolatban, csatlakozzon:

Ha termék-visszajelzést szeretne adni, vagy hibákba ütközik az építés során, látogasson el ide:

Licenc

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

---

Felelősség kizárása:
Ez a dokumentum az Co-op Translator AI fordítási szolgáltatás segítségével került lefordításra. Bár törekszü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 nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.