U ovoj popularnoj igri pomažete žapcu Froggyju i njegovim prijateljima pronaći pravi lokvanj koristeći CSS Flexbox naredbe. Kroz razine ćete naučiti kako poravnavati elemente vodoravno i okomito, raspoređivati ih na stranici te stvarati fleksibilne i responzivne web dizajne.

👉 Igru možete isprobati na poveznici: https://flexboxfroggy.com/#hr

Nakon Flexboxa vrijeme je za CSS Grid. Vaš je zadatak zalijevati mrkve i korov postavljanjem elemenata u mrežu redaka i stupaca. Igra na zabavan način učenike uči organizirati sadržaj u retke i stupce i uvodi ih u jedan od najvažnijih alata za izradu složenijih rasporeda sadržaja na web stranicama.

👉 Igru isprobajte na poveznici: https://codepip.com/games/grid-garden/

Želite naučiti naprednije tehnike pozicioniranja elemenata? U igri Anchoreum istražujete napredne CSS mogućnosti za precizno pozicioniranje i dimenzioniranje (sidrenja) elemenata na stranici. Kroz izazove učenici razvijaju razumijevanje kako se sadržaj može prilagoditi različitim veličinama ekrana.

👉 Igru isprobajte na poveznici: https://codepip.com/games/anchoreum/

Tailwind Trainer je interaktivna igra koja vas uvodi u svijet Tailwind CSS-a, najpopularnijih CSS okvira za razvoj modernih web stranica. U Tailwindu se stilovi primjenjuju pomoću gotovih pomoćnih klasa koje se dodaju izravno u HTML elemente.

👉 Izazov: Možete li riješiti sve razine i dokazati da ste spremni za izradu vlastitog web sučelja koristeći Tailwind CSS?

https://codepip.com/games/tailwind-trainer/