---
title: A webfejlesztés megtanulása
slug: Learn
tags:
  - CSS
  - HTML
  - Kezdő
  - Tanulás
  - Web
  - bevezetés
  - tartalomjegyzék
translation_of: Learn
---
<div>{{LearnSidebar}}</div>

<div></div>

<div>
<p class="summary">Üdvözlünk az MDN tanulórészlegén! Az itt található témakörök elsődleges célja, hogy kezdő fejlesztők könnyedén megtalálhassák azokat az információkat, amelyek szükségesek az egyszerű weboldalak elkészítéséhez.</p>
</div>

<p>Nem az a célunk, hogy kezdőből szakértőt faragjunk belőled, hanem kezdőből középhaladót. Onnantól kezdve már elindulhatsz a saját utadon, ahonnan már könnyedén tanulhatsz az <a href="https://developer.mozilla.org/en-US/">MDN többi részéből</a> és más középhaladó és haladó anyagokból, amelyekhez már sok előzetes tudás szükséges.</p>

<p>Ha abszolút kezdő vagy, akkor a webfejlesztés nagy kihívás lehet, de segítünk neked, és biztosítjuk számodra a szükséges információkat ahhoz, hogy kényelmesen és jól megtanuld a különböző témákat. Érezd magad otthon akkor is, ha csak diákként böngészel, ha tananyagot keresel a diákjaidnak, vagy csak hobbiként szeretnél többet megtudni a webes technológiák működéséről!</p>

<h2 id="Újdonságok">Újdonságok</h2>

<p>A tanulórészleg tartalma rendszeresen bővül. A változások követéséhez elindítottuk a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Release_notes">Tanulórészleg kiadási megjegyzései</a> oldalt – nézz vissza rendszeresen.</p>

<p>Ha kérdésed van az itt tárgyalt témákkal kapcsolatban, vagy úgy érzed, hogy valami hiányzik, akkor küldj nekünk egy üzenetet a <a href="https://discourse.mozilla.org/c/mdn">Discourse fórumunkon</a>.</p>

<h3 id="Front-end_webfejlesztő_szeretnél_lenni">Front-end webfejlesztő szeretnél lenni?</h3>

<p>Összeraktunk egy oktatóanyagot, amely tartalmazza az összes alapvető információt, amire szükséged lesz a cél elérése érdekében.</p>

<p><a class="cta primary" href="https://wiki.developer.mozilla.org/docs/Learn/Front-end_web_developer">Fogj hozzá</a></p>

<h2 id="Hol_kezdjük">Hol kezdjük?</h2>

<ul class="card-grid">
 <li><span>Teljesen kezdő:</span> Ha abszolút kezdő vagy, akkor ajánljuk neked a <a href="/en-US/docs/Learn/Getting_started_with_the_web">Kezdjük a Webbel</a> modult, amely jó alapot nyújt a webfejlesztés megértéséhez.</li>
 <li><span>Az alapokon túl:</span> Ha már kapizsgálod már valamennyire a webfejlesztést, akkor a következő lépés a {{glossary("HTML")}} és a  {{glossary("CSS")}} : Kezdd a <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Bevezetés a HTML-be</a> modullal és haladj tovább a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Bevezetés a CSS</a> modullal.</li>
 <li><span>Tovább a szkripteléshez:</span> Ha már úgyérzed hogy HTML és CSS a barátod, vagy inkább a kódolás érdekel, akkor haladj tovább a {{glossary("JavaScript")}} vagy kiszolgálóoldali (server-side) fejlesztés felé. Kezdd a <a href="/en-US/docs/Learn/JavaScript/First_steps">Első lépések a JavaScripttel </a> és a <a href="/en-US/docs/Learn/Server-side/First_steps">Első lépések kiszolgálóoldalon</a> modullal.</li>
 <li><span>Keretrendszerek és eszközök:</span> Miután elsajátítottad a HTML, CSS és JavaScript alapjait, ismerkedj meg a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">kliensoldali webfejlesztő eszközökkel</a>, és fontold meg, hogy beleásod magad a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">kliensoldali JavaScript keretrendszerekbe</a>, és a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">kiszolgálóoldali weboldal-programozásba</a>.</li>
</ul>

<div class="note">
<p><strong>Megjegyzés</strong>: <a href="/en-US/docs/Glossary">Szószedetünkben</a> megtalálhatod a szaknyelvi definíciókat.<strong>  </strong>Emellett pedig ha konkrét kérdésed van a webfejesztésről, akkor a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions">Gyakori kérdések</a> szakaszunk lehet, hogy segíteni fog.</p>
</div>

<p>{{LearnBox({"title":"Véletlenszerű bejegyzés a szószedetből"})}}</p>

<h2 id="Lefedett_témakörök">Lefedett témakörök</h2>

<p>Itt egy lista az MDN tanuló oldal által lefedett témakörökről.</p>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Ismerkedés a webfejlesztéssel</a></dt>
 <dd>Gyakorlati bevezető a webfejlesztésbe teljesen kezdőknek.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML – a web szerkezetének kialakítása</a></dt>
 <dd>A HTML nyelv segítségével alakítjuk ki oldalaink szerkezetét és adunk jelentést, illetve célt a tartalmunknak. Ez a témakör részletesen bemutatja a HTML nyelvet.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS – a web dizájnolása</a></dt>
 <dd>A CSS nyelv segítségével tudjuk a weboldalaink stílusát, elrendezését megadni, valamint viselkedést rendelhetünk oldalunkhoz, például animációkkal. Ez a témakör átfogó képet nyújt a CSS-ről.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript – dinamikus kliensoldali programozás</a></dt>
 <dd>A Javascript szkript nyelv dinamikus funkcionalitást ad a weboldalakhoz. Ez a témakör megtanítja azokat az alapvető dolgokat, amelyek ahhoz szükségesek, hogy magabiztosan megértsük és írjunk Javascript kódot.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Akadálymentesítés – tegyük mindenki számára elérhetővé a webet</a></dt>
 <dd>Az akadálymentesítés az a gyakorlat, amellyel a webes tartalmakat minél szélesebb rétegek számára elérhetővé tesszük fogyatékosság, használt eszköz, földrajzi elhelyezkedés vagy egyéb megkülönböztető tényezőktől függetlenül. Itt mindent megtanulhatsz, amit tudnod kell erről a témáról.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Eszközök és tesztelés</a></dt>
 <dd>Ebben a témakörben megismerheted a fejlesztők mindennapi munkája során használt eszközöket, mint például a különböző böngészők tesztelésére használt eszközök.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">Kiszolgálóoldali webfejlesztés</a></dt>
 <dd>Még ha a kliensoldali fejlesztés is a fő fókuszod, akkor is érdemes tudnod róla hogyan működnek a kiszolgálók, illetve a kiszolgálóoldali kódok. Ez a témakör általános leírást ad a kiszolgálóoldal működéséről, és részletes bemutatót találhatsz arról, hogyan kell felépíteni egy kiszolgálóoldali alkalmazást két népszerű keretrendszer segítsével: a Djangóval (Python) és az Expressel (node.js).</dd>
</dl>

<h2 id="Példakódok_megszerzése">Példakódok megszerzése</h2>

<p>A tanulórészlegen található összes kódpélda <a href="https://github.com/mdn/learning-area/">elérhető GitHubon</a>. Ha le akarod másolni őket a számítógépedra, akkor a legegyszerűbb megoldás a <a href="https://github.com/mdn/learning-area/archive/master.zip">master ág legfrissebb verziójának letöltése ZIP-fájlként</a>.</p>

<p>Ha inkább a tárolót másolnád le, amely rugalmasabb és lehetővé teszi az automatikus frissítéseket, akkor kövesd a bonyolultabb utasításokat:</p>

<ol>
 <li><a href="https://git-scm.com/downloads">Telepítsd a Gitet</a> a számítógépre. Ez a verziókezelő rendszer, amelyre a GitHub is épít.</li>
 <li>Nyisd meg a számítógép <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">parancssorát</a> (Windows) vagy a terminált (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>).</li>
 <li>A tanulórészleg tárolójának egy „learning-area” mappába másolásához a jelenlegi munkakönyvtárban, használd a következő parancsot:
  <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre>
 </li>
 <li>Beléphetsz a könyvtárba, és kikeresheted a megfelelő fájlokat (vagy a Finderrel/Fájlkezelővel, vagy a <a href="https://en.wikipedia.org/wiki/Cd_(command)"><code>cd</code> paranccsal</a>).</li>
</ol>

<p>A következő lépésekkel frissítheted a <code>learning-area</code> tárolót a GitHubon lévő „master” verzió módosításaival:</p>

<ol>
 <li>A parancssorban/terminálban válts a <code>learning-area</code> könyvtárra a <code>cd</code> segítségével. Például, ha a szülőkönyvtárban vagy:

  <pre class="brush: bash notranslate">cd learning-area</pre>
 </li>
 <li>Frissítsd a tárolót a következő paranccsal:
  <pre class="brush: bash notranslate">git pull</pre>
 </li>
</ol>

<h2 id="Lépj_kapcsolatba_velünk">Lépj kapcsolatba velünk</h2>

<p>Ha szeretnél kapcsolatba lépni velünk bármivel is kapcsolatban, a legjobb módszer arra ha dobsz egy üzenetet a <a href="https://discourse.mozilla.org/c/mdn">Discourse fórumunkra</a>. Ha bármi észrevételed lenne, hiányzik valami az oldalról, valami nem állja meg a helyét, szeretnél egy új témát, nem értesz valamit, vagy bármi, nyugodtan írj nekünk.</p>

<p>Ha szeretnéd a tartalmat bővíteni, vess egy pillantást a <a href="/en-US/Learn/How_to_contribute">hogyan tudok segíteni</a> oldalra vagy lépj velünk kapcsolatba! Csupa öröm ha felveszitek velünk a kapcsolatot legyél akár tanár, diák, vagy tapasztalt webfejlesztő.</p>

<h2 id="Lásd_még">Lásd még</h2>

<dl>
 <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla fejlesztői hírlevé developer newsletter</a></dt>
 <dd>A hírlevelünk webfejlesztők számára, ami kiváló információforrás minden tapasztalati szinten.</dd>
 <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt>
 <dd>Egy kiváló forrás jövőbeli webfejlesztők számára – a Learn JavaScript egy interaktív környezet, rövid leckékkel és interaktív tesztekkel, melyet automata értékelés segít. Az első 40 lecke ingyenes, a teljes kurzus kis összegű, egyszeri fizetés fejében érhető el.</dd>
 <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt>
 <dd>Egy nagyszerű videósorozat a web alapjairól, kifejezetten azokat célozva, akik abszolút kezdők a webfejlesztésben. Készítette: <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd>
 <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
 <dd>Nagyszerű interaktív oldal programozási nyelvek az alapoktól történő tanulására.</dd>
 <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
 <dd>Alapvető kódoláselmélet játékosított tanulási folyamattal. Főleg kezdőket céloz.</dd>
 <dt><a href="https://code.org/">Code.org</a></dt>
 <dd>Alapvető kódoláselmélet játékosított tanulási folyamattal. Főleg gyerekeket és teljesen kezdőket céloz.</dd>
 <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt>
 <dd>Ingynes és nyílt kurzusok műszaki készségek tanításához, mentorálással és projektalapú tanulással.</dd>
 <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
 <dd>Interaktív oldal oktatóanyagokkal és projektekkel a webfejlesztés elsajátításához.</dd>
 <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Webes írástudási térkép</a></dt>
 <dd>Egy keretrendszer belépőszintű webes írástudáshoz és 21. századi készségekhez, amelyek kategóriánkénti oktatási tevékenységeket is biztosítanak.</dd>
 <dt><a href="https://edabit.com/challenges/javascript">Edabit</a></dt>
 <dd>Interaktív JavaScript kihívások ezrei.</dd>
</dl>