Ha a weboldalépítés már jól megy, de szeretnéd a CSS legmenőbb és legmodernebb részeit is megismerni, akkor ezt a tanfolyamot neked találtuk ki. Az elmúlt pár évben rengeteg újítás érkezett a CSS-be, amelyek megkönnyítik a frontend fejlesztők munkáját. Ebbe a tanfolyamba összeszedtük a legfontosabbakat.
Lesz szó modern layoutok építéséről Griddel és Flexboxszal, CSS-függvényekről és változókról, és animációról. Ahhoz pedig, hogy csapatban, nagyobb horderejű és komplex projekteken is felkészülten tudj dolgozni, beszélünk a CSS architektúra világáról is. A tanfolyam végére megtanulsz rendezett és áttekinthető projekteket építeni, amelyekhez akár nagyobb csapatok is hozzá tudnak nyúlni kényelmesen.
Az egyszerű feladatoktól lépésenként haladunk majd az összetettebbek felé, és közben egy percre sem hagyunk magadra. Részletes elméleti és gyakorlati ív segítségével sajátítod majd el minden új részét a a CSS-nek. Ha pedig elakadnál, a tanfolyam mentorai 24 órán belül a segítségedre sietnek a virtuális osztályteremben.
Az utolsó héten, a záróprojekt keretein belül, önállóan építhetsz meg egy olyan weboldalt, ahol alkalmazni és gyakorolni tudsz mindent, amit a 4 hét során tanultál. Az elkészült munkádra egy teljes, részletes code review-t kapsz a mentoroktól, pontosan úgy mintha már valódi fejlesztőként dolgoznál. Sőt, még a portfóliód is gazdagabb lesz az elkészült darabbal.
Készen állsz az új kihívásra? Iratkozz be tanfolyamunkra!A tanfolyam végére képes leszel:
A legőrültebb elrendezéseket (layoutokat) is lekódolni.

Szemrebbenés nélkül használni a CSS Grid és Flexbox modulokat, és több olyan gyakori layout-problémát megoldani velük, amelyek korábban egész blokknyi CSS-t igényeltek volna.
Felhasználói interakciókat animálni és dekoratív animációkat készíteni tisztán CSS-sel, JavaScript nélkül.
A legújabb CSS-függvényeket és változókat használni.
Alkalmazni a CSS-architektúra alapelveit, és nagy, komplex projekteket magabiztosan tervezni.
Ez vár rád a tanfolyamon:
8 modul, 28 fejezet, 134 lecke
1 gyakorlóprojekt
Oktatott technológiák: HTML5, CSS3, Git

