Advertisement
  1. Web Design
  2. CSS

14 alapvető CSS tanfolyam

Scroll to top
Read Time: 5 min

() translation by (you can also view the original English article)

Screenshot from CSS animation courseScreenshot from CSS animation courseScreenshot from CSS animation course

Ha sikeres web dizájner szeretnél lenni, akkor stabil CSS ismeretekre van szükséged. Szerencsére van pár forrásunk, ami segíthet neked ebben, akár a CSS alapjait szeretnéd megtanulni, akár a haladóbb területeivel szeretnél megismerkedni.

Itt van 14 átfogó tanfolyam, ami segíthet fejleszteni a CSS ismereteidet, a CSS pozicionálás és a tipográfia alapjaitól egészen a pszeudo-elemek használatáig és a Sass mesteri fokra fejlesztéséig.

1. Kezdd itt: Tanuld meg a CSS tipográfiát

Ha kezdő web dizájner vagy és készen állsz megtanulni a CSS-t, akkor ezzel kezdd!

Ha van olyan fajtája a stilizálásnak, ami vitathatóan fontosabb, mint bármi más a web dizájnban, az a tipográfia. Ideális esetben az oldalaidat egy szilárd tipográfiával fogod elkezdeni, és a dizájn többi része aköré fog épülni. Épp ezért fontos, hogy először megértsd a tipográfia fontosságát a tervezési folyamatban, és ezen a tanfolyamon Kezz Bracey, az Envato Tuts+ oktatója segít felvenni a ritmust.

2. Kezdd itt: Ismerd meg a CSS Layout-ot

Most, hogy már megtanultad a tipográfia alapjait az előző "Kezdd itt" tanfolyamon, készen állsz továbblépni a webdizájn következő alapelemére: a layoutra.

Ezen a tanfolyamon mindent megtanulhatsz, amit tudnod kell a webdizájn leggyakoribb layout-típusainak létrehozásához.

3. Kezdd itt: Ismerkedj meg a CSS színekkel és hátterekkel

A "Kezdd itt" sorozatunk ezen darabjával némi életet lehelhetsz az oldalba a CSS színek és hátterek használatával.

Ezen a tanfolyamon megtanulhatsz mindent azokról a vizuális technikákról, amik egyedivé teszik az oldalakat, és beleviszik a "dizájnt" a webdizájnba.

4. Kivágás és maszkolás CSS-ben

A képek kivágásának és maszkolásának fogalma ismerős lehet olyan grafikus alkalmazásokból, mint például a Photoshop. Ugyanakkor ezen a Kávészünet tanfolyamon Adi Purdila meg fogja tanítani, hogy CSS-ben hogyan lehet használni a kivágást és a maszkolást.

5. A CSS pozicionálás teljes útmutatója

A CSS pozicionálás egy alapvető készség a webdizájnban; megerősíti a layoutokat és ily módon megalapoz mindent azokon belül. Épp ezért meglehetősen bonyolultnak tűnhet, amikor először hozzáfogsz.

Mire befejezed ezt a kurzust, stabil tudásod lesz az layoutjaid kezeléséhez szükséges alapvető elvekről. Kezz Bracey meg fogja mutatni neked mind a négy, CSS-ben használt pozicionálási típust, valamint hogy hogyan oldj meg néhány furcsaságot, ami használatuk közben előfordulhat.

6. 3 CSS grid projekt webdizájnereknek

A CSS Grid Layout egy W3C munkavázlat, ami egy erőteljes hálórendszert határoz meg, ami általánosságban megkönnyíti a weboldalaid szerkezeti kialakítását CSS használatával.

Ezen a tanfolyamon három projekten fogsz dolgozni, amivel megértheted, mikre lehetsz képes a "Grid" segítségével. Az első kezdőszintű és bemutatja számodra a Grid fogalmakat. A második már magasabb szintű, olyan dolgokat vizsgál, mint az igazítás és a beágyazás. Az utolsó projekt még fejlettebb, Flexbox használatának kombinálása Griddel. Craig Cambell segítségével végigjárhatod ezt a három projektet, és kezdő Gridezőből magabiztos Grid felhasználóvá válhatsz.

7. Alapvető CSS könyvtárak webdizájnereknek

Ebben a kurzusban Adi Purdila meg fogja tanítani neked, hogyan használd a webdizájnerek tíz alapvető CSS könyvtárát. Tanulni fogsz a resetekről, animációkról, átmenetekről és a tipográfia-alapú könyvtárakról. A Bowert fogod használni a projektjeid menedzselésére, biztosítva ezzel azt, hogy minden naprakész és könnyen karbantartható maradjon.

8. A jövő CSS-e

A CSS folyamatosan fejlődik. Ebben a kurzusban Craig Campbell végigvezet néhány életbevágóan fontos CSS tulajdonságon, hogy segítsen naprakész maradni és előnyre szert tenni a pályán.

Ezek közül néhány valószínűleg mainstreammé válhat a közeljövőben, míg mások a feledés homályába veszhetnek. Bárhogy is, az tudni, hogy melyik CSS szelektorok, layout modulok és szűrők lesznek jelen a jövőben, erősebb front-end fejlesztővé tehet téged.

9. Gridek és layout trükkök "postcss-ant" segítségével

Ebben a kurzusban megtanulhatod az egyik legerősebb, de letisztázott és sallangoktól mentes grid rendszert, ami jelenleg elérhető. a postcss-ant-et. Ezt Cory Simmons hozta létre, aki az olyan népszerű grid rendszereiről is híres, mint a Jeet és a Lost.

Az elképesztő PostCSS rendszer csúcsa, a postcss-ant megadja neked a képességet, hogy zökkenőmentesen és hatékonyan kezelhesd a layoutokat a legegyszerűbbtől a legösszetettebbig, használj akár egy vanilla CSS-t vagy akár a kedvenc preprocesszorodat. Kezz Bracey teljesen felturbóz téged ezzel a kurzussal.

10. A CSS pszeudo-elemeinek felfedezése

A felszínen a pszeudo-elemek nem tűnnek többnek a CSS hasznos részhalmazánál. De ebben a rövid kurzusban Craig Campbell segítségével fel tapasztalni fogod, hogy a pszeudo-elemek ismerete valóban nagy segítség lehet a dizájnod következő szintre emelésében.

11. Hasznos webes animációk

Az animációkkal telezsúfolt weboldalaknak már leáldozott, de még mindig szükség van az oldalara néhány finom, szemet gyönyörködtető mozgásra, ami segít a felhasználóknak a felület értelmezésében. Ezen a kurzuson Cragi Campbell gyakorlati úton mutatja be a gombok animációjának, az ártábláknak és más web elemeknek a létrehozását, CSS és jQuery használatával.

12. Legyél CSS szuperhős Stylus-szal

A Stylus egyike a három vezető CSS előfeldolgozónak, ami a CSS használatát könnyebbé és sokkal erőteljesebbé teszi, mint valaha, osztozva ezen a Sassal és a LESS-szel. A Légy CSS szuperhős Stylus-szal kurzuson meg fogod tanulni, hogyan kódolj gyorsabban, mint egy kilőtt pisztolygolyó, hogyan készíts a gőzmozdonynál is erőteljesebb layout funkcionalitást, és hogy hogyan frissítheted a teljes színsémát egy csomagban. Csatlakozz Kezz Braceyhez és kezdd el a szuperhős képzést!

13. 6 Flexbox projekt webdizájnereknek

A CSS Flexbox modell kezd széles körben elterjedni, és most már a fontosabb böngészők is támogatják. Ebben a kurzusban Craig Campbell a CSS: Flexbox Essentials kurzusára építkezik, felvázolva hat CSS gyakorlati projektet mindennapi használatra.

14. Tanuld meg a Sass-t 14 nap alatt

Ebben a kurzusban Adi Purdilábal 14 nap alatt fogod megtanulni a Sass alapjait. Minden nap valami újjal fogsz megismerkedni, és egy kis gyakorlási lehetőséget is kap, ami segít megszilárdítani az ismereteidet.

Ez a kurzus kezdőknek szól, így nincs szükséged semmilyen előzetes Sass tapasztalatra, viszont CSS ismeretekre igen, mivel a Sass annak egy bővítménye.

Kezdd el tanulni az ingyenes próbaverzióval

Elkezdheted a CSS kurzusok mindegyikét és még sok mást a havi előfizetésünk ingyenes 10 napos próbaverziójával. Fogj hozzá még ma, és tanuld meg az alapvető CSS készségeket, amik jobb webdizájnerré tesznek téged.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.