Mit ad a Kezdő webfejlesztés kurzus?

Kezdő webfejlesztés

Webfejlesztés alapok: HTML és CSS az első saját, kódolt weboldaladhoz

Írd meg az első saját honlapod kódját 0-ról. Elsajátítod a HTML alapokat, a CSS logikáját és a reszponzív működést. Tanulj meg programozni gyakorlati projekteken keresztül az AI korában.

Megírom az első oldalam

Az első saját kódod

Az első weboldalad ne sablonból legyen

A HTML és a CSS minden weboldal alapja – az Elementor, a sablonok és az AI által generált kód alatt is ez dolgozik. Aki ezt érti, az nem kiszolgáltatott: látja, mi történik a motorháztető alatt, és meg tudja javítani.

Lépésről lépésre haladsz: HTML-alapok, CSS-szelektorok, dobozmodell, pozicionálás, reszponzív működés. Végig valódi projekteken dolgozol – megépíted többek között egy Medium-cikk kinézetét és egy Mondrian-festményt, tiszta kódból.

Az AI korában a kód olvasása felértékelődött: a gép megírja helyetted, de neked kell látnod, hogy jót írt-e. Ez a kurzus adja hozzá az alapot.

  • Megírod az első saját HTML-oldalad
  • Érted a CSS logikáját, nem csak másolod
  • Gyakorlati projekteken tanulsz, nem elméletből
  • Reszponzív oldalt építesz, ami mobilon is jó
  • Le tudod ellenőrizni az AI által írt kódot

óra tananyag

15

modul

284

lecke

2.300+

Fegyvertár tag

Az alap, amire minden épül

A kód nem varázslat – meg lehet tanulni

Weboldalt ma bárki össze tud kattintani. Érteni, hogy mi történik, már kevesebben – pedig a különbség pont itt dől el.

Amíg csak sablonokat használsz, a sablon határai a te határaid. Sokszor egy sor CSS megoldaná, amivel órákig küzdesz a felületen – ha tudnád, hova kell írni.

És az AI sem változtat ezen, sőt: a gép egyre több kódot ír helyetted, de csak az tudja irányítani, aki érti, mit kap.

A kurzus a nulláról indul, és gyakorlati projekteken visz végig a HTML-től a reszponzív CSS-ig. A végén saját, kézzel írt weboldalad lesz – és ami fontosabb: érted minden sorát.

Megtanulom az alapokat

A kurzus 280+ leckéből áll.

Hogyan épül fel a kurzus?

HTML-alapok, kódszerkesztők, CSS-alapok, majd egyre összetettebb gyakorlatok: egy Medium-cikk, egy Mondrian-festmény, végül teljes, reszponzív oldalak. A leckék szövegesek, kódpéldákkal – a saját tempódban haladsz, és minden szakasz végén kész munkád van.

Bevezető

  • Bevezető - HTML+CSS - Kezdő webfejlesztés

HTML alapok

  • Egy HTML-dokumentum
  • Google formázási útmutató
  • Néhány ajánlás
  • Mi az a HTML?
  • Egy HTML-tag
  • HTML írása
  • Címsorok
  • Paragrafusok
  • Linkek
  • Képek
  • Speciális jelentés
  • Táblázatok
  • Listák
  • Kódvalidáció

Bevezetés a kódszerkesztőkbe

  • Miért használunk kódszerkesztőket?
  • Online kódszerkesztők I.
  • Online kódszerkesztők II.
  • Asztali kódszerkesztők
  • Kódszerkesztők: Javaslataink
  • A CodePen bemutatása

CSS alapok

  • Mi az a CSS?
  • Az inline módszer
  • Az internal style sheet
  • Az external style sheet (külső stíluslap)
  • Relatív elérési út
  • Abszolút elérési út
  • Több külső CSS stíluslap használata
  • User agent stylesheet
  • CSS reset
  • CSS kommentek
  • CSS-szabályok: Formai követelmények
  • CSS-szabályok: Gyakorlás
  • CSS-szelektorok: Alapok
  • Egyszerű szelektorok 1: A típus szelektor
  • Egyszerű szelektorok 2: Az ID szelektor
  • Egyszerű szelektorok 3: A class szelektor
  • Egyszerű szelektorok: Gyakorlás
  • Egyszerű szelektorok: Gyakorlás megoldása
  • Pseudo-class szelektorok
  • Attribútum szelektorok
  • Pseudo-element szelektorok
  • Többszörös szelektorok
  • Kombinátorok (combinators)
  • Komplex szelektorok gyakorlása
  • Komplex szelektorok gyakorlása: megoldás
  • A CSS kaszkád: hogyan dönti el a böngésző, melyik szabály nyer?
  • Az !important kulcsszó
  • Szelektor specificitás
  • Forráskód sorrend
  • CSS öröklődés
  • Összefoglalás: mit tanultál eddig?

Medium-cikk

  • Bevezető a Medium-cikkhez: Mit fogunk megtanulni?
  • Add hozzá a tartalmat: Cím és címsor
  • Add hozzá a tartalmat: Hozzáadunk egy képet
  • Add hozzá a tartalmat: Hozzáadunk egy képaláírást
  • Add hozzá a tartalmat: Az első három bekezdés
  • A címsor megformázása
  • A címsor további formázása
  • A kép átméretezése
  • A böngésző saját stílusai
  • Szélesség és térközök
  • Pozicionálás
  • A bekezdések formázás
  • Linkek formázása
  • Készen vagyunk

CSS gyakorlás

  • CSS gyakorlás
  • Nem telepített betűkészletek használata

Mondrian + Okos kérdések

  • Mondrian és okos kérdések
  • Olvass, keress, kérdezz: Tanuld meg kihúzni magad a gödörből
  • Olvass, keress, kérdezz: Olvass (Read)
  • Olvass, keress, kérdezz: Keress (Search)
  • Olvass, keress, kérdezz: Kérdezz (Ask)
  • Olvass, keress, kérdezz: Összefoglalás
  • Művészi CSS és HTML: Mondrian festménye
  • Hozd létre a vásznat
  • Hozd létre a vásznat: Akaszd fel a falra a képet
  • Fesd meg az első sort: A kép szerkezete
  • Fesd meg az első sort: A piros négyzet
  • Fesd meg az első sort: A piros négyzet a helyére kerül
  • Fesd meg az első sort: Az első fekete elválasztó
  • Fesd meg az első sort: A felső oszlop
  • A második sor
  • A harmadik sor
  • A harmadik sor egy lehetséges megoldása
  • Gyakorlás és összefoglalás: Fess szabadon

Fejlesztői eszközök + Névjegy

  • Fejlesztői eszközök és egy névjegy
  • Fejlesztői eszközök a böngészőben: Bevezetés
  • Forráskód a böngészőben
  • Chrome fejlesztői eszközök
  • Egy elem vizsgálata
  • Egy baráti telefon
  • Muszáj-e kódolni?
  • Tedd föl a jó kérdéseket
  • Rajzolj egy wireframe-et
  • A váz tervezése
  • Összegyűjtjük az alapanyagokat
  • A konténerek
  • A tartalom hozzáadása
  • Az ikonok
  • Egy lehetséges váz
  • Találd meg a dobozokat
  • CSS reset
  • A méret beállítása
  • Középre helyezés flexbox-szal
  • Konténerek és tartalom középre helyezése
  • A profilfotó
  • Az inline lista
  • Térközök hozzáadása
  • A háttérkép
  • A névjegykártya megformázása
  • Keret hozzáadása
  • Interakció
  • Te jössz

VS Code + Git/GitHub

  • Az asztali szerkesztők és a verziókezelés
  • Bevezetés: Üdv!
  • Bevezetés: Miért van erre szükségem?
  • Ismerd meg a VS Code-ot: Miért a VS Code-ot választottuk?
  • Ismerd meg a VS Code-ot: VS Code telepítése
  • Ismerd meg a VS Code-ot: Kiegészítők telepítése
  • A hercegnő-illúzió: A hercegnő projekt
  • A hercegnő-illúzió: A projekt elkészítése
  • A hercegnő-illúzió: Fájlok hozzáadása
  • A hercegnő-illúzió: A HTML
  • A hercegnő-illúzió: A HTML boilerplate
  • A hercegnő-illúzió: Előnézet
  • A hercegnő-illúzió: Saját média
  • A hercegnő-illúzió: A CSS
  • A hercegnő-illúzió: Egy gyors összefoglaló
  • Haladó tippek és trükkök: VS Code szupererők
  • Haladó tippek és trükkök: VS Code gyorsbillentyűk
  • Összefoglalás: Gratulálunk
  • Bevezetés: Git + GitHub
  • Bevezetés: A Gitről röviden
  • Bevezetés: A GitHubról röviden
  • A parancssor kezelése
  • Git és GitHub: GitHub-regisztráció
  • Git és GitHub: Personal Access Token
  • Git és GitHub: A Git telepítése
  • Git és GitHub: Állítsd be a Git-identitásod
  • Első lépések a Gitben: Bevezető
  • Első lépések a Gitben: Hozd létre az első repositoryd
  • Első lépések a Gitben: Klónozd le
  • Első lépések a Gitben: Hozd létre az első fájlodat
  • Első lépések a Gitben: Kövesd el az első commitod
  • Első lépések a Gitben: Mikor commitolj?
  • A munkád szinkronizálása: A Git színterei
  • A munkád szinkronizálása: Commitok importálása
  • A munkád szinkronizálása: Változtatások beolvasztása
  • A munkád szinkronizálása: Commitok importálása és beolvasztása
  • Branchek és Git: A branchek rendszere
  • Branchek és Git: Egy új branch
  • Branchek és Git: Másik branchre váltás
  • Branchek és Git: Branchek egyesítése
  • Branchek és Git: Branch törlése
  • Közös munka a Git segítségével: Hogyan dolgozzunk együtt GitHubon?
  • Közös munka a Git segítségével: Adjunk háttérképet a honlaphoz
  • Közös munka a Git segítségével: Pull request készítése
  • Közös munka a Git segítségével: Pull request kezelése
  • Publikáld a munkád: Publikáld a munkád a GitHub Pages segítségével
  • Összefoglalás: Itt a vége

Saját névjegy oldal

  • Saját "online névjegy" oldal készítése

Haladó pozicionálás

  • Haladó pozicionálás CSS-sel
  • A display tulajdonság: Bevezetés
  • A display tulajdonság: Inline és block elemek
  • A display tulajdonság: Egy elem megváltoztatása
  • A display tulajdonság: A megjelenítés megváltoztatása
  • A display tulajdonság: inline-block
  • A display tulajdonság: Egy utolsó display típus
  • A box modell: Ugyanolyan dobozok?
  • A box modell: Mérd meg
  • A box modell: A box-sizing tulajdonság
  • A box modell: Két doboz egymás mellett
  • A box modell: Még egy dolog
  • A position tulajdonság: A normál sorrend
  • A position tulajdonság: Csak egy pár pixellel arrébb
  • A position tulajdonság: Fixáció
  • A position tulajdonság: Egy új dimenzió
  • A position tulajdonság: Abszolút varázslat
  • A position tulajdonság: Egy egyszerű layout
  • A position tulajdonság: Vágj arcokat
  • Floatok: Körbevenni egy képet szöveggel
  • Floatok: Három csomag megjelenítése
  • Floatok: Floatok rendezése
  • Floatok: Clearfixek
  • Összefoglalva: A layout arzenál

Reszponzív webdesign

  • Reszponzív webdesign
  • A reszponzív munkád tesztelése
  • Bevezetés: Mit fogsz megépíteni?
  • Bevezetés: Néhány definíció
  • A váz előkészítése: A HTML megépítése
  • A váz előkészítése: Egyéb elemek hozzáadása
  • A váz előkészítése: Egy egyszerű CSS Reset
  • A váz előkészítése: Segítő színek
  • A váz előkészítése: Minden készen áll
  • Gyors betűtípus-kitérő: Hol tartunk?
  • Gyors betűtípus-kitérő: A projekthez megfelelő betűkészletek kiválasztása
  • Gyors betűtípus-kitérő: Nem telepített betűkészletek használata
  • Gyors betűtípus-kitérő: Állítsd be a betűtípust
  • Gyors betűtípus-kitérő: Még egy kis tipográfia
  • Gyors betűtípus-kitérő: Egy lehetséges megoldás
  • Relatív egységek: Az első pillér
  • Relatív egységek: A hossz egységei
  • Relatív egységek: Em
  • Relatív egységek: Rem
  • Relatív egységek: Tipográfia és a rem
  • Relatív egységek: Százalékok
  • Relatív egységek: A viewport szélessége és magassága
  • Relatív egységek: Összefoglaló a relatív egységekről
  • Reszponzív elrendezés: A második pillér
  • Reszponzív elrendezés: Példa a reszponzív elrendezésre
  • Reszponzív elrendezés: A mobile first elv
  • Reszponzív elrendezés: Építsd a blogot – Box-sizing méretezés
  • Reszponzív elrendezés: Építsd a blogot – A header
  • Reszponzív elrendezés: Építsd a blogot – A tartalom
  • Reszponzív elrendezés: Építsd a blogot – Vertikális ritmus
  • Reszponzív elrendezés: Építsd a blogot – Végső simítások
  • Reszponzív elrendezés: Összefoglalás a reszponzív elrendezésekhez
  • Media queryk: A harmadik pillér
  • Media queryk: A megfelelő media queryk
  • Media queryk: A tartalom floatolása
  • Media queryk: A desktop méret
  • Media queryk: Összefoglalás a media querykhez
  • Reszponzív média: A negyedik pillér
  • Reszponzív média: Flexibilis médiabeágyazás
  • Reszponzív média: Összefoglalás a reszponzív médiához
  • Összefoglalás: Mindent a reszponzív webdesignról

Gyakori komponensek

  • Gyakran használt komponensek
  • Bevezetés: Mit fogsz megtanulni
  • Bevezetés: A megépítendő komponensek
  • Bevezetés: Mielőtt belevágnánk
  • Gombok: Bevezető
  • Gombok: Egy sor színes gomb
  • Gombok: Minden gomb alapja
  • Gombok: A .btn hozzáadása
  • Gombok: A .btn megformázása
  • Gombok: A kontextuális classok
  • Gombok: A Bootstrap-gombok egy lehetséges megoldása
  • Gombok: A "flat" gombok
  • Gombok: A "flat" gombok egy lehetséges megoldása
  • Navigáció: Bevezető
  • Navigáció: Minden navigáció tervrajza (HTML)
  • Navigáció: Minden navigáció tervrajza (CSS)
  • Navigáció: Egyszerű felső navigáció – a HTML-váz
  • Navigáció: Alapstílusok
  • Navigáció: Speciális állapotok
  • Navigáció: Az asztali gépre szánt stílusok
  • Navigáció: Egyszerű felső navigáció – Kész
  • Navigáció: Rögzített felső navigáció – Kihívás
  • Navigáció: Rögzített felső navigáció – Egy lehetséges megoldás
  • Fejlécek (headers): Bevezető
  • Fejlécek: Egy egyszerű blog header – HTML-váz
  • Fejlécek: Egy egyszerű blog header – CSS
  • Fejlécek: Header egy teljes képernyős cikkhez
  • Fejlécek: HTML-váz
  • Fejlécek: CSS 1.
  • Fejlécek: CSS 2.
  • Fejlécek: Modern, egyszerű fejléc
  • Fejlécek: Összefoglalás
  • Footerek: Bevezető
  • Footerek: Egy egyszerű footer – HTML-váz
  • Footerek: CSS 1.
  • Footerek: CSS 2.
  • Footerek: A ragadós footer probléma
  • Footerek: Az abszolút pozíció megoldás
  • Footerek: A calc() megoldás
  • Footerek: A Bootstrap-megoldás
  • Footerek: Összefoglalás
  • Összefoglalás

Esküvői weboldal

  • Záró projekt: saját esküvői weboldal készítése
  • Játékszabályok
  • Specifikáció és nyersanyagok
  • Design és demó
  • Drótváz és HTML-váz
  • Add hozzá az általános stílusokat
  • Formázd meg a headert (fejléc)
  • Formázd meg a "Helyszínek" részt
  • Formázd meg a "Program" részt
  • Formázd meg a "Nászajándék" részt
  • Formázd meg a "Gyakori kérdések" részt
  • Formázd meg a footert (lábléc)
  • Utolsó simítások és media queryk
  • Itt a vége

Záró rész

  • Gratulálunk!

A legjobb társ a céljaid eléréséhez

Indítsd el és lépj szintet a karrieredben vagy vállalkozásodban

35+ kurzus

230+ óra tananyag

karrier küldetések

oklevél

webinárok

eszközök

prémium bővítmények

Gyűjtsd be mindet

Oklevél

A Fegyvertár nem egy kurzusról szól. Mindegyiket kvíz zárja, ami leteszteli a megszerzett tudást – ha megvan, jön róla az oklevél. Van, amit egy hét alatt begyűjtesz, van, amiért hónapokig dolgozol. Hozzáteheted a portfóliódhoz, beírhatod a CV-dbe vagy kiteheted a LinkedInre.

Csatlakozom
Vikingo kurzusoklevél

35+ kurzus gyakorlati fókusszal

Készségek a mostani világra szabva

A célod elérése a fejlődéseden keresztül történik.

A piacképes tudás tesz értékessé a piacon vállalkozóként és munkavállalóként is.

A leghatékonyabban nálunk sajátíthatod el a szakmai ismereteket és gyakorlati megvalósítást a ma releváns és keresett témákban.

Design és képalkotás

Technológia, AI és fejlesztés

Marketing és vállalkozás

Személyes fejlődés

Az oktatód

Tóth Dániel

Dani a Vikingo alapítója és tulajdonosa, a Vikingo Studio vezetője.

Az ügynökségi divízió mindennapjaiban él: ügyfélszerzés, brief, tervezés, design, fejlesztés – végigkíséri a projekteket az első ötlettől a launchig. 2020 óta építik a Studiót, így belülről ismeri, pontosan mi kell egy profi weboldalhoz.

A Vikingo tananyagain dolgozva a gyakorlati tapasztalatot fordítja leckékre: esettanulmányok, ügynökségi workflow, AI bevezetés, ajánlatadás, átadás utáni támogatás – mindaz, amit a terepen tanult.

Hisz abban, hogy egy kurzus akkor jó, ha a valóságra készít fel: pontosan ezzel a szellemiséggel oktat a kurzusainkban.

Tóth Dániel

Fegyvertár

Tapasztald meg a Fegyvertár élményt, sajátíts el digitális készségeket, változtasd meg a karriered és életed!

35+ kurzus

Karrier Küldetések

Kihívások

Eszközök, csekklisták

Prémium bővítmények

10 Elementor licensz

AI ügynök

Webinárok, workshopok

bruttó

7.990 Ft / hó

266 Ft / nap

Teljes hozzáférés minden kurzushoz

Bármikor lemondható

Nincs hosszú távú elköteleződés

Havi előfizetés

-16%

bruttó

19.990 Ft / 3 hó

222 Ft / nap

Teljes hozzáférés minden kurzushoz

Bármikor lemondható

Ritkább fizetés, kedvezőbb egységár

Ideális egy konkrét fejlődési időszakhoz

3 havi előfizetés

-27%

bruttó

69.990 Ft / év

192 Ft / nap

Teljes hozzáférés minden kurzushoz

Bármikor lemondható

A legalacsonyabb egységár

Egész éves tanulási és fejlődési lehetőség

Árbefagyasztási garancia

Éves előfizetés

A jelentkezés jelenleg zárva

Szólunk, amint újra nyit a Fegyvertár

Add meg az e-mail címed, és elsőként értesítünk, amikor újra lehet csatlakozni.

Biztonságos fizetés – pajzs ikon

100% biztonságos fizetés

A megrendelés leadásával nyilatkozom arról, hogy kérem a teljesítés megkezdését a 14 napos elállási/felmondási határidő lejárta előtt. Tudomásul veszem, hogy ezzel az indokolás nélküli elállási jogomat elveszítem, de a 14 napon belül jogosult vagyok indokolás nélküli felmondási jogom gyakorlására. Utóbbi esetben a felmondás közlésének időpontjáig teljesített szolgáltatással arányos díjat vagyok köteles megfizetni, az ezen felüli díjat a Szolgáltató visszatéríti részemre.

Csendes Szilvia

Fantasztikus! Végre egy igazi oldal, és még app is jár hozzá 🙂 Hálás vagyok érte! Talán hétvégén lesz rá időm, hogy elmélyüljek benne <3

Csendes SzilviaHR adminisztrátor, webdesigner

Gyakran ismételt kérdések

Összegyűjtöttük a leggyakoribb kérdéseket az indulásról, az előképzettségről és a hozzáférésről. Ha valami kimaradt, írj nekünk.

Hogyan tudok kérdezni vagy segítséget kérni, ha elakadok?

Lehetőséged lesz csatlakozni a Fegyvertár közösségi felületéhez, ahol kérdezhetsz a kurzussal kapcsolatban és megoszthatod a saját projektjeidet.

Ha technikai vagy haladással kapcsolatos kérdésed van, ezen az oldalon tudsz nekünk írni.

Mikor indul a kurzus, van meghatározott kezdés?

A kurzus önálló tempóban végezhető, így bármikor elkezdheted, amikor számodra kényelmes. A leckékhez hozzáférést kapsz, míg él a Fegyvertár előfizetésed.

Szükséges bármilyen előképzettség?

Nem szükséges semmilyen előképzettségre. A kurzust úgy építettük fel, hogy a nulláról is követhető legyen, de haladóként is rengeteg aha-élményt ad. Az egyetlen elvárás: legyél nyitott és kíváncsi, mert itt tényleg sok új nézőpontot kapsz.