SASS/SCSS alapok (T360)
Van HTML haladó CSS és alapszíntű programozási ismereted? A SASS/SCSS alapok tananyagban megkapod azt a biztos tudást, amit a következő fejlesztésnél már élesben is használhatsz. Cél, az SASS/SCSS preprocesszor használat alapjainak elsajátítása.
- Bevezető
- Tematika
- Bevezető
- Az elkészítendő hamburger menü bemutatása
- A html template létrehozása
- A nav elem formázása
- A SASS telepítése, használata
- A navon belüli div formázása
- A lista formázása
- A listaelemek és a linkek formázása
- A checkbox és a label formázása, a responsive működés megvalósítása
- Az egymásba ágyazás alapjai - nesting
- A hamburger menu átalakítása
- A CSS BEM elnevezési konvenció
- BEM és nesting
- Változók, változók típusai
- A változók hatóköre
- Shadowing
- Operators
- Globális változók értékének módosítása
- Egyenlőségvizsgálat
- Relációs operátorok
- Matematikai operátorok
- Sztring operátorok
- Sztring idézőjellel, aposztóffal, és mindezek nélkül
- Logikai műveletek
- Változók használata a hamburger menünél
- Az @import rule
- A @use rule
- A @use rule saját namespace-szel
- A @forward rule
- Bevezető
- Az elkészítendő gombok bemutatása
- Egy gomb elkészítése
- Több gomb készítése nestinggel I.
- Több gomb készítése nestinggel II.
- Több gomb készítése nestinggel III.
- Mixinek
- Mixinek használata I.
- Mixinek használata II.
- Az @extend rule
- Helyőrzők használata
- Mixinek használata III.
- Beépített modulok, a color modul
- Bevezető
- A map SASS modul, a map adatszerkezet
- Map funkciók
- Színpaletta projekt ismertetése
- Map-ben értékek használata css tulajdonságoknál
- A @for vezérlési szerkezet
- Az @each vezérlési szerkezet
- Az @if vezérlési szerkezet
- Class-ek tömeges generálása az @each segítségével
- Mixinek használata ciklusokkal I.
- Mixinek használata ciklusokkal II.
- Refactoring, egy SASS projekt struktúrája
- Listák használata
- Ciklusok egymásba ágyazása, világosabb színek generálása
- Ciklusok egymásba ágyazása, sötétebb színek generálása
- A map.merge funkció használata
- Map-ek egymásba ágyazása I.
- Map-ek egymásba ágyazása II.
- Map-ek egymásba ágyazása III.
- Függvények használata SASS-ben
- Arbitrary argument használata függvényeknél
- Saját függvények írása I. - elem törlése listából
- Saját függvények írása II. - művelet stringekkel
- Saját függvények írása III. - érték lekérése összetett adatszerkezetekből
- Függvények használata a projekten belül
- Újabb színtéma hozzáadása a projekthez
- Színtémák használata, váltás a színtémák között
- Alapértelmezett színtéma beállítása
- Projekt kódjának letisztázása
- Bevezető
- A projekt bemutatása
- A projekt mappastruktúrája, a konfigurációs map elkészítése
- Media query-k létrehozása mixinekkel
- Egyéb media query-k létrehozása
- Konténer elem stílusának elkészítése
- Az oszlopok alapértelmezett stílusának elkészítése
- Az oszlopok szélességének beállítására szolgáló mixin létrehozása
- Az oszlopok szélesség értékének visszaadása függvénnyel
- String szám konverzió
- Csoportos class generáltatás
- A projekt tesztelése
- Konfiguráció módosítás, továbbfejlesztései lehetőségek
- Kvíz
Az oktatóról
2008 óta foglalkozom webfejlesztéssel és oktatással egyaránt. 2017 óta tanítok a Training360-nál. Otthonosan mozgok a HTML-CSS-JavaScript hármas és a hozzájuk kapcsolódó technológiák valamint a Python világában. Engem ért a megtiszteltetés, hogy négy alkalommal is összeállíthattam egy-egy feladatsort az Országos IT megmérettetésre. Vallom, hogy ugyanolyan káros a „csak gyakorlati”, mint a „csak elméleti” oktatás. Imádom a naív dolgokat, és nem követem a divatot a programozás terén (sem). Szabadidőmben szívesen írok, blogolok, olvasok, gitározom, túrázom. Már ha van szabadidőm.
