A webdesign egyfajta gesamtkunst: a designer egyszerre ért a grafikus designhoz, a layoutinghoz, őseleme az UI/UX design, SEO-val fekszik-kel, és persze folyékonyan kódol néhány nyelven. A tanulás közben ez persze mindig okoz némi nehézséget, ugyanis ezek a területek mind más-más készségeket igényelnek, és hiába van meg a tehetség az egyikben, a spektrum másik végén nem marad más, mint a kemény munka, amivel megértheted, elsajátíthatod az illető tudást. A webdesign tanfolyamokon a leggyakrabban kódolás lesz a “matek”, ami a legtöbb diáknak fejfájást okoz. Ez nem azt jelenti, hogy megtanulhatatlan vagy nehéz lenne, csak azt, hogy míg a legtöbb tanuló a művészeti oldal irányából érkezik, a kód természetesen egészen másfajta nézőpontot és gondolkodásmódot igényel, ennek a kifejlesztése pedig némi erőbefektetést igényel.

Ehhez mindig jól jön egy kis segítség, például egy olyan módszer, ami segít begyakoroltatni a különböző címkék vagy tulajdonságok használatát – és az sem baj, ha mindezt kicsit szórakoztatóbb formában teszi. Lássuk, miből élünk!

CSS Diner

Bemelegítőnek nagyon jópofa kis játék, a css alapjait vehetjük végig vele, a szelektorokra összpontosítva. 

Grid Graden

Ezzel a játékkal a CSS gridekben garázdálkodhatunk egy kellemesen relaxáló, tanyasi közegben. A kapáláshoz képest CSS sorokat beírni mégis kellemesebbnek tűnik!

Flexbox Froggy

Megérkeztünk a Flexboxhoz, a CSS legújabb líblingjéhez – hiszen ez a tulajdonság a reszponzív webdesign kulcsa, éppen ezért igen fontos, hogy megértsük a logikáját. Ebben a vidám játékban békákat kell vizililiom-levelekre igazítani, természetesen egyre komplexebb felállásokban.

Flexbox Defense

Van, hogy az ember kicsit kevesebb harmóniára és több robbanásra vágyik – ilyenkor jól jöhet a Flexbox gyakorlására ez a Tower Defense jellegű kis játék, amiben a stratégiailag elhelyezett ágyúinkkal kell a sorban érkező ellenfeleket kiiktatni. 

A fenti játékok közül többet is a Codepip nevű oldalon találhatunk – az ő kínálatukban még több, hasonlóan hasznos játékot is találhatsz, de azokat már az amúgy nem túl drága havi tagdíjért cserébe érheted csak el. 

Bónusz: Untrusted

Ez a játék kilóg a sorból, ugyanis nem a CSS, hanem a JavaScript kerül a célkeresztjébe, de már csak az ötletessége miatt is említést érdemel. A 80-as évek Rogue típusú, ascii grafikás játékait idéző műalkotásban nem parancsok beírásával, hanem a pályát alkotó JS kód módosításával kell megoldani a feladványokat.