Ezt mondta egy diákunk
“Örülök, hogy belejöttem a Flexbox és a Grid használatába, már régóta szerettem volna begyakorloni, és ezen a tanfolyamon sikerült!”
Zoárd
Előkövetelmények
A kurzus a Weboldalkészítés tanfolyamunkban oktatott HTML-, CSS- és Git-tudást, valamint alapszintű angoltudást feltételez.
Mivel ezt a tanfolyamot középhaladók számára készítettük, ha még nincsenek stabil HTML és CSS alapjaid, javasoljuk, hogy első lépésként végezd el a Weboldalkészítés tanfolyamunkat.
A tanfolyam tartalomjegyzéke
- 1.1. Grid bevezető: Mi az a Grid?
- 1.2. Grid bevezető: Grid container és grid item
- 1.3. Grid bevezető: Grid line és grid cell
- 1.4. Grid bevezető: Grid track
- 1.5. Grid bevezető: Grid area
- 1.6. Grid bevezető: Grid itemek elhelyezése a rendszerben
- 2.1. Grid container: A Grid bekapcsolása
- 2.2. Grid container: Sorok és oszlopok
- 2.3. Grid container: A repeat() függvény
- 2.4. Grid container: Térközök (gutters)
- 2.5. Grid container: A gap shorthand
- 2.6. Grid container: Grid itemek vízszintes elhelyezése
- 2.7. Grid container: Grid itemek függőleges elhelyezése
- 2.8. Grid container: Az egész grid vízszintes elhelyezése
- 2.9. Grid container: Az egész grid függőleges elhelyezése
- 2.10. Grid container: Explicit vs. implicit grid
- 2.11. Grid container: Az implicit grid szabályozása
- 2.12. Grid container: Auto-placement
- 3.1. Grid itemek: A grid itemek általános elhelyezése
- 3.2. Grid itemek: A grid-row és grid-column shorthand
- 3.3. Grid itemek: A grid-area és grid-template-area tulajdonságok
- 3.4. Grid itemek: Egy-egy grid item igazítása (vízszintesen)
- 3.5. Grid itemek: Egy-egy grid item igazítása (függőlegesen)
- 3.6. Grid itemek: A place-self shorthand
- 4.1. A Grid gyakorlása: Beágyazott grid (nested grid)
- 4.2. A Grid gyakorlása: Holy Grail Layout
- 4.3. A Grid gyakorlása: Pricing tables (árazási táblák)
- 1.1. Flexbox bevezető: Mi az a Flexbox?
- 1.2. Flexbox bevezető: A flex container és a flex itemek
- 1.3. Flexbox bevezető: Flexbox tengelyek
- 2.1. Flex container: display - flex
- 2.2. Flex container: flex-direction
- 2.3. Flex container: flex-wrap
- 2.4. Flex container: flex-flow
- 2.5. Flex container: justify-content
- 2.6. Flex container: align-items
- 2.7. Flex container: align-content
- 3.1. Flex item: order
- 3.2. Flex item: flex-grow
- 3.3. Flex item: align-self
- 4.1. Flexbox gyakorlása: Középre igazítás
- 4.2. Flexbox gyakorlása: Sticky-footer
- 4.3. Flexbox gyakorlása: Media Object
- 1.1. Transzformációk: Mi az a transzformáció?
- 1.2. Transzformációk: Az elemek koordináta-rendszere
- 1.3. Transzformációk: Egy elem elmozdítása a translate() metódussal
- 1.4. Transzformációk: Egy elem elforgatása a rotate() metódussal
- 1.5. Transzformációk: Egy elem átméretezése a scale(), scaleX() és scaleY() metódusokkal
- 1.6. Transzformációk: Egy elem elferdítése a skew(), skewX() és skewY() metódusokkal
- 1.7. Transzformációk: Egy elem átalakítása a matrix() metódussal
- 2.1. Átmenetek: Mi az az átmenet?
- 2.2. Átmenetek: Az átmenetek létrehozása
- 2.3. Átmenetek: A transition tulajdonság
- 3.1. A transzformációk és átmenetek gyakorlása: Lebegő kártya
- 3.2. A transzformációk és átmenetek gyakorlása: Mozgó címke
- 4.1. Komplex animációk: A @keyframes szabály
- 4.2. Komplex animációk: Az animation-name tulajdonság
- 4.3. Komplex animációk: Az animation-duration tulajdonság
- 4.4. Komplex animációk: Az animation-timing-function tulajdonság
- 4.5. Komplex animációk: Az animation-delay tulajdonság
- 4.6. Komplex animációk: Az animation-iteration-count tulajdonság
- 4.7. Komplex animációk: Az animation-direction tulajdonság
- 4.8. Komplex animációk: Az animation-fill-mode tulajdonság
- 4.9. Komplex animációk: Az animation shorthand tulajdonság
- 4.10. Komplex animációk: Pattogó labda
- 1.1. CSS-függvények: A CSS-változók és a var() függvény
- 1.2. CSS-függvények: A calc() függvény
- 1.3. CSS-függvények: Elem elhelyezése a jobb sarokban
- 1.4. CSS-függvények: A min() függvény
- 1.5. CSS-függvények: A max() függvény
- 1.6. CSS-függvények: A clamp() függvény
- 1.7. CSS-függvények: A filter függvények
- 1.8. CSS-függvények: blur()
- 1.9. CSS-függvények: grayscale()
- 1.10. CSS-függvények: Egyéb függvények
- 1.1. Szintaxis és formázás: Bevezetés
- 1.2. Szintaxis és formázás: Alapszabályok
- 1.3. Szintaxis és formázás: Több fájl
- 1.4. Szintaxis és formázás: Tartalomjegyzékek
- 1.5. Szintaxis és formázás: 80 karakter széles kód
- 1.6. Szintaxis és formázás: Szekciók
- 1.7. Szintaxis és formázás: Egy vagy több soros CSS
- 1.8. Szintaxis és formázás: Szabályok indentálása
- 1.9. Szintaxis és formázás: Igazítás (alignment)
- 1.10. Szintaxis és formázás: Funkcionális whitespace
- 1.11. Szintaxis és formázás: Összefoglalás
- 2.1. Specificitás: Szelektorspecificitás és a velejáró problémák
- 2.2. Specificitás: Kerüld az ID szelektort!
- 2.3. Specificitás: Ha lehet, ne ágyazd egymásba!
- 2.4. Specificitás: Az !important helye
- 3.1. Objektumorientáltság: Objektumorientáltság a CSS-ben
- 3.2. Objektumorientáltság: Single responsibility principle
- 3.3. Objektumorientáltság: Separation of concerns
- 3.4. Objektumorientáltság: BEM
- 3.5. Objektumorientáltság: BEM-szerű elnevezések
- 3.6. Objektumorientáltság: Open/Closed principle
- 3.7. Objektumorientáltság: Egyszerű navigációs sáv
- 3.8. Objektumorientáltság: Egyszerű weboldal készítése
- 3.9. Objektumorientáltság: DRY
- 4.1. Kommentek: Mire jók a kommentek?
- 4.2. Kommentek: A magas szintű (high-level) kommentek
- 4.3. Kommentek: Az alacsony szintű (low-level) kommentek
- 4.4. Kommentek: Object–extension pointer kommentek
- 1.1. Bevezetés: Üdvözlünk
- 1.2. Bevezetés: A Gitről röviden
- 1.3. Bevezetés: A GitHubról röviden
- 2.1. A parancssor kezelése
- 3.1. Git és GitHub: GitHub-regisztráció
- 3.2. Git és GitHub: Personal Access Token
- 3.3. Git és GitHub: A Git telepítése
- 3.4. Git és GitHub: Állítsd be a Git-identitásod
- 4.1. Első lépések a Gitben: Bevezető
- 4.2. Első lépések a Gitben: Hozd létre az első repositoryd
- 4.3. Első lépések a Gitben: Klónozd le
- 4.4. Első lépések a Gitben: Hozd létre az első fájlodat
- 4.5. Első lépések a Gitben: Kövesd el az első commitod
- 4.6. Első lépések a Gitben: Mikor commitolj?
- 5.1. A munkád szinkronizálása: A Git színterei
- 5.2. A munkád szinkronizálása: Commitok importálása
- 5.3. A munkád szinkronizálása: Változtatások beolvasztása
- 5.4. A munkád szinkronizálása: Commitok importálása és beolvasztása
- 6.1. Branchek és Git: A branchek rendszere
- 6.2. Branchek és Git: Egy új branch
- 6.3. Branchek és Git: Másik branchre váltás
- 6.4. Branchek és Git: Branchek egyesítése
- 6.5. Branchek és Git: Branch törlése
- 7.1. Közös munka a Git segítségével: Hogyan dolgozzunk együtt GitHubon?
- 7.2. Közös munka a Git segítségével: Adjunk háttérképet a honlaphoz
- 7.3. Közös munka a Git segítségével: Pull request készítése
- 7.4. Közös munka a Git segítségével: Pull request kezelése
- 8.1. Publikáld a munkád: Publikáld a munkád a GitHub Pages segítségével
- 9.1. Összefoglalás: Itt a vége
- 10.1. Teszt: Ellenőrizd a tudásod!
Neked ajánljuk ezt a tanfolyamot, ha…
szeretnél haladó CSS-technikákkal megismerkedni, amelyek segítségével magabiztosan tudsz megvalósítani bármilyen elrendezést, bármekkora képernyőn.

frontend fejlesztőként szeretnél dolgozni, és modern, megbízható CSS-tudásra van szükséged.

szeretnél könnyen fenntartható CSS kódbázisokat építeni, amelyekhez akár mások is örömmel nyúlnak, nem csak te.
a fejedben már kirajzolódott a weboldalad terve, és úgy szeretnéd azt megépíteni, hogy komplex szakmai visszajelzést kapsz róla.
Gyakori kérdések
Kapok oklevelet a kurzus végén?
Igen, a kurzus elvégzése után tanulófelületünk automatikusan kiállít számodra egy igazolást a tanfolyam befejezéséről. Emellett, lehetőségünk van egy, a Felnőttképzési Adatszolgáltatási Rendszer által kiállított oklevelet is adni neked a kurzus teljesítéséről, ami magyar nyelvű és rendelkezik tanúsítványi sorszámmal.
Hány évesen lehet jelentkezni a képzésetekre?
Általában 18 és 60 közöttieknek ajánljuk a kurzust, de a legfiatalabb képzésrésztvevőnk 11, a legidősebb 73 éves. Az legtöbb tanulónk 25-35 éves.
Hozzáférést kapok a teljes tananyaghoz már az elején? El kell végeznem egy feladatot, hogy elérhető legyen a következő?
A tanfolyam anyaga hetekre osztott. Minden hét elején nyílik a hozzáférésed az adott hét anyagához. Természetesen a már nyitott hetek leckéihez bármikor visszatérhetsz.
Ha gyorsabban szeretnél tanulni, csak jelezd ügyfélszolgálatunknak, és akkor teljes hozzáférést tudunk számodra biztosítani a tanfolyam összes moduljához időbeli korlátozás nélkül akár már a vásárlás napján is.
A tananyaghoz a kurzus vége után is hozzáférhetek?
Igen! A megvásárolt tanfolyam tananyagait később is bármikor visszanézheted.
Ez azért nagyszerű, mert bármikor átismételheted az időközben megkopott fogalmakat és tudnivalókat. Újracsinálhatod a feladatokat, ellenőrizheted, mennyit fejlődtél, meg tudod-e oldani önállóan azt, amihez régebben segítség kellett. Könnyen építhetsz a meglévő tananyagokra, ha haladó szinteken tanulsz tovább. Az örökös hozzáférést annak biztosítjuk, aki kifizette a tanfolyam díját, és aki nem kért pénzvisszafizetést.
Mennyi ideig tart a képzés?
A kurzus 1 hónapig tart, és úgy raktuk össze, hogy mindössze heti 5, azaz összesen 20 órádat vegye igénybe.
Hogyan kell elképzelni az online tanulást és a mentori segítséget? Vannak fix órák, amelyeken részt kell vennem?
A leckéket és feladatokat a tanulófelületen éred el, itt tudsz majd önállóan dolgozni.
Az első tananyagokhoz rögtön a befizetés pillanatától hozzáférsz, utána pedig az előfizetéstől számítva fog számodra hétről-hétre felnyílni a következő adag tananyag, de külön e-mailben kérheted, hogy megnyissuk számodra az összes leckét a tanfolyamodon.
Egy-egy heti anyagra körülbelül 3-5 órányi tanulást érdemes szánni, de egyedi időbeosztásban, szabadidődhöz igazítva haladhatsz velük. Ha kérdésed lenne vagy elakadnál, akkor a leckék alatt tudsz kérdezni a mentorainktól és tanulótársaidtól, időbeli megkötés nélkül.
Tehát nincsenek fix konzultációs órák, bármikor felteheted a kérdéseidet, és amint odaér egy mentor, válaszol rá. Hivatalosan 24 órán belül válaszolunk minden kérdésre, de a gyakorlatban ennél jóval hamarabb szoktunk.
Milyen eszközökre lesz szükségem a tanuláshoz?
A kurzus során böngészőt (pl. Chrome) fogsz használni, és egy ingyenes, programozásra specializált szövegszerkesztő programot. Egyik sem borzasztóan erőforrás-igényes, ahogy a webfejlesztés maga sem. Egy átlagos, 10 évnél fiatalabb laptop vagy asztali gép gond nélkül ki fog szolgálni. Az operációs rendszer nem számít, Windows, MacOS és Linux alatt is dolgozhatsz.
Fizettem a kurzusért, mégsem kaptam e-mailt. Mit tegyek?
A fizetést követően néhány percen belül küldünk egy automatikus visszaigazolást a fizetésedről, valamint a tananyag elérhetőségéről is. Ha nem kaptál e-mailt a regisztráció során megadott e-mail-címre, akkor előfordulhatott, hogy a fizetés és regisztráció során véletlenül elgépelted az e-mail-címedet, ezért nem tudsz belépni a felületre, és nem férsz hozzá a már kifizetett anyagokhoz. Ebben az esetben kérlek, írj nekünk a [email protected] címre, és segítünk a bejelentkezésben, illetve a további lépésekben.