26 KiB

Raw Blame History

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

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 során JavaScript, CSS és HTML ismereteket sajátíthatsz el 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épességeidet és optimalizáld a tudásod projektalapú tanulási módszerünkkel. Kezdd el a kódolási utadat még ma!

🧑‍🎓 Diák vagy?

Látogasd meg a Student Hub oldalt, 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őnként visszanézni, mivel havonta frissítjük a tartalmat.

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

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

Látogasd meg a https://aka.ms/genai-js-course oldalt, hogy elkezdhesd!

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

Minden lecke tartalmaz egy feladatot, egy tudásellenőrzőt és egy kihívást, hogy megtanulhasd az alábbi témákat:

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

Látogasd meg a https://aka.ms/genai-js-course oldalt, hogy elkezdhesd!

🌱 Kezdés

Tanárok, adtunk néhány javaslatot arra, 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 kapcsolódjatok össze társaitokkal, hogy együtt dolgozzatok 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 tananyagainkat.

📋 Környezet beállítása

Ez a tananyag egy előre elkészített fejlesztési környezettel rendelkezik! Kezdésként 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 hozz létre egy saját másolatot erről a repóról. 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, és válaszd a Open with Codespaces lehetőséget. Ez létrehoz egy új Codespace-t, 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 eszközökbe, végigvezet a különböző lehetőségeken, hogy kiválaszthasd, mi működik a legjobban számodra.

Ajánlásunk a Visual Studio Code használata, amely beépített Terminállal is rendelkezik. 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 belül, és futtasd az alábbi parancsot, az <your-repository-url> helyére illesztve a másolt URL-t:
```
git clone <your-repository-url>
```
Nyisd meg a mappát a Visual Studio Code-ban. Ezt a File > Open Folder lehetőséggel teheted meg, és válaszd ki a most 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-on belül

Copilot - hogy gyorsabban írhass kódot

📂 Minden lecke tartalmazza:

opcionális sketchnote
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ők
egy kihívás
kiegészítő olvasmány
feladat
utólagos kvíz

Megjegyzés a kvízekről: Minden kvíz a Quiz-app mappában található, összesen 48 darab, mindegyik három kérdéssel. Ezek elérhetők itt, a kvíz alkalmazás helyileg 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 az 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 eszközökbe	Jasmine
02	Kezdés	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	Kezdés	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ípusainak alapjai	Adattípusok	Jasmine
05	JS Alapok	Függvények és metódusok	Ismerd meg a függvényeket és metódusokat, hogy kezeld az alkalmazás logikai folyamatait	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 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áriumhoz, a CSS alapjaira összpontosítva, 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ó	Készítsd el a JavaScriptet, hogy a terrárium húzás/ejtés interfészként működjön, a lezárásokra és a DOM manipulációra összpontosítva	JavaScript lezárások, DOM manipuláció	Jen
11	Gépírás játék	Gépírás játék készítése	Tanuld meg, hogyan használhatod a billentyűzet eseményeit 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	Készítsd el böngészőbővítményed JavaScript elemeit, hogy API-t hívhass helyi tárolóban tárolt változók segítségével	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 fejlett 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 lehet mozgást adni az elemeknek 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, hogy az elemek ütközzenek és reagáljanak egymásra billentyűleütések segítségével, valamint 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, hogyan lehet befejezni és újraindítani a játékot, beleértve az eszközök tisztítását és a változók értékeinek 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 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, hogyan készíthetsz űrlapokat és kezelheted az érvényesítési rutinokat	Űrlapok	Yohan
23	Banki alkalmazás	Adatok lekérése és használata	Ismerd meg, hogyan áramlik az adat az alkalmazásodba és ki belőle, hogyan lehet lekérni, tárolni és eldobni	Adatok	Yohan
24	Banki alkalmazás	Állapotkezelés fogalmai	Ismerd meg, hogyan őrzi meg az alkalmazásod az állapotot, és hogyan kezelheted programozottan	Állapotkezelés	Yohan

🏫 Pedagógia

Tananyagunk két kulcsfontosságú pedagógiai elvet követ:

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, űrjá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ása révén a tanulási folyamat érdekesebbé válik a diákok számára, és a fogalmak megértése is tartósabb lesz. Emellett több JavaScript alapokat bemutató kezdő leckét is írtunk, amelyeket a "Beginners Series to: JavaScript" videósorozat kísér, 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 elősegíti a fogalmak további rögzítését. 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 kerü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 a Magatartási kódexünket és a Hozzájárulási irányelveinket. Örömmel 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 repó 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:

Licenc

Ez a repó az MIT licenc alatt van licencelve. További információért lásd a LICENC fájlt.

Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás, a 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.

26 KiB Raw Blame History