33 KiB

Raw Blame History

Webfejlesztés kezdőknek - Tananyag

Ismerd meg a webfejlesztés alapjait Microsoft Cloud Advocates 12 hetes átfogó tanfolyamán. A 24 leckéből mindegyik a JavaScript, CSS és HTML témaköreit dolgozza fel gyakorlati projektek révén, 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 megtartását hatékony, projektalapú tanítási módszerünkkel. Kezdd el a kódolási utadat még ma!

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

Kövesd az alábbi lépéseket, hogy elindulj ezzel az anyaggal:

Repository fork-olása: Kattints ide
Repository klónozása: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Csatlakozz az Azure AI Foundry Discord szerverhez, és ismerkedj 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)

Szeretnéd helyben klónozni?

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

Ha szeretnél további fordítási nyelveket támogatni, azok itt vannak felsorolva

🧑‍🎓 Diák vagy?

Látogass el a Diákok oldalára, ahol kezdő forrásokat, Diák csomagokat, és még ingyenes tanúsítvány-vouchereket is találhatsz. Ezt az oldalt érdemes könyvjelzőzni, és időről időre visszanézni, mert havonta frissül a tartalom.

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

Új kihívás érkezett, keresd a "GitHub Copilot Agent Challenge 🚀" címkét a legtöbb fejezetben. Ez egy új kihívás, amelyet GitHub Copilot és Agent módban kell teljesíteni. 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étrehoz, szerkeszt, parancsokat futtat és még sok mást.

📣 Bejelentés - Új generatív AI projekt

Új AI Asszisztens projekt érkezett, nézd meg projekt

📣 Bejelentés - Új tananyag Generatív AI JavaScript-hez

Ne hagyd ki új Generatív AI tananyagunkat!

Látogass el ide: https://aka.ms/genai-js-course hogy elindulj!

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

Minden lecke tartalmaz egy feladatot, tudásellenőrzést és egy kihívást, hogy eligazodj olyan témákban, mint:

Promptolás és prompt tervezés
Szöveges és képes alkalmazás générálás
Keresőalkalmazások

Látogass el ide: https://aka.ms/genai-js-course hogy elindulj!

🌱 Első lépések

Tanárok, ajánlásokat adtunk a tananyag használatához. Örömmel várjuk visszajelzéseteket vitafórumunkon!

Tanulók minden leckéhez kezdjetek 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 tudásotokat az előadás utáni kvízzel.

A tanulási élmény fokozásához dolgozzatok közösen a projekteken társaiddal! A vitákat bátorítjuk a vitafórumunkon, ahol moderátoraink segítséget nyújtanak kérdéseitekre.

Továbbá ajánljuk, hogy mélyítsd tudásodat a Microsoft Learn platformján található további tananyagaink segítségével.

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

Ez a tananyag már előkészített fejlesztői környezettel érkezik! Kezdetnek választhatod a tananyagot Codespace-ben futtatni (böngésző alapú, telepítés nélküli környezet), vagy helyileg a számítógépeden egy szövegszerkesztővel, például Visual Studio Code használva.

Repository létrehozása

Az egyszerű mentés érdekében érdemes saját másolatot készítened ebből a repository-ból. Ezt a lap tetején található Használd ezt a sablont gombra kattintva teheted meg. Ezzel egy új repository jön létre GitHub fiókodban a tananyag másolatával.

Kövesd a lépéseket:

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

Tananyag futtatása Codespace-ben

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

Tananyag futtatása helyileg a számítógépen

A tananyag helyi futtatásához szükséged lesz egy szövegszerkesztőre, böngészőre és egy parancssorra. Első leckénk, a Programozási nyelvek és eszközök bevezetése, végigvezet a különböző eszközválasztási lehetőségeken, hogy megtaláld, ami neked a legjobb.

Ajánlásunk a Visual Studio Code használata szerkesztőként, amely rendelkezik beépített Terminállal. A Visual Studio Code-ot innen töltheted le: ide.

Klónozd a repository-t a számítógépedre. Ehhez kattints a Code gombra, és másold a URL-t:

CodeSpace Ezután nyissa meg a Terminált a Visual Studio Code alkalmazásban, és futtassa a következő parancsot, cserélve le a <your-repository-url> részt a most másolt URL-re:
```
git clone <your-repository-url>
```
Nyissa meg a mappát a Visual Studio Code-ban. Ezt úgy teheti meg, hogy a Fájl > Mappa megnyitása menüpontra kattint, majd kiválasztja a nemrég klónozott mappát.

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 leckében megtalálható:

választható vázlatkép
választható kiegészítő videó
elő-lecke bemelegítő kvíz
írott lecke
projektalapú leckék esetén lépésről lépésre útmutatók a projekt megépítéséhez
tudásellenőrzések
kihívás
kiegészítő olvasmány
lecke 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 helyben is futtatható vagy Azure-ra telepíthető; kövesse 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ő lépések	Bevezetés a programozásba és a szakmai eszközökbe	Ismerje meg a legtöbb programozási nyelv alapjait és a professzionális fejlesztők munkáját segítő szoftvereket	Bevezetés a programozási nyelvekbe és az eszközökbe	Jasmine
02	Kezdő lépések	A GitHub alapjai, csapatmunkával	Hogyan használja a GitHubot projektjeiben, és hogyan működjön együtt másokkal egy kódalapon	Bevezetés a GitHubba	Floor
03	Kezdő lépések	Hozzáférhetőség	Ismerkedjen meg a webes hozzáférhetőség alapjaival	Hozzáférhetőség alapjai	Christopher
04	JS Alapok	JavaScript adattípusok	Ismerkedjen meg a JavaScript adattípusok alapjaival	Adattípusok	Jasmine
05	JS Alapok	Függvények és metódusok	Ismerkedjen meg a függvényekkel és metódusokkal, amelyek az alkalmazás logikáját kezelik	Függvények és metódusok	Jasmine és Christopher
06	JS Alapok	Döntéshozatal JS-ben	Ismerje meg, hogyan hozzon létre feltételeket a kódjában döntéshozatali módszerekkel	Döntéshozatal	Jasmine
07	JS Alapok	Tömbök és ciklusok	Dolgozzon adatokkal tömbök és ciklusok segítségével JavaScript-ben	Tömbök és ciklusok	Jasmine
08	Terrárium	HTML gyakorlatban	Építse meg az online terrárium HTML-ját, fókuszálva a layout létrehozására	Bevezetés a HTML-be	Jen
09	Terrárium	CSS gyakorlatban	Építse meg az online terrárium CSS-ét, fókuszálva a CSS alapjaira, beleértve az oldal reszponzívvá tételét	Bevezetés a CSS-be	Jen
10	Terrárium	JavaScript bezárások, DOM manipuláció	Készítse el a JavaScript-et, amely a terráriumot drag/drop felületté alakítja, fókuszálva a bezárásokra és a DOM manipulációra	JavaScript bezárások és DOM manipuláció	Jen
11	Gépelős játék	Gépelős játék készítése	Tanulja meg, hogyan használjon billentyűzet eseményeket JavaScript alkalmazása logikájának vezérléséhez	Eseményvezérelt programozás	Christopher
12	Zöld böngészőbővítmény	Böngészőkkel való munka	Ismerje meg a böngészők működését, történetét és hogyan hozhat létre egy első bővítmény elemeket	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	Készítse el a JavaScript elemeket bővítményéhez az API hívásokhoz, helyi tárolóban tárolt 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álja a böngésző háttérfolyamatait a bővítmény ikon kezelésére; ismerje meg a web teljesítményt és néhány optimalizálást	Háttérfeladatok és teljesítmény	Jen
15	Űrjáték	Fejlettebb játékkészítés JavaScript-tel	Ismerje meg az öröklődést osztályokkal és komponálással, valamint a Pub/Sub mintát, felkészülve egy játék fejlesztésére	Bevezetés a fejlett játékkészítésbe	Chris
16	Űrjáték	Rajzolás vászonra	Ismerje meg a Canvas API-t, amely elemeket rajzol a képernyőre	Rajzolás vászonra	Chris
17	Űrjáték	Mozgatás a képernyőn	Fedezze fel, hogyan mozdíthatók el az elemek a kartézián koordináták és a Canvas API használatával	Mozgatás képernyőn	Chris
18	Űrjáték	Ütközés érzékelés	Tegye lehetővé, hogy az elemek ütközzenek, reagáljanak egymásra billentyűnyomásra, és biztosítson lehűlési funkciót a játék hatékonyságához	Ütközés érzékelés	Chris
19	Űrjáték	Pontszám vezetése	Végezzen matematikai számításokat a játék állapota és teljesítménye alapján	Pontszámlálás	Chris
20	Űrjáték	A játék vége és újraindítása	Ismerje 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ók alaphelyzetbe állítását	A befejezés feltétele	Chris
21	Banki alkalmazás	HTML sablonok és útvonalak egy webalkalmazásban	Ismerje meg, hogyan készítsen többoldalas webhely felépítését routing és HTML sablonok használatával	HTML sablonok és útvonalak	Yohan
22	Banki alkalmazás	Bejelentkezési és regisztrációs űrlap készítése	Ismerje meg az űrlapkészítést és a validációs rutinok kezelését	Űrlapok	Yohan
23	Banki alkalmazás	Adatlekérés és -használati módszerek	Hogyan áramlik az adat az alkalmazásában, hogyan kérheti le, tárolhatja és dobhatja el	Adatok	Yohan
24	Banki alkalmazás	Állapotkezelési fogalmak	Ismerje meg, hogyan tartja meg az alkalmazás az állapotot és hogyan kezelje programozottan	Állapotkezelés	Yohan
25	Böngésző/VScode kód	Munka a VScode-dal	Ismerje meg a kódszerkesztő használatát	VScode kódszerkesztő használata	Chris
26	AI asszisztensek	Munka AI-val	Ismerje meg, hogyan készíthet saját AI asszisztenst	AI asszisztens projekt	Chris

🏫 Pedagógia

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

projekt-alapú tanulás
gyakori kvízek

A program bemutatja a JavaScript, HTML és CSS alapjait, valamint a legújabb eszközöket és technikákat, amelyeket a mai webfejlesztők használnak. A hallgatóknak lehetőségük lesz gyakorlati tapasztalatokat szerezni egy gépelős játék, virtuális terrárium, környezetbarát böngészőbővítmény, űrinváziós játék és egy üzleti banki alkalmazás építésével. A sorozat végére szilárd alapokat szereznek a webfejlesztésben.

🎓 Az első néhány leckét ebben a tananyagban a Microsoft Learn-en egy Tanulási útként is elvégezheti!

Azáltal, hogy a tartalom projektekhez kapcsolódik, a folyamat élvezetesebb a diákok számára, és fokozza a fogalmak megőrzését. Több bevezető leckét is írtunk a JavaScript alapjai témában, amelyeket a "Beginners Series to: JavaScript" videósorozat videóival egészítettünk ki, melynek 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íti a hallgató tanulási szándékát, míg egy második kvíz az óra után a további megőrzést biztosítja. Ez a tananyag rugalmas és szórakoztató jellegű, egészben vagy részleteiben is elvégezhető. A projektek kicsiben indulnak, és a 12 hetes ciklus végére egyre összetettebbek lesznek.

Bár szándékosan kerültük a JavaScript keretrendszerek bevezetését, hogy a webfejlesztői alapokat fejlesszük bevezetőként egy keretrendszer használata előtt, a tananyag befejezésének jó következő lépése lehet a Node.js elsajátítása egy másik videósorozaton keresztül: "Beginner Series to: Node.js".

Tekintse meg Magatartási kódexünket és a Hozzájárulási útmutatónkat. Várjuk konstruktív visszajelzéseit!

🧭 Offline hozzáférés

Ezt a dokumentációt offline is futtathatja a Docsify használatával. Forkolja ezt a repót, telepítse a Docsify-t a helyi gépére, majd a repó gyökérmappájában írja be a docsify serve parancsot. A weboldal a 3000-es porton lesz elérhető a localhoston: localhost:3000.

📘 PDF

Az összes leckéről készült PDF itt található: ide kattintva.

🎒 További tanfolyamok

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

LangChain

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

Generatív MI sorozat

Alapvető tanulás

Copilot sorozat

Segítség kérése

Ha elakadsz, vagy kérdéseid vannak az MI-alkalmazások fejlesztésével kapcsolatban, csatlakozz más tanulókhoz és tapasztalt fejlesztőkhöz az MCP témájú beszélgetésekben. Ez egy támogató közösség, ahol szívesen fogadnak kérdéseket, és a tudás szabadon megosztott.

Ha termék visszajelzésed vagy hibákat tapasztalsz a fejlesztés során, látogass el ide:

Licenc

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

Jogi nyilatkozat: Ez a dokumentum az AI fordító szolgáltatás Co-op Translator segítségével készült. Bár igyekszünk pontosak lenni, 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. Fontos információk esetén javasolt szakmai emberi fordítást igénybe venni. 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.

33 KiB Raw Blame History