1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
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>
|
