W celu świadczenia usług na najwyższym poziomie stosujemy pliki cookies. Korzystanie z naszej witryny oznacza, że będą one zamieszczane w Państwa urządzeniu. W każdym momencie można dokonać zmiany ustawień Państwa przeglądarki. Zobacz politykę cookies.
Powrót

Flex Froggy

FlexBox Froggy to gra umożliwiająca dzieciom zapoznanie się z tematyką programowania w kodzie CSS na aż 28 poziomach trudności. To bardzo proste! Dzięki przyjaznemu interfejsowi używanie aplikacji będzie przyjemnością!

Grafika ma zielony kolor. Jest podzielona na dwie części: zieloną, gdzie widać napis "FLEXBOX FROGGY" i okno z opisem gry:
"Witaj w grze Flexbox Froggy. Grze, w której pomagasz żabce Froggy i jej przyjaciołom pisząc kod CSS! Doprowadź żabki do odpowiednich listków przy pomocy justify-content, właściwości która wyrównuje elementy w poziomie i przyjmuje wartości: flex-start: Elementy wyrównują się do lewej strony kontenera.
flex-end: Elementy wyrównują się do prawej strony kontenera.
center: Elementy wyrównują się do środka kontenera.
space-between: Elementy wyświetlają się na całej szerokości kontenera z równymi odstępami.
space-around: Każdy z elementów wyświetla się z taką samą ilością przestrzeni wokół.
Na przykład: justify-content: flex-end; przesunie żabę do prawej strony."
Poniżej widnieje pole do napisania kodu. Po prawej strtonie na ciemnoniebieskim tle widać napis w kolorze zielonym: FLEXBOX FROGGY. Ponad napisem widać żabkę i postać Pacmana.

Kod CSS służy do nadawania wyglądu stronom internetowym. Aplikacja FlexBox Froggy przeznaczona jest dla nieco starszych dzieci, które znają już podstawy programowania. Jak to działa? Zadaniem gracza jest napisanie kodu CSS, aby pomóc żabce dostać się na listek. Sprawdź, jak to zrobić!

 

Wiek: od 10 lat

Poziom: średnio zaawansowany

Technologia: przeglądarka

Długość gry: > 60 minut

Język: polski

Autor: Codepip

Tematyka: programowanie w kodzie CSS

 

Dlaczego warto spróbować?

  • Prawdziwy kod – przyjazna nauka tworzenia kodu CSS
  • Przejrzystość – zapoznanie z wewnętrznym wyglądem stron internetowych
  • Szata graficzna – przyjazna, intuicyjna szata graficzna  

Materiały

Przejdź do gry "Flex Froggy"
{"register":{"columns":[]}}