28 KiB

Raw Permalink Blame History

Kövesd az alábbi lépéseket, hogy elkezdhesd használni ezeket az anyagokat:

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

Webfejlesztés kezdőknek - Tananyag

Tanuld meg a webfejlesztés alapjait a Microsoft Cloud Advocates 12 hetes átfogó kurzusával. A 24 lecke mindegyike JavaScriptet, CSS-t és HTML-t tanít 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ízeken, vitákon és gyakorlati feladatokon. Fejleszd készségeidet és optimalizáld a tudásod megőrzését hatékony, projektalapú pedagógiánkkal. Kezdd el a kódolási utadat még ma!

🌐 Többnyelvű támogatás

GitHub Action segítségével támogatott (Automatikus és mindig naprakész)

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ó forrásokat, diákcsomagokat és akár ingyenes tanúsítványkuponokat is találhatsz. Ez az az oldal, amit érdemes könyvjelzőzni és időről időre 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 a projektet

📣 Bejelentés - Új tananyag Generatív AI-ról JavaScripthez

Ne hagyd ki az új Generatív AI tananyagot!

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

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

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

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

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

🌱 Kezdés

Tanárok, néhány javaslatot is mellékeltünk arról, 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őzetes kvízzel, majd olvassátok el az előadási anyagot, végezzétek el a különböző tevékenységeket, és ellenőrizzétek a megértéseteket az utólagos kvízzel.

A tanulási élmény fokozása érdekében dolgozzatok együtt társaitokkal a projekteken! A viták ösztönzöttek a vitafórumunkon, ahol moderátoraink válaszolnak a kérdéseitekre.

További tanulmányaitokhoz erősen ajánljuk, hogy fedezzétek fel a Microsoft Learn további tananyagaiért.

📋 A környezet beállítása

Ez a tananyag egy előre elkészített fejlesztési környezettel rendelkezik! Ahogy elkezded, választhatsz, hogy a tananyagot egy Codespace (böngészőalapú, telepítést nem igénylő környezet) vagy a saját számítógépeden, egy szövegszerkesztővel, például a Visual Studio Code segítségével futtatod.

Hozd létre a repódat

Ahhoz, hogy könnyen elmentsd a munkádat, javasoljuk, hogy készítsd el ennek a repónak a saját másolatát. Ezt a Use this template gombra kattintva teheted meg 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:

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

A tananyag futtatása Codespace-ben

A saját másolatodban, amit létrehoztál, kattints a Code gombra, majd válaszd a Open with Codespaces lehetőséget. Ez létrehoz egy új Codespace-et, ahol dolgozhatsz.

!Codespace./images/createcodespace.png)

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 az 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 a Visual Studio Code használata szerkesztőként, amely beépített Terminált is tartalmaz. A Visual Studio Code-ot innen töltheted le.

Klónozd a repódat a számítógépedre. Ezt a Code gombra kattintva és az URL másolásával teheted meg:

!CodeSpace

Ezután nyisd meg a Terminált a Visual Studio Code alkalmazásban, és futtasd az alábbi parancsot, ahol <your-repository-url> helyére illeszd be az imént másolt URL-t:
```
git clone <your-repository-url>
```
Nyisd meg a mappát a Visual Studio Code-ban. Ezt a File gombra kattintva teheted meg.

Nyissa meg a mappát, és válassza ki az éppen klónozott mappát. Ajánlott Visual Studio Code bővítmények:

Live Server - HTML oldalak előnézetéhez a Visual Studio Code-ban

Copilot - hogy gyorsabban írhass kódot

📂 Minden lecke tartalmazza:

opcionális vázlatrajz
opcionális kiegészítő videó
előzetes bemelegítő kvíz
írott lecke
projektalapú leckéknél lépésről lépésre útmutatók a projekt elkészítéséhez
tudásellenőrzések
egy kihívás
kiegészítő olvasmány
feladat
utólagos 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. Ezek elérhetők itt, a kvíz alkalmazás helyben futtatható vagy Azure-ra telepíthető; 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 az eszközök világába	Ismerd meg a legtöbb programozási nyelv alapjait és a szoftvereket, amelyek segítik a fejlesztőket a munkájukban	Bevezetés a programozási nyelvekbe és az eszközök világába	Jasmine
02	Első lépések	GitHub alapjai, csapatmunka bemutatása	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	Akadálymentesség	Ismerd meg a webes 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, hogyan kezelheted az alkalmazás logikai folyamatait függvényekkel és metódusokkal	Függvények és metódusok	Jasmine és Christopher
06	JS alapok	Döntéshozatal JS-ben	Tanuld meg, hogyan hozhatsz 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 adatokkal JavaScript tömbök és ciklusok segítségével	Tömbök és ciklusok	Jasmine
08	Terrárium	HTML a gyakorlatban	Építsd meg a HTML-t egy online terráriumhoz, a layout kialakítására összpontosítva	Bevezetés a HTML-be	Jen
09	Terrárium	CSS a gyakorlatban	Építsd meg a CSS-t az online terrárium stílusá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 a DOM manipulációra összpontosítva	JavaScript zárványok, DOM manipuláció	Jen
11	Gépíró játék	Gépíró 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 készítheted el egy böngészőbővítmény első elemeit	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 a bővítmény 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	Haladó játékfejlesztés JavaScript-tel	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 haladó 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 mozgathatók az elemek a derékszögű koordináták és a Canvas API segítségével	Mozgó elemek	Chris
18	Űrjáték	Ütközésérzékelés	Készítsd el, hogy az elemek ütközzenek és reagáljanak egymásra billentyűleütések segítségével, és biztosíts egy lehűlési 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, hogyan fejezheted be és indíthatod újra a játékot, beleértve az erőforrások tisztítását és a változók értékeinek visszaállítását	A befejezés feltétele	Chris
21	Banki alkalmazás	HTML sablonok és útvonalak egy webalkalmazásban	Ismerd meg, hogyan hozhatsz 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 ű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 áramlik az adat az alkalmazásodba és onnan ki, hogyan kérheted le, tárolhatod és kezelheted	Adatok	Yohan
24	Banki alkalmazás	Állapotkezelés koncepciói	Ismerd meg, hogyan tartja meg az alkalmazásod az állapotot, és hogyan kezelheted azt programozottan	Állapotkezelés	Yohan
25	Böngésző/VScode kód	Munka a VScode-dal	Ismerd meg, hogyan használj kódszerkesztőt	VScode kódszerkesztő használata	Chris
26	AI asszisztensek	Munka AI-val	Ismerd meg, hogyan készíthetsz 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 mai webfejlesztők által használt legújabb eszközöket és technikákat. A hallgatók lehetőséget kapnak arra, hogy gyakorlati tapasztalatokat szerezzenek egy gépíró 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 egy üzleti banki alkalmazás elkészítésével. A sorozat végére a hallgatók szilárd ismereteket szereznek a webfejlesztésről.

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

A tartalom projektekhez való igazításával a tanulási folyamat élvezetesebbé válik a hallgatók számára, és a koncepciók jobban rögzülnek. Emellett több JavaScript alapozó leckét is írtunk, amelyek videókkal párosulnak a "Kezdők sorozata: JavaScript" videógyűjteménybő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 hallgatónak 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 rögzülést. Ez a tananyag rugalmas és szórakoztató módon lett kialakítva, és egészében vagy részleteiben 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 webfejlesztőként szükséges alapvető készségekre koncentráljunk, a tananyag elvégzése után jó következő lépés lehet a Node.js megismerése egy másik videógyűjtemény segítségével: "Kezdők sorozata: Node.js".

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

🧭 Offline hozzáférés

Ezt 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 elérhető itt.

🎒 Egyéb kurzusok

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

Licenc

Ez a repozitórium az MIT licenc alatt érhető el. További információért lásd a LICENSE fájlt.

Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás Co-op Translator segítségével lett lefordítva. 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.

28 KiB Raw Permalink Blame History