Videók automatikus lejátszása
Automatikus ugrás a következő leckére
Előző lecke
Következő lecke
Haladó CSS tanfolyam
1. hét
Bevezetés és Grid
Haladó CSS - Bevezetés
1.1. Bevezetés: Üdv!
CSS Grid
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)
2. hét
Flexbox és animációk
CSS Flexbox
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
CSS-animációk
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
3. hét
Függvények és architektúra
Oszd meg a tanulás örömét barátaiddal 🤝
Ajánlói kedvezmény
CSS-függvények
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
CSS-architektúra
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
4. hét
Záróprojekt
Szeretnél oklevelet kapni?
Tanuld meg az alap Git-munkamenetet
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!
Záróprojekt
1.1. Záróprojekt: Alkoss önállóan!
Itt a vége
Eljött az ünneplés ideje! 🎉🍾
2.7. Flex container: align-content
Ez a lecke még nem elérhető
Ha már beiratkoztál,
be kell jelentkezned
.
Beiratkozom a tanfolyamra