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 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 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 helyére beillesztve a most kimásolt URL-t: bash 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. ## 📂 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 ## 🗃️ Leckék ## 🏫 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á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". ## 🧭 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 -9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA) -C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC) -E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9) --- ### 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.