A webfejlesztés megtanulása

Ü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.

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 MDN többi részéből és más középhaladó és haladó anyagokból, amelyekhez már sok előzetes tudás szükséges.

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!

Újdonságok

A tanulórészleg tartalma rendszeresen bővül. A változások követéséhez elindítottuk a Tanulórészleg kiadási megjegyzései oldalt – nézz vissza rendszeresen.

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 Discourse fórumunkon.

Front-end webfejlesztő szeretnél lenni?

Ö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.

Fogj hozzá

Hol kezdjük?

Megjegyzés: Szószedetünkben megtalálhatod a szaknyelvi definíciókat.  Emellett pedig ha konkrét kérdésed van a webfejesztésről, akkor a Gyakori kérdések szakaszunk lehet, hogy segíteni fog.

Véletlenszerű bejegyzés a szószedetből

Property (CSS)
A CSS property is a characteristic (like color) whose associated value defines one aspect of how the browser should display the element.

Lefedett témakörök

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

Ismerkedés a webfejlesztéssel
Gyakorlati bevezető a webfejlesztésbe teljesen kezdőknek.
HTML – a web szerkezetének kialakítása
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.
CSS – a web dizájnolása
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.
JavaScript – dinamikus kliensoldali programozás
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.
Akadálymentesítés – tegyük mindenki számára elérhetővé a webet
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.
Eszközök és tesztelés
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.
Kiszolgálóoldali webfejlesztés
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).

Példakódok megszerzése

A tanulórészlegen található összes kódpélda elérhető GitHubon. Ha le akarod másolni őket a számítógépedra, akkor a legegyszerűbb megoldás a master ág legfrissebb verziójának letöltése ZIP-fájlként.

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:

  1. Telepítsd a Gitet a számítógépre. Ez a verziókezelő rendszer, amelyre a GitHub is épít.
  2. Nyisd meg a számítógép parancssorát (Windows) vagy a terminált (Linux, macOS).
  3. 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:
    git clone https://github.com/mdn/learning-area
  4. Beléphetsz a könyvtárba, és kikeresheted a megfelelő fájlokat (vagy a Finderrel/Fájlkezelővel, vagy a cd paranccsal).

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

  1. A parancssorban/terminálban válts a learning-area könyvtárra a cd segítségével. Például, ha a szülőkönyvtárban vagy:
    cd learning-area
  2. Frissítsd a tárolót a következő paranccsal:
    git pull

Lépj kapcsolatba velünk

Ha szeretnél kapcsolatba lépni velünk bármivel is kapcsolatban, a legjobb módszer arra ha dobsz egy üzenetet a Discourse fórumunkra. 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.

Ha szeretnéd a tartalmat bővíteni, vess egy pillantást a hogyan tudok segíteni 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ő.

Lásd még

Mozilla fejlesztői hírlevé developer newsletter
A hírlevelünk webfejlesztők számára, ami kiváló információforrás minden tapasztalati szinten.
Learn JavaScript
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.
Web demystified
Egy nagyszerű videósorozat a web alapjairól, kifejezetten azokat célozva, akik abszolút kezdők a webfejlesztésben. Készítette: Jérémie Patonnier.
Codecademy
Nagyszerű interaktív oldal programozási nyelvek az alapoktól történő tanulására.
BitDegree
Alapvető kódoláselmélet játékosított tanulási folyamattal. Főleg kezdőket céloz.
Code.org
Alapvető kódoláselmélet játékosított tanulási folyamattal. Főleg gyerekeket és teljesen kezdőket céloz.
EXLskills
Ingynes és nyílt kurzusok műszaki készségek tanításához, mentorálással és projektalapú tanulással.
freeCodeCamp.org
Interaktív oldal oktatóanyagokkal és projektekkel a webfejlesztés elsajátításához.
Webes írástudási térkép
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.
Edabit
Interaktív JavaScript kihívások ezrei.