Ugyanaz a csapat, új név.Elmondjuk, miért

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.

óra tananyag

15

modul

284

lecke

2.500+

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 működő, ügyfélbarát weboldalhoz – és mi kell ahhoz, hogy webdesignerként tényleg piacképes legyél.

A Vikingo tananyagain dolgozva a gyakorlati tapasztalatot fordítja leckékre: esettanulmányok, ügynökségi workflow, 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.

Muik Melinda

A Vikingo csapatának ezúton is köszönöm, megváltoztattátok az életem. Az új Fegyvertár elképesztő, így tovább, srácok!

Muik MelindaFreelancer 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.

Új a weboldalunk

Segíts jobbá tenni az új oldalt

Frissen indult az új oldalunk, és biztosan van még rajta, ami nem tökéletes. Ha hibát látsz, vagy valami nem úgy működik, ahogy várnád, írd meg pár szóban. Minden jelzést elolvasunk.

Miről szól?
Képernyőkép
Kép vagy PDF, legfeljebb 3, egyenként 5 MB. Húzd ide, vagy illeszd be Ctrl+V-vel.