Webfejlesztés kezdőknek - Tanmenet

Ismerkedjen meg a webfejlesztés alapjaival a Microsoft Cloud Advocates által készített 12 hetes átfogó tanfolyamunkkal. Mind a 24 lecke a JavaScript, CSS és HTML témakörébe nyújt betekintést gyakorlati projektek segítségével, mint például terráriumok, böngészőkiegészítők é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 megőrzését hatékony, projekten alapuló oktatásunkkal. Kezdje el a kódolási kalandot még ma!

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

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

1. Forkolja a tárházat: Kattintson ide
2. Klónozza a tárházat: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Csatlakozzon az Azure AI Foundry Discordhoz, hogy találkozzon szakértőkkel és fejlesztőtársaival

🌐 Többnyelvű támogatás

GitHub Action segítségével támogatott (Automatizált és Mindig naprakész)

Arab | Bengáli | Bolgár | Burmese (Myanmar) | Kínai (egyszerűsített) | Kínai (hagyományos, Hong Kong) | 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 | Khmer | Koreai | Litván | Maláj | Malayalam | Marathi | Nepáli | Nigériai pidgin | Norvég | Perzsa (Farsi) | 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 (Filippínó) | Tamil | Telugu | Thai | Török | Ukrán | Urdu | Vietnami

Szeretné helyben 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ások nélkül szeretné klónozni, használja a sparse checkout-ot:

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"

Ez mindent megad, amire szüksége van a tanfolyam elvégzéséhez sokkal gyorsabb letöltéssel.

Ha további támogatott fordítási nyelveket szeretne, azok itt találhatók

🧑‍🎓 Diák vagy?

Látogass el a Diák Hub oldalra, ahol kezdő erőforrásokat, diák csomagokat és akár ingyenes tanúsítvány utalványokat is találsz. Ezt az oldalt érdemes rendszeresen könyvjelzőzni, mivel havonta frissítjük a tartalmat.

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

Új kihívás került hozzáadásra "GitHub Copilot Agent Challenge 🚀" néven a legtöbb fejezetben. Ez egy új kihívás, amit a GitHub Copilot és az Agent mód segítségével teljesíthetsz. 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 még sok másra.

📣 Bejelentés - Új projekt a Generatív Mesterséges Intelligencia használatával

Új AI asszisztens projekt került hozzáadásra, nézd meg a projektdokumentációt

📣 Bejelentés - Új tanmenet JavaScript Generatív MI témában jelent meg

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

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

• Leckék az alapoktól a RAG-ig.
• Történelmi szereplőkkel léphetsz interakcióba a Generatív MI és kísérő alkalmazásunk segítségével.
• Szórakoztató és lebilincselő történet, időutazás élményével!

Minden lecke egy feladatot, egy tudásellenőrzést és egy kihívást tartalmaz, hogy segítsen a következő témák elsajátításában:

• Promptolás és prompt mérnöki munka
• Szöveg- és képalkalmazás generálás
• Keresőalkalmazások

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

🌱 Kezdés

Tanárként néhány javaslatot ide tettünk közzé a tanmenet használatára. Szívesen fogadjuk visszajelzésedet vitafórumunkban!

Tanulók, minden lecke előtt végezzetek bevezető kvízt, majd olvassátok el az anyagot, végezzétek el a feladatokat, és teszteljétek tudásotokat az utólagos kvízzel.

A tanulási élmény fokozása érdekében dolgozzatok együtt diáktársaitokkal a projekteken! A beszélgetések ösztönzöttek a vitafórumunkon, ahol moderátor csapatunk készen áll válaszolni kérdéseitekre.

A tanulmányaitok elősegítéséhez erősen ajánljuk a Microsoft Learn platform további anyagainak felfedezését.

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

Ez a tanmenet egy működő fejlesztői környezettel érkezik! Kezdésként választhatjátok a tanmenet futtatását Codespace-ben (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 segítségével.

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

A munkád biztonságos mentése érdekében ajánlott létrehoznod a saját példányodat ebből a tárházból. Ezt megteheted az oldal tetején található Use this template gombra kattintva. Ez egy új tárházat hoz létre GitHub fiókodban, a tanmenet másolatával.

Lépések:

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

Tanmenet futtatása Codespace-ben

A tárházadban, amit létrehoztál, kattints a Code gombra, majd válaszd az Open with Codespaces opciót. Ez létrehoz egy új Codespace-t a munkához.

Tanmenet futtatása helyben a számító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, Bevezetés a programozási nyelvekbe és eszközökbe segít több lehetőség közötti választásban ezek közül.

Ajánljuk a Visual Studio Code használatát szerkesztőként, amely beépített Terminált is tartalmaz. A Visual Studio Code letölthető innen.

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

   CodeSpace

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

   git clone <your-repository-url>
   

2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt úgy teheted meg, hogy rákattintasz a File > Open Folder menüpontra, majd kiválasztod 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 - segít gyorsabban kódot írni

📂 Minden lecke tartalmaz:

• opcionális vázlatrajzot
• opcionális kiegészítő videót
• tanóra előtti bemelegítő kvízt
• írott leckét
• projekt alapú leckékhez lépésről lépésre útmutatókat a projekt megépítéséhez
• tudásellenőrzéseket
• kihívást
• kiegészítő olvasnivalót
• feladatot
• tanóra utáni kvízt

Megjegyzés a kvízekhez: 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 futtatható helyileg vagy telepíthető Azure-ra; kövesd az utasításokat a quiz-app mappában.

🗃️ Leckék

	Projekt neve	Tanított fogalmak	Tanulási célok	Hivatkozott lecke	Szerző
01	Kezdés	Bevezetés a programozásba és a szakmai eszközökbe	Ismerd meg a legtöbb programozási nyelv alapjait és azokat a szoftvereket, amelyek segítik a profi fejlesztők munkáját	Bevezetés a programozási nyelvekbe és eszközökbe	Jasmine
02	Kezdés	A GitHub alapjai, beleértve a csapatmunkát	Hogyan használd a GitHubot a projektedben, és hogyan működj együtt másokkal kódbázison	Bevezetés a GitHubba	Floor
03	Kezdés	Akadálymentesség	Ismerd meg a web akadálymentesség alapjait	Akadálymentessé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 az alkalmazás logikájának kezeléséhez	Függvények és metódusok	Jasmine és Christopher
06	JS alapok	Döntéshozatal JS-ben	Tanuld meg, hogyan hozz létre feltételeket a kódodban döntéshozatali módszerekkel	Döntéshozatal	Jasmine
07	JS alapok	Tömbök és ciklusok	Dolgozz adatkezeléssel tömbök és ciklusok segítségével JavaScriptben	Tömbök és ciklusok	Jasmine
08	Terrárium	HTML gyakorlatban	Építsd meg a HTML-t egy online terráriumhoz, a layout készítésére fókuszálva	Bevezetés a HTML-be	Jen
09	Terrárium	CSS gyakorlatban	Építsd meg a CSS-t az online terráriumhoz, a CSS alapjaira fókuszálva, beleértve az oldal reszponzívvá tételét	Bevezetés a CSS-be	Jen
10	Terrárium	JavaScript closures, DOM manipuláció	Építsd meg a JavaScript-et, hogy a terrárium drag/drop felületként működjön, fókuszálva a closures és a DOM kezelésére	JavaScript closures, DOM manipuláció	Jen
11	Gépelős játék	Gépelős játék építése	Tanuld meg, hogyan használd a billentyűzetes eseményeket appod 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	Tanuld meg, hogyan működnek a böngészők, történetüket és hogyan használd a böngészőbővítmény első elemeinek létrehozásához	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 helyi tároló változók használata	Építsd meg a böngészőbővítményed JavaScript elemeit egy API meghívásához helyi tároló változókkal	API-k, űrlapok és helyi tárolás	Jen
14	Zöld böngészőbővítmény	Háttérfolyamatok a böngészőben, web teljesítmény	Használd a böngésző háttérfolyamatait az ikonjának kezelésére; ismerd meg a web teljesítményét és néhány optimalizálási módszert	Háttérfeladatok és teljesítmény	Jen
15	Űr játék	Fejlettebb játékfejlesztés JavaScript-tel	Ismerd meg az öröklést osztályok és összetétel (composition) használatával, valamint a Pub/Sub mintát, hogy előkészülj egy játék építésére	Bevezetés a fejlett játékfejlesztésbe	Chris
16	Űr játék	Rajzolás a vászonra	Ismerd meg a Canvas API-t, amellyel elemeket rajzolhatunk a képernyőre	Rajzolás a vászonra	Chris
17	Űr játék	Mozgatás a képernyőn	Fedezd fel, hogyan kaphatnak mozgást az elemek a kartézián koordináták és a Canvas API segítségével	Elemek mozgatása	Chris
18	Űr játék	Ütközésészlelés	Készíts ütközéseket és reagálást az elemek között billentyűleütésekkel és adj hozzá hűlési funkciót a játék teljesítményének biztosítására	Ütközésészlelés	Chris
19	Űr játék	Pontszám nyilvántartás	Végez matematika műveleteket a játék állapota és teljesítménye alapján	Pontszámlálás	Chris
20	Űr játék	A játék befejezése és újraindítása	Tanuld meg a játék befejezését és újraindítását, beleértve az erőforrások takarítását és a változó értékek visszaállítását	A befejezési feltétel	Chris
21	Banki alkalmazás	HTML sablonok és útvonalak egy webalkalmazásban	Tanuld meg, hogyan készítsd el egy többoldalas weboldal felépítését routinggal és HTML sablonokkal	HTML sablonok és útvonalak	Yohan
22	Banki alkalmazás	Bejelentkezési és regisztrációs űrlap készítése	Tanuld meg az űrlapkészítést és az érvényesítési rutinok kezelését	Űrlapok	Yohan
23	Banki alkalmazás	Adatok lekérése és használata	Hogyan áramlanak be és ki az adatok az alkalmazásból, hogyan kérd le, tárold és szabadulj meg tőlük	Adatok	Yohan
24	Banki alkalmazás	Állapotkezelés fogalmai	Tanuld meg, hogyan őrzi meg az alkalmazás az állapotot és hogyan kezeld programozottan	Állapotkezelés	Yohan
25	Böngésző/VScode kód	Munka VScode-dal	Tanulj meg kódszerkesztőt használni	VScode kódszerkesztő használata	Chris
26	Mesterséges intelligencia asszisztensek	Munkavégzés MI-vel	Tanuld meg, hogyan építsd fel a saját MI asszisztensed	MI asszisztens projekt	Chris

🏫 Pedagógia

Tananyagunk két fontos pedagógiai elv szerint készült:

• 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 nyílik gyakorlati tapasztalat szerzésére gépelős játék, virtuális terrárium, környezetbarát böngészőbővítmény, űrhajós játék és üzleti bankalkalmazás építésével. A sorozat végére alapos webfejlesztési tudásra tesznek szert.

🎓 Az első néhány leckét ebben a tananyagban Microsoft Learn-ön Tanulási útvonalként is végezheted!

Azáltal, hogy a tartalom a projektekhez igazodik, a folyamat érdekesebb a diákok számára, és a fogalmak megtartása is javul. Több kezdő leckét is írtunk JavaScript alapokból, hogy megismertessük az alapfogalmakat, kiegészítve a "Beginners Series to: JavaScript" videósorozat néhány szerzőjének oktató videóival, akik szintén hozzájárultak ehhez a tananyaghoz.

Továbbá egy alacsony tétű kvíz óra előtt beállítja a diák szándékát a tanulásra, míg egy második kvíz óra után elősegíti a tudás mélyebb rögzítését. Ez a tananyag rugalmas és szórakoztató, egészben vagy részleteiben is végezhető. A projektek kicsiben indulnak és fokozatosan egyre összetettebbek lesznek a 12 hetes ciklus végére.

Bár tudatosan kerültük a JavaScript keretrendszerek bevezetését, hogy az alapvető webfejlesztői készségekre koncentráljunk a keretrendszerhasználat előtt, a tananyag elvégzése után jó következő lépés a Node.js megismerése egy másik videósorozat segítségével: "Beginner Series to: Node.js".

Látogasd meg Viselkedési Kódexünket és Hozzájárulás irányelveinket. Szívesen fogadjuk építő jellegű visszajelzéseidet!

🧭 Offline hozzáférés

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

📘 PDF

A PDF az összes leckéről megtalálható itt.

🎒 Egyéb kurzusok

Csapatunk más kurzusokat 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 AI alkalmazások fejlesztésével kapcsolatban. Csatlakozz tanulótársaidhoz és tapasztalt fejlesztőkhöz a MCP témájú 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 visszajelzésed vagy hibák vannak a fejlesztés közben, 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.

---

Felelősség kizárása:
Ezt a dokumentumot az AI fordító szolgáltatás Co-op Translator segítségével fordítottuk. 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 a saját nyelvén tekintendő hivatalos forrásnak. Kritikus információk esetén professzionális emberi fordítás javasolt. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy félreértelmezésekért